*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-md)}
button,input,select{font:inherit;color:inherit}

#side{background:var(--surface);width:360px;display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0}
#head{padding:var(--space-3);border-bottom:1px solid var(--border);display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
#brand{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0}
#brand a{display:contents}
#brand .logo{height:60px;width:auto;flex:none;display:block}
#brand .dark-only{display:none}
:root[data-theme="dark"] #brand .light-only{display:none}
:root[data-theme="dark"] #brand .dark-only{display:block}
#brand small{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-xs)}

.field{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 8px;min-width:0}
.field:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#q{flex:1 1 100%}
#range{flex:1 1 100%;display:flex;gap:6px;align-items:center;color:var(--text-muted)}
#range[hidden]{display:none}
#range input{flex:1}

/* light / auto / dark switch */
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}
.seg button{background:var(--surface);border:0;padding:6px 9px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center}
.seg button+button{border-left:1px solid var(--border)}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--text-on-primary)}
.seg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#list{overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
#map{flex:1;min-width:0;background:var(--bg)}
.dev{padding:var(--space-3);border-bottom:1px solid var(--border);cursor:pointer}
.dev:hover{background:var(--surface-2)}
.dev.sel{background:var(--selected)}
.dev small{color:var(--text-muted);display:block;margin-top:2px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--off)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}
#status{padding:6px var(--space-3);color:var(--text-muted);font-size:var(--fs-xs);border-top:1px solid var(--border);font-family:var(--font-mono)}

/* leaflet skin */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.leaflet-popup-content{margin:var(--space-3) var(--space-4);font-size:var(--fs-sm)}
.leaflet-popup-content h3{margin:0 0 var(--space-2);font-size:var(--fs-lg);font-weight:600}
.leaflet-popup-content table td{padding:1px 8px 1px 0;vertical-align:top;word-break:break-all}
.leaflet-popup-content td:first-child{color:var(--text-muted);white-space:nowrap}
.leaflet-popup-content{max-width:78vw}
.leaflet-container a.leaflet-popup-close-button{color:var(--text-muted)}
.leaflet-tooltip{background:var(--surface);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow)}
.leaflet-bar a{background:var(--surface);color:var(--text);border-color:var(--border)}
.leaflet-bar a:hover{background:var(--surface-2)}
.leaflet-control-attribution{background:color-mix(in srgb,var(--surface) 80%,transparent)!important;color:var(--text-muted)!important}
.leaflet-control-attribution a{color:var(--primary)!important}

@media(max-width:700px){
 body{display:block;height:100vh;height:100dvh;overflow:hidden}
 #map{position:fixed;top:0;left:0;right:0;height:calc(100vh - var(--panel-h,50vh));height:calc(100dvh - var(--panel-h,50dvh))}
 #side{position:fixed;left:0;right:0;bottom:0;width:100%;height:var(--panel-h,50vh);height:var(--panel-h,50dvh);border-right:0;border-top:1px solid var(--border);border-radius:16px 16px 0 0;box-shadow:var(--shadow);z-index:1100;padding-bottom:env(safe-area-inset-bottom);transition:height .25s ease}
 body.dragging #side{transition:none}
 body.panel-full #map{visibility:hidden}
 #side{overflow:hidden}
 body.panel-mini #head{padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom));cursor:pointer}
 body.panel-mini #head>:not(#brand){display:none}
 body.panel-mini #brand{flex:1 1 100%;justify-content:center}
 body.panel-mini #list,body.panel-mini #eqwrap,body.panel-mini #status{display:none}
 #grip{display:flex}
 .dev{padding:14px var(--space-3)}
 #head{padding:var(--space-1) var(--space-3) var(--space-2);gap:6px}
 #brand{flex:1 1 126px}
 #brand .logo{height:42px}
 #brand small{display:none}
 #head .tabs{flex:1 1 100%}
 #hours{flex:0 0 96px}
 #q{flex:1 1 120px}
 #hist{display:none}
}

/* header controls */
#head .iconbtn{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 8px;cursor:pointer;color:var(--text-muted);display:flex}
#head .iconbtn.open{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary)}
#head .iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#head .iconbtn.open .shackle{transform:translateY(-2px)}
/* account button + dialog (static/account.js) */
#account{align-items:center;gap:6px;position:relative}
#head #account.open{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
#account .avatar{width:16px;height:16px;border-radius:50%;display:block}
#account .acct-label{display:none}
.acct-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--warn);border:2px solid var(--surface)}
.acct-perms{margin:var(--space-2) 0;padding-left:1.2em;font-size:var(--fs-sm)}
a.btn{text-decoration:none;color:inherit;display:inline-block}
.tabs{flex:1 1 100%}
.tabs button{flex:1;justify-content:center;font-weight:500}
[hidden]{display:none!important}

