/* ============================================================
   TS 営業管理アプリ デザインシステム
   （笑覚アプリ群と同系統: CSS変数 / ライト・ダーク自動対応）
   ============================================================ */
/* 白黒基調（モノクロ）。ステータス・グラフの色は意味を持つ色として維持 */
:root{
  --bg:#F7F7F6; --surface:#FFFFFF; --surface2:#F1F1EF; --surface3:#E7E7E4;
  --ink:#171717; --muted:#6E6E6A; --line:#E3E3E0;
  --accent:#171717; --accent2:#3C3C3C; --accent-ink:#FFFFFF; --accent-soft:#EDEDEB;
  --good:#1B7F4D; --good-bg:#E0F1E7;
  --warn:#9A5B04; --warn-bg:#FAF0DC;
  --crit:#B3261E; --crit-bg:#F9E4E2;
  --info:#2458B3; --info-bg:#E5ECF8;
  --gold:#B98A1C; --gold-bg:#F7EFD8;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,.12);
  --grad:linear-gradient(135deg,#0F0F10 0%,#1C1C1E 60%,#2E2E31 100%);
  --drawer-bg:#141415; --drawer-ink:#F0F0EE; --drawer-muted:#9C9C98;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F0F0F; --surface:#181818; --surface2:#202020; --surface3:#2A2A2A;
    --ink:#ECECEA; --muted:#9C9C98; --line:#2C2C2C;
    --accent:#ECECEA; --accent2:#C9C9C5; --accent-ink:#141414; --accent-soft:#262626;
    --good:#5CC795; --good-bg:#173226;
    --warn:#E5A44B; --warn-bg:#33290F;
    --crit:#EA8B84; --crit-bg:#3A211F;
    --info:#84A9E8; --info-bg:#1B2740;
    --gold:#E2BC5D; --gold-bg:#332B12;
    --shadow:0 1px 3px rgba(0,0,0,.4);
    --shadow-lg:0 8px 30px rgba(0,0,0,.55);
    --grad:linear-gradient(135deg,#0A0A0B 0%,#161617 60%,#242426 100%);
    --drawer-bg:#0C0C0D; --drawer-ink:#ECECEA;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",system-ui,sans-serif;
  font-size:13.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ヘッダー ---------- */
.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  background:var(--grad); color:#fff; padding:10px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.appbar h1{font-size:15.5px; margin:0; font-weight:700; flex:1; letter-spacing:.03em; display:flex; align-items:center; gap:9px}
.appbar h1 .tag{
  font-size:9.5px; font-weight:600; border:1px solid rgba(255,255,255,.5);
  border-radius:99px; padding:1px 8px; letter-spacing:.12em; opacity:.9;
}
.appbar .user{font-size:12px; opacity:.92; display:flex; align-items:center; gap:6px}
.appbar .user::before{
  content:''; width:7px; height:7px; border-radius:99px; background:#fff; opacity:.85;
}
.hamburger{background:none; border:none; cursor:pointer; padding:7px; border-radius:8px}
.hamburger:hover{background:rgba(255,255,255,.14)}
.hamburger span{display:block; width:20px; height:2px; background:#fff; margin:4.5px 0; border-radius:2px; transition:.2s}

/* ---------- サイドバー（デスクトップ） ---------- */
.sidebar{
  display:none; position:fixed; left:0; top:0; bottom:0; width:214px; z-index:60;
  background:var(--drawer-bg); color:var(--drawer-ink);
  flex-direction:column; box-shadow:2px 0 14px rgba(5,10,25,.25);
}
.side-logo{
  display:flex; align-items:center; gap:11px; padding:20px 18px 18px;
  font-weight:700; font-size:14.5px; letter-spacing:.03em; line-height:1.3;
}
.side-logo .mark{
  width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#141414; font-size:15px; font-weight:800; letter-spacing:.02em;
}
.side-logo small{display:block; font-size:8.5px; font-weight:600; letter-spacing:.2em; color:var(--drawer-muted)}
.side-nav{display:flex; flex-direction:column; gap:2px; padding:8px 10px; flex:1}
.side-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  color:var(--drawer-ink); text-decoration:none; font-size:13.5px; font-weight:600;
  border-radius:10px; transition:background .12s;
}
.side-nav a .ic{font-size:17px; width:22px; text-align:center}
.ic{display:inline-flex; align-items:center; justify-content:center}
.ic svg{width:19px; height:19px}
.drawer a .ic svg{width:17px; height:17px}
.side-nav a:hover{background:rgba(255,255,255,.07)}
.side-nav a.on{background:#fff; color:#141414}
.side-foot{padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.09); font-size:12px}
.side-user{color:var(--drawer-ink); font-weight:700; margin-bottom:6px}
.side-user::before{content:''; display:inline-block; width:7px; height:7px; border-radius:99px;
  background:#fff; opacity:.85; margin-right:7px; vertical-align:1px}
.side-foot a{color:#F09A93; text-decoration:none; font-size:12px}
.side-foot a:hover{text-decoration:underline}

/* ---------- 下部タブバー（モバイル） ---------- */
.bottomnav{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 12px rgba(0,0,0,.07);
}
.bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 0 7px; text-decoration:none; color:var(--muted); font-size:10px; font-weight:600;
}
.bottomnav a .ic{font-size:20px; line-height:1.15}
.bottomnav a .ic svg{width:22px; height:22px}
.bottomnav a.on{color:var(--accent)}
.bottomnav a.on .ic{transform:translateY(-1px)}

@media (min-width:1024px){
  body:has(.sidebar){padding-left:214px}
  .sidebar{display:flex}
  .bottomnav{display:none}
  .appbar .hamburger{order:2}
}
@media (max-width:1023px){
  body:has(.bottomnav){padding-bottom:76px}
}

/* ---------- ドロワーメニュー ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(8,12,24,.55); backdrop-filter:blur(2px);
  z-index:98; opacity:0; pointer-events:none; transition:opacity .22s;
}
.drawer-overlay.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; left:-292px; width:282px; height:100%;
  background:var(--drawer-bg); color:var(--drawer-ink);
  z-index:99; transition:left .22s cubic-bezier(.3,.8,.3,1);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{left:0}
.drawer .drawer-head{
  background:var(--grad); color:#fff; padding:22px 18px 18px;
  font-weight:700; font-size:15px; letter-spacing:.03em;
}
.drawer .drawer-head small{display:block; font-weight:400; font-size:11px; opacity:.85; margin-top:5px}
.drawer .section{
  padding:16px 18px 6px; font-size:10px; color:var(--drawer-muted);
  letter-spacing:.16em; font-weight:700;
}
.drawer a{
  display:flex; align-items:center; gap:11px; padding:11px 18px;
  color:var(--drawer-ink); text-decoration:none; font-size:13.5px;
  border-left:3px solid transparent; transition:background .12s;
}
.drawer a:hover{background:rgba(255,255,255,.07); border-left-color:var(--accent2)}
.drawer .logout{margin-top:auto; margin-bottom:14px; color:#F09A93}

/* ---------- 共通部品 ---------- */
.container{max-width:1280px; margin:0 auto; padding:18px 16px 60px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 12px; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.1em;
}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; box-shadow:var(--shadow);
}
.stat .label{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.04em}
.stat .value{font-size:25px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; line-height:1.25}
.stat .sub{font-size:11px; color:var(--muted)}

/* ---------- テーブル ---------- */
.tbl-wrap{
  overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); margin-bottom:14px;
}
table{border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums}
th{
  background:var(--surface2); position:sticky; top:0; z-index:1;
  text-align:left; font-size:11px; color:var(--muted); font-weight:700;
  letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{border-bottom:1px solid var(--line); padding:7px 10px; text-align:left; white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(60,109,220,.05)}
td.num,th.num{text-align:right}
.sec-row td{background:var(--surface2); font-weight:700; font-size:11px; color:var(--muted); letter-spacing:.08em}

.pill{display:inline-block; padding:1px 10px; border-radius:99px; font-size:11.5px; font-weight:700}
.pill.ok{background:var(--good-bg); color:var(--good)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--crit-bg); color:var(--crit)}
.chip{display:inline-block; padding:2px 11px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap}

/* 顧客ステータス（行の背景とチップ / ライト・ダーク両対応） */
tr.st-nodate td{background:var(--info-bg)}
tr.st-waiting td{background:var(--warn-bg)}
tr.st-opened td{background:var(--crit-bg)}
tr.st-cancel td{background:var(--surface2)}
tr.st-cancel{opacity:.62}
tbody tr.st-nodate:hover td,tbody tr.st-waiting:hover td,
tbody tr.st-opened:hover td,tbody tr.st-cancel:hover td{filter:brightness(.97)}
.chip.st-pre,.chip.st-fresh{background:var(--surface3); color:var(--muted)}
.chip.st-nodate{background:var(--info); color:#fff}
.chip.st-waiting{background:var(--warn); color:#fff}
.chip.st-opened{background:var(--crit); color:#fff}
.chip.st-cancel{background:var(--muted); color:var(--surface)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin:10px 0 2px}
.legend span{display:flex; align-items:center; gap:5px}
.legend i{width:11px; height:11px; border:1px solid var(--line); border-radius:3px; display:inline-block}

/* ---------- タブ ---------- */
.tabs{display:flex; gap:2px; border-bottom:2px solid var(--line); margin-bottom:16px; flex-wrap:wrap; overflow-x:auto}
.tabs button{
  border:none; background:none; padding:10px 15px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muted);
  border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:700}

/* ---------- フォーム部品 ---------- */
input,select,button,textarea{font:inherit; color:var(--ink)}
input[type=text],input[type=tel],input[type=date],input[type=month],input[type=number],input[type=password],select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface2); font-size:13.5px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2); outline-offset:1px; border-color:var(--accent2)}
label.f{display:block; margin-bottom:14px}
label.f .t{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px}
label.f .req{color:var(--crit); margin-left:4px}
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:8px; padding:9px 20px;
  cursor:pointer; font-weight:700; font-size:13.5px; text-decoration:none;
  transition:filter .12s;
}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn.sm{padding:4px 11px; font-size:12px}
.btn.danger{background:transparent; color:var(--crit); border-color:var(--crit)}

