/* retro.css — Win95風テーマ（倉庫PC専用）
 *
 * Database Detective: Minor Crimes Division の見た目に寄せたもの。
 * ティールのデスクトップに、ベベルのウィンドウが載る。
 *
 * 適用は <html data-theme="retro"> のときだけ。
 * TVボード（tv.html）と現場ページ（request.html）は読み込んでいないので影響しない。
 *
 * Tailwind のユーティリティを後から上書きするため !important が要る。
 * フックになるクラス（cl-card / cl-btn / cl-input / cl-badge / cl-notice）は
 * common.js が全コンポーネントに付けている。
 */

[data-theme="retro"] {
  --w95-face:   #c0c0c0;
  --w95-light:  #ffffff;
  --w95-shadow: #808080;
  --w95-dark:   #000000;
  --w95-title:  #000080;
  --w95-title2: #1084d0;
  --w95-desktop:#0a6e6e;
  --w95-text:   #000000;
}

/* ---------- デスクトップ ---------- */

[data-theme="retro"] body {
  background: var(--w95-desktop) !important;
  font-family: Tahoma, Verdana, "MS Sans Serif", sans-serif !important;
  color: var(--w95-text);
}

[data-theme="retro"] main,
[data-theme="retro"] .min-h-screen {
  background: transparent !important;
}

/* 角丸と影は全部落とす。Win95に丸はない */
[data-theme="retro"] .rounded,
[data-theme="retro"] .rounded-md,
[data-theme="retro"] .rounded-lg,
[data-theme="retro"] .rounded-xl,
[data-theme="retro"] .rounded-full {
  border-radius: 0 !important;
}
[data-theme="retro"] .shadow-sm,
[data-theme="retro"] .shadow,
[data-theme="retro"] .shadow-lg {
  box-shadow: none !important;
}

/* ---------- ウィンドウ（Card） ---------- */

[data-theme="retro"] .cl-card {
  background: var(--w95-face) !important;
  border: 2px solid !important;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light) !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow) !important;
  padding: 3px !important;
}

/* status/finder の .w95-title と同じ寸法 */
[data-theme="retro"] .cl-card-title {
  background: linear-gradient(90deg, var(--w95-title), var(--w95-title2)) !important;
  border: 0 !important;
  padding: 3px 3px 3px 5px !important;
  gap: 6px !important;
  margin-bottom: 2px;
}
[data-theme="retro"] .cl-card-title h2 {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}
/* タイトルバー右側に置いたステータス類は白抜きにする。
   ただしウィンドウボタンの中身（_ □ ✕）は黒のままにする */
[data-theme="retro"] .cl-card-title,
[data-theme="retro"] .cl-card-title span:not(.cl-winbtn):not(.cl-badge),
[data-theme="retro"] .cl-card-title .text-slate-500,
[data-theme="retro"] .cl-card-title .text-slate-600,
[data-theme="retro"] .cl-card-title .text-slate-700 {
  color: #e8e8e8 !important;
}

/* バッジは薄い色の背景を持っているので、白抜きにすると文字が消える。
   届け先の「→ Auto 1」が空の箱に見えていたのがこれ。
   タイトルバーの中では Win95 のステータス欄と同じ見た目にする。 */
[data-theme="retro"] .cl-card-title span.cl-badge {
  background: var(--w95-face) !important;
  color: var(--w95-text) !important;
  border: 1px solid !important;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow) !important;
  border-radius: 0 !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
[data-theme="retro"] .cl-card-title {
  justify-content: flex-start !important;
}
[data-theme="retro"] .cl-card-title > h2 {
  margin-right: auto;
}
/* 飾りのボタンは Win95風テーマのときだけ出す */
.cl-winbtns { display: none; }
[data-theme="retro"] .cl-winbtns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  order: 99;              /* 中身より必ず後ろ（右端）に置く */
  margin-left: 6px;
}

/* ウィンドウボタン（飾り。押せない）。
   status/finder の .w95-tbtn と同じ寸法・同じ枠にしてある。
   1px の枠だけで、内側に影は入れない。18x16 で影まで足すと膨らんで潰れる。 */
[data-theme="retro"] .cl-winbtn {
  width: 18px;
  height: 16px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--w95-face);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
}

/* ---------- ボタン ---------- */

[data-theme="retro"] .cl-btn {
  background: var(--w95-face) !important;
  color: var(--w95-text) !important;
  border: 2px solid !important;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light) !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow) !important;
  font-weight: 400 !important;
  min-height: 23px;
}
[data-theme="retro"] .cl-btn:active:not(:disabled) {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark) !important;
  box-shadow: inset 1px 1px 0 var(--w95-shadow) !important;
  padding-top: 1px;
}
[data-theme="retro"] .cl-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
/* 主要ボタンだけ太字にして見分ける（Win95のデフォルトボタン相当） */
[data-theme="retro"] .cl-btn-primary { font-weight: 700 !important; }
[data-theme="retro"] .cl-btn-danger  { color: #a00000 !important; font-weight: 700 !important; }

/* ---------- 入力欄 ---------- */

[data-theme="retro"] .cl-input,
[data-theme="retro"] textarea,
[data-theme="retro"] input[type="number"] {
  background: #fff !important;
  border: 2px solid !important;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow) !important;
  box-shadow: inset 1px 1px 0 var(--w95-dark) !important;
  border-radius: 0 !important;
  font-family: Tahoma, Verdana, sans-serif !important;
}
[data-theme="retro"] .cl-input:focus {
  outline: none !important;
  box-shadow: inset 1px 1px 0 var(--w95-dark) !important;
}

