/* ============================================================
   allevo-ui.css — Allevo 共通UIレイヤー v3
   既存 <style> の後ろに1行で読み込む上書き層。HTMLは触らない。

   根拠:
   - フォント: SmartHR UI準拠 = Webフォント配布せずOS標準。
     丸ゴ指定の排除が目的で、palt + tabular-nums で品質を出す
   - グレー: SmartHR createColor.ts の実値（全てウォームグレー）
   - 表: Tabler ui/_tables.scss / subheader mixin
     （見出し=小さく薄く0.04em、td 12px/th 縦8px、th背景=三次面）
   - 状態: Tabler ui/_status.scss（色10%面+ドット+文字）
   - 品質床: ui-ux-pro-max 納品前チェックリスト
   ============================================================ */

:root{
  /* --- 面（SmartHR GREY_5/6/7/9/20 実値） --- */
  --bg:#f5f4f3;            /* GREY_6 */
  --paper:#ffffff;
  --muted:#f8f7f6;         /* GREY_5: th背景・偶数行 */
  --hover:#f2f1f0;         /* GREY_7 */
  --line:#edebe8;          /* GREY_9 */
  --line-strong:#d6d3d0;   /* GREY_20 */

  /* --- 文字（SmartHR TEXT_BLACK/TEXT_GREY 実値） --- */
  --ink:#23221e;
  --sub:#706d65;

  /* --- ブランド = 行動の色。面に塗らない --- */
  --brand:#d97706;
  --brand-d:#b45309;
  --brand-soft:#fdf2e3;

  /* --- 状態（Tabler red を基準に彩度低め） --- */
  --danger:#d63939;  --danger-soft:#fbeaea;
  --warn:#b45309;    --warn-soft:#fdf2e3;
  --ok-ink:#4f5b4f;

  /* --- 旧トークン吸収（緑・珊瑚を根絶やしにする） --- */
  --leaf:var(--brand); --leaf-d:var(--ink); --leaf-soft:var(--brand-soft);
  --coral:var(--danger); --coral-soft:var(--danger-soft);
  --amber:var(--warn); --amber-soft:var(--warn-soft);

  --r:8px;
  --shadow:0 1px 2px rgba(35,34,30,.06);
  --wrap:1180px;
}

/* ---- 1. 書体: 丸ゴ排除。OS標準ゴシックに固定 ---------------- */
body, button, input, select, textarea, table{
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",
    "Yu Gothic UI","Meiryo",sans-serif !important;
  font-feature-settings:"palt" 1;
}
body{ background:var(--bg); color:var(--ink); }

