/* static/themes/datatree.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');


:root {
  color-scheme: light;
  
  /* --- Typography (style.cssより移植) --- */
  --font-family-sans: "Source Han Sans JP", "Noto Sans JP", "ヒラギノ角ゴシック", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-numeric: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴシック", sans-serif;

  /* =============================================
     【第1階層】パレット定義 (Values Update)
     ※ 変数名は維持し、値を画像/style.cssに合わせて変更
     ============================================= */

  /* --- Base Colors (White/Black) --- */
  --palette-white: #FFFFFF;
  --palette-black: #000000;

  /* --- Gray Scale (Light Mode Base) --- */
  /* Page-BG: #F3F6F8 */
  --palette-gray-50:  #F3F6F8;   /* ページのベース背景 */
  /* Container White: #FFFFFF99 (Alpha) -> RGBフォールバック用に定義 */
  --palette-gray-100: #F7F7F7;   /* コンテナ内のエリア背景 (Black-100) */
  --palette-gray-200: #E2ECEC;   /* テーブルヘッダなど (table-bg) */
  --palette-gray-300: #D9D9D9;   /* ボーダー (Black-200) */
  --palette-gray-400: #B0B0B0;   /* インジケータ (Black-501) */
  --palette-gray-500: #8A8A8A;   /* 強調ボーダー/サブテキスト (Black-500) */
  --palette-gray-600: #606060;   /* サブテキスト (Black-700) */
  --palette-gray-700: #555555;
  --palette-gray-800: #3F3F3F;   /* メインテキスト (Black-900) */
  --palette-gray-900: #222222;
  --palette-gray-950: #3F3F3F;   /* テキスト最暗部 */

  /* --- Primary Scale (Main Brand: Teal/Green) --- */
  /* From Image: Primary_500 = #10A6A0 */
  --palette-primary-300: #88E7C6; /* Primary_300 (Light) */
  --palette-primary-500: #10A6A0; /* Primary_500 (Main) */
  --palette-primary-700: #00685B; /* Primary_700 (Dark) */

  /* --- Secondary Scale (Sub Brand: Blue/Teal) --- */
  /* From Image: Second_500 = #248EAE */
  --palette-secondary-300: #A2F8FC; /* Second_300 */
  --palette-secondary-500: #248EAE; /* Second_500 */
  --palette-secondary-700: #1C6B85; /* Second_700 */

  /* --- Tertiary Scale (Blue) --- */
  /* From Image: Third_500 = #3375A1 */
  --palette-third-300: #C0E1FF;   /* Third_300 */
  --palette-third-500: #3375A1;   /* Third_500 */
  --palette-third-700: #144D7D;   /* Third_700 */

  /* --- Quaternary Scale (Deep Blue/Purple) --- */
  /* From Image: Fourth_500 = #3E5A9B */
  --palette-fourth-300: #B0BFF4;  /* Fourth_300 */
  --palette-fourth-500: #3E5A9B;  /* Fourth_500 */
  --palette-fourth-700: #243762;  /* Fourth_700 */

  /* --- Status Colors --- */
  --palette-error-500: #FF5C00;   /* Error-900 (Orange Red) */
  --palette-error-700: #C44600;
  --palette-warning-500: #FAB400; /* Error-700 (Yellow) */
  --palette-success-500: #10A6A0; /* Achieved Color */

  /* 汎用 (Utility Scale) - リンク色など */
  --palette-blue-200: #E3F2FD;
  --palette-blue-700: #1976D2;
  --palette-blue-800: #1565C0;   /* (旧 --Graph-Blue) */
  --palette-blue-900: #0D47A1;
  --palette-blue-950: #0A3678;   /* (旧 --grad-bl) */
  --palette-blue-alt-700: #0277BD; /* (旧 --Men) */

  /* =============================================
     【第2階層】Chart Palette (Gradient Rule)
     ※ 画像の「グラフ・グラデーションルール (Light Mode)」を適用
     ============================================= */
  /* 1. Dark Teal */
  --palette-chart-01: #00685B; 
  /* 2. Teal (Primary) */
  --palette-chart-02: #00A18E; 
  /* 3. Aqua */
  --palette-chart-03: #4CDFC6; 
  /* 4. Pale Green */
  --palette-chart-04: #B1F1DE; 
  /* 5. White/Green */
  --palette-chart-05: #E1F2E7; 
  /* 6. Navy */
  --palette-chart-06: #002D68; 
  /* 7. Deep Blue/Purple */
  --palette-chart-07: #3E5A9B; 
  /* 8. Soft Blue */
  --palette-chart-08: #788ACA; /* 画像読み取り補正: #A5A9C3より青みを調整 */
  /* 9. Pale Blue */
  --palette-chart-09: #B1BFE6; 
  /* 10. White/Blue */
  --palette-chart-10: #E6EDF5; 


  /* =============================================
     【第3階層】役割定義 (Semantic Mapping)
     ※ uiconfigが参照する変数を、上記の新色に配線
     ============================================= */
  
  /* 背景色 */
  --page-background-color: var(--palette-gray-50); /* #F3F6F8 */
  --background-container: rgba(255, 255, 255, 0.60); /* 透明度付き白 */
  --background-container-sub: var(--palette-gray-100); /* #F7F7F7 */
  --header-background: rgba(255, 255, 255, 0.1);
  --table-background: var(--palette-gray-200);

  /* 文字色 */
  --text-main: var(--palette-gray-800); /* #3F3F3F */
  --text-sub: var(--palette-gray-600);  /* #606060 */
  --text-muted: var(--palette-gray-500);/* #8A8A8A */
  --text-link: var(--palette-blue-700); /* #58A7D9 */
  --text-on-primary: var(--palette-white);

  /* ボーダー */
  --border-primary: var(--palette-gray-500);
  --border-muted: var(--palette-gray-300);

  /* ブランド */
  --color-brand: var(--palette-primary-500); /* #10A6A0 */
  --color-error: var(--palette-error-500);
  --color-warning: var(--palette-warning-500);

  /* その他エフェクト */
  --shadow-field: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  --background-blur-pattern: radial-gradient(50% 50% at 50% 50%, #0AC1BA 0%, #B0D2FF 35%);
  --modal-background-color: rgba(237, 237, 237, .15);
  
  /* ★★★ DC (円グラフ) カラー ★★★ */
  /* (参照先を Tonal Scale (primary等) に修正) */
  --DC-normal-1: var(--palette-primary-500);
  --DC-normal-2: var(--palette-secondary-500);
  --DC-normal-3: var(--palette-third-500);
  --DC-normal-4: var(--palette-fourth-500);

  /* (ご指示通り、超過色を 700 番台に変更) */
  --DC-over-1: var(--palette-primary-700); 
  --DC-over-2: var(--palette-secondary-700);
  --DC-over-3: var(--palette-third-700);
  --DC-over-4: var(--palette-fourth-700);
  
  /* (ベース色 - 通常色と同じ) */
  --DC-base-1: var(--palette-primary-500);
  --DC-base-2: var(--palette-secondary-500);
  --DC-base-3: var(--palette-third-500);
  --DC-base-4: var(--palette-fourth-500);

  /* 背景トラックの色 */
  --DC-track: var(--palette-gray-200);

  /* Chart Variables (uiconfig参照用) */
  --chart-01: var(--palette-chart-01);
  --chart-02: var(--palette-chart-02);
  --chart-03: var(--palette-chart-03);
  --chart-04: var(--palette-chart-04);
  --chart-05: var(--palette-chart-05);
  --chart-06: var(--palette-chart-06);
  --chart-07: var(--palette-chart-07);
  --chart-08: var(--palette-chart-08);
  --chart-09: var(--palette-chart-09);
  --chart-10: var(--palette-chart-10);

  /* Grid Layout (変更なし) */
  --grid-row-height: 25px;
}