/* ---------- バッジ・通知 ---------- */

[data-theme="retro"] .cl-badge {
  border: 1px solid var(--w95-shadow) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

[data-theme="retro"] .cl-notice {
  border: 2px solid !important;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow) !important;
  border-radius: 0 !important;
}

/* ---------- ヘッダーとタブ ---------- */

[data-theme="retro"] header.bg-slate-900 {
  background: var(--w95-face) !important;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  color: var(--w95-text) !important;
  padding-bottom: 0;
}
[data-theme="retro"] header.bg-slate-900 h1 {
  background: linear-gradient(90deg, var(--w95-title), var(--w95-title2));
  color: #fff !important;
  font-size: 13px !important;
  padding: 3px 6px;
  margin: 2px 2px 4px;
}

/* タブ = Win95 のタブコントロール */
[data-theme="retro"] nav button {
  background: var(--w95-face) !important;
  color: var(--w95-text) !important;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  border-bottom: 0;
  border-radius: 0 !important;
  margin-right: 2px;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  position: relative;
  top: 2px;
}
[data-theme="retro"] nav button.bg-slate-100 {
  font-weight: 700 !important;
  top: 0;
  padding-bottom: 5px !important;
}

/* 折り返して複数段になると、下辺を欠いたタブが宙に浮いて見える。
   狭い画面では枠を閉じて、ただのボタンの並びとして成立させる。 */
@media (max-width: 767px) {
  [data-theme="retro"] .cl-tabs {
    row-gap: 3px;
    padding-bottom: 3px;
  }
  [data-theme="retro"] .cl-tabs button {
    border-bottom: 2px solid var(--w95-dark);
    top: 0;
    /* 手袋でも押せる高さを確保する。Win95 の寸法のままだと 28px しかない */
    min-height: 40px;
    padding: 4px 10px !important;
    font-size: 13px !important;
  }
  [data-theme="retro"] .cl-tabs button.bg-slate-100 {
    /* 選択中は押し込まれた見た目にして、段が違っても分かるようにする */
    border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
    box-shadow: inset 1px 1px 0 var(--w95-shadow);
  }
}

/* ---------- データ表 ---------- */

