/* FamilySafe · 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 .tag { margin-left:auto; font-size:10.5px; border:1px solid #4E6A90; border-radius:999px; padding:0 6px; color:#9FB3CF; }
nav.side .tag.red { background:var(--sos); border-color:var(--sos); color:#fff; font-weight:700; }
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:var(--side,300px) minmax(0,1fr); gap:14px; }
.split.r { grid-template-columns:minmax(0,1fr) var(--side,340px); }
/* drag the line between the panel and the map to make the panel wider (owner 2026-09-23); double-click puts it back */
.split.grip { grid-template-columns:var(--side,300px) 16px minmax(0,1fr); gap:0; }
.split.grip.r { grid-template-columns:minmax(0,1fr) 16px var(--side,340px); }
.grip { align-self:stretch; position:relative; cursor:col-resize; touch-action:none; }
.grip::before { content:''; position:absolute; top:10px; bottom:10px; left:6px; width:4px; border-radius:3px; background:var(--line); transition:background .12s; }
.grip:hover::before, .grip.on::before { background:var(--brand); }
.split.grip > * { min-width:0; }
@media (max-width: 860px) {
  .split, .split.r, .split.grip, .split.grip.r { grid-template-columns:minmax(0,1fr); gap:14px; }
  .grip { display:none; }
}
body.dragging { cursor:col-resize; user-select:none; }
body.dragging .leaflet-container, body.dragging iframe { pointer-events:none; }
.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; opacity:.4; background:none; box-shadow:none; }
.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); }
/* member buttons instead of a drop-down (owner 2026-09-23) */
.who-row { display:inline-flex; gap:6px; flex-wrap:wrap; }
.who-b { padding:5px 12px; font-size:13px; }
.who-b .dotc { box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.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; }
.fs-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; } }