/* buttons and forms */
.btn{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn.small{padding:3px 9px;font-size:var(--fs-xs)}
.btn:disabled{opacity:.55;cursor:default}
label{display:block;font-size:var(--fs-sm);color:var(--text-muted);margin:var(--space-3) 0 0}
label .field,label select,label textarea{display:block;width:100%;margin-top:4px;color:var(--text)}
textarea.field{resize:vertical;font-family:var(--font-sans)}
.row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0}
.muted{color:var(--text-muted)}
.note{font-size:var(--fs-xs);margin:var(--space-2) 0}
.err{color:var(--danger);font-size:var(--fs-sm);min-height:1em;margin:var(--space-2) 0}
.tag{font-size:var(--fs-xs);background:var(--surface-2);color:var(--text-muted);border-radius:99px;padding:1px 8px;margin-left:4px;font-family:var(--font-mono)}

/* equipment list */
#eqwrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}
#eqbar{padding:var(--space-3);border-bottom:1px solid var(--border)}
.eq{display:flex;gap:var(--space-3);align-items:center}
.eq .eqinfo{min-width:0}.eq small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{width:52px;height:52px;border-radius:var(--radius-sm);object-fit:cover;flex:none;background:var(--surface-2)}
.empty{padding:var(--space-4)}
#hist{padding:4px var(--space-3) 8px;color:var(--text-muted);font-size:var(--fs-xs);font-family:var(--font-mono)}

/* detail sheet */
#sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow);overflow:auto;z-index:1200;padding:var(--space-4);padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom))}
.sheethead{display:flex;gap:var(--space-3);align-items:center}
.sheethead h2{margin:0;font-size:var(--fs-xl);font-weight:600;overflow:hidden;text-overflow:ellipsis}
#sheet h3{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-lg);font-weight:600}
#sheet h4{margin:0 0 var(--space-2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.stats div{background:var(--surface-2);border-radius:var(--radius);padding:var(--space-3)}
.stats span{display:block;font-size:var(--fs-xs);color:var(--text-muted)}
.stats b{display:block;font-size:var(--fs-md);margin-top:2px;overflow-wrap:anywhere}
.stats small{color:var(--text-muted);font-size:var(--fs-xs)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.card{background:var(--surface-2);border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin-top:var(--space-3)}
.notebody{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-2)}
.photos figure{margin:0}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);cursor:zoom-in;background:var(--surface-2)}
.photos figcaption{font-size:var(--fs-xs);color:var(--text-muted);margin:2px 0 4px}

/* dialogs */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-5);max-width:min(92vw,420px)}
dialog::backdrop{background:var(--overlay)}
dialog h3{margin:0 0 var(--space-2)}
#lightbox{max-width:94vw;padding:var(--space-3)}
#lightbox img{max-width:100%;max-height:78vh;display:block;border-radius:var(--radius-sm)}
#login .field{width:100%}

@media(max-width:700px){#sheet{width:100%;border-left:0}}

/* dark map: invert the light OSM tiles and rotate hue back so water stays blue */
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.75)}

/* devices with photos */
.dev.hasthumb{display:flex;gap:var(--space-3);align-items:center}
.dev.hasthumb .devtext{min-width:0}
.dev .thumb{width:48px;height:48px}
.popimg{display:block;width:100%;max-height:140px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--space-2)}
.tag{white-space:nowrap;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* age legend on the map */
.agelegend{background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font-size:var(--fs-xs);font-family:var(--font-mono);width:168px;box-shadow:var(--shadow)}
.agelegend .bar{height:8px;border-radius:4px;background:linear-gradient(to right,var(--age-fresh) 0%,var(--age-day) 33%,var(--age-old) 100%)}
.agelegend .labels{position:relative;height:14px;margin-top:3px}
.agelegend .labels span{position:absolute;top:0}
.agelegend .labels span:nth-child(1){left:0}
.agelegend .labels span:nth-child(2){left:33%;transform:translateX(-50%)}
.agelegend .labels span:nth-child(3){right:0}

/* drag handle for the phone list panel */
#grip{display:none;justify-content:center;align-items:center;height:26px;flex:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
#grip span{width:48px;height:5px;border-radius:3px;background:var(--text-muted);opacity:.55}
#head{touch-action:none}
#list,#eqlist{touch-action:pan-y}

/* device popup: photo, equipment and the setup note */
.popeq{margin:2px 0 var(--space-2)}
.popeq b{display:block;font-size:var(--fs-md)}
.popeq small{display:block;color:var(--text-muted)}
.popnote{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface-2);border-radius:var(--radius-sm);white-space:pre-wrap;overflow-wrap:anywhere;max-height:9em;overflow:auto}
.leaflet-popup-content{min-width:180px}

/* back button shown while a unit or equipment trail is selected */
.backbtn{display:block;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:99px;padding:8px 14px;font:inherit;font-weight:500;box-shadow:var(--shadow);margin-top:8px;cursor:pointer}
.backbtn:hover{background:var(--surface-2)}