:root{ --bg:#0b1020; --fg:#eaf2ff; --muted:#97a9cf; --card:#0f1630; --border:#2a375f; --accent:#79a8ff; --ok:#55d38a; --warn:#ffb454; --bad:#ff6b6b; }
*{ box-sizing:border-box } body{ margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--fg) }
.wrap{ max-width:1100px; margin:32px auto; padding:0 16px } h1{ font-size:22px; margin:0 0 16px }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px } table.fancy{ width:100%; border-collapse:separate; border-spacing:0 }
table.fancy thead th{ position:sticky; top:0; background:#12204a; color:#eaf2ff; font-weight:700; text-align:left; padding:10px; border-bottom:1px solid var(--border); z-index:1 }
table.fancy tbody td{ padding:10px; border-bottom:1px solid var(--border); text-align:left } table.fancy tbody tr:nth-child(odd){ background:rgba(255,255,255,.02) }
.badge{ background:#18234b; border:1px solid #2a375f; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; user-select:none }

/* Flow (classic layout) */
.flowwrap{ position:relative; border:1px solid var(--border); border-radius:12px; background:#0e1838; padding:16px; }
.flow{ position:relative; height:260px }
.flow svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1 }
.node{ position:absolute; background:#101b3d; border:1px solid var(--border); border-radius:12px; padding:8px 10px; min-width:120px; text-align:center; z-index:2 }
.node h3{ margin:0; font-size:14px }
.node .sub{ color:#cfe1ff; font-size:12px }
#n_pv{ left:18px; top:24px }
#n_house{ right:18px; top:24px }
#n_grid{ right:18px; bottom:24px }
#n_batt{ left:18px; bottom:24px; display:flex; gap:10px; align-items:center }

/* Battery icon */
.bat{ width:50px; height:26px; border:2px solid #7a8cc0; border-radius:4px; position:relative; }
.bat::after{ content:''; position:absolute; right:-6px; top:7px; width:6px; height:12px; background:#7a8cc0; border-radius:1px }
.bat .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--ok) }
.bat.low .fill{ background:var(--bad) } .bat.mid .fill{ background:var(--warn) }

/* Labels above lines */
.flow-label{ position:absolute; padding:2px 8px; background:rgba(15,22,48,.96); border:1px solid var(--border); border-radius:999px; font-weight:700; font-size:12px; z-index:3; pointer-events:none }
.hidden{ display:none }

/* Animated tokens */
.token.pv{ fill:#6be29f } .token.batt{ fill:#ffd480 }
.token.grid{ fill:#87a6ff } /* not used, but reserved */
.token{ filter: drop-shadow(0 0 2px rgba(255,255,255,.25)); }

/* Condensed KPI layout (3 boxes) */
.kpi3{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px }
.box{ background:#0e1838; border:1px solid var(--border); border-radius:12px; padding:10px }
.box .label{ color:#cfe1ff; font-size:12px; margin-bottom:4px }
.box .val{ font-size:18px; font-weight:700 }
.box .lines{ display:grid; gap:4px; font-size:14px }
.box .lines .row{ display:flex; justify-content:space-between; gap:8px }
@media (max-width: 860px){ .kpi3{ grid-template-columns: 1fr; } }


/* Shared navigation and forms */
h1,h2,h3{line-height:1.2} h2{font-size:18px;margin:0}.no-margin{margin:0}.muted{color:var(--muted)}.tiny{font-size:11px}
.topbar,.stats-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.brand-title{display:flex;align-items:center;gap:10px}.brand-title h1{margin:0}.brand-icon{width:42px;height:42px;object-fit:contain}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;background:#18234b;color:var(--fg);font:inherit;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.button:hover{transform:translateY(-1px);background:#213264;border-color:#4863a0}.button-primary{background:linear-gradient(135deg,#3777ff,#4e9dff);border-color:#66adff;color:white}.button-danger{background:#451d2a;border-color:#84364b;color:#ffdce5}
.status-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid;font-size:11px;font-weight:750;white-space:nowrap}.status-auto{color:#a9f3c5;background:#123325;border-color:#296744}.status-manual{color:#ffe0a7;background:#3d2c12;border-color:#815b23}
.alert{padding:11px 13px;border-radius:10px;margin:0 0 14px;border:1px solid}.alert-success{background:#123325;border-color:#296744;color:#bdf6d0}.alert-error{background:#421f29;border-color:#87394e;color:#ffd4df}
input,select{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:#0b1430;color:var(--fg);font:inherit}label{display:grid;gap:5px;color:#cfe1ff;font-size:12px}.filter-grid{display:grid;grid-template-columns:minmax(150px,1.5fr) repeat(2,minmax(150px,1fr)) auto;gap:10px;align-items:end}.wide-wrap{max-width:1500px}.daily-editor{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr)) minmax(170px,1.5fr) auto;gap:9px;align-items:end}.editor-note{min-width:170px}.admin-table input[type=number]{min-width:105px}.admin-table input[type=text]{min-width:160px;margin-top:8px}.admin-table td{vertical-align:top}.manual-row{background:rgba(255,180,84,.05)!important}.action-cell{display:grid;gap:7px;min-width:145px}.admin-table-wrap{max-height:70vh}.visible-subsum{display:block!important}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(430px,100%);padding:28px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(160deg,#111b3b,#0d142d);box-shadow:0 24px 80px rgba(0,0,0,.35);text-align:center}.auth-card h1{margin:6px 0 10px}.login-logo{display:block;width:116px;height:116px;object-fit:contain;margin:0 auto 4px}.stack-form{display:grid;gap:10px;text-align:left;margin-top:22px}.stack-form .button{margin-top:5px}.auth-back{margin:18px 0 0}.auth-back a{color:var(--accent)}
@media(max-width:1000px){.daily-editor{grid-template-columns:repeat(3,minmax(120px,1fr))}.filter-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}.topbar,.stats-header{align-items:flex-start;flex-direction:column}.top-actions{justify-content:flex-start}}
@media(max-width:620px){.wrap{margin:18px auto}.daily-editor,.filter-grid{grid-template-columns:1fr}.brand-title{align-items:flex-start}.brand-title h1{font-size:20px}.brand-icon{width:36px;height:36px}.button{min-height:36px;padding:7px 10px}.flowwrap{padding:8px}.node{min-width:105px}.admin-table-wrap{max-height:none}}

/* Admin SQLite backup and restore */
.database-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.database-tool{border:1px solid var(--border);border-radius:12px;background:#0e1838;padding:14px}.database-tool h3{margin:0 0 7px}.database-tool-warning{border-color:#6c4d28;background:linear-gradient(145deg,#171c35,#211a20)}.database-import-form{display:grid;gap:10px;margin-top:12px}.checkbox-label{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.4}.checkbox-label input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px;margin:1px 0 0;padding:0}.database-tool .button{margin-top:5px}@media(max-width:760px){.database-tools{grid-template-columns:1fr}}

/* Administrator settings */
.alert-info{background:#122b43;border-color:#285b82;color:#cfeaff}.field-help{display:block;color:var(--muted);font-size:11px;line-height:1.35}.settings-grid{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(220px,1fr);gap:14px;align-items:start}.settings-checkbox{align-self:end;min-height:38px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#0b1430}.settings-submit{grid-column:1/-1;display:flex;justify-content:flex-end}.api-settings-list{display:grid;gap:12px}.api-settings-row{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(300px,1.8fr) minmax(260px,1.25fr) auto;gap:12px;align-items:end;padding:14px;border:1px solid var(--border);border-radius:12px;background:#0e1838}.api-settings-add{border-style:dashed;background:#0c1632}.api-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.input-action-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.settings-warning{margin-top:14px;margin-bottom:0}.settings-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-panel{border:1px solid var(--border);border-radius:12px;padding:16px;background:#0e1838}.settings-panel h2{margin-bottom:8px}.settings-panel .stack-form{margin-top:12px}#guest-new-fields{display:grid;gap:10px}#guest-new-fields[hidden]{display:none}@media(max-width:1050px){.api-settings-row{grid-template-columns:repeat(2,minmax(0,1fr))}.api-actions{justify-content:flex-start}}@media(max-width:760px){.settings-grid,.settings-two-column,.api-settings-row{grid-template-columns:1fr}.settings-submit{grid-column:auto;justify-content:stretch}.settings-submit .button,.api-actions .button{width:100%}.input-action-row{grid-template-columns:1fr}.api-actions{display:grid}}

/* ===== PenguinPVDash 1.7 visual system ===== */
:root,
html[data-theme="standard"],
body[data-theme="standard"]{
  --bg:#081021;
  --fg:#edf4ff;
  --muted:#9aadd0;
  --card:#101831;
  --surface:#0e1935;
  --surface-2:#132044;
  --input:#0b1530;
  --header:#142650;
  --border:#2a3a65;
  --border-soft:#202f53;
  --chart-grid:rgba(255,255,255,.08);
  --shadow:0 18px 48px rgba(0,0,0,.26);
  --danger:#ff6b7d;
}
html[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#090a0e;
  --fg:#f3f5f8;
  --muted:#a4a9b2;
  --card:#13151a;
  --surface:#171a20;
  --surface-2:#1e222a;
  --input:#101217;
  --header:#1b1f27;
  --border:#333945;
  --border-soft:#272c35;
  --chart-grid:rgba(255,255,255,.07);
  --shadow:0 18px 52px rgba(0,0,0,.42);
  --danger:#ff7185;
}
html[data-theme="light"],
body[data-theme="light"]{
  --bg:#f2f5fb;
  --fg:#172238;
  --muted:#62708a;
  --card:#ffffff;
  --surface:#f7f9fd;
  --surface-2:#edf2fb;
  --input:#ffffff;
  --header:#edf3ff;
  --border:#cbd6e8;
  --border-soft:#dde5f1;
  --chart-grid:rgba(23,34,56,.10);
  --shadow:0 14px 40px rgba(30,53,92,.12);
  --ok:#168b50;
  --warn:#b96a00;
  --bad:#d63e58;
  --danger:#d9415c;
}

html{background:var(--bg)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% -10%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 34rem),
    radial-gradient(circle at 90% 10%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 30rem),
    var(--bg);
  color:var(--fg);
  transition:background-color .2s ease,color .2s ease;
}
a{color:color-mix(in srgb,var(--accent) 84%,white)}
body[data-theme="light"] a{color:color-mix(in srgb,var(--accent) 78%,black)}
.wrap{max-width:1180px;margin:26px auto;padding:0 18px}
.wide-wrap{max-width:1540px}
.card{
  background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,white 4%),var(--card));
  border-color:var(--border-soft);
  box-shadow:var(--shadow);
  border-radius:18px;
  padding:18px;
}
.topbar,.stats-header{
  position:sticky;
  top:0;
  z-index:20;
  padding:12px 0;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.brand-title{min-width:0}.brand-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-icon{border-radius:12px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.20))}
.top-actions{gap:7px}
.button{
  border-color:var(--border);
  background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 82%,black));
  color:var(--fg);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
body[data-theme="light"] .button{background:linear-gradient(145deg,#fff,var(--surface-2))}
.button:hover{background:color-mix(in srgb,var(--surface-2) 76%,var(--accent));border-color:color-mix(in srgb,var(--accent) 65%,var(--border));transform:translateY(-1px)}
.button-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,white),var(--accent));border-color:color-mix(in srgb,var(--accent) 70%,white);color:#fff}
.button-primary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 74%,white),color-mix(in srgb,var(--accent) 85%,black))}
.button-danger{background:color-mix(in srgb,var(--danger) 18%,var(--surface));border-color:color-mix(in srgb,var(--danger) 55%,var(--border));color:color-mix(in srgb,var(--danger) 55%,white)}
.is-active{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 58%,white),0 7px 20px color-mix(in srgb,var(--accent) 20%,transparent)}

input,select,textarea{
  background:var(--input);
  color:var(--fg);
  border-color:var(--border);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
label,.controls label{color:color-mix(in srgb,var(--fg) 86%,var(--muted))!important}
.controls .group{background:var(--surface)!important;border-color:var(--border)!important}
.controls select,.controls input{background:var(--input)!important;color:var(--fg)!important;border-color:var(--border)!important}

.flowwrap,.node,.box,.database-tool,.settings-panel,.api-settings-row{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
.flow-label{background:color-mix(in srgb,var(--card) 94%,transparent)!important;color:var(--fg)}
#n_batt .bat{background:var(--input)!important}
#n_batt .bat::after{background:var(--input)!important}

.table-wrap{border-color:var(--border);background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
table.fancy thead th{background:var(--header);color:var(--fg);border-color:var(--border)}
table.fancy tbody td{border-color:var(--border-soft)}
table.fancy tbody tr:nth-child(odd){background:color-mix(in srgb,var(--surface) 94%,white 6%)!important}
table.fancy tbody tr:nth-child(even){background:var(--surface)!important}
body[data-theme="light"] table.fancy tbody tr:nth-child(odd){background:#f7f9fd!important}
body[data-theme="light"] table.fancy tbody tr:nth-child(even){background:#fff!important}
.fancy td.peak,.fancy td.low{
  background:color-mix(in srgb,var(--cell-color) 24%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cell-color) 58%,transparent)!important;
}
.fancy tfoot tr.sumrow,.fancy tfoot tr.avgrow{background:color-mix(in srgb,var(--surface-2) 82%,transparent)!important;border-color:var(--border)!important}
body[data-density="compact"] table.fancy th,
body[data-density="compact"] table.fancy td{padding:7px 9px}
body[data-density="compact"] .admin-table input{min-height:32px;padding:5px 7px}

.alert-info{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 48%,var(--border));color:var(--fg)}
.alert-success{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--fg)}
.alert-error{background:color-mix(in srgb,var(--bad) 15%,var(--surface));color:var(--fg)}
.status-auto{color:color-mix(in srgb,var(--ok) 70%,white);background:color-mix(in srgb,var(--ok) 14%,var(--surface));border-color:color-mix(in srgb,var(--ok) 48%,var(--border))}
.status-manual{color:color-mix(in srgb,var(--warn) 65%,white);background:color-mix(in srgb,var(--warn) 14%,var(--surface));border-color:color-mix(in srgb,var(--warn) 48%,var(--border))}
body[data-theme="light"] .status-auto{color:#12683d}body[data-theme="light"] .status-manual{color:#845100}

.subsection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 7px;padding-top:17px;border-top:1px solid var(--border-soft)}
.subsection-head h3{margin:0;font-size:15px}
.inline-pill{margin-left:8px;vertical-align:middle}
.inline-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.inline-actions form{margin:0}
.device-table td:last-child,.backup-table td:last-child{min-width:280px}
.device-migration-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) repeat(2,minmax(190px,1.2fr)) auto;gap:10px;align-items:end;margin-top:14px;padding:14px;border:1px dashed var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,var(--accent) 10%)}
.database-tools{margin-top:14px}.database-tool-warning{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--warn) 8%,var(--surface)))!important}