[data-theme="retro"] table { background: #fff; }
[data-theme="retro"] thead tr {
  background: var(--w95-face) !important;
}
[data-theme="retro"] th {
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  color: #000 !important;
  font-size: 11px !important;
}
[data-theme="retro"] td { border-bottom: 1px solid #d4d0c8; }

/* リスト（レーン詳細・依頼一覧）は白地のパネルに落とす */
[data-theme="retro"] .cl-card ul,
[data-theme="retro"] .cl-card table {
  background: #fff;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
}

/* ---------- マップ ---------- */

/* レーンとマーカーは矩形のままベベルを付ける。中身の色分けは触らない */
[data-theme="retro"] main .grid > button,
[data-theme="retro"] main .grid > div {
  border-radius: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light) !important;
}
/* 選択中のレーン */
[data-theme="retro"] main .grid > button.ring-4 {
  outline: 2px dotted #fff;
  outline-offset: -5px;
  box-shadow: none !important;
}
/* マップの下地はデスクトップに沈める */
[data-theme="retro"] .bg-slate-50 {
  background: var(--w95-face) !important;
}

/* ---------- 現場ページ（タブレット）向けの調整 ----------
 *
 * Win95 はマウス前提の寸法で、そのまま出すと指では押せない。
 * 見た目はレトロのまま、当たり判定と文字サイズだけ実用に戻す。
 */

[data-theme="retro"][data-surface="request"] .cl-btn {
  min-height: 44px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  font-size: 14px !important;
}
[data-theme="retro"][data-surface="request"] .cl-input {
  min-height: 44px !important;
  font-size: 15px !important;
}
/* 製品コードのチップも指で押す。小さいままだと隣を押してしまう */
[data-theme="retro"][data-surface="request"] main button {
  min-height: 36px;
  padding: 6px 10px;
}
[data-theme="retro"][data-surface="request"] input[type="checkbox"] {
  width: 22px;
  height: 22px;
}
/* ヘッダーは1枚しかないので、ウィンドウのタイトルバーとして見せる */
[data-theme="retro"][data-surface="request"] header.bg-slate-900 {
  background: linear-gradient(90deg, var(--w95-title), var(--w95-title2)) !important;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  color: #fff !important;
}
[data-theme="retro"][data-surface="request"] header.bg-slate-900 h1 { color: #fff !important; }
[data-theme="retro"][data-surface="request"] header.bg-slate-900 p  { color: #cfe0f5 !important; }

/* ---------- TVボード ----------
 *
 * 5m以上離れて読む画面なので、文字サイズには一切触らない。
 * 変えるのは色と枠だけ。ここで Win95 の寸法に合わせると読めなくなる。
 *
 * 依頼カードは1枚のウィンドウに見立てる:
 *   上段（品番と届け先）= タイトルバー
 *   中段（ピッキング指示）= 白地の凹んだパネル
 *   下段（依頼者と待ち時間）= グレーのステータスバー
 */

[data-theme="retro"][data-surface="tv"] body,
[data-theme="retro"] .cl-tv {
  background: var(--w95-desktop) !important;
}

/* 上部の見出し行 */
[data-theme="retro"] .cl-tv-head {
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow);
  padding: 6px 10px;
}
[data-theme="retro"] .cl-tv-head h1,
[data-theme="retro"] .cl-tv-head span { color: #000 !important; }
[data-theme="retro"] .cl-tv-head .text-sky-400 { color: var(--w95-title) !important; }
[data-theme="retro"] .cl-tv-head .bg-red-600 { background: #a00000 !important; color: #fff !important; }

/* 依頼カード = ウィンドウ */
[data-theme="retro"] .cl-tv-card {
  background: var(--w95-face) !important;
  border-width: 3px !important;
  border-style: solid !important;
  border-radius: 0 !important;
}
/* 待ち時間の段階は枠の色で示す（元の Tailwind の枠色を上書き） */
[data-theme="retro"] .cl-tv-card.border-slate-700 {
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light) !important;
}
[data-theme="retro"] .cl-tv-card.border-amber-500 { border-color: #c08000 !important; }
[data-theme="retro"] .cl-tv-card.border-red-500   { border-color: #c00000 !important; }

/* 上段 = タイトルバー */
[data-theme="retro"] .cl-tv-top {
  background: linear-gradient(90deg, var(--w95-title), var(--w95-title2));
  margin: 3px 3px 0;
  padding: 6px 10px !important;
}
[data-theme="retro"] .cl-tv-top div { color: #fff !important; }
[data-theme="retro"] .cl-tv-top .cl-tv-dest { color: #a8d4ff !important; }
[data-theme="retro"] .cl-tv-top .text-slate-500,
[data-theme="retro"] .cl-tv-top .text-slate-400 { color: #b9c9e8 !important; }

/* 中段 = 白地の凹んだパネル */
[data-theme="retro"] .cl-tv-body {
  background: #fff;
  border: 2px solid !important;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow) !important;
  margin: 3px;
  padding: 8px 10px !important;
}
[data-theme="retro"] .cl-tv-body .text-white,
[data-theme="retro"] .cl-tv-body .cl-tv-id { color: #000 !important; }
[data-theme="retro"] .cl-tv-body .text-slate-400,
[data-theme="retro"] .cl-tv-body .text-slate-500 { color: #555 !important; }
[data-theme="retro"] .cl-tv-body .text-amber-400 { color: #a05a00 !important; }
[data-theme="retro"] .cl-tv-body .text-red-400   { color: #c00000 !important; }

/* レーン札。Win95 の選択色（紺地に白）で「まずここから取れ」を示す */
[data-theme="retro"] .cl-tv-lane {
  border-radius: 0 !important;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  background: var(--w95-face) !important;
  color: #000 !important;
}
[data-theme="retro"] .cl-tv-lane-first {
  background: var(--w95-title) !important;
  color: #fff !important;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}
[data-theme="retro"] .cl-tv-lane-staging {
  background: #ffd24d !important;
  color: #000 !important;
}

/* 下段 = ステータスバー */
[data-theme="retro"] .cl-tv-foot {
  background: var(--w95-face);
  border-top: 1px solid var(--w95-shadow) !important;
  margin: 0 3px 3px;
  padding: 6px 10px !important;
}
[data-theme="retro"] .cl-tv-foot span { color: #000 !important; }
[data-theme="retro"] .cl-tv-foot .text-emerald-400 { color: #006000 !important; }
[data-theme="retro"] .cl-tv-foot .text-amber-400   { color: #a05a00 !important; }
[data-theme="retro"] .cl-tv-foot .text-red-400     { color: #c00000 !important; }

/* 取消依頼の帯 */
[data-theme="retro"] .cl-tv-card .bg-red-600 { background: #c00000 !important; }

/* ALL CLEAR と入荷待ちの帯 */
[data-theme="retro"] .cl-tv .text-slate-700 { color: #0f4f4f !important; }
[data-theme="retro"] .cl-tv .text-slate-600 { color: #0a4444 !important; }
[data-theme="retro"] .cl-tv footer {
  background: var(--w95-face) !important;
  border: 2px solid !important;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light) !important;
  border-radius: 0 !important;
}
[data-theme="retro"] .cl-tv footer span { color: #000 !important; }
[data-theme="retro"] .cl-tv footer .bg-slate-700 {
  background: var(--w95-face) !important;
  border: 1px solid var(--w95-shadow);
}

/* ---------- トースト ---------- */

[data-theme="retro"] .fixed.bottom-4 > div {
  background: var(--w95-face) !important;
  color: #000 !important;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  border-radius: 0 !important;
  font-weight: 700;
}