/* ============================================================
   CAIA SHORT — APP KIT テーマ（Filament v4 の上に KIT の骨格・密度を適用）
   正: brand-kit/caia-app.css（[data-caia="short"] の変数と部品の型）
   ------------------------------------------------------------
   方針（古川さん判定・2026-08-27 GO）:
   - シェル（黒サイドバー全高・スリムなトップバー・タイトル16px・密度13px台）を
     KIT に合わせる。DOM は Filament のまま、CSS で組み替える
   - vendor ビューは差し替えない（アップグレード保守を CSS 1枚に閉じ込める）
   - 🔴 Filament のトークンを参照するときは var(--xxx) をそのまま使う。
     rgb(var(--xxx)) は v4 では無効値（CLAUDE.md 参照）
   ============================================================ */

/* ---------- 1. KIT 変数（caia-app.css の short palette と完全一致させる） ---------- */
:root{
  --base:#A3339B; --dark:#741B6E; --wash:#FAEBF9; --on-base:#fff;
  /* 🔴 family 方針（bb5a049・2026-08-28 確定）: 製品色は --base/--dark/--wash だけ。
     地・文字・罫線は【全製品共通の中立グレー】（--side は製品色を含む黒のまま）。
     発端は LAPI と SHORT で古川さんから同じ指示が2回出たこと */
  --ground:#F3F4F6; --surface:#fff; --surface-2:#F8F9FA;
  --ink:#1A1D21; --ink-2:#565C63; --ink-3:#868D96;
  --rule:#E3E5E8; --rule-2:#EDEEF1;
  --side:#1A0F18; --side-ink:#E4D4E0; --side-dim:#8B7686;
  --warn:#8A5A00; --warn-bg:#FAF2E2;
  --bad:#B3261E;  --bad-bg:#FBEBEA;
  --ok:#2E6B4F;   --ok-bg:#E8F4EE;
  --nav-w:210px; --radius:10px;
}

body.fi-body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:14px;
}

/* ============================================================
   2. シェルの組み替え（デスクトップ）
   Filament v4 既定: topbar(64px・全幅) → その下に sidebar。
   KIT: sidebar が左端に全高、topbar はその右だけ。
   ============================================================ */
@media (min-width:768px){

  /* --- サイドバー: 左端・全高・ダーク --- */
  .fi-sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    height:100dvh;
    width:var(--nav-w) !important;
    background:var(--side);
    border-right:none;
    z-index:40;
    padding-top:0;
  }
  .fi-layout{ padding-left:var(--nav-w); }

  /* --- トップバー: 中身（通知・ユーザー）だけを右上に浮かせる。
         白帯そのものはページヘッダー（.fi-header）が務める＝KIT .tb-title の型。
         タイトルは画面ごとに違うので、タイトル入りの帯は header 側でしか作れない --- */
  .fi-topbar-ctn{
    position:fixed; top:0; right:0; left:auto; width:auto;
    margin-left:0; z-index:35;
  }
  .fi-topbar{
    height:48px; min-height:48px;
    background:transparent;
    border-bottom:none;
    box-shadow:none;
    padding:0 12px;
  }

  /* --- ページヘッダー = 白帯（タイトル16px＋画面の主要操作＋右端に通知/ユーザーの余白） --- */
  .fi-header{
    position:sticky; top:0; z-index:30;
    background:var(--surface);
    border-bottom:1px solid var(--rule);
    margin:-18px -14px 16px;          /* .fi-main の padding を打ち消して全幅の帯にする */
    padding:0 220px 0 18px;           /* 右280px = 浮かせた通知・ユーザー名・ログアウトのぶん
                                         （足りないと画面の操作ボタンがそこに重なる。実際に「削除」が重なった） */
    min-height:48px;
    display:flex; align-items:center; gap:14px;
  }
  .fi-header > *{ margin:0; }
  /* v4 の .fi-page-header-main-ctn が持つ padding-top:32px が白帯の上に隙間を作るので消す */
  .fi-page-header-main-ctn{ padding-top:0 !important; }
  /* トップバーのロゴは出さない（ワードマークはサイドバー内が KIT の位置） */
  .fi-topbar > a,
  .fi-topbar .fi-logo,
  .fi-topbar .caia-brand-logo{ display:none; }
  /* デスクトップではサイドバー開閉ボタン不要 */
  .fi-topbar-open-sidebar-btn,
  .fi-topbar-close-sidebar-btn{ display:none; }
}

