/* 系統管理 Admin（鋼灰） — App 品牌色（其餘為三 App 共用設計）*/
:root{
  --brand:#37485C; --brand-d:#283645; --brand-tint:#E3E9EF; --wrap-max:980px;
}

/* ============================================================
   人力招喚器 — 共用設計語言：白色鋼彈（Gundam）HUD 風格
   白色裝甲面板 + 分割線 + 切角(clip-path) + RX-78 紅/藍/黃點綴
   三個 App 共用此設計；僅最上方 :root 的 --brand 因 App 而異。
   ============================================================ */
:root{
  /* 白色裝甲面板色盤（共用） */
  --bg:#E8ECF1;
  --grid:rgba(38,64,108,.055);
  --surface:#FFFFFF;          /* 主裝甲：白 */
  --surface-2:#F1F4F8;        /* 次要面板：淺灰 */
  --line:#CDD6E1;             /* 分割線 / 邊框 */
  --line-2:#E4E9EF;
  --ink:#18222E;              /* 主文字 */
  --muted:#5C6B7A;            /* 次要文字 */

  /* RX-78 點綴三色（共用語意：一般=藍 / 急件=黃 / 非常急=紅） */
  --c-blue:#1C5FC4;   --c-blue-t:#E7F0FF;   --c-blue-d:#143F8A;
  --c-amber:#C98A00;  --c-amber-t:#FFF2CF;  --c-amber-d:#7E5600;
  --c-red:#D12D2D;    --c-red-t:#FBE5E5;    --c-red-d:#9A1B1B;
  --c-green:#1E8E54;  --c-green-t:#E3F5EB;  --c-green-d:#15633B;

  --hud: ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
  --sans: system-ui,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  --display:"Bahnschrift","DIN Alternate","Roboto Condensed",var(--hud);

  --cut:13px;
  --chamfer:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  --cut-s:8px;
  --chamfer-s:polygon(0 0,calc(100% - var(--cut-s)) 0,100% var(--cut-s),100% 100%,var(--cut-s) 100%,0 calc(100% - var(--cut-s)));
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/28px 28px,
    radial-gradient(130% 90% at 50% -10%,#FFFFFF 0%,var(--bg) 62%);
  background-attachment:fixed;
}

/* —— 系統列 / 抬頭 —— */
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px 12px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--c-amber) 55%,var(--c-red) 100%);}
header h1{margin:0;font-family:var(--display);font-size:1.06rem;letter-spacing:.04em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.who{margin-top:3px;font-family:var(--hud);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);}

/* —— 內容容器 —— */
.wrap{max-width:var(--wrap-max,560px);margin:0 auto;padding:16px 16px 96px;}

/* —— 按鈕（切角裝甲塊）—— */
button{
  font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; border:0; color:#fff; background:var(--brand);
  padding:12px 18px; clip-path:var(--chamfer-s); transition:background .12s,transform .06s;
}
button:hover{background:var(--brand-d)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default}
button.ghost{background:var(--surface);color:var(--brand);border:1.5px solid var(--line)}
button.ghost:hover{background:var(--surface-2)}
button.sm{padding:7px 12px;font-size:.74rem}

/* —— 輸入（保持矩形以利可讀性 + 對焦框）—— */
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:0;
  padding:11px 12px; margin-top:6px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);}
label{display:block;margin-top:14px;font-family:var(--hud);font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}

/* —— 裝甲面板卡片（切角 + 左側色條）—— */
.card{
  position:relative; background:var(--surface); margin-bottom:14px;
  padding:15px 16px 15px 19px; clip-path:var(--chamfer);
  box-shadow:0 1px 2px rgba(24,44,82,.08),0 12px 26px -14px rgba(24,44,82,.22);
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--bar,var(--line));}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.meta{font-size:.85rem;color:var(--muted);line-height:1.75;margin-top:8px}
.big{font-family:var(--hud);font-weight:700;font-size:1.5rem;color:var(--brand);letter-spacing:.01em}
.muted{color:var(--muted);font-size:.85rem}
.empty{text-align:center;color:var(--muted);font-family:var(--hud);
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;padding:36px 12px}

