/*
 * =====================================================================
 *  AIco 共通テーマ  —  app/css/aico-theme.css
 * =====================================================================
 *  ProcessViewer AIco のデザインルール（2026-10-25 承認）。
 *  色・文字・部品はここだけで定義し、各画面には色の値を直書きしない。
 *
 *  ・白い文字を載せる面は --aico-primary。--aico-brand の上に小さい白文字は載せない
 *  ・ピンク(--aico-notice)は「新着・未読」専用。状態の色・強調には使わない
 *  ・状態は色だけで表さず、必ず文字（順調／注意／遅れ…）を添える
 *  ・ガントの機種色・生産月の色は対象外（schedule.html / gantt.js が持つ）
 * =====================================================================
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* ブランド・主色 */
  --aico-brand:        #22A4DA;   /* ロゴ・ヘッダー上端の線・大きな面のみ */
  --aico-primary:      #1477A3;   /* ボタン・リンク・選択中のタブ・アイコン地 */
  --aico-primary-dark: #0F5F84;   /* ホバー、淡い地の上の濃い文字 */
  --aico-tint:         #E0F2FA;   /* 表の見出し行・選択行・ロールのラベル */
  /* 地・面・線 */
  --aico-bg:           #F5FAFC;
  --aico-bg-menu:      #EEF4F7;
  --aico-surface:      #FFFFFF;
  --aico-border:       #D5E6EE;
  --aico-row-bg:       #FFFFFF;   /* 一覧表のデータ行の背景（白） */
  --aico-row-hover:    #F1F8FC;   /* 行にマウスを乗せたとき（白の上で分かる程度に薄く） */
  --aico-row-selected: #E6F3FA;   /* 選択した行 */
  --aico-row-line:     #DCE8EE;   /* 行の区切り線 */
  --aico-tile-border:  #C9DEE8;
  /* 文字 */
  --aico-text:         #2B3A44;
  --aico-text-sub:     #5A6A74;
  --aico-text-group:   #46545D;
  --aico-skico:        #4F5D66;   /* skico（作業習得管理）の枠線・文字 */
  /* お知らせ（新着・未読）専用 */
  --aico-notice:       #FCA2C9;
  --aico-notice-ink:   #5E0F33;
  /* 状態の色：丸印／地／文字 */
  --aico-ok-dot:   #2E9E6B;  --aico-ok-bg:   #E3F3EA;  --aico-ok-ink:   #1C6B45;   /* 順調 */
  --aico-warn-dot: #E8891F;  --aico-warn-bg: #FFF0DD;  --aico-warn-ink: #9A4A06;   /* 注意 */
  --aico-bad-dot:  #D8473B;  --aico-bad-bg:  #FCE3E1;  --aico-bad-ink:  #A12A22;   /* 遅れ・異常 */
  --aico-off-dot:  #8A979F;  --aico-off-bg:  #EEF1F3;  --aico-off-ink:  #46545D;   /* 対象外 */
  --aico-warn-light: #F4C77A;  /* 注意の淡い橙（進み具合など、段階を分けたいとき） */
  --aico-ok-light: #7CC4A0;   /* 順調の淡い緑（「不良ゼロ」と「わずかにある」を分けたいときの2段目） */
  /* 区別用の色（2026-10-26）：「種類」を見分けるための色。状態（順調・注意・遅れ・対象外）の意味は持たない。
     例：入出庫の種類、master-data.html のタブ。状態の色とは混ぜない。淡い地＋濃い文字で使う */
  --aico-kind-blue:   #1477A3;  --aico-kind-blue-bg:   #E0F2FA;
  --aico-kind-indigo: #3B4A8F;  --aico-kind-indigo-bg: #E6E9F5;
  --aico-kind-teal:   #0E7470;  --aico-kind-teal-bg:   #DDF1EF;
  /* 形 */
  --aico-radius-btn:  10px;
  --aico-radius-card: 16px;
  --aico-radius-tile: 18px;
  --aico-font:     'Noto Sans JP', system-ui, sans-serif;
  --aico-font-num: 'Manrope', 'Noto Sans JP', system-ui, sans-serif;
}