/* SOS bar (every page), SOS log, geofence editor */
#sosbar { background:var(--sos); color:#fff; padding:8px 18px; position:sticky; top:56px; z-index:1090; animation:sospulse 1.4s ease-in-out infinite; font-size:14.5px; }
#sosbar .row + .row { margin-top:6px; }
#sosbar .btn { background:#fff; color:var(--sos); }
#sosbar .btn.out { background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.75); text-decoration:none; }
@keyframes sospulse { 50% { background:#9A1B1B; } }
#sosbar.awaiting { background:var(--warn); animation:none; }
#sosbar.awaiting .btn { color:var(--warn); }
.sos-card { border:2px solid var(--sos); background:#FFF5F5; margin-bottom:14px; }
.sos-card.awaiting { border-color:var(--warn); background:#FFF8EC; }
.sos-card a.btn { text-decoration:none; }
.s-msgs { margin-top:8px; padding:8px 12px; background:#fff; border-radius:10px; font-size:14px; } .s-msgs div + div { margin-top:4px; }
.kvrow { display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.kvrow span { color:var(--mut); width:80px; flex:none; } .kvrow b { font-weight:600; min-width:0; overflow-wrap:anywhere; }
tr.clk { cursor:pointer; } tr.clk:hover td { background:#F5F8FC; } tr.clk.on td { background:#EAF2FF; }
.dotc { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; flex:none; }
.dotc.lg { width:16px; height:16px; margin:3px 0 0; }
.swatch { width:30px; height:30px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #C9D3E0; cursor:pointer; padding:0; }
.swatch.on { box-shadow:0 0 0 3px var(--ink); }
.mapbox.picking, .mapbox.picking.leaflet-grab { cursor:crosshair; }
/* 0.9.1: when a geofence counts — a time limit and a weekly timetable, both at once (owner 2026-09-28) */
.seg.fe-lim { flex-wrap:wrap; } /* six choices never fit one line in the narrow fence panel */
.fe-when { background:#F7F9FC; border-radius:10px; padding:10px 12px; margin-top:8px; }
.fe-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:8px; }
.fe-days .dayck { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; border:1px solid #C9D3E0; border-radius:9px; background:#fff; font-size:12.5px; cursor:pointer; overflow:hidden; }
.fe-days .dayck.on { border-color:var(--pri); background:var(--pri-c); color:var(--pri); font-weight:700; }
.fe-days .dayck input { accent-color:var(--pri); width:15px; height:15px; margin:0; cursor:pointer; }
.fe-sctxt, .fe-lend { font-size:13px; color:var(--mut); }

/* 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; }

/* Track player (2026-09-19): the slider is the day's clock, its bar coloured by speed (set inline from the track) */
.pb-slider { -webkit-appearance:none; appearance:none; height:12px; border-radius:6px; background:#CFD8DC; outline:none; margin:0; cursor:pointer; }
.pb-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.pb-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.pb-slider::-moz-range-track { background:transparent; }
.pb-slider:focus-visible { box-shadow:0 0 0 3px var(--pri-c); }
.pb-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-size:12px; color:var(--mut); }
.pb-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
/* one bar per member on the shared timeline (owner 2026-09-23): where each of them was moving, and how fast */
.tlist { margin-top:8px; }
.tlrow { display:grid; grid-template-columns:minmax(64px,auto) minmax(0,1fr) minmax(74px,auto); align-items:center; gap:8px; margin-top:5px; font-size:12.5px; }
.tlname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl { height:8px; border-radius:4px; background:#CFD8DC; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.tlnow { text-align:right; white-space:nowrap; }
.pb-pairs > .row + .row { margin-top:5px; }

/* 0.7.0: where a member is, and the options behind their name (copy coordinates, map apps) */
.mname { cursor:pointer; border-bottom:1px dashed #9AA5B3; }
.mname:hover { color:var(--pri); }
.mplace { margin-top:3px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-box { margin-top:6px; padding:8px; border-radius:10px; background:#F1F4F9; }
.pl-box code { font-size:12.5px; user-select:all; }

/* 0.8.0: who the family map shows, the day picker (today ringed, days with a track in green), a member's latest activity */
.mcard.off { opacity:.5; }
.ell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calpop { position:absolute; z-index:2000; width:298px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(15,39,68,.2); padding:10px 12px; }
.calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:6px; }
.calgrid.wk span { text-align:center; font-size:12px; color:var(--mut); }
.calgrid button { aspect-ratio:1; border:none; border-radius:50%; background:none; font:inherit; font-size:13.5px; cursor:pointer; color:var(--mut); padding:0; }
.calgrid button:hover:not(:disabled) { background:#EEF3FA; }
.calgrid button.has { background:#E6F4EA; color:var(--ok); font-weight:700; }
.calgrid button.today { box-shadow:inset 0 0 0 2px var(--pri); font-weight:700; }
.calgrid button.sel { background:var(--pri); color:#fff; }
.calgrid button:disabled { color:#C9D0DA; cursor:default; }
.calkey { display:inline-block; width:11px; height:11px; border-radius:50%; margin:0 4px 0 10px; vertical-align:-1px; }
.calkey.has { background:#E6F4EA; box-shadow:inset 0 0 0 1px var(--ok); margin-left:0; } .calkey.today { box-shadow:inset 0 0 0 2px var(--pri); }
.feed .day { font-size:12.5px; font-weight:700; color:var(--mut); margin:12px 0 2px; } .feed .day:first-child { margin-top:0; }
.feed .it { display:flex; gap:10px; padding:4px 0; font-size:14px; line-height:1.45; }
.feed .it time { width:44px; flex:none; color:var(--mut); font-size:13px; padding-top:1px; }
.feed .it .d { color:var(--mut); font-size:12.5px; }
.feed .it.warn .tt { color:var(--warn); font-weight:600; } .feed .it.bad .tt { color:var(--sos); font-weight:600; }

/* 0.8.1: full-screen button on every map (browser full screen; on phones without it the map fills the window) */
.leaflet-bar a.fs-full { display:flex; align-items:center; justify-content:center; color:#37474F; }
.mapbox:fullscreen { width:100vw; height:100vh; border:0; border-radius:0; }
.mapbox.fs-on { position:fixed; inset:0; z-index:2500; height:auto !important; min-height:0 !important; border:0; border-radius:0; }