dialog{
  border:1px solid var(--line); border-radius:14px; padding:22px;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
}
dialog::backdrop{background:rgba(8,12,24,.55)}

/* ---------- Googleフォーム風（日報入力） ---------- */
.gform{max-width:640px; margin:26px auto; padding:0 14px}
.gform .head{
  background:var(--surface); border:1px solid var(--line); border-top:none;
  border-radius:12px; padding:22px; margin-bottom:13px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.gform .head::before{content:''; position:absolute; top:0; left:0; right:0; height:7px; background:var(--grad)}
.gform .head h1{margin:4px 0 6px; font-size:22px; letter-spacing:.02em}
.gform .head p{margin:0; color:var(--muted); font-size:12.5px}
.gform .q{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px; margin-bottom:11px; box-shadow:var(--shadow);
}
.gform .done{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:30px; text-align:center; box-shadow:var(--shadow);
}
.msg{padding:10px 14px; border-radius:8px; margin:10px 0; font-size:13.5px; display:none}
.msg.ok{background:var(--good-bg); color:var(--good); display:block}
.msg.err{background:var(--crit-bg); color:var(--crit); display:block}

code{
  background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-family:Consolas,monospace; font-size:12px;
}

@media (max-width:640px){
  .container{padding:12px 10px 50px}
  th,td{padding:6px 7px; font-size:12px}
  .stat .value{font-size:21px}
}