.appearance-main{display:grid;grid-template-columns:minmax(320px,1.3fr) minmax(280px,.7fr);gap:16px;align-items:start}
.appearance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.appearance-fields>label:last-child{grid-column:1/-1}
.appearance-preview{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px;position:sticky;top:92px;box-shadow:var(--shadow)}
.preview-header{display:flex;align-items:center;gap:10px;font-size:18px}.preview-header img{width:52px;height:52px;object-fit:contain;border-radius:12px}.preview-card{margin-top:15px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:space-between;gap:12px}
.color-input-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center}.color-input-row input[type=color]{width:52px;height:38px;padding:3px;cursor:pointer}.color-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);font-size:12px}
.metric-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric-color-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:13px;display:grid;gap:9px}.metric-preview{display:grid;grid-template-columns:1fr 1fr;gap:7px}.metric-preview span{padding:6px 8px;text-align:center;border-radius:8px;background:color-mix(in srgb,var(--preview-color) 24%,transparent);border:1px solid color-mix(in srgb,var(--preview-color) 55%,transparent);font-size:11px;font-weight:700}.appearance-actions{gap:8px;margin-top:15px}

.auth-card{background:linear-gradient(150deg,var(--card),var(--surface));border-color:var(--border);box-shadow:var(--shadow)}
.login-logo{filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}