/* ============================================================
   3. サイドバーの中身（KIT .nav の型）
   ============================================================ */

/* ワードマーク（brand-logo ビューが fi-sidebar-header-logo-ctn に出る）
   🔴 v4 はデスクトップで .fi-sidebar-header を display:none にする（ロゴをトップバーに出す設計）。
   KIT はサイドバー内がワードマークの位置なので、ここで復活させる */
.fi-sidebar-header{
  display:flex !important;
  background:transparent;
  border:none;
  box-shadow:none;
  height:auto;
  padding:14px 18px 0;
}
.fi-sidebar-header .fi-logo{ height:auto !important; margin:0; }
.fi-sidebar-header-logo-ctn{ padding:0; margin:0; }
/* KIT .nav .wordmark と同寸（LAPI 実測で照合済み 2026-08-27）:
   star x13/y13/34px・gap 8px・文字は left:-12px 詰め・行高26px。
   🔴 gap は 0 にしない（LAPI は 8px。0 だと文字が 8px 左に寄る） */
.fi-sidebar .caia-brand-logo{ display:flex; font-size:15px; letter-spacing:.1em; gap:8px; line-height:26px; }
.fi-sidebar .caia-brand-logo .star{
  width:34px; height:34px;
  position:relative; left:-5px; top:-1px;
}
/* KIT: .name/.lite は left:-12px（星に寄せる）。この値は KIT と厳密一致させる */
.fi-sidebar .caia-brand-logo > span:last-child{ position:relative; left:-12px; }
/* ダーク地なので KIT の nav .wordmark と同じ白系。CAIA=700 / SHORT=300(lite) */
.fi-sidebar .caia-brand-logo .c{ color:#fff; font-weight:700; }
.fi-sidebar .caia-brand-logo .p{ color:#fff; font-weight:300; margin-left:.53em; } /* LAPI 実測 8px */

/* テナント切替（KIT .nav-tenant と同じ見た目・LAPI の「片付けサポートルンルン♪」と揃える）:
   アイコン・シェブロンは出さず、10.5px の灰文字だけ。切替のクリックは効くまま。
   LAPI 実測: x0・y48（ワードマーク直下）・全幅210。Filament のラッパー余白を殺す */
.fi-tenant-menu{ padding:0 !important; margin:0 !important; width:100%; }
.fi-sidebar .fi-tenant-menu > *{ margin:0 !important; width:100%; }
.fi-tenant-menu .fi-tenant-menu-trigger,
.fi-tenant-menu .fi-dropdown-trigger button,
.fi-tenant-menu > button{
  color:var(--side-dim) !important;
  font-size:10.5px;
  letter-spacing:.03em;
  padding:11px 18px 14px;
  width:100%;
  justify-content:flex-start;
  border-radius:0;
}
.fi-tenant-menu .fi-tenant-menu-trigger:hover{ background:rgba(255,255,255,.06); }
.fi-tenant-menu .fi-tenant-menu-trigger *{ color:inherit !important; }
.fi-tenant-menu .fi-avatar,
.fi-tenant-menu .fi-tenant-menu-trigger svg,
.fi-tenant-menu .fi-icon{ display:none !important; }

/* ナビ項目（KIT .nav a.item の型: 左3pxバー・base16%地・白文字） */
.fi-sidebar-nav{ padding:6px 0 14px; }
/* 🔴 v4 は .fi-sidebar-nav-groups に margin-left:-8px を掛ける。
   これで active の左3pxバーが【サイドバーの外にはみ出て消える】（古川さん指摘・LAPI実測 x=0）。
   0 に戻して項目を左端ぴったりに */
.fi-sidebar-nav-groups{ margin-left:0 !important; margin-right:0 !important; }
.fi-sidebar-nav .fi-sidebar-item a{
  border-radius:0;
  padding:10px 18px;
  color:var(--side-ink);
  font-size:13.5px;
  border-left:3px solid transparent;
  gap:9px;
}
.fi-sidebar-nav .fi-sidebar-item a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.fi-sidebar-nav .fi-sidebar-item.fi-active a,
.fi-sidebar-nav .fi-sidebar-item a.fi-active{
  background:color-mix(in srgb, var(--base) 16%, transparent);
  border-left-color:var(--base);
  color:#fff;
  font-weight:700;
}
.fi-sidebar-nav .fi-sidebar-item a .fi-icon{
  color:currentColor;
  width:18px; height:18px;
}
/* v4 はラベル・アイコンに個別の色を当てるため、a からの継承に戻す */
.fi-sidebar-item-label,
.fi-sidebar-item-icon{ color:inherit !important; }
.fi-sidebar-group-label{
  font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--side-dim) !important; padding:16px 18px 5px;
}
/* KIT の .grp はただの見出し。折りたたみシェブロンは出さない（LAPI にも無い） */
.fi-sidebar-group-collapse-btn{ display:none !important; }
/* Filament が active 項目に付ける独自の地色・影は消す（KIT の左バー方式に一本化） */
.fi-sidebar-nav .fi-sidebar-item a{ box-shadow:none !important; }

/* ============================================================
   4. ページヘッダー（KIT .topbar h1 = 16px・スリム）
   ============================================================ */
.fi-breadcrumbs{ display:none; }
.fi-header h1,
.fi-header .fi-header-heading{
  font-size:16px !important;
  font-weight:700;
  line-height:1.3;
}
.fi-header .fi-header-subheading{ font-size:12px; color:var(--ink-3); }

/* 本文の余白と最大幅（KIT .content 相当）
   🔴 fi-main の max-width とセンター寄せを解除する:
   - 白帯（.fi-header）は fi-main の margin 打ち消しで広がるため、fi-main が 1280px センターだと
     広い画面で【白帯の左右に地色の隙間】が出る（古川さん指摘・2026-08-27）
   - KIT の .content は max-width:1440px の【左寄せ】。センター寄せにしない */
.fi-main{ max-width:none !important; margin:0 !important; padding:18px 14px 56px; }
.fi-page-main{ max-width:1440px; }

/* ============================================================
   5. 部品（KIT の密度・トーンへ）
   ============================================================ */

/* 縦密度（古川さん指摘 2026-08-28「余白付きすぎ・保存がスクロールしないと見えない」）:
   v4既定は 帯下gap32 + セクションpadding24 + フィールドgap24。KIT .card の密度へ詰める */
.fi-page-header-main-ctn{ gap:14px; padding-bottom:20px; }
.fi-page-content{ gap:16px; }
.fi-section-header{ padding:12px 20px; }
.fi-section-content{ padding:16px 20px 18px; gap:16px; }
/* 保存・キャンセルは画面下に常時表示（スクロールしないと保存が見えない問題への根本対処）。
   v4 の実クラスは .fi-sc-actions。🔴 sticky は不可: 親（fi-sc-component）の高さがバーと同じで
   動ける範囲がゼロのため。デスクトップは fixed で敷く（スマホはタブバーがあるので通常フロー） */
@media (min-width:768px){
  form .fi-sc-actions{
    /* 🔴 inset は4辺とも明示する。top を auto にしないと既定スタイルと合成されて
       バーが画面全体に伸び、本文を地色で覆い隠す（実際に起きた） */
    position:fixed; inset:auto 0 0 var(--nav-w); z-index:15;
    height:auto; max-height:72px;
    background:var(--ground);
    padding:10px 18px 12px;
    box-shadow:0 -8px 12px -10px rgba(0,0,0,.18);
  }
  .fi-main{ padding-bottom:84px; } /* バーに隠れないための逃げ */
}

/* カード・セクション */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat{
  border-radius:var(--radius);
  border:1px solid var(--rule);
  box-shadow:none;
  background:var(--surface);
}
/* 数値カード（リンク数・クリック等）は独立カードが正（KIT .tiles）。
   ラッパーの fi-section まで白にすると【カード間の隙間が白く塗られて】見える（古川さん指摘） */
.fi-wi-stats-overview .fi-section{
  background:transparent;
  border:none;
  box-shadow:none;
}
.fi-wi-stats-overview .fi-section > *{ padding:0; }

/* テーブル（KIT table.grid の型: 13px・見出しは小さく字間広め） */
.fi-ta-table{ font-size:13px; }
.fi-ta-header-cell{
  font-size:10.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
}
.fi-ta-header-cell,
.fi-ta-cell{ padding-top:9px; padding-bottom:9px; }
.fi-ta-row:hover{ background:var(--surface-2); }

/* ボタン（KIT .btn の型） */
.fi-btn{
  border-radius:8px;
  font-weight:700;
  font-size:13px;
}
/* 副次ボタン = KIT .ghost（灰枠・dark文字） */
.fi-btn.fi-color-gray{
  background:transparent;
  color:var(--dark);
  border:1px solid var(--rule);
  box-shadow:none;
}
.fi-btn.fi-color-gray:hover{ background:var(--surface-2); }

/* バッジ（KIT .chip の型） */
.fi-badge{
  font-size:11px;
  font-weight:700;
  border-radius:11px;
  padding:2px 9px;
}

/* トグルON = 製品色（意味色ではない。「有効になっている」は状態表示でなく操作系） */
.fi-toggle button[aria-checked="true"],
.fi-checkbox input:checked,
input[type="checkbox"]:checked{
  background-color:var(--base) !important;
  border-color:var(--base) !important;
}

/* 入力（KIT .field の型: フォーカスは base のリング） */
.fi-input-wrp:focus-within{
  border-color:var(--base);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--base) 16%, transparent);
}