/* メディアクエリ (既存) */
@media (min-width: 640px) {
  :root { --grid-row-height: 36px; }
}
@media (min-width: 1024px) {
  :root { --grid-row-height: 40px; }
}
@media (min-width: 1920px) {
  :root { --grid-row-height: 44px; }
}

/* スクロールバー (既存) */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}


@media print {
  /* * ★ ここが核心: デフォルト用紙サイズをA2に指定
   * Chromeの「PDFとして保存」は、この指定をデフォルト値として認識します。
   */
  @page {
    size: A2 portrait; /* A2 縦 */
    margin: 10mm;      /* 余白 */
  }

  /* * A2 (幅約1580px) が確保されるため、
   * width強制やtransform縮小は一切不要になります。
   * 自然なDesktopレイアウトが適用されます。
   */
  /* 1. アプリの土台を「真っ白」にする (これで最後のページの謎の色が消えます) */
  html, body, #svelte, main {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important; /* 文字色は黒を基本に */
  }

  /* 2. 背景色を持つユーティリティクラスを「白」で上書き */
  .bg-white, 
  .bg-gray-50, .bg-gray-100, .bg-gray-200, 
  .bg-slate-50, .bg-slate-100, .bg-slate-200,
  .bg-zinc-50, .bg-zinc-100,
  .bg-background-page, .bg-background-container {
    background-color: #ffffff !important;
    /* 枠線が必要な場合はここで指定するか、uiconfigで制御します */
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 邪魔なUIを消す */
  .no-print {
    display: none !important;
  }
  
  /* 印刷モード用のUI制御 */
  .printing-mode aside,
  .printing-mode header,
  .printing-mode nav,
  .printing-mode .print\:hidden {
    display: none !important;
  }
  
  /* スクロール寸断防止のみ維持 */
  .overflow-hidden, .overflow-auto, .overflow-y-auto, .overflow-x-auto, .scroll-area {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

@layer utilities {
  /* 強制改ページ (最強版) */
  .break-before-page {
    break-before: page !important;
    page-break-before: always !important;
    
    /* 余計な干渉を防ぐ設定 */
    break-inside: auto !important;
    page-break-inside: auto !important;
    
    /* 印刷時はブロック要素として振る舞わせると成功率が上がる */
    display: block !important; 
    width: 100% !important;
  }

  /* 切断禁止 */
  .break-inside-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  
  /* 切断許可 */
  .break-inside-auto {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .break-after-avoid {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
}

svg text.tickLabel {
    fill: #3F3F3F !important; /* 確実にこの色で塗りつぶす */
    stroke: none !important;    /* 縁取りを消去 */
    stroke-width: 0 !important; /* 線の幅を0に固定 */
    opacity: 1 !important;      /* 透明化を禁止 */
    font-weight: 500 !important; /* 視認性のための太さ確保 */
}
.fill-text-sub {
    fill: #3F3F3F !important; 
}

@layer components {
  /* 背景ブラーエフェクト */
  .bg_layer {
    z-index: -100;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none;
  }
  .bg_circle {
    position: absolute; border-radius: 50%;
    background: var(--background-blur-pattern);
    filter: blur(275px);
  }
  .circle1 { top: 10%; right: 0%; width: 25%; aspect-ratio: 1; }
  .circle2 { bottom: -5%; left: -10%; width: 35%; aspect-ratio: 1; }

  /* アラート等 */
  .attention {
    display: flex; gap: 16px; padding: 20px;
    border: 2px solid; border-radius: 8px;
    background-color: var(--palette-white);
    align-items: center; color: var(--palette-gray-800);
  }
  .attention.orange { border-color: var(--palette-error-500); }
  .attention.orange h3, .attention.orange svg { color: var(--palette-error-500); fill: var(--palette-error-500); }
}