@media(max-width:1150px){.device-migration-form{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.appearance-main{grid-template-columns:1fr}.appearance-preview{position:static}.appearance-fields{grid-template-columns:1fr}.appearance-fields>label:last-child{grid-column:auto}.topbar,.stats-header{position:static}}
@media(max-width:700px){.metric-color-grid,.device-migration-form{grid-template-columns:1fr}.inline-actions{display:grid}.inline-actions .button{width:100%}.device-table td:last-child,.backup-table td:last-child{min-width:190px}}


/* ===== PenguinPVDash 1.7.1 theme and header refinements ===== */
html,body{min-height:100%}
html{background:var(--bg)}
body{min-height:100vh;display:flow-root;background-color:var(--bg)}

/* Floating header surfaces instead of one hard rectangular strip. */
.topbar,.stats-header{
  position:sticky;
  top:12px;
  z-index:20;
  padding:0;
  margin-bottom:18px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.topbar>.brand-title,
.topbar>div:first-child,
.stats-header>.brand-title,
.topbar>.top-actions,
.stats-header>.top-actions{
  border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--card) 90%,transparent);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.topbar>.brand-title,.stats-header>.brand-title{padding:9px 12px}
.topbar>div:first-child{padding:9px 12px;min-width:0}
.topbar>div:first-child>.brand-title{padding:0}
.topbar>.top-actions,.stats-header>.top-actions{padding:7px}
.brand-title{gap:11px}
.brand-icon{
  width:48px;
  height:48px;
  padding:5px;
  flex:0 0 48px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.16));
}
.brand-title h1{font-size:22px;letter-spacing:-.02em}
.topbar .muted{margin-top:3px}