/* ── 文字 ────────────────────────────────────────────────────────── */
.aico-title   { font-size: 22px; font-weight: 700; color: var(--aico-text); }
.aico-h       { font-size: 17px; font-weight: 700; color: var(--aico-text); }
.aico-body    { font-size: 15px; color: var(--aico-text); }
.aico-sub     { font-size: 13px; color: var(--aico-text-sub); }
.aico-num     { font-family: var(--aico-font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.aico-num-lg  { font-family: var(--aico-font-num); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; }

/* ── 共通ヘッダー（js/aico-header.js が差し込む） ────────────────── */
.aico-header {
  background: var(--aico-surface);
  border-top: 4px solid var(--aico-brand);
  border-bottom: 1px solid var(--aico-border);
  min-height: 64px;
  padding: 6px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
  font-family: var(--aico-font);
  color: var(--aico-text);
}
.aico-header-left  { display: flex; align-items: center; gap: 14px; min-width: 0; }
.aico-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aico-header-sep   { width: 1px; height: 36px; background: var(--aico-border); flex-shrink: 0; }
.aico-header-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aico-header-sub { font-size: 12px; color: var(--aico-text-sub); line-height: 1.3; overflow-wrap: anywhere; }
.aico-header-title { font-size: 22px; font-weight: 700; color: var(--aico-text); line-height: 1.2; overflow-wrap: anywhere; }

/* ロゴ：上に PROCESS VIEWER、下に AIco バッジ。押すとメインメニューへ */
.aico-logo {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; min-width: 44px; text-decoration: none; flex-shrink: 0;
}
.aico-logo-cap  { font-family: var(--aico-font-num); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--aico-text-sub); line-height: 1; }
.aico-logo-badge {
  position: relative; display: inline-block; align-self: flex-start;
  background: var(--aico-brand); color: #fff;
  font-family: var(--aico-font-num); font-size: 17px; font-weight: 800;
  line-height: 1; padding: 4px 10px; border-radius: 8px;
}
.aico-logo-dot {
  position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--aico-notice); border: 1.5px solid var(--aico-surface);
}
.aico-logo:focus-visible { outline: 2px solid var(--aico-primary); outline-offset: 2px; border-radius: 8px; }

/* ロールのラベルとユーザー表示 */
.aico-role, .aico-header .header-user {
  background: var(--aico-tint); color: var(--aico-primary-dark);
  font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px;
  opacity: 1; min-width: 0; text-align: center;
}
.aico-header .header-user:empty { display: none; }

/* 画面ごとの差し込み（ロックボタン・リンク・接続先バッジなど）。aico-header.js が右側に置く */
.aico-header-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.aico-header-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 14px;
  border-radius: 999px; border: 1.5px solid var(--aico-border); background: var(--aico-surface);
  color: var(--aico-primary-dark); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.aico-header-link:hover { background: var(--aico-tint); }

@media (max-width: 640px) {
  .aico-header { padding: 6px 12px; }
  .aico-header-title { font-size: 18px; }
  .aico-header-sep { height: 28px; }
  .aico-header-extra { gap: 6px; }
  .aico-header-link { font-size: 12px; padding: 5px 10px; }
}

/* ── ボタン（高さ 44px 以上・角丸 10px） ─────────────────────────── */
.aico-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: var(--aico-radius-btn);
  font-family: var(--aico-font); font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  border: 2px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.aico-btn-primary   { background: var(--aico-primary); color: #fff; }
.aico-btn-primary:hover { background: var(--aico-primary-dark); }
.aico-btn-secondary { background: var(--aico-surface); color: var(--aico-primary); border-color: var(--aico-primary); }
.aico-btn-secondary:hover { background: var(--aico-tint); }
.aico-btn-text      { background: transparent; color: var(--aico-primary); }
.aico-btn-text:hover { background: var(--aico-tint); }
.aico-btn:disabled, .aico-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.aico-btn:focus-visible { outline: 2px solid var(--aico-primary); outline-offset: 2px; }

/* ── カード ──────────────────────────────────────────────────────── */
.aico-card {
  background: var(--aico-surface); border: 1px solid var(--aico-border);
  border-radius: var(--aico-radius-card); padding: 20px;
}

/* ── 表（横に長い表は .aico-table-scroll に入れる） ───────────────── */
.aico-table-scroll {
  background: var(--aico-surface); border: 1px solid var(--aico-border);
  border-radius: var(--aico-radius-card); overflow-x: auto;
}
.aico-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--aico-text); }
.aico-table thead th {
  background: var(--aico-tint); color: var(--aico-primary-dark);
  font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap;
  padding: 9px 14px; border-bottom: 1px solid var(--aico-border);
}
.aico-table tbody td { padding: 8px 14px; border-bottom: 1px solid #E8F0F4; vertical-align: middle; }
.aico-table tbody tr:last-child td { border-bottom: none; }
.aico-table tbody tr:hover { background: var(--aico-bg); }
.aico-table tbody tr.selected { background: var(--aico-tint); }

/* ── タブ（選択中は主色の文字と下線 3px） ────────────────────────── */
.aico-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--aico-border); overflow-x: auto; }
.aico-tab {
  min-height: 44px; padding: 0 18px; background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-family: var(--aico-font); font-size: 15px; font-weight: 700;
  color: var(--aico-text-sub); cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center;
}
.aico-tab:hover { color: var(--aico-primary-dark); }
.aico-tab.active, .aico-tab[aria-selected="true"], .aico-tab[aria-current="page"] {
  color: var(--aico-primary); border-bottom-color: var(--aico-primary);
}

