/* Home Safe · admin portal (same look as the approved prototype/portal.html) */
:root { --pri:#1565C0; --pri-c:#E3F0FF; --sos:#D32F2F; --ok:#2E7D32; --warn:#E65100; --rt:#6A1B9A; --rt-c:#F3E5F5; --pin:#00897B; --pin-c:#E0F2F1; --bg:#F1F4F9; --ink:#1B2430; --mut:#5F6B7A; --line:#E1E7EF; --side:#0F2744; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
html[lang="en"] body { font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif; }
header.top { height:56px; display:flex; align-items:center; gap:12px; padding:0 18px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1100; }
.brand { font-weight:800; font-size:17px; white-space:nowrap; } .brand span { font-weight:500; color:var(--mut); margin-left:4px; font-size:14px; }
.fam { padding:4px 10px; background:var(--pri-c); color:var(--pri); border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; }
.mode-chip { padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; cursor:pointer; background:#F4F6F9; color:var(--mut); }
.mode-chip b.t { color:var(--ok); } .mode-chip b.r { color:var(--rt); } .mode-chip b.p { color:var(--pin); }
.spacer { flex:1; }
.user { font-size:14px; white-space:nowrap; }
.linkbtn { border:none; background:none; color:var(--pri); font:inherit; font-size:13px; cursor:pointer; padding:4px 6px; white-space:nowrap; }
.tg { display:inline-flex; }
.tg button { border:1px solid #C9D3E0; background:#fff; padding:5px 11px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; color:var(--ink); }
.tg button:first-child { border-radius:8px 0 0 8px; } .tg button:last-child { border-radius:0 8px 8px 0; border-left:none; }
.tg button.on { background:var(--pri); color:#fff; border-color:var(--pri); }
.shell { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:calc(100vh - 56px); }
nav.side { background:var(--side); color:#C8D6EA; padding:12px 10px; }
nav.side .sec { font-size:11.5px; letter-spacing:.5px; color:#7F97B8; padding:14px 12px 6px; }
nav.side a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#C8D6EA; text-decoration:none; font-size:14.5px; margin-bottom:2px; cursor:pointer; }
nav.side a:hover { background:rgba(255,255,255,.07); }
nav.side a.on { background:#1F4D86; color:#fff; font-weight:600; }
nav.side a.soon { opacity:.45; cursor:default; } nav.side a.soon:hover { background:none; }
nav.side .tag { margin-left:auto; font-size:10.5px; border:1px solid #4E6A90; border-radius:999px; padding:0 6px; color:#9FB3CF; }
main#page { padding:18px 22px 30px; min-width:0; }
.loading { color:var(--mut); padding:40px; text-align:center; }
.pg-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pg-head h2 { margin:0; font-size:21px; flex:1; white-space:nowrap; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.card h3 { margin:0 0 10px; font-size:15px; }
.split { display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; }
.split.r { grid-template-columns:minmax(0,1fr) 340px; }
.stack > * + * { margin-top:12px; }
.mapbox { height:calc(100vh - 150px); min-height:470px; border-radius:14px; overflow:hidden; border:1px solid var(--line); position:relative; z-index:0; background:#dfe6ee; }
.mapfail { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut); }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
.t th { text-align:left; font-weight:600; color:var(--mut); font-size:12.5px; padding:8px 10px; border-bottom:1px solid var(--line); background:#FAFBFD; white-space:nowrap; }
.t td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.t tr:last-child td { border-bottom:none; }
.t td.c, .t th.c { text-align:center; }
.pill { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.pill.ok { background:#E6F4EA; color:var(--ok); } .pill.warn { background:#FFF1E0; color:var(--warn); } .pill.bad { background:#FDECEC; color:var(--sos); } .pill.info { background:var(--pri-c); color:var(--pri); } .pill.gray { background:#EEF1F5; color:var(--mut); } .pill.rt { background:var(--rt-c); color:var(--rt); } .pill.pin { background:var(--pin-c); color:var(--pin); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:10px; padding:9px 14px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; background:var(--pri); color:#fff; white-space:nowrap; }
.btn.tonal { background:var(--pri-c); color:var(--pri); } .btn.out { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px #C9D3E0; } .btn.red { background:var(--sos); } .btn.sm { padding:6px 10px; font-size:13px; } .btn.block { width:100%; }
.btn.danger-out { background:#fff; color:var(--sos); box-shadow:inset 0 0 0 1.5px #F3B5B5; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.mut { color:var(--mut); font-size:13px; }
.row { display:flex; align-items:center; gap:10px; } .between { justify-content:space-between; } .wrap { flex-wrap:wrap; }
select, input[type=date], input[type=time], input[type=text], input[type=password], input[type=number], input[type=color] { font:inherit; font-size:14px; padding:8px 10px; border:1px solid #C9D3E0; border-radius:8px; background:#fff; color:var(--ink); }
input[type=color] { padding:2px; width:48px; height:38px; }
select:disabled, input:disabled { background:#F4F6F9; color:#9AA5B3; }
input[type=range] { accent-color:var(--pri); }
.av { width:38px; height:38px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.av.sm { width:28px; height:28px; font-size:13px; }
.mcard { display:flex; gap:12px; padding:11px; border-radius:12px; cursor:pointer; border:1px solid transparent; }
.mcard:hover { background:#F5F8FC; } .mcard.on { border-color:#BBD3F5; background:#F2F7FF; }
.seg { display:inline-flex; background:#EEF1F5; border-radius:10px; padding:3px; }
.seg button { border:none; background:none; border-radius:8px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer; color:var(--mut); white-space:nowrap; }
.seg button.on { background:#fff; color:var(--pri); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.seg button.on[data-v=track] { color:var(--ok); } .seg button.on[data-v=realtime] { color:var(--rt); }
.seg button:disabled { cursor:not-allowed; }
.chip { border:1px solid #C9D3E0; background:#fff; border-radius:999px; padding:3px 11px; font:inherit; font-size:12.5px; cursor:pointer; }
.chip.on { background:var(--pri); color:#fff; border-color:var(--pri); }
.field { display:block; margin-bottom:12px; } .field > span { display:block; font-size:12.5px; color:var(--mut); margin-bottom:4px; }
.field input[type=text], .field input[type=password], .field select { width:100%; }
.chk { display:inline-flex; align-items:center; gap:6px; margin-right:16px; font-size:14px; } .chk input { accent-color:var(--pri); width:16px; height:16px; }
.sw { position:relative; width:40px; height:23px; display:inline-block; vertical-align:middle; }
.sw input { opacity:0; width:0; height:0; } .sw i { position:absolute; inset:0; background:#C9D3E0; border-radius:999px; transition:.2s; cursor:pointer; }
.sw i::after { content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.2s; }
.sw input:checked + i { background:var(--pri); } .sw input:checked + i::after { left:20px; }
.sw.pin input:checked + i { background:var(--pin); }
.sw input:disabled + i { cursor:not-allowed; opacity:.6; }
.fmt { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.fmt label { border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; }
.fmt label.on { border-color:var(--pri); background:#F2F7FF; } .fmt input { display:none; }
.fmt b { display:block; font-size:15px; } .fmt span { font-size:12px; color:var(--mut); }
.range-grid { display:grid; grid-template-columns:auto auto auto; gap:8px 10px; align-items:center; justify-content:start; }
.range-grid .lbl { font-size:13px; color:var(--mut); }
.chunks { background:#F7F9FC; border-radius:10px; padding:10px 12px; font-size:13.5px; }
.chunks ol { margin:6px 0 0; padding-left:20px; } .chunks li { margin:2px 0; }
.yes { color:var(--ok); font-weight:700; } .no { color:#B0B8C4; }
.yes .mut, .no .mut { font-weight:400; }
.empty { text-align:center; padding:40px 20px; }
.empty .big { font-size:46px; } .empty h3 { font-size:19px; margin:8px 0 6px; } .empty p { color:var(--mut); margin:0 auto 16px; max-width:560px; line-height:1.7; }
.kv { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; } .kv b { display:block; font-size:18px; }
.note { font-size:12.5px; color:#6D5200; background:#FFF8E1; border:1px solid #FFE082; border-radius:10px; padding:8px 12px; }
.rt-note { font-size:13px; color:var(--rt); background:var(--rt-c); border-radius:10px; padding:8px 12px; }
.warnbox { font-size:13px; color:#8A3B00; background:#FFF4E5; border:1px solid #FFD8A8; border-radius:10px; padding:8px 12px; }
.inline-form { background:#F7F9FC; }
.inline-form td { padding:12px 10px; }
.hs-dot { border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; }
.leaflet-tooltip, .leaflet-popup-content { font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#1B2430; color:#fff; padding:10px 18px; border-radius:12px; font-size:14px; opacity:0; transition:.25s; pointer-events:none; z-index:3000; max-width:80vw; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err { background:#8E1B1B; }
@media (max-width: 1100px) { .fam, .mode-chip { display:none; } }

/* sign-in page */
.login-page #login { position:fixed; inset:0; background:linear-gradient(135deg,#0F2744,#1565C0); display:flex; align-items:center; justify-content:center; }
.login-page .box { background:#fff; border-radius:18px; padding:30px 32px; width:370px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-page .field input { width:100%; padding:11px 12px; }
.logo { width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg,#1E88E5,#0D47A1); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 10px; }
.login-title { text-align:center; font-size:22px; font-weight:800; }
.login-host { text-align:center; margin:4px 0 20px; }
.login-note { text-align:center; margin:14px 0 0; }
.login-lang { display:flex; justify-content:center; margin-top:12px; }
.login-error { background:#FDECEC; color:var(--sos); border-radius:10px; padding:8px 12px; font-size:13.5px; margin:-2px 0 12px; }
.login-page .btn.block { padding:12px; }