:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.page-title { margin: 8px 0 16px; font-size: 1.6rem; }

/* === Dashboard two-column layout === */
.dashboard { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.maincol { min-width: 0; }
.sidebar { position: relative; min-width: 280px; }

/* Responsive: stack on narrow screens */
@media (max-width: 980px){
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
}

/* Cards */
.card { background: #fff; color: #111; border: 1px solid #ddd; border-radius: 12px; margin: 12px 0; text-decoration: none; }
@media (prefers-color-scheme: dark){
  .card { background: #181a1b; color: #e6e6e6; border-color: #333; }
}
.card > h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #ddd; font-size: 1.2rem; }
@media (prefers-color-scheme: dark){
  .card > h2 { border-bottom-color: #333; }
}
.card-body { padding: 12px 16px; }

/* Make entire card clickable for chart cards */
.link-card:hover { outline: 2px solid rgba(106,166,255,.35); outline-offset: 2px; }

/* Key/Value rows */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; padding: 4px 0; }
.k { opacity: 0.85; }
.v { word-break: break-word; }

/* Lists inside cards ONLY (prevent nav styling regressions) */
.card ul, .results-list, .appliance-list { list-style: none; margin: 0; padding: 0; }
.card ul li, .results-list li, .appliance-list li { padding: 6px 0; border-bottom: 1px dashed #ccc; }
@media (prefers-color-scheme: dark){
  .card ul li, .results-list li, .appliance-list li { border-bottom-color: #444; }
}

/* Buttons */
.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid #999; background: #f7f7f7; cursor: pointer; color: inherit; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-color-scheme: dark){
  .btn { background: #252728; border-color: #666; color: #e6e6e6; }
}
.btn-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Filters */
.filter-form { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:12px; }
.filter-form label { display:flex; flex-direction:column; font-size:.9rem; }
.filter-form input, .filter-form select { padding:4px 6px; border-radius:6px; border:1px solid #aaa; }

/* Sidebar welcome (non-owner) */
.welcome-card { position: sticky; top: 0; z-index: 0; }
.welcome-body { display:flex; justify-content:center; align-items:center; min-height: 98px; }
.welcome-lines { text-align:center; }
.muted { opacity: 0.8; font-size: 0.92rem; }

/* Donut charts */
.chart-row { display:flex; align-items:center; gap: 12px; }
.donut { width: 140px; height: 140px; }
.legend { list-style:none; margin:0; padding:0; }
.legend li { display:flex; align-items:center; gap:8px; padding:3px 0; border-bottom: none; }
.swatch { display:inline-block; width:12px; height:12px; border-radius: 2px; border:1px solid rgba(0,0,0,.2); }
.sw-online { background:#2aa84a; }
.sw-offline { background:#999; }
.sw-error { background:#d13b3b; }
.sw-success { background:#2aa84a; }
.sw-fail { background:#d13b3b; }
.sw-unknown { background:#b0a56b; }