/* —— 分頁（區段控制）—— */
.tabs{display:flex;gap:8px;margin:14px 0 16px;flex-wrap:wrap}
.tabs button{flex:1;background:var(--surface);color:var(--muted);border:1.5px solid var(--line)}
.tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* —— 狀態晶片（座艙讀數）—— */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--hud);font-size:.7rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;
  clip-path:var(--chamfer-s);background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill::before{content:"";width:6px;height:6px;background:currentColor;display:inline-block}
.s-待簽收{background:var(--c-amber-t);color:var(--c-amber-d);border-color:#E7C879}
.s-已簽收{background:var(--c-blue-t);color:var(--c-blue-d);border-color:#A9C6F2}
.s-已取消,.s-已關閉{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* —— 緊急程度（一般=藍 / 急件=黃 / 非常急=紅）—— */
.u-一般,.u-急件,.u-非常急{display:inline-block;font-family:var(--hud);font-weight:700;
  font-size:.76rem;letter-spacing:.04em;padding:2px 8px;clip-path:var(--chamfer-s)}
.u-一般{background:var(--c-blue-t);color:var(--c-blue-d)}
.u-急件{background:var(--c-amber-t);color:var(--c-amber-d)}
.u-非常急{background:var(--c-red);color:#fff}

.elapsed{font-family:var(--hud);font-weight:700;color:var(--brand);letter-spacing:.01em}

/* —— 回饋區塊 —— */
.ack{background:var(--surface-2);border-left:3px solid var(--brand);padding:10px 12px;
  margin-top:10px;font-size:.84rem;line-height:1.75;clip-path:var(--chamfer-s)}
.err{background:var(--c-red-t);color:var(--c-red-d);border-left:3px solid var(--c-red);
  padding:10px 12px;margin-top:10px;font-size:.88rem;clip-path:var(--chamfer-s)}
.ok-box{background:var(--c-green-t);color:var(--c-green-d);border-left:3px solid var(--c-green);
  padding:10px 12px;margin-top:10px;font-size:.88rem;clip-path:var(--chamfer-s)}

/* —— 登入面板 —— */
.login{max-width:380px;margin:9vh auto 0;--bar:var(--brand)}
.login::before{background:var(--brand)}
.login h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;text-align:center}

/* —— ws 連線指示：座艙「SYSTEM ONLINE」讀數 —— */
.wsdot{display:inline-flex;align-items:center;gap:6px;font-family:var(--hud);font-size:.58rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:3px 8px;border:1px solid var(--line);background:var(--surface-2);
  clip-path:var(--chamfer-s);vertical-align:middle}
.wsdot::before{content:"";width:7px;height:7px;border-radius:50%;background:#9AA4B0}
.wsdot::after{content:"連線中…"}
.wsdot.on{color:var(--c-green-d);border-color:#9AD9B5;background:var(--c-green-t)}
.wsdot.on::before{background:var(--c-green);box-shadow:0 0 0 3px rgba(30,142,84,.22)}
.wsdot.on::after{content:"SYSTEM ONLINE"}
.wsdot.off{color:var(--c-red-d);border-color:#E8B4B4;background:var(--c-red-t)}
.wsdot.off::before{background:var(--c-red)}
.wsdot.off::after{content:"OFFLINE"}

/* —— 表格（管理後台）—— */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
th{position:sticky;top:0;font-family:var(--hud);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);border-bottom:1.5px solid var(--line)}
tbody tr:hover{background:var(--surface-2)}
.inactive{opacity:.5}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;margin:0}

@media (max-width:480px){
  header h1{font-size:.96rem}
  .wsdot{font-size:.54rem;letter-spacing:.08em}
}