/* UnicSeg interface: calm surfaces, legible telemetry, touch-first controls. */
:root { color-scheme: light; --ink:#182d32; --muted:#708084; --accent:#087f75; }
body { background:#f4f7f7!important; color:var(--ink); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; }
button,a,input,select,textarea { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:3px solid #16a394!important; outline-offset:3px; }
input:not([type=checkbox]),select,textarea { min-height:42px; border-color:#dce5e5!important; box-shadow:0 1px 2px #163c3403; }
input::placeholder { color:#8c9b9e; }
input[type=checkbox] { accent-color:var(--accent); }
h1,h2,h3 { letter-spacing:-.025em; }
.icon { width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.brand-symbol .icon { width:25px; height:25px; }
header { box-shadow:none!important; background:#ffffffed!important; backdrop-filter:blur(18px); }
header > div { max-width:none!important; }
header button[onclick="handleLogout()"] { border:0; color:#65767a; min-height:40px; }
header button[onclick="refreshData()"] { min-height:40px; }
main { max-width:1480px!important; padding-top:34px!important; }
.overview-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px!important; }
.eyebrow { font-size:10px!important; font-weight:700; letter-spacing:.16em; color:#829295!important; margin-bottom:10px; }
.overview-heading h1 { font-size:30px; font-weight:700; line-height:1.2; color:var(--ink); }
.overview-heading p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-top:10px; }
.primary-action { background:var(--accent); color:white; font-size:13px; font-weight:600; padding:12px 18px; border-radius:10px; white-space:nowrap; box-shadow:0 4px 8px #087f7514; }
.primary-action:hover { background:#066c64; }
#tab-dashboard > .grid > div { padding:23px; border-color:#e0e8e8; border-radius:14px; box-shadow:0 3px 4px #153b3002; }
#tab-dashboard > .grid > div > div:first-child > span:first-child { text-transform:none; font-size:12px; letter-spacing:0; font-weight:600; color:#677d80; }
#tab-dashboard > .grid > div > div:last-child { margin-top:20px; }
#tab-dashboard > .grid > div .font-extrabold { font-size:34px; font-weight:650; letter-spacing:-.04em; }
#tab-dashboard > .grid > div:nth-child(3) { background:#f0faf7; border-color:#d6ebe3; }
#tab-dashboard > .grid > div:nth-child(4) { background:#fffaf4; border-color:#efe4d5; }
#problemCard .text-red-600,#problemCard .text-red-700 { color:#ad7026; }
#problemCard .bg-red-500 { background:#d69842; }
#flaggedAlertBanner { background:#fff5ec; color:#8c541e; border-bottom:1px solid #f0e1ce; box-shadow:none; }
#flaggedAlertBanner .text-red-100 { color:#98774f; }
#flaggedAlertBanner button { box-shadow:none; background:transparent; color:#8c541e; }
#flaggedSection { background:#fffaf5; border-color:#eee1d0; }
#flaggedSection > div:first-child h3 { color:#885a2c; }
#flaggedList > div { border-color:#ece4da; box-shadow:none; }
#tab-dashboard > .overflow-hidden { border-color:#dfe7e7; border-radius:14px; }
thead tr { background:#f7f9f9!important; }
th { font-size:10px; letter-spacing:.065em; font-weight:600!important; color:#7d8b90; padding-top:15px!important; padding-bottom:15px!important; }
td { padding-top:18px!important; padding-bottom:18px!important; }
tbody tr:hover { background:#f8fbfa; }
#dashboardTableBody td:nth-child(4) { font-variant-numeric:tabular-nums; font-size:18px; letter-spacing:-.04em; }
#clientsList > div { box-shadow:none; border-color:#dfe7e7; }
#mobileBottomNav { display:none; }
.connection-notice { border:1px solid #ebcfa8; background:#fff5e6; color:#8c541e; padding:12px 16px; border-radius:10px; font-size:13px; }
#loginView { background:#f3f7f6; backdrop-filter:none; overflow:auto; }
#loginView > div { border:0; box-shadow:none; border-radius:20px; padding:40px; max-width:420px; }
#loginView h2 { font-size:27px; margin-top:36px; }
.login-story { display:none; }
#loginView label { text-transform:none; letter-spacing:0; font-size:13px; }
#loginView input { min-height:48px; background:#fcfdfd; }
#loginView .brand-symbol { box-shadow:none; }
body:has(#loginView:not(.hidden)) #mobileBottomNav { display:none!important; }
body:has([role=dialog]:not(.hidden)) { overflow:hidden; }
[role=dialog] > div { max-height:calc(100dvh - env(safe-area-inset-top) - 20px)!important; }
[role=dialog] button { min-height:42px; }
@media(min-width:1024px) {
 #appView { padding-left:224px; }
 header > div > div { height:78px!important; }
 header > div > div > div:first-child { position:fixed; left:27px; top:26px; z-index:45; }
 header > div > div > div:last-child { margin-left:auto; }
 header nav { position:fixed; top:0; bottom:0; left:0; width:224px; padding:142px 16px 24px; display:flex!important; flex-direction:column; gap:7px; background:#fff; border-right:1px solid #e1e9e8; z-index:40; margin:0!important; }
 header nav::before { content:'WORKSPACE'; position:absolute; top:112px; left:29px; color:#99a5a7; font-size:9px; letter-spacing:.16em; font-weight:650; }
 header nav::after { content:'UnicSeg Monitor\A Temperature intelligence'; white-space:pre; position:absolute; bottom:30px; left:29px; font-size:11px; line-height:1.9; color:#899a9c; }
 header nav button { margin:0!important; display:flex; align-items:center; gap:12px; text-align:left; padding:13px 14px!important; border:0!important; color:#687e81; font-size:13px!important; font-weight:500; }
 header nav button[aria-current=page] { color:#087f75!important; background:#e9f5f2!important; font-weight:650; }
 main { padding-left:36px!important; padding-right:36px!important; }
 #loginView { gap:8vw; padding:70px; background:linear-gradient(90deg,#103d3c 0%,#103d3c 50%,#f3f7f6 50%); }
 .login-story { display:block; width:420px; color:#fff; padding-right:40px; }
 .login-story .eyebrow { color:#80b8b0!important; }
 .login-story h2 { font-size:48px!important; line-height:1.12; font-weight:600; margin-bottom:24px; }
 .login-story p { color:#a6c8c2; font-size:15px; line-height:1.8; }
 .login-story .story-rule { width:50px; height:3px; background:#6cd3b2; margin:38px 0; }
 #loginView > div { background:transparent; }
}
@media(max-width:639px) {
 body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
 header { top:env(safe-area-inset-top)!important; }
 main { padding:24px 16px!important; }
 .overview-heading { align-items:flex-start; gap:12px; margin-bottom:22px!important; }
 .overview-heading h1 { font-size:24px; }
 .overview-heading p:not(.eyebrow) { font-size:12px; line-height:1.6; max-width:210px; }
 .overview-heading .primary-action { padding:10px 12px; font-size:11px; margin-top:24px; }
 .eyebrow { font-size:9px!important; }
 #tab-dashboard > .grid { gap:10px; }
 #tab-dashboard > .grid > div { padding:16px; }
 #tab-dashboard > .grid > div > div:last-child { margin-top:13px; }
 #tab-dashboard > .grid > div .font-extrabold { font-size:29px; }
 #mobileBottomNav { display:flex; padding-top:8px; box-shadow:0 -4px 20px #163e3006; }
 #mobileBottomNav button { min-height:52px; gap:4px; }
 #mobileBottomNav button[aria-current=page] { color:#087f75; background:#edf7f4; border-radius:12px; }
 #mobileBottomNav .icon { width:21px; height:21px; }
 #dashMobileCards { padding:8px; background:#f8faf9; }
 #dashMobileCards > div { background:#fff; border:1px solid #e4eae8; padding:16px; border-radius:12px; }
 #dashMobileCards button,#thermoMobileCards button { min-height:44px; }
 #loginView > div { padding:28px; }
 #tab-settings input,#tab-settings select { max-width:100%; }
 [role=dialog] > div { border-radius:22px 22px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(min-width:1024px) {
 header { backdrop-filter:none!important; }
 header > div > div > div:first-child { max-width:180px; }
 header > div > div > div:first-child p { font-size:10px; }
}
@media(max-width:359px) { .overview-heading { flex-wrap:wrap; } .overview-heading .primary-action { margin-top:0; } }
main { min-width:0; }
@media(min-width:640px) and (max-width:1023px) {
 header nav { display:none!important; }
 body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
 #mobileBottomNav { display:flex; padding-top:8px; }
 #mobileBottomNav button { min-height:52px; gap:4px; }
 #mobileBottomNav button[aria-current=page] { background:#edf7f4; border-radius:12px; }
 #tab-dashboard > .overflow-hidden > div:first-child { flex-wrap:wrap; }
}