/* ── 状態チップ（薄い地＋濃い文字＋丸印。必ず文字を添える） ─────── */
.aico-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.aico-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.aico-chip-ok   { background: var(--aico-ok-bg);   color: var(--aico-ok-ink); }
.aico-chip-ok::before   { background: var(--aico-ok-dot); }
.aico-chip-warn { background: var(--aico-warn-bg); color: var(--aico-warn-ink); }
.aico-chip-warn::before { background: var(--aico-warn-dot); }
.aico-chip-bad  { background: var(--aico-bad-bg);  color: var(--aico-bad-ink); }
.aico-chip-bad::before  { background: var(--aico-bad-dot); }
.aico-chip-off  { background: var(--aico-off-bg);  color: var(--aico-off-ink); }
.aico-chip-off::before  { background: var(--aico-off-dot); }

/* ── お知らせ（新着・未読）専用 ──────────────────────────────────── */
.aico-notice-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--aico-notice); color: var(--aico-notice-ink);
  font-family: var(--aico-font-num); font-size: 12px; font-weight: 800;
}
.aico-notice-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--aico-notice); }

/* ── 旧画面との併用（style.css を読む画面で、後から読み込んで上書きする） ── */
.app-header.aico-header {
  background: var(--aico-surface); color: var(--aico-text);
  box-shadow: none; padding: 6px 24px; height: auto;
}
/* PC幅は従来の 68px に揃える（各画面のツールバー・タブが 68px 前提で sticky に貼り付くため） */
@media (min-width: 641px) {
  .app-header.aico-header { height: 68px; min-height: 68px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
}
body { font-family: var(--aico-font); background: var(--aico-bg); color: var(--aico-text); }
/* 画面ヘルプの「?」（js/help.js が注入）。白いヘッダー上で見えるようにする */
.aico-header #help-open-btn {
  margin: 0; width: 44px; height: 44px; font-size: 17px;
  background: var(--aico-tint); color: var(--aico-primary-dark);
}
.aico-header #help-open-btn:hover { background: var(--aico-border); }
.aico-header #help-open-btn:focus-visible { outline: 2px solid var(--aico-primary); outline-offset: 2px; }

.aico-role:empty { display: none; }

/* ── 一覧表の行の色：データ行は白、見出しは --aico-tint、hover・選択は薄い色（共通） ──
   状態を表す色（赤・黄・バッジなど）は各画面のまま。ここで上書きするのは「完了・グレー」などの地色だけ。 */
tbody tr.row-completed td { background: var(--aico-row-bg); }
tbody tr.row-completed:hover td { background: var(--aico-row-hover); }
tbody tr.selected td, tbody tr.sel td { background: var(--aico-row-selected); }
tbody td { border-bottom-color: var(--aico-row-line); }

/* ── ボタン・タブ・チップの文字は折り返さない（PC幅。狭い幅では従来どおり折り返す） ──
   幅が足りないと「全期間」が 全／期／間 の3行になるため。長い文の入ったボタンは data-wrap を付けると折り返せる */
@media (min-width: 641px) {
  button:not(.tile):not(.ai-card):not([data-wrap]),
  .tab-btn, .chip, .aico-tab, .allperiod-btn { white-space: nowrap; }
}