/* ============================================================
   JK Lab 儀器預約系統 — 設計系統(暖色系,沿用設計師 tokens)
   ============================================================ */
:root{
  /* 色階 */
  --cocoa:#6B3F1D; --cocoa-700:#5A331A; --cocoa-800:#3F2310; --cocoa-300:#A07650;
  --biscuit:#D08A4A; --biscuit-600:#B7763A; --biscuit-300:#E6B486; --biscuit-100:#F4DDC2;
  --cream:#FBF6EE; --cream-200:#F4ECDD; --cream-300:#ECE0CB;
  --ink:#2A1A10; --ink-soft:#4A382C; --ink-muted:#7B6757; --ink-faint:#B9AA98;
  --paper:#FFFFFF;
  --success:#4F8A3D; --success-bg:#E5F0DA;
  --danger:#C24A2E;  --danger-bg:#FAE2D8;
  --warn:#D9A23A;    --warn-bg:#FBEFCD;
  --info:#4A6F8A;    --info-bg:#DDE7EE;
  /* 語意 */
  --fg-1:var(--ink); --fg-2:var(--ink-soft); --fg-3:var(--ink-muted); --fg-disabled:var(--ink-faint);
  --fg-on-brand:var(--cream); --fg-link:var(--cocoa);
  --bg-page:var(--cream); --bg-surface:var(--paper); --bg-raised:var(--cream-200); --bg-sunk:var(--cream-300);
  --bg-brand:var(--cocoa); --bg-accent:var(--biscuit);
  --border:var(--cream-300); --border-strong:var(--cocoa-300); --border-brand:var(--cocoa);
  /* 字體 */
  --font-display:'Nunito','Noto Sans TC',system-ui,-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-display:clamp(40px,5.5vw,64px); --fs-h1:clamp(28px,3.4vw,40px); --fs-h2:clamp(22px,2.4vw,28px);
  --fs-h3:20px; --fs-h4:17px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:12px; --fs-micro:11px;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.55; --lh-loose:1.7;
  --tracking-tight:-0.01em; --tracking-wide:0.04em;
  /* 間距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  /* 形狀 */
  --radius-xs:4px; --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --bw-1:1px; --bw-2:1.5px; --bw-3:2.5px;
  --shadow-xs:0 1px 2px rgba(60,30,10,.05); --shadow-sm:0 2px 6px rgba(60,30,10,.08);
  --shadow-md:0 6px 16px rgba(60,30,10,.10); --shadow-lg:0 16px 32px rgba(60,30,10,.14);
  --shadow-inner:inset 0 1px 2px rgba(60,30,10,.06);
  /* 動畫 */
  --ease-standard:cubic-bezier(0.2,0.7,0.2,1); --ease-celebrate:cubic-bezier(0.34,1.56,0.64,1);
  --dur-tap:120ms; --dur-panel:220ms; --dur-page:320ms;
  /* 層級 */
  --z-sticky:100; --z-overlay:1000; --z-modal:1100; --z-toast:1200;
  /* 時段狀態色 */
  --slot-free:var(--paper); --slot-free-bd:var(--cream-300);
  --slot-booked:var(--biscuit-100); --slot-booked-bd:var(--biscuit-300);
  --slot-mine:var(--cocoa); --slot-mine-fg:var(--cream);
  --slot-past:var(--cream-200); --slot-today-bd:var(--biscuit);
  --slot-conflict:var(--danger-bg); --slot-conflict-bd:var(--danger);
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-display);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--fg-1);background:var(--bg-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:var(--fg-link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:var(--bw-3) solid var(--biscuit);outline-offset:2px}
.mono{font-family:var(--font-mono)}
.muted{color:var(--fg-3)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{width:min(1280px,calc(100% - var(--sp-8)));margin-inline:auto}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.grow{flex:1} .spacer{margin-left:auto}

/* ---------- app shell / header ---------- */
.app-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg-surface);
  border-bottom:var(--bw-1) solid var(--border);box-shadow:var(--shadow-xs)}
.app-header .bar{display:flex;align-items:center;gap:var(--sp-5);height:60px;
  width:min(1280px,calc(100% - var(--sp-8)));margin-inline:auto}
.brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:800;color:var(--ink);font-size:var(--fs-h4)}
.brand .logo{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg-brand);color:var(--cream);
  display:grid;place-items:center;font-size:18px}
.brand small{display:block;font-weight:600;font-size:var(--fs-micro);color:var(--fg-3)}
.app-nav{display:flex;gap:var(--sp-1)}
.app-nav a{padding:8px 14px;border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-body-sm);color:var(--fg-2)}
.app-nav a:hover{background:var(--bg-raised);text-decoration:none}
.app-nav a.on{background:var(--bg-brand);color:var(--fg-on-brand)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-weight:800;font-size:var(--fs-body-sm);line-height:1;cursor:pointer;
  padding:10px 16px;border-radius:var(--radius-pill);border:var(--bw-2) solid transparent;
  background:var(--bg-raised);color:var(--fg-1);transition:transform var(--dur-tap) var(--ease-standard),
  background var(--dur-tap),filter var(--dur-tap)}
.btn:hover{filter:brightness(.97);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--bg-brand);color:var(--fg-on-brand)}
.btn-accent{background:var(--bg-accent);color:var(--cocoa-800)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--fg-1)}
.btn-quiet{background:transparent;color:var(--fg-2)}
.btn-quiet:hover{background:var(--bg-raised)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger-soft{background:var(--danger-bg);color:var(--danger)}
.btn-lg{padding:14px 22px;font-size:var(--fs-body)}
.btn-sm{padding:7px 12px;font-size:var(--fs-caption)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- surfaces / cards ---------- */
.card{background:var(--bg-surface);border:var(--bw-1) solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.card-pad{padding:var(--sp-6)}
.panel{background:var(--bg-raised);border-radius:var(--radius-md);padding:var(--sp-5)}

/* ---------- pills / badges / legend ---------- */
.pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 12px;border-radius:var(--radius-pill);
  font-size:var(--fs-caption);font-weight:700;background:var(--bg-raised);color:var(--fg-2)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:var(--fs-micro);font-weight:800}
.badge-ok{background:var(--success-bg);color:var(--success)}
.badge-warn{background:var(--warn-bg);color:var(--biscuit-600)}
.badge-off{background:var(--cream-300);color:var(--ink-muted)}
.swatch{width:14px;height:14px;border-radius:var(--radius-xs);border:var(--bw-1) solid var(--border)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.field label{font-weight:700;font-size:var(--fs-body-sm);color:var(--fg-2)}
.input,.select,.textarea{width:100%;font:inherit;font-size:var(--fs-body);color:var(--fg-1);
  background:var(--bg-surface);border:var(--bw-2) solid var(--border-strong);border-radius:var(--radius-sm);
  padding:11px 13px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--biscuit);box-shadow:0 0 0 3px var(--biscuit-100)}
.textarea{resize:vertical;line-height:var(--lh-body)}
.hint{font-size:var(--fs-caption);color:var(--fg-3)}
.field-row{display:flex;gap:var(--sp-4)}
.field-row>*{flex:1}

/* ---------- tabs (頂部分頁:儀器/我的預約、後台分頁) ---------- */
.tabs{display:flex;gap:var(--sp-1);background:var(--bg-raised);padding:4px;border-radius:var(--radius-pill)}
.tabs a,.tabs button{padding:8px 16px;border-radius:var(--radius-pill);border:none;background:transparent;
  font-weight:700;font-size:var(--fs-body-sm);color:var(--fg-2);cursor:pointer}
.tabs a.on,.tabs button.on{background:var(--bg-surface);color:var(--ink);box-shadow:var(--shadow-xs)}
/* segmented (週/日 檢視切換) */
.seg{display:inline-flex;border:var(--bw-2) solid var(--border-strong);border-radius:var(--radius-pill);overflow:hidden}
.seg button{padding:8px 16px;border:none;background:transparent;font-weight:800;font-size:var(--fs-body-sm);
  color:var(--fg-2);cursor:pointer}
.seg button.on{background:var(--bg-brand);color:var(--fg-on-brand)}

/* ---------- table ---------- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.table th{text-align:left;font-size:var(--fs-caption);font-weight:800;color:var(--fg-3);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:10px 12px;border-bottom:var(--bw-2) solid var(--border)}
.table td{padding:12px;border-bottom:var(--bw-1) solid var(--border);vertical-align:middle}
.table tr:hover td{background:var(--bg-raised)}

/* ---------- instrument avatar (縮寫色塊) ---------- */
.iv{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;
  font-weight:800;font-size:var(--fs-caption);color:#fff;flex:none;letter-spacing:.02em}

/* ---------- modal / popup ---------- */
.overlay{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(42,26,16,.42);
  display:grid;place-items:center;padding:var(--sp-4);backdrop-filter:blur(2px)}
.modal{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:min(520px,100%);max-height:92vh;overflow:auto;animation:pop var(--dur-panel) var(--ease-celebrate)}
.modal-pad{padding:var(--sp-6)}
.modal h3{font-size:var(--fs-h3);font-weight:800}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- alert / inline notices ---------- */
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--radius-md);font-size:var(--fs-body-sm);font-weight:600}
.alert-danger{background:var(--danger-bg);color:var(--danger)}
.alert-ok{background:var(--success-bg);color:var(--success)}
.alert-info{background:var(--info-bg);color:var(--info)}
.alert-warn{background:var(--warn-bg);color:var(--biscuit-600)}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:var(--sp-10) var(--sp-6);color:var(--fg-3)}
.empty .ico{font-size:44px;margin-bottom:var(--sp-3)}