/* 数字は書体を変えず等幅化（SmartHR方式）。.num は JS も付与 */
.num, td.num, .amount, .stat-card b, .chip b,
input[type=number], input[type=date], code{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
td.num, .amount, input[type=number]{ text-align:right; }

/* ---- 2. ヘッダ: 彩度の帯をやめ、濃インク+橙下線 -------------- */
header.app{
  background:var(--ink) !important;
  border-bottom:2px solid var(--brand);
  padding:10px 16px !important;
  box-shadow:none !important;
}
header.app .bar{ max-width:var(--wrap) !important; }
header.app .leaf{
  background:var(--brand) !important;
  width:16px !important; height:16px !important;
  border-radius:3px !important; transform:none !important;
}
header.app a.top{ color:#cfccc7 !important; border-radius:6px !important; font-weight:500; }
header.app a.top:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; }

/* ---- 3. 幅: 760px → 1180px ---------------------------------- */
.wrap{ max-width:var(--wrap) !important; padding:0 20px 64px !important; }
@media (max-width:900px){ .wrap{ padding:0 12px 56px !important; } }

/* ---- 4. 表: Tabler規則 --------------------------------------- */
table.tbl{
  border-collapse:separate; border-spacing:0; width:100%;
  font-size:14px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
table.tbl thead th{
  /* Tabler subheader: 小さく・500・0.04em・三次面 */
  background:var(--muted) !important;
  color:var(--sub) !important;
  font-size:12px; font-weight:500; letter-spacing:.04em;
  text-align:left; white-space:nowrap;
  padding:8px 12px !important;               /* th-padding-y 0.5rem */
  border-bottom:1px solid var(--line-strong) !important;
  position:sticky; top:0; z-index:5;
}
table.tbl tbody td{
  padding:10px 12px !important;              /* cell-padding 0.75rem 基準 */
  border-bottom:1px solid var(--line) !important;
  vertical-align:middle; background:var(--paper);
}
table.tbl tbody tr:last-child td{ border-bottom:none !important; }
table.tbl tbody tr:nth-child(even) td,
table.tbl tbody tr:nth-child(even) td.stick{ background:var(--muted) !important; }
table.tbl tbody tr:hover td,
table.tbl tbody tr:hover td.stick{ background:var(--hover) !important; }

/* 長い品名の省略（Tabler td-truncate） */
td.nm{ max-width:1px; width:100%; }
td.nm .nm-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* 要対応行: 塗らない。左端3px帯のみ */
table.tbl tbody tr td:first-child{ box-shadow:inset 3px 0 0 transparent; }
table.tbl tr.order td:first-child{ box-shadow:inset 3px 0 0 var(--danger); }
table.tbl tr.low   td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
table.tbl tr.order td, table.tbl tr.order td.stick{ background:var(--paper) !important; }
table.tbl tr.order:hover td, table.tbl tr.order:hover td.stick{ background:var(--danger-soft) !important; }

/* ---- 5. 状態: Tabler status（面10%+ドット+文字） ------------- */
.badge{
  display:inline-flex !important; align-items:center; gap:5px;
  border-radius:999px !important;
  font-size:12px !important; font-weight:500 !important;
  padding:2px 9px !important; letter-spacing:.02em;
  border:none !important; line-height:1.6;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge.order{ background:var(--danger-soft) !important; color:var(--danger) !important; }
.badge.low  { background:var(--warn-soft)   !important; color:var(--warn)   !important; }
.badge.ok   { background:var(--hover)       !important; color:var(--ok-ink) !important; }
.chip{ border-radius:999px !important; background:var(--hover) !important; color:var(--sub) !important; }
.chip.reserve.neg{ background:var(--danger-soft) !important; color:var(--danger) !important; }

/* ---- 6. カード・ボタン --------------------------------------- */
.card{ border-radius:var(--r) !important; box-shadow:var(--shadow) !important;
  border:1px solid var(--line) !important; }
.stat-card{ border-radius:var(--r) !important; border:1px solid var(--line) !important;
  cursor:pointer; }
.stat-card b{ font-size:22px; font-variant-numeric:tabular-nums; }
.stat-card:hover{ box-shadow:0 2px 8px rgba(35,34,30,.09) !important; }

.btn, button.btn{
  border-radius:6px !important; box-shadow:none !important;
  background:var(--brand) !important; color:#fff !important;
  font-weight:700; padding:8px 16px !important; cursor:pointer;
  transition:background .15s;
}
.btn:hover{ background:var(--brand-d) !important; filter:none !important; }
.btn.ghost, .btn.sub{
  background:var(--paper) !important; color:var(--ink) !important;
  border:1px solid var(--line-strong) !important;
}
.btn.ghost:hover, .btn.sub:hover{ border-color:var(--brand) !important; color:var(--brand-d) !important; }

/* ---- 7. フラッシュ ------------------------------------------- */
.flash{
  background:var(--paper) !important; border:1px solid var(--line-strong) !important;
  border-left:3px solid var(--brand) !important; color:var(--ink) !important;
  border-radius:6px !important;
}

/* ---- 8. 在庫メーター（署名要素・allevo-ui.jsが注入） --------- */
.stock-meter{
  display:block; height:4px; width:100%; max-width:110px;
  background:var(--line); border-radius:2px; margin-top:4px; overflow:hidden;
}
.stock-meter i{ display:block; height:100%; border-radius:2px; background:#8a9a8a; }
.stock-meter.warn i{ background:var(--warn); }
.stock-meter.order i{ background:var(--danger); }

/* ---- 9. アイコン受け皿（絵文字→SVG置換はJS） ----------------- */
.tico{ width:15px; height:15px; stroke:currentColor; stroke-width:1.75;
  fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; }

/* ---- 10. 品質床（ui-ux-pro-maxチェックリスト） ---------------- */
a, button, select, summary, [role=button]{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }