* { box-sizing: border-box; }
/* Inter font (variable) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root{
  --bg:#f9fafb; --card:#fff; --text:#1e1e2d; --muted:#6b7280; --line:#e5e7eb;
  --brand:#4f46e5; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --radius:14px; --shadow:0 2px 6px rgba(0,0,0,.05);
  --blue:#3b82f6; --indigo:#6366f1; --gray:#94a3b8;  --muted: #64748b;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{max-width:520px;margin:0 auto;text-align:center}
.auth-card .page-sub{color:var(--muted)}
.btn.google{justify-content:center;gap:10px;background:#fff;border-color:var(--line)}
.btn.google:hover{filter:brightness(.98)}
.btn.google .g-icon{display:inline-block}
.dashboard{display:flex;min-height:100vh}
.page-layout{display:flex;min-height:100vh}

/* Prevent layout shift before web component hydrates */
aqd-sidebar:not(.sidebar){
  display:block; width:264px; min-height:100vh; flex-shrink:0;
}

/* Sidebar */
.sidebar{
  width:264px;background:#fff;border-right:1px solid var(--line);
  padding:20px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;
  min-height:100vh;flex-shrink:0;
}
/* Prefer SF Pro Display for the sidebar (falls back gracefully) */
.sidebar, .Sidebar { font-family: var(--font-sans); }
.logo{font-weight:800;font-size:20px;color:var(--brand)}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{padding:10px 8px;border-radius:10px;color:#4b5563;cursor:pointer}
.menu li.active{color:var(--brand);background:#f4f5ff;font-weight:600}
.user-section{
  margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px dashed var(--line)
}
.avatar{width:40px;height:40px;background:#d1d5db;border-radius:50%}
.name{font-weight:700;font-size:14px}
.email{font-size:12px;color:#9ca3af}

/* devicesettings-like sidebar details */
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.brand-logo{height:28px;width:28px;display:grid;place-items:center;border-radius:8px;background:#111827;color:#fff;font-weight:700;box-shadow:var(--shadow)}
.brand h1{font-size:14px;margin:0;color:var(--muted)}
.brand small{color:#9ca3af;display:block;margin-top:2px}

.nav-section{margin-top:18px}
.nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin:16px 10px 8px}
.nav{list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 10px;margin:2px 6px;color:#111827;text-decoration:none;border-radius:10px}
.nav a:hover{background:#f9fafb}
.nav a.active{background:#eef2ff;color:#1d4ed8}

/* Username placement above Menu */
.user-top{margin:0 10px;color:var(--text)}
.user-top .name{font-weight:700;font-size:13px}

/* Thin divider and signout just below nav */
.nav-divider{height:1px;background:var(--line);margin:8px 10px 6px}
.signout{margin:0 10px}

.userbox{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line)}
.userbox .name{font-weight:700;font-size:13px;color:var(--text)}
.sidebar .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none;color:inherit}

/* Content */
.content{flex:1;padding:24px;overflow:auto}
.main-content{flex:1;padding:24px;overflow:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header h1{font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 600; /* Inter SemiBold 600 */
    letter-spacing: -0.02em;margin:0}
/* Global heading stack */
h1, h2, h3, h4, .page-title { font-family: var(--font-sans); }
.actions button{
  background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:16px
}
.hamburger{display:none;font-size:22px;line-height:1;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}

/* Cards */
.card{
  background:var(--card);
  border-radius:12px;
  padding:18px 18px 16px;
  border: 1px solid #e5e7eb;
}
.card:hover{ border-color:#d1d5db; }
.card[data-loading]{position:relative}
.card[data-loading]::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  /* Softer shimmer: lower contrast + slower speed */
  background:linear-gradient(90deg,
    rgba(243,244,246,.35) 20%,
    rgba(229,231,235,.45) 40%,
    rgba(243,244,246,.35) 60%
  );
  background-size:400% 100%;
  animation:aqd-shimmer 2.6s ease-in-out infinite;
  pointer-events:none
}
@keyframes aqd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .card[data-loading]::after{animation:none;background:rgba(243,244,246,.4)}
}
.card h3{font-size:15px;color:#000;margin:0 0 8px;font-weight:600}
.card p.meta { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.number{font-size:28px;font-weight:800;margin:0px 0 0px}
.unit{font-size:14px;color:#9ca3af;font-weight:200;margin-left:0px}
.sub{font-size:12px;color:#94a3b8; display:block; white-space: normal; overflow-wrap:anywhere;}
.card .small-change{display:none!important}
.pill{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.pill.warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
/* Trend tone handled by unified badge styles below */

/* Skeleton loading (used by metric cards) */
.skeleton{position:relative;overflow:hidden;border-radius:6px;background:#e5e7eb;height:12px}
.skeleton.lg{height:16px}
.skeleton.short{width:65%}
.skeleton::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:aqd-skel-shimmer 2s ease-in-out infinite}
@keyframes aqd-skel-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){
  .skeleton::before{animation:none}
}

/* Small spinner to pair with skeleton */
.spinner{width:44px;height:44px;display:grid;place-items:center}
.spinner svg{width:100%;height:100%}
.spinner .track{fill:none;stroke:#e6edf3;stroke-width:6}
.spinner .arc{fill:none;stroke:var(--indigo);stroke-width:6;stroke-linecap:round;stroke-dasharray:90 190;transform-origin:50% 50%;animation:aqd-spin 1.6s linear infinite}
@keyframes aqd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .spinner .arc{animation-duration:2.4s}
}

.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:20px 0
}

.grid{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(220px,auto);gap:20px
}
.grid .wide{grid-column:span 2}

/* Ensure custom elements behave as block-level containers */
aqd-trend-chart,
aqd-aqi-distribution,
aqd-device-status { display:block; width:100%; min-width:0; }

/* Stable chart height and sizing inside trend chart */
aqd-trend-chart .chart-wrap { height: calc(var(--trend-chart-height, 220px) * 1.5); }
aqd-trend-chart svg.chart { display:block; width:100%; height:100%; }
/* Trend chart uses large height by default */

.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.card-head-title{font-size: 12px; color: var(--muted); display:flex; justify-content:space-between; align-items:center; gap:6px;}
.card-actions{position:relative;}
.gear-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 6px;cursor:pointer;font-size:14px;line-height:1}
.device-menu{position:absolute;top:32px;right:0;background:var(--card);border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.08);min-width:220px;max-width:280px;max-height:260px;overflow:auto;z-index:30}
.device-menu .device-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 12px;background:none;border:0;text-align:left;cursor:pointer;font-size:13px}
.device-menu .device-item:hover{background:#f9fafb}
.device-menu .device-item.active{font-weight:700;background:#f3f4f6}
.device-menu .check{color:var(--brand);font-weight:700}
.device-menu .device-empty{padding:10px 12px;color:#9ca3af;font-size:13px}
.device-menu .menu-section{padding:6px 0}
.device-menu .menu-title{font-size:11px;color:#94a3b8;font-weight:700;padding:6px 12px;text-transform:uppercase;letter-spacing:.02em}
.device-menu .menu-divider{height:1px;background:#e5e7eb;margin:6px 0}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:#64748b}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px}
.dot-blue{background:var(--blue)} .dot-indigo{background:var(--indigo)} .dot-gray{background:var(--gray)}

.placeholder{
  margin-top:8px;background:#f1f5f9;border:1px dashed #cbd5e1;height:180px;
  display:grid;place-items:center;color:#94a3b8;font-size:14px
}

/* Readonly value (replaces readonly inputs) */
.readonly-value {
  padding: 6px 0;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

/* Inputs with leading Google UI icon (shared) */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.input-with-icon > .icon {
  position: static;
  width: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #6b7280;
  border: 0;
  pointer-events: none;
}
.input-with-icon > .icon.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  font-size: 20px;
}
.input-with-icon > input.input,
.input-with-icon > select.input,
.input-with-icon > textarea.input {
  padding-left: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  background: transparent;
  flex: 1 1 auto;
}
.mini-stats{display:flex;gap:18px;margin-top:10px;font-size:12px;color:#64748b}

/* Lists & Alerts */
.list{list-style:none;padding:0;margin:0;font-size:14px}
.list li{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9
}
.muted{color:#9ca3af}
.status{font-weight:700}
.status.ok{color:var(--ok)}
.status.warn{color:var(--warn)}
.status.bad{color:var(--bad)}

.alerts{display:flex;flex-direction:column;gap:10px}
.alert{display:flex;gap:10px;align-items:flex-start}
.badge{font-size:12px;font-weight:800;border-radius:8px;padding:4px 8px}
.badge.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.badge.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.badge.info{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.alert-body{font-size:14px}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.inline{display:inline}
.inline-flex{display:inline-flex}
.gap8{gap:8px}
.gap10{gap:10px}
.align-center{align-items:center}
.align-end{align-items:flex-end}
.ml6{margin-left:6px}
.mr6{margin-right:6px}
.full-span{grid-column:1/-1}
.hidden{display:none}
.minh-100{min-height:100px}
.minh-120{min-height:120px}
.divider{border:0;border-top:1px solid var(--line);margin:16px 0}
.flash{font-weight:700}
.flash.success{color:#065f46}
.flash.error{color:#991b1b}

/* Shared admin forms/grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center}
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* Metric card header: location above title */
.card-head-text{display:flex;flex-direction:column;gap:2px}
.card-head-location{font-size:11px;color:var(--muted)}

/* Simple key/value helper (used on backfill page) */
.kv{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}

/* Admin index grid */
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width: 900px){ .admin-grid{grid-template-columns:1fr} }
.mt12{margin-top:12px}
.justify-between{justify-content:space-between}
.flash{font-weight:700}
.flash.success{color:#065f46}
.flash.error{color:#991b1b}

/* Responsive */
@media (max-width:1200px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:1fr}
  .grid .wide{grid-column:span 1}
}
@media (max-width:768px){
  .dashboard, .page-layout{display:block}
  .hamburger{display:inline-block}
  .content, .main-content{padding:16px}

  .sidebar{
    position:fixed;inset:0 auto 0 0;width:78%;max-width:320px;transform:translateX(-100%);
    transition:transform .28s ease;z-index:40;box-shadow:6px 0 20px rgba(0,0,0,.06)
  }
  #nav-toggle:checked ~ .dashboard .sidebar,
  #nav-toggle:checked ~ .page-layout .sidebar,
  #nav-toggle:checked ~ .sidebar{transform:translateX(0)}
  #nav-toggle:checked ~ .dashboard .content::before,
  #nav-toggle:checked ~ .page-layout .main-content::before,
  #nav-toggle:checked ~ .main-content::before{
    content:"";position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(1px);z-index:30
  }

  .header h1{font-size:20px}
  .metrics{grid-template-columns:1fr}
  .list li{grid-template-columns:1fr auto}
  .actions button{padding:6px 8px}
}
/* Trend badges */
.trend {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 10px;
  border-radius:30px;
  font-size:12px;
  font-weight:700;
  border:0px solid transparent;
  line-height: 1;
}

.trend.up {
  color: #ea580c; /* orange-600 */
  background: #fff7ed; /* orange-50 */
  border: 0px solid #fed7aa; /* orange-200 */
}

.trend.down {
  color: #059669; /* green-600 */
  background: #ecfdf5; /* green-50 */
  border: 0px solid #a7f3d0; /* green-200 */
}

.trend.neutral {
  color: #5c8ad4; /* soft blue for stable */
  background: #e4effa; /* light blue */
  border: 0px solid #e5e7eb; /* gray-200 */
}

/* Minimal status chips for context below the number */
.status-row{display:flex;align-items:center;gap:8px;margin-top:4px;border:0px;flex-wrap:wrap}
.status-row .sub{flex-basis:100%;margin-top:4px;padding:8px 10px;border-radius:10px}

/* Lightweight utility classes (Tailwind-like) used on devices.php */
.flex{display:flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.text-right{text-align:right}
.text-xs{font-size:12px;line-height:1.25}
.text-sm{font-size:14px;line-height:1.4}
.text-base{font-size:16px;line-height:1.5}
.text-15{font-size:15px;line-height:1.4}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-normal{font-weight:400}
.text-black{color:#000}
.text-gray-500{color:#6b7280}
.text-gray-900{color:#111827}
.space-y-2 > * + *{margin-top:8px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.rounded-lg{border-radius:12px}
.bg-white{background:#fff}
.border{border:1px solid #e5e7eb}
.border-gray-200{border-color:#e5e7eb}
.p-5{padding:20px}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 10px;border-radius:30px;font-size:12px;font-weight:700;border:0px solid transparent}
.status-good{color:#16a34a;background:#ecfdf5;border:0px;border-color:#a7f3d0}
.status-moderate{color:#ca8a04;background:#fffbeb;border:0px;border-color:#fde68a}
.status-usg{color:#ea580c;background:#fff7ed;border:0px;border-color:#fed7aa}
.status-unhealthy{color:#dc2626;background:#fef2f2;border:0px;border-color:#fecaca}
.status-very-unhealthy{color:#7c3aed;background:#f5f3ff;border:0px;border-color:#ddd6fe}
.status-hazardous{color:#7f1d1d;background:#fee2e2;border:0px;border-color:#fecaca}
.status-neutral{color:#64748b;background:#f3f4f6;border:0px;}
.status-warning { background: #ffedd5; color:#ea580c; }

/* Grey-out only for explicit no-data or error states */
/* No-data: when chip is explicitly neutral */
.card:has(.status-chip.status-neutral) .number,
.card:has(.status-chip.status-neutral) .unit { color:#94a3b8; }
.card:has(.status-chip.status-neutral) .status-row .sub { background:#f3f4f6; color:#64748b; }
/* Error: when no status-row is present in the card */
.card:not(:has(.status-row)) .number,
.card:not(:has(.status-row)) .unit { color:#94a3b8; }
.card:not(:has(.status-row)) .sub { color:#64748b; }

/* ------------------------------------------------------------
   Legacy variable aliases and shared UI patterns (unifies pages)
------------------------------------------------------------- */
/* Variable aliases so older pages can rely on index theme */
:root{
  --bg-subtle: var(--bg);
  --primary: var(--brand);
  --border: var(--line);
  --muted-2: #9ca3af;
  --ok-bg: #ecfdf5; --ok-text:#065f46; --ok-border:#a7f3d0;
  --err-bg:#fef2f2; --err-text:#991b1b; --err-border:#fecaca;
}

/* Topbar + app grid used on devices/devicesettings */
.topbar{display:none;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.app > #sidebar{grid-column:1;grid-row:1}
.app > .content{grid-column:2;grid-row:1}
/* Ensure the sidebar overlay never becomes a grid item */
[data-sidebar-overlay]{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:30}
.breadcrumbs{color:var(--muted);font-size:13px}
.page-title{font-size:28px;font-weight:600;margin:4px 0 10px}
.page-sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Devices header: put toolbar on the right, keep mobile-friendly */
.devices-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.devices-header .toolbar{margin-bottom:0; margin-left:auto}
@media (max-width:768px){
  .devices-header{flex-wrap:wrap}
  .devices-header .toolbar{width:100%; justify-content:flex-start; margin-top:8px}
  .devices-header #search{width:100%}
}
.input{border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  background:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none;color:inherit}
.btn.primary{background:#111827;color:#fff;border-color:#111827}
.btn.success{background:#10b981;color:#fff;border-color:#10b981}
.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}

/* Simple card grid + key/value layout */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px;font-size:14px}
.kv div:first-child{color:var(--muted)}

/* Status chips */
.status{display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);font-weight:700}
.status.online{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border)}
.status.offline{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border)}

/* Match devices page status pill colors on devicesettings */
.devicesettings .status.online{ background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.devicesettings .status.offline{ background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }

/* Settings page patterns */
.tabs{display:flex;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px;position:sticky;top:64px;z-index:20}
.tab{border:1px solid transparent;padding:8px 12px;border-radius:10px;font-size:14px;color:var(--muted);background:transparent;cursor:pointer}
.tab.active{color:#111827;background:var(--bg);border-color:var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:14px}
.field label { font-size: 13px; color: var(--muted); }
.help{font-size:12px;color:var(--muted-2);margin-top:6px}
.help-toggle { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px; border:1px solid var(--border); background: var(--bg-subtle); color: var(--muted); font-size:12px; line-height:1; cursor:pointer; padding:0; }
.help-toggle:hover { background:#eef2ff; color:#1d4ed8; border-color:#c7d2fe; }
.help-blurb { display:none; font-size:12px; color: var(--muted-2); margin-top: 6px; }
.help-blurb.open { display:block; }

/* Simple switch */
.switch{--w:40px;--h:22px;position:relative;width:var(--w);height:var(--h);display:inline-block}
.switch input{display:none}
.slider{position:absolute;cursor:pointer;inset:0;background:#e5e7eb;border-radius:999px;transition:background .2s ease}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s ease}
.switch input:checked + .slider{background:#10b981}
.switch input:checked + .slider:before{transform:translateX(18px)}

/* Health page helpers */
.inner-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;padding:0 0.5rem}
.controls,.share-widget{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.controls select,.share-widget input{padding:10px 12px;font-size:1rem;border-radius:8px;border:1px solid var(--line);background:#fff}
.share-widget button{background:var(--brand);color:#fff;border:1px solid var(--brand);cursor:pointer;padding:10px 12px;border-radius:8px}
.share-widget button:hover{filter:brightness(.95)}
.pm25-display{text-align:center}
.pm25-value{font-size:3rem;font-weight:700;color:var(--brand)}
.pm25-unit{font-size:1.2rem;margin-left:.5rem;color:#6b7280}
.timestamp{margin-top:1rem;color:#6b7280}
.warning-message{background:#fffbeb;color:#92400e;border:1px solid #fde68a;padding:1rem;border-radius:10px;text-align:center;font-weight:600;display:none}
.responsive-table{width:100%;overflow-x:auto}
.responsive-table table{width:100%;border-collapse:collapse}
.responsive-table th,.responsive-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.responsive-table thead th{background:#f1f5f9;font-weight:600}
.responsive-table tbody tr:last-child td{border-bottom:none}
.responsive-table tbody tr:hover{background:#f8fafc}
.highlight{background:#e6f7ff !important;font-weight:600}

/* Mobile adjustments used by multiple pages */
@media (max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:280px;transform:translateX(-110%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .topbar{display:flex}
  .topbar .hamburger{display:inline-block}
  .content{padding:18px 16px 80px}
  /* In single-column mode, force content to the first track */
  .app > .content{grid-column:1;grid-row:1}
  /* Show overlay only when sidebar is open on small screens */
  .sidebar.open + [data-sidebar-overlay]{display:block}
  .cards{grid-template-columns:1fr}
  .grid-2 { grid-template-columns: 1fr; }
   .field { grid-template-columns: 1fr; }
      /* ensure sticky tabs clear the mobile topbar */
   .tabs { top: 56px; }
}
@media (max-width:767px){
  .inner-container{padding:.5em}
  .pm25-value{font-size:2.5rem}
  .responsive-table table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}
  .responsive-table thead tr{position:absolute;top:-9999px;left:-9999px}
  .responsive-table tr{border:1px solid var(--line);border-radius:8px;margin-bottom:1rem;padding:1rem}
  .responsive-table td{border:none;border-bottom:1px solid var(--line);position:relative;padding-left:50%}
  .responsive-table td:before{position:absolute;left:1rem;top:.75rem;white-space:nowrap;content:attr(data-label);font-weight:700;color:#64748b}
}
/* Self-hosted variable font: Inter (primary font across app) */
/* Inter variable TTF (primary) */
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
/* Static fallbacks for key weights if variable fonts are unsupported */
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter_24pt-ExtraLight.ttf') format('truetype');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter_24pt-ExtraLightItalic.ttf') format('truetype');
  font-weight:200;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter_24pt-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src: url('/fonts/Inter_24pt-SemiBoldItalic.ttf') format('truetype');
  font-weight:600;
  font-style:italic;
  font-display:swap;
}
/* Auth page small-screen padding */
@media (max-width:768px){
  .auth-shell{padding:16px}
}

/* Devices page-specific tweaks */
#deviceGrid{ gap:20px; }
#deviceGrid .card{ width:100%; justify-self:stretch;  }
#deviceGrid .card .card-actions .btn{
  font-weight:400; /* lighter for crisper rendering */
  font-size:13px;  /* smaller label size */
  line-height:1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-right:35px;
}
#deviceGrid .status{ border:0; border-radius:9999px; padding:2px 8px; font-weight:600; }
#deviceGrid .status.online{ background:#d1fae5; color:#065f46; }
#deviceGrid .status.offline{ background:#fee2e2; color:#7f1d1d; }