/* ---------- auth screens ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--sp-5)}
.auth-card{width:min(400px,100%);background:var(--bg-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:var(--sp-8) var(--sp-7)}
.auth-logo{width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-brand);color:var(--cream);
  display:grid;place-items:center;font-size:24px;margin:0 auto var(--sp-4)}

/* ---------- utilities ---------- */
.title-1{font-size:var(--fs-h1);font-weight:800;letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)}
.title-2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-snug)}
.title-3{font-size:var(--fs-h3);font-weight:800}
.section{padding-block:var(--sp-7)}
.divider{height:var(--bw-1);background:var(--border);border:0;margin-block:var(--sp-5)}
.hide{display:none!important}

/* ---------- calendar ---------- */
.cal-controls{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.cal-range{font-weight:800;color:var(--ink);font-size:var(--fs-h4);margin-left:var(--sp-2)}
.cal-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.cal-wrap{display:grid;grid-template-columns:1fr;gap:var(--sp-4);align-items:start}
.cal-wrap:has(.inst-list){grid-template-columns:240px minmax(0,1fr)}
.inst-list{padding:var(--sp-3);position:sticky;top:76px}
.inst-area{font-size:var(--fs-micro);font-weight:800;color:var(--fg-3);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:var(--sp-3) var(--sp-2) var(--sp-1)}
.inst-item{display:flex;align-items:center;gap:var(--sp-2);padding:8px;border-radius:var(--radius-sm);color:var(--fg-1)}
.inst-item:hover{background:var(--bg-raised);text-decoration:none}
.inst-item.on{background:var(--bg-raised);box-shadow:inset 3px 0 0 var(--cocoa)}
.inst-name{font-size:var(--fs-body-sm);font-weight:600;line-height:1.25}
.cal{padding:0;overflow-x:auto}
/* 欄頭與內容共用同一套欄寬:寬螢幕等分自適應,欄多/窄螢幕則整體橫向捲動且永遠對齊 */
.cal-head,.cal-body{display:grid;grid-template-columns:56px repeat(var(--cols,7),minmax(0,1fr));
  width:max(100%, calc(56px + var(--cols,7) * 116px))}
.cal-head{border-bottom:var(--bw-2) solid var(--border)}
.cal-body{position:relative}
.cal-colhead{padding:9px 6px;text-align:center;border-left:var(--bw-1) solid var(--border);overflow:hidden}
.cal-colhead.today{background:var(--biscuit-100)}
.ch-label{font-weight:800;font-size:var(--fs-body-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub{font-size:var(--fs-caption);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 日檢視:依區域分組 */
.cal-areahead{padding:5px 6px;text-align:center;font-size:var(--fs-micro);font-weight:800;color:var(--cocoa);
  background:var(--cream-200);border-left:var(--bw-2) solid var(--border-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.cal-head.grouped .cal-corner:first-child{background:var(--cream-200)}
.cal-colhead.area-start,.cal-col.area-start{border-left:var(--bw-2) solid var(--border-strong)}
.cal-times{position:relative;height:calc(var(--slots)*var(--cellh))}
.cal-time{position:absolute;right:6px;font-size:var(--fs-micro);color:var(--fg-3);transform:translateY(-50%)}
.cal-col{position:relative;height:calc(var(--slots)*var(--cellh));border-left:var(--bw-1) solid var(--border)}
.slot{position:absolute;left:0;right:0;height:var(--cellh);border-bottom:1px dashed var(--cream-300);cursor:pointer}
.slot:hover{background:var(--cream-200)}
.slot.past{background:var(--cream-200);cursor:default}
.slot.past:hover{background:var(--cream-200)}
.evt{position:absolute;left:3px;right:3px;border-radius:6px;padding:3px 7px;overflow:hidden;cursor:pointer;z-index:2;box-shadow:var(--shadow-xs)}
.evt-t{font-size:var(--fs-caption);font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt-s{font-size:var(--fs-micro);line-height:1.2;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.booked{background:var(--slot-booked);border:1px solid var(--slot-booked-bd);color:var(--cocoa-800)}
.evt.mine{background:var(--slot-mine);color:var(--cream)}
.evt.pastb{background:var(--cream-300);color:var(--ink-muted)}
/* my bookings */
.my-card{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);cursor:pointer;transition:transform var(--dur-tap) var(--ease-standard)}
.my-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.my-card .iv{width:40px;height:40px;font-size:var(--fs-body-sm)}
.my-title{font-weight:800;color:var(--ink);font-size:var(--fs-h4)}
.my-when{text-align:right;font-size:var(--fs-body-sm);font-weight:700;color:var(--fg-2);white-space:nowrap}

/* admin stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4)}
.stat-n{font-size:var(--fs-h1);font-weight:800;color:var(--ink);line-height:1.1;margin-top:4px}
.bar{height:8px;background:var(--bg-sunk);border-radius:var(--radius-pill);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--radius-pill)}
.backlink{color:var(--fg-link)}

/* modal form bits */
.modal .field-row{display:flex;gap:var(--sp-3)}
.modal .field-row>*{flex:1}
.conflict-box{background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-md);padding:var(--sp-4);font-size:var(--fs-body-sm);margin-bottom:var(--sp-4)}
.detail-row{display:flex;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:var(--fs-body-sm)}
.detail-row .k{color:var(--fg-3);min-width:64px;font-weight:700}
/* 預約人搜尋下拉 */
.ta-wrap{position:relative}
.typeahead{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;background:var(--bg-surface);
  border:var(--bw-2) solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  max-height:240px;overflow:auto}
.ta-item{padding:10px 13px;cursor:pointer;font-size:var(--fs-body-sm);border-bottom:var(--bw-1) solid var(--border)}
.ta-item:last-child{border-bottom:none}
.ta-item:hover{background:var(--bg-raised)}
.ta-item b{color:var(--ink);font-weight:700}
.ta-lab{color:var(--fg-3);font-size:var(--fs-caption);margin-left:4px}
.ta-empty{padding:12px 13px;color:var(--danger);font-size:var(--fs-body-sm);line-height:1.5}
/* 拖動選取時段 */
.cal-col{cursor:cell}
.drag-sel{position:absolute;left:2px;right:2px;background:rgba(208,138,74,.30);border:1.5px solid var(--biscuit);border-radius:6px;z-index:4;pointer-events:none}
/* 反灰欄位(一般使用者的預約人) */
.input:disabled,.select:disabled{background:var(--bg-raised);color:var(--fg-3);cursor:not-allowed;-webkit-text-fill-color:var(--fg-3);opacity:1}

@media (max-width:860px){
  .cal-wrap:has(.inst-list){grid-template-columns:1fr}
  .inst-list{position:static;display:flex;gap:var(--sp-2);overflow-x:auto;flex-wrap:nowrap;padding:var(--sp-2)}
  .inst-item{flex:0 0 auto}
  .inst-name{white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
  .inst-area{display:none}
  .wrap{width:calc(100% - var(--sp-5))}
  .app-nav{display:none}
  .field-row{flex-direction:column;gap:0}
}