/* リンク色 */
.fi-main a:not(.fi-btn):not(.fi-badge):not([class*="fi-ta-action"]){ color:var(--base); }

/* 白帯右端のアバター球は出さない（LAPI と同じ「名前＋ログアウト」だけ・古川さん指示）。
   ⚠️ テナント画面のみ。運営パネル（2FA設定へ入る導線がユーザーメニューしかない）では残す */
body.fi-panel-app .fi-topbar .fi-user-menu{ display:none; }

/* 幅が狭いときはユーザー名・ログアウトを隠し（LAPI の hide-sp と同じ）、帯の余白も戻す */
@media (max-width:1100px){
  .caia-topbar-user{ display:none !important; }
}
@media (min-width:768px) and (max-width:1100px){
  .fi-header{ padding-right:110px; }
}

/* ============================================================
   5.5 PC幅狭 768〜1179px: サイドバーをアイコンのみ 64px に
   （KIT の3段レスポンシブ中間段。LAPI と同じ挙動・古川さん指摘 2026-08-28）
   幅は --nav-w を上書きするだけで、レイアウト側（.fi-layout の padding 等）が追従する
   ============================================================ */
@media (min-width:768px) and (max-width:1179px){
  :root{ --nav-w:64px; }

  /* 🔴 v4 は 1024px 未満をモバイル扱いし、サイドバーを「閉」にする。
     退避は transform ではなく【個別プロパティの translate:-100%】で行われる（ここに1敗）。
     この帯ではアイコンサイドバーとして常時表示するので両方打ち消す */
  .fi-sidebar{ transform:none !important; translate:none !important;
    visibility:visible !important; display:flex !important; }
  .fi-sidebar > *{ transform:none !important; translate:none !important; }
  .fi-sidebar-close-overlay{ display:none !important; }

  /* ワードマーク → 星だけを中央に */
  .fi-sidebar-header{ justify-content:center; padding:14px 0 0; }
  .fi-sidebar .caia-brand-logo{ gap:0; }
  .fi-sidebar .caia-brand-logo .star{ left:0; top:0; }
  .fi-sidebar .caia-brand-logo > span:last-child{ display:none; }

  /* テナント名・グループ見出し・バージョン表記は出さない（KIT と同じ） */
  .fi-tenant-menu,
  .fi-sidebar-group-btn,
  .caia-nav-foot{ display:none !important; }

  /* 項目はアイコンのみ・中央寄せ。active の左3pxバーは維持。
     🔴 border-left:3px のぶん中心が右へ2pxずれるので右パディングで打ち消す（KIT 4b33285 と同じ対処） */
  .fi-sidebar-nav .fi-sidebar-item a{ justify-content:center; padding:12px 11px 12px 8px; gap:0; }
  .fi-sidebar-item-label{ display:none !important; }
  .fi-sidebar-nav .fi-sidebar-item a .fi-icon{ width:20px; height:20px; }
}