/* Theme-aware controls. The previous light-theme button rule was more
   specific than .button-primary and made save/active buttons almost white. */
body[data-theme="light"] .button:not(.button-primary):not(.button-danger){
  background:linear-gradient(145deg,#fff,var(--surface-2));
  color:var(--fg);
  border-color:var(--border);
}
body[data-theme="light"] .button-primary,
body[data-theme="light"] .button-primary:visited{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,white),var(--accent));
  border-color:color-mix(in srgb,var(--accent) 72%,#fff);
  color:#fff;
}
body[data-theme="light"] .button-primary:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,white),color-mix(in srgb,var(--accent) 88%,#172238));
  color:#fff;
}
.button:disabled,.button[disabled]{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none}
body[data-theme="light"] .button-primary:disabled,
body[data-theme="light"] .button-primary[disabled]{
  background:color-mix(in srgb,var(--accent) 62%,#dfe7f4);
  border-color:color-mix(in srgb,var(--accent) 48%,#dfe7f4);
  color:#fff;
}

.settings-checkbox,.checkbox-label.settings-checkbox{
  background:var(--input);
  color:var(--fg)!important;
  border-color:var(--border);
}
.checkbox-label{color:var(--fg)!important}
.checkbox-label input[type="checkbox"]{accent-color:var(--accent)}
body[data-theme="light"] .settings-checkbox,
body[data-theme="light"] .checkbox-label.settings-checkbox{background:#fff}

/* Keep navigation readable and consistent in every theme. */
.top-actions .button{white-space:nowrap}
body[data-theme="light"] .top-actions .button:not(.button-primary):not(.button-danger){color:#285fae}
body[data-theme="light"] .top-actions .button-primary{color:#fff}

/* Prevent theme-colored page gaps at the viewport edges. */
.wrap{margin-top:18px;margin-bottom:28px}

@media(max-width:900px){
  .topbar,.stats-header{top:0;position:static;gap:10px}
  .topbar>.brand-title,.stats-header>.brand-title,.topbar>div:first-child,.topbar>.top-actions,.stats-header>.top-actions{width:100%}
  .topbar>.top-actions,.stats-header>.top-actions{justify-content:flex-start}
}
@media(max-width:620px){
  .brand-icon{width:42px;height:42px;flex-basis:42px}
  .brand-title h1{font-size:19px}
}


/* ===== PenguinPVDash 1.7.4 language selector ===== */
.language-switch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:2px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input);
}
.language-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:30px;
  padding:4px 7px;
  border-radius:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
}
.language-link:hover{color:var(--fg);background:var(--surface-2)}
.language-link.is-active{color:#fff;background:var(--accent);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 28%,transparent)}
body[data-theme="light"] .language-link.is-active{color:#fff}

.auth-language{display:flex;justify-content:center;margin:-2px 0 8px}.auth-language .language-switch{margin:0}

/* ===== PenguinPVDash 1.7.6 flow contrast and adaptive branding ===== */
/* Keep the bundled square icon compact, but let custom logos use their
   natural aspect ratio. Wide logos may grow horizontally without forcing
   an oversized header. */
.brand-icon-custom{
  width:auto;
  height:64px;
  max-width:180px;
  max-height:64px;
  flex:0 1 auto;
  padding:5px 8px;
  object-fit:contain;
  object-position:center;
}

/* Improve contrast of the energy-flow diagram in the light theme. */
body[data-theme="light"] .flowwrap{
  background:linear-gradient(145deg,#f9fbff,#eef4fc)!important;
  border-color:#b9c9e2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
body[data-theme="light"] .flow .node{
  background:rgba(255,255,255,.96)!important;
  border-color:#b8c9e3!important;
  box-shadow:0 8px 20px rgba(45,76,126,.10);
}
body[data-theme="light"] .flow .node h3{
  color:#15233b;
}
body[data-theme="light"] .flow .node .sub{
  color:#405474;
  font-weight:650;
}
body[data-theme="light"] .flow .node .ico{
  background:#f1f6ff!important;
  box-shadow:inset 0 0 0 1px #c4d2e7,0 4px 12px rgba(42,74,124,.10)!important;
}
body[data-theme="light"] .flow .node .ico-pv{background:#e8fbf1!important}
body[data-theme="light"] .flow .node .ico-house{background:#edf3ff!important}
body[data-theme="light"] .flow .node .ico-grid{background:#fff4e7!important}

body[data-theme="light"] #l_pv_house,
body[data-theme="light"] #l_pv_grid,
body[data-theme="light"] #l_pv_batt{
  stroke:#21a968!important;
  stroke-width:3.4!important;
}
body[data-theme="light"] #l_batt_house{
  stroke:#d18a14!important;
  stroke-width:3.4!important;
}
body[data-theme="light"] #l_grid_house{
  stroke:#3477d8!important;
  stroke-width:3.4!important;
}
body[data-theme="light"] .token.pv{fill:#16a461!important}
body[data-theme="light"] .token.batt{fill:#c77b00!important}
body[data-theme="light"] .token.grid{fill:#2d6fcf!important}
body[data-theme="light"] .token{
  filter:drop-shadow(0 0 2px rgba(24,45,78,.32));
}
body[data-theme="light"] #n_batt .bat{
  background:#edf3fb!important;
  border-color:#627493!important;
  box-shadow:inset 0 0 6px rgba(34,58,96,.10);
}
body[data-theme="light"] #n_batt .bat::after{
  background:#edf3fb!important;
  border-color:#627493!important;
}

@media(max-width:900px){
  .brand-icon-custom{height:56px;max-height:56px;max-width:160px}
}
@media(max-width:620px){
  .brand-icon-custom{height:48px;max-height:48px;max-width:125px;padding:4px 6px}
}
.login-logo-custom{
  width:auto;
  height:auto;
  max-width:220px;
  max-height:120px;
}
.preview-header img.preview-logo-custom{
  width:auto;
  height:auto;
  max-width:150px;
  max-height:58px;
}


/* ===== PenguinPVDash 1.7.7 sticky data-table headers ===== */
/* The dashboard and statistics tables get their own vertical scroll area.
   This keeps the column labels visible while browsing long date ranges,
   without interfering with horizontal scrolling on smaller screens. */
.table-wrap-sticky{
  position:relative;
  max-height:min(68vh,760px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.table-wrap-sticky table.fancy thead th{
  position:sticky;
  top:0;
  z-index:8;
  background:var(--header)!important;
  color:var(--fg)!important;
  box-shadow:0 1px 0 var(--border),0 8px 16px color-mix(in srgb,var(--bg) 18%,transparent);
}
body[data-theme="light"] .table-wrap-sticky table.fancy thead th{
  box-shadow:0 1px 0 var(--border),0 8px 16px rgba(46,72,112,.12);
}
@media(max-width:700px){
  .table-wrap-sticky{max-height:64vh}
}

/* ===== PenguinPVDash 1.8.1 analytics and modern flow ===== */
.stats-subnav{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 16px;
  padding:6px;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  scrollbar-width:thin;
}
.stats-subnav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:10px;
  color:var(--muted);
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.stats-subnav-link:hover{background:var(--surface-2);color:var(--fg);transform:translateY(-1px)}
.stats-subnav-link.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 86%,white),var(--accent));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 24%,transparent)}

.analysis-controls{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.analysis-controls .group{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.analysis-controls .group label{font-size:11px;white-space:nowrap}
.analysis-controls select,.analysis-controls input{min-width:105px;padding:6px 8px}
.analysis-controls .analysis-range{display:flex}
.analysis-controls [hidden]{display:none!important}
.analysis-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 16px}
.analysis-kpi{position:relative;overflow:hidden;min-height:116px;padding:16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--accent) 12%));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.analysis-kpi::after{content:'';position:absolute;right:-32px;bottom:-42px;width:110px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);filter:blur(2px)}
.analysis-kpi span{display:block;max-width:85%;color:var(--muted);font-size:12px;font-weight:700}
.analysis-kpi strong{display:block;margin-top:9px;font-size:28px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.analysis-kpi small{display:block;margin-top:6px;color:var(--muted);font-size:11px}
.analysis-kpi.kpi-charge{--accent:#34d399}.analysis-kpi.kpi-discharge{--accent:#fb7185}.analysis-kpi.kpi-throughput{--accent:#8b5cf6}.analysis-kpi.kpi-cycles{--accent:#f59e0b}.analysis-kpi.kpi-ratio{--accent:#22d3ee}.analysis-kpi.kpi-share{--accent:#5a8cff}
.analysis-kpi.kpi-autarky{--accent:#34d399}.analysis-kpi.kpi-self-consumption{--accent:#22d3ee}.analysis-kpi.kpi-self-supplied{--accent:#5a8cff}.analysis-kpi.kpi-onsite{--accent:#8b5cf6}.analysis-kpi.kpi-grid{--accent:#f59e0b}.analysis-kpi.kpi-export{--accent:#06b6d4}
.analysis-empty{margin:14px 0;padding:18px;border:1px dashed var(--border);border-radius:14px;background:var(--surface);color:var(--muted);text-align:center}
.analysis-chart-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-bottom:16px}
.analysis-chart-card,.analysis-note{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:14px}
.analysis-chart-wide{min-width:0}.analysis-chart-wrap{position:relative;height:340px;min-width:0}.analysis-chart-doughnut{height:310px}
.analysis-note{align-self:stretch;color:var(--muted);line-height:1.65}.analysis-note strong{color:var(--fg)}
.autarky-chart-grid{grid-template-columns:1.3fr .7fr}.autarky-chart-grid .analysis-chart-wide{grid-row:span 2}.analysis-table-wrap{margin-top:4px}.analysis-table td,.analysis-table th{white-space:nowrap}

/* Optional modern energy-flow diagram. The classic flow remains the default. */
.flow-card-modern{padding:14px}
.flowwrap-modern{
  overflow:hidden;
  padding:10px!important;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 96%,var(--accent) 4%))!important;
}
.flow-modern-e3dc{position:relative;height:560px;isolation:isolate}
.flow-modern-e3dc svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.flow-base-path{fill:none;stroke:#a7afb8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.flow-active-path{fill:none;stroke:#9ea8b1;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.10))}
.flow-bar{fill:#53be4f;filter:drop-shadow(0 0 4px rgba(83,190,79,.72))}

.flow-autarky-hub{
  --autarky:0;
  position:absolute;
  left:50%;top:50%;
  width:166px;height:166px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border-radius:50%;
  background:conic-gradient(#078966 calc(var(--autarky) * 1%),#d5dde3 0);
  box-shadow:0 16px 30px rgba(0,0,0,.10);
  z-index:3;
  transition:background .35s ease;
}
.flow-autarky-hub::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--border)}
.flow-autarky-inner{position:relative;z-index:1;text-align:center;display:grid;gap:2px}
.flow-autarky-value{display:flex;align-items:baseline;justify-content:center;gap:4px}
.flow-autarky-value strong{font-size:38px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.flow-autarky-value span{font-size:18px;color:var(--muted)}
.flow-autarky-inner small{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}

.flow-modern-e3dc .flow-modern-node{
  position:absolute;
  z-index:4;
  display:flex!important;
  flex-direction:column;
  align-items:center!important;
  justify-content:flex-start;
  gap:8px!important;
  width:128px;
  min-width:128px;
  height:auto;
  padding:8px 8px 10px!important;
  border:1px solid color-mix(in srgb,var(--border) 72%, transparent)!important;
  border-radius:16px!important;
  background:color-mix(in srgb,var(--card) 18%, transparent)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.05)!important;
  backdrop-filter:blur(3px);
  text-align:center;
}
.flow-modern-e3dc #n_pv{left:28px;top:16px;bottom:auto}
.flow-modern-e3dc #n_grid{right:28px;top:16px;bottom:auto}
.flow-modern-e3dc #n_batt{left:28px;top:auto;bottom:16px}
.flow-modern-e3dc #n_house{right:28px;top:auto;bottom:16px}
.flow-modern-e3dc .flow-node-title{color:var(--muted);font-size:14px;font-weight:700;line-height:1.1}
.flow-modern-e3dc .flow-node-value{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.12;color:var(--fg);letter-spacing:-.01em}
.flow-modern-e3dc .flow-node-box{display:grid;place-items:center;width:100%;padding:0;min-width:0;justify-items:center;align-items:center}
.flow-modern-e3dc .flow-node-icon,
.flow-modern-e3dc .flow-node-icon-battery{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  position:relative;
  margin:0 auto;
  border:4px solid #53be4f;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.05), inset 0 0 0 1px color-mix(in srgb,var(--border) 40%,transparent);
  overflow:hidden;
  transform:none;
}
.flow-modern-e3dc .flow-node-icon svg{
  display:block;
  width:34px;
  height:34px;
  margin:auto;
}
.flow-modern-e3dc .flow-modern-node.on .flow-node-icon,
.flow-modern-e3dc .flow-modern-node.on .flow-node-icon-battery{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10),0 0 12px rgba(83,190,79,.18);
}
.flow-modern-e3dc .flow-node-box-battery{
  display:grid;
  place-items:center;
  width:100%;
  height:66px;
  padding:0;
}
.flow-modern-e3dc .battery-glyph{
  position:relative;
  width:38px;
  height:22px;
  border:2px solid color-mix(in srgb,var(--fg) 82%,transparent);
  border-radius:4px;
  background:rgba(255,255,255,.10);
  overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.flow-modern-e3dc .battery-glyph::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:4px;
  height:10px;
  transform:translateY(-50%);
  border-radius:0 2px 2px 0;
  background:color-mix(in srgb,var(--fg) 82%,transparent);
}
.flow-modern-e3dc .battery-glyph .fill{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  height:auto;
  max-width:calc(100% - 4px);
  border-radius:2px;
  background:linear-gradient(90deg,#20b455,#b7efc5)!important;
  box-shadow:none;
  z-index:1;
}
.flow-modern-e3dc .flow-battery-soc{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  color:#173124;
  font-size:9px;
  font-weight:900;
  letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
}

body[data-theme="light"] .flowwrap-modern{background:linear-gradient(180deg,#ffffff,#f5f7fa)!important}
body[data-theme="light"] .flow-autarky-hub::before{background:#fff}
body[data-theme="light"] .flow-modern-e3dc .flow-modern-node{
  background:rgba(255,255,255,.22)!important;
  border-color:#d5e0ed!important;
  box-shadow:0 10px 24px rgba(62,86,120,.06)!important;
}
body[data-theme="light"] .flow-modern-e3dc .flow-node-icon{background:rgba(255,255,255,.32)}
body[data-theme="light"] .flow-modern-e3dc .flow-node-icon-battery{background:rgba(255,255,255,.16)}
body[data-theme="light"] .flow-modern-e3dc .battery-glyph{border-color:#374151;background:rgba(255,255,255,.24)}
body[data-theme="light"] .flow-modern-e3dc .battery-glyph::after{background:#374151}
body[data-theme="light"] .box .label{color:#5b6d8a!important;font-weight:700}
body[data-theme="light"] .box .lines{color:#1f2d45!important}

@media(max-width:1050px){
  .analysis-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analysis-chart-grid,.autarky-chart-grid{grid-template-columns:1fr}.autarky-chart-grid .analysis-chart-wide{grid-row:auto}
}
@media(max-width:760px){
  .stats-subnav{margin-top:0}.analysis-controls{display:grid;grid-template-columns:1fr 1fr}.analysis-controls .group{display:grid}.analysis-controls .analysis-range{grid-column:1/-1;grid-template-columns:auto 1fr auto 1fr}.analysis-kpis{grid-template-columns:1fr 1fr}.analysis-chart-wrap{height:300px}
  .flow-modern-e3dc{height:520px}
  .flow-modern-e3dc #n_pv{left:20px;top:12px;bottom:auto}.flow-modern-e3dc #n_grid{right:20px;top:12px;bottom:auto}.flow-modern-e3dc #n_batt{left:20px;top:auto;bottom:12px}.flow-modern-e3dc #n_house{right:20px;top:auto;bottom:12px}
  .flow-autarky-hub{width:152px;height:152px}
}
@media(max-width:540px){
  .analysis-controls,.analysis-kpis{grid-template-columns:1fr}.analysis-controls .analysis-range{grid-column:auto;grid-template-columns:1fr}.analysis-chart-wrap{height:270px}
  .flow-modern-e3dc{height:500px}
  .flow-modern-e3dc .flow-node-title{font-size:12px}
  .flow-modern-e3dc .flow-node-value{font-size:15px}
  .flow-modern-e3dc .flow-modern-node{width:118px;min-width:118px;padding:7px 6px 8px!important}
  .flow-modern-e3dc .flow-node-icon{width:62px;height:62px}
  .flow-modern-e3dc .flow-node-icon svg{width:32px;height:32px}
  .flow-modern-e3dc .flow-node-icon-battery{width:62px;height:62px}
  .flow-modern-e3dc #n_pv{left:12px;top:12px;bottom:auto}.flow-modern-e3dc #n_grid{right:12px;top:12px;bottom:auto}.flow-modern-e3dc #n_batt{left:12px;top:auto;bottom:12px}.flow-modern-e3dc #n_house{right:12px;top:auto;bottom:12px}
  .flow-autarky-hub{width:146px;height:146px}
  .flow-autarky-value strong{font-size:34px}
}