/* ============================================================
   6. スマホ（〜767px）: Filament のドロワーを活かしつつ、
      ダーク帯＋製品名という KIT の見え方に寄せる
   ============================================================ */
@media (max-width:767px){
  .fi-topbar{
    background:var(--side);
    border-bottom:none;
  }
  .fi-topbar .fi-icon-btn{ color:#fff; }
  /* KIT: 製品名は左・ハンバーガーは右端（LAPI と同じ並び） */
  .fi-topbar-start{ order:1; }
  .fi-topbar-end{ order:2; margin-left:auto; }
  .fi-topbar-open-sidebar-btn,
  .fi-topbar-close-sidebar-btn{ order:3; margin-left:8px;
    border:1px solid rgba(255,255,255,.32); border-radius:9px; width:38px; height:38px; }

  /* 数値カードはスマホ2列（KIT .tiles）。1列の縦積みにしない */
  .fi-wi-stats-overview .fi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; }
  /* KIT .tile の密度: ラベル1行（折り返さない）・値23px・余白を詰める */
  .fi-wi-stats-overview-stat{ padding:13px 14px; }
  .fi-wi-stats-overview-stat-label{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fi-wi-stats-overview-stat-value{ font-size:23px; line-height:1.3; }
  .fi-wi-stats-overview-stat-description{ font-size:10.5px; }

  /* 下部タブバーのぶんの余白 */
  .fi-main{ padding-bottom:78px; }
  /* スマホはトップバーに製品名を出す（サイドバーが隠れるため）— KIT .sp-brand と同じ理屈。
     v4 はモバイルで .fi-topbar-start ごと display:none にするため、そこから復活させる */
  .fi-topbar-start{ display:flex !important; align-items:center; }
  .fi-topbar .caia-brand-logo{ display:flex; font-size:15px; }
  /* KIT標準の組み合わせ表（38ba5ec）: スマホのダーク帯は箱26px。SVGは箱に追従（brand-logo側） */
  .fi-topbar .caia-brand-logo .star{ width:26px; height:26px; }
  .fi-topbar .caia-brand-logo .c{ color:#fff; font-weight:700; }
  .fi-topbar .caia-brand-logo .p{ color:#fff; font-weight:300; }
  /* ドロワー（サイドバー）はデスクトップと同じダーク */
  .fi-sidebar{ background:var(--side); }
}

/* ============================================================
   7. 下部タブバー（KIT .tabbar・スマホのみ・最大5項目）
   実体は resources/views/filament/tabbar.blade.php（BODY_END フック）
   ============================================================ */
.caia-tabbar{ display:none; }
@media (max-width:767px){
  .caia-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:var(--side); border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .caia-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:9px 4px 7px; color:var(--side-dim); text-decoration:none; font-size:10px;
    position:relative; min-height:54px;
  }
  .caia-tabbar a.active{ color:#fff; }
  .caia-tabbar a.active::before{
    content:""; position:absolute; top:0; left:22%; right:22%; height:2px;
    background:var(--base); border-radius:0 0 2px 2px;
  }
  .caia-tabbar svg{ width:18px; height:18px; }
}