/* =========================================================
   Solar Load Reader — Mark II  ·  "Night Grid" theme
   ---------------------------------------------------------
   Dark control-room look: amber + teal accents, JetBrains Mono
   numerals, Chakra Petch display labels, Noto Sans Thai body.
   Design tokens → base → app bar → layout → components → print.
   All element IDs / onclick hooks used by app.js are preserved;
   chart colours are handled by chart-theme.js.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Typography */
    --font: 'Noto Sans Thai', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --font-display: 'Chakra Petch', 'Noto Sans Thai', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

    /* Surfaces */
    --bg: #0E1116;
    --surface: #161B22;
    --surface-2: #11151C;
    --surface-3: #1C222B;
    --field: #0E1116;
    --border: #262D37;
    --border-strong: #30363D;

    /* Text */
    --text: #E6EDF3;
    --text-2: #C9D1D9;
    --text-3: #7D8590;

    /* Accents */
    --amber: #FFB020;
    --amber-soft: rgba(255, 176, 32, 0.14);
    --amber-border: rgba(255, 176, 32, 0.35);
    --teal: #2DD4BF;
    --teal-soft: #0F2A28;
    --teal-border: #1F4B47;
    --violet: #A78BFA;
    --violet-soft: rgba(167, 139, 250, 0.12);
    --violet-border: rgba(167, 139, 250, 0.35);
    --sky: #58A6FF;
    --sky-soft: rgba(88, 166, 255, 0.12);
    --sky-border: rgba(88, 166, 255, 0.35);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --danger-border: rgba(248, 113, 113, 0.35);
    --success: #34D399;

    /* Shape */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --ring: 0 0 0 3px rgba(255, 176, 32, 0.25);

    /* Layout */
    --content-max: 1480px;
    --gutter: 24px;
    --header-h: 56px;
    --rail-w: 380px;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.3;
}

p {
    margin: 0;
}

b,
strong {
    font-weight: 600;
}

small {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
}

::selection {
    background: rgba(255, 176, 32, 0.3);
}

/* Display labels: small caps in Chakra Petch */
.eyebrow,
.panel h4,
.panel-section-title,
.calculation-details h3,
.metric-title,
.source-toolbar-label {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- 3. App bar ---------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.app-header-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex;
    align-items: stretch;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-logo {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: var(--amber);
}

.brand-logo svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}

.brand-subtitle {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-3);
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: nowrap;
}

/* Tabs: underline style in the app bar */
.tab-nav {
    display: flex;
    gap: 22px;
    margin-left: 4px;
}

.tab-btn {
    appearance: none;
    border: 0;
    margin: 0;
    width: auto;
    padding: 0 2px;
    background: transparent;
    color: var(--text-3);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .15s ease, border-color .15s ease;
}

.tab-btn:hover {
    color: var(--text);
    filter: none;
}

.tab-btn.active {
    color: var(--amber);
    font-weight: 600;
    border-bottom-color: var(--amber);
}

.tab-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.tab-btn .step {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-right: 7px;
    pointer-events: none;
}

.tab-btn.active .step {
    color: var(--amber);
    opacity: .8;
}

/* ---------- 4. Page container ---------- */
.container {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 20px var(--gutter) 40px;
}

/* Inactive pages stay laid out (full width, zero height, invisible) rather than
   display:none, so Plotly charts created in a hidden tab already measure the
   correct width and don't need a slow resize pass when the tab is opened. */
.tab-page {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.tab-page.active {
    position: static;
    height: auto;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    animation: fadeIn .18s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Page head: title + subtitle, optional actions on the right */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}

.page-sub {
    font-size: 12.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.page-actions {
    display: flex;
    gap: 8px;
}

/* Input Data tab: uploads | system & tariff | BESS */
.input-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.input-layout .panel-container {
    display: contents; /* its two panels become grid columns 2 and 3 */
}

.finance-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---------- 5. Cards & panels ---------- */
.panel,
.calculation-details,
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.panel {
    padding: 16px;
    min-width: 0;
}

.panel h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel h4 .accent {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    flex: 0 0 6px;
}

.panel-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    margin: 14px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.panel-head h4 {
    margin: 0;
    padding: 0;
    border: 0;
}

.panel-container,
.upload-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calculation-details {
    padding: 16px 18px;
    margin-top: 16px;
}

.calculation-details h3 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.calculation-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.calculation-details li {
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--text-2);
}

.calc-math {
    display: block;
    font-family: var(--font-mono);
    background: var(--surface-2);
    padding: 8px 12px;
    margin-top: 6px;
    border-left: 3px solid var(--amber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--amber);
    font-size: 13px;
    font-weight: 600;
}

.legend-note {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.7;
    margin-top: 12px;
}

.chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--teal);
    background: var(--teal-soft);
    border: 1px solid var(--teal-border);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- 6. Forms ---------- */
.control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

label {
    font-weight: 500;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.35;
}

label .hint {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

input,
select {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    height: 32px;
    width: 130px;
    flex: 0 0 auto;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="number"] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

select {
    width: auto;
    min-width: 130px;
    max-width: 100%;
    cursor: pointer;
    padding-right: 26px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D8590' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

select option,
select optgroup {
    background: var(--surface);
    color: var(--text);
}

input:hover,
select:hover {
    border-color: #4B5563;
}

input:focus,
select:focus {
    border-color: var(--amber);
    box-shadow: var(--ring);
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    accent-color: var(--teal);
    cursor: pointer;
}

.select-full {
    width: 100%;
}

.control-group.stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.info-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--sky);
    background: var(--sky-soft);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--sky-border);
    line-height: 1.5;
}

.toggle-row {
    align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 8px;
}

.toggle-row label {
    color: var(--text-2);
    cursor: pointer;
}

.inline-input {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

.inline-input input {
    width: 80px;
}

/* ---------- 7. Buttons ---------- */
button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    cursor: pointer;
    line-height: 1.3;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

button:hover {
    background: #222A34;
    border-color: #4B5563;
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 11.5px;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger-border);
}

.btn-danger-outline:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.btn-bess {
    background: var(--teal);
    color: #0E1116;
    border-color: var(--teal);
}

.btn-bess:hover {
    background: #5EEAD4;
    border-color: #5EEAD4;
}

/* battery-mode buttons: background colour is toggled by app.js (setBatteryMode) */
.mode-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #FFFFFF;
    border-color: transparent;
}

.mode-btn:hover {
    border-color: transparent;
    filter: brightness(1.1);
}

/* Primary action bar */
.action-bar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}

.action-bar button {
    padding: 11px 16px;
    font-size: 14px;
    border-radius: var(--radius);
}

.btn-primary {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--amber);
    color: #0E1116;
    border-color: var(--amber);
}

.btn-primary:hover {
    background: #FFC24D;
    border-color: #FFC24D;
}

.btn-secondary,
.btn-ghost {
    background: var(--surface);
    color: var(--text-2);
}

/* Segmented controls (period / solar-source switches) */
.chart-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}

.solar-source-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.source-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.time-segment {
    display: inline-flex;
    gap: 2px;
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.time-segment button {
    width: auto;
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    transition: all .15s ease;
}

.time-segment button:hover {
    background: var(--surface-3);
    color: var(--text);
}

.time-segment button.active {
    background: var(--border);
    color: var(--text);
}

#solarSourceSegment button.active {
    background: var(--sky-soft);
    color: var(--sky);
    box-shadow: inset 0 0 0 1px var(--sky-border);
}

#solarSourceSegment button#btnSourcePVSyst.active {
    background: var(--amber-soft);
    color: var(--amber);
    box-shadow: inset 0 0 0 1px var(--amber-border);
}

#solarSourceSegment button#btnSourceCompare.active {
    background: var(--violet-soft);
    color: var(--violet);
    box-shadow: inset 0 0 0 1px var(--violet-border);
}

.source-toggle-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text-3);
    border-radius: 5px;
    transition: all .15s ease;
}

.source-toggle-btn:hover {
    background: var(--surface-3);
    color: var(--text);
}

.source-toggle-btn.active {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: var(--amber-border);
}

.source-control {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--amber-soft);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 6px;
}

.source-control label {
    font-size: 12px;
    color: var(--amber);
}

.source-control .toggle-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---------- 8. Upload / dropzones ---------- */
.dropzone {
    width: 100%;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    background: var(--field);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.dropzone-icon {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    color: var(--text-3);
}

.dropzone-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dropzone-title {
    font-weight: 600;
    color: var(--text);
    font-size: 12.5px;
}

.dropzone-sub {
    font-size: 11px;
    color: var(--text-3);
    margin: 3px 0 10px;
}

.dropzone .btn-browse-file {
    padding: 6px 14px;
    font-size: 12px;
}

#dropzone:hover {
    border-color: var(--sky);
    background: var(--sky-soft);
}

#dropzone .dropzone-icon {
    color: var(--sky);
}

#dropzone.dragover {
    background: var(--sky-soft);
    border-color: var(--sky);
    border-style: solid;
}

#pvsystDropzone:hover {
    border-color: var(--amber);
    background: var(--amber-soft);
}

#pvsystDropzone .dropzone-icon {
    color: var(--amber);
}

#pvsystDropzone.dragover {
    background: var(--amber-soft);
    border-color: var(--amber);
    border-style: solid;
}

.upload-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.status-head p {
    font-weight: 600;
    color: var(--text-3);
    font-size: 11.5px;
}

.status-box {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    line-height: 1.55;
    color: var(--text-2);
}

.status-box.is-warn {
    color: #FCA5A5;
    background: var(--danger-soft);
    border-color: var(--danger-border);
}

/* app.js repaints #pvsystStatus with light-mode inline colours; map them to dark tints */
#pvsystStatus[style*="fef9c3"] {
    background: var(--amber-soft) !important;
    color: #FCD48A !important;
    border-color: var(--amber-border) !important;
}

#pvsystStatus[style*="ecfdf5"] {
    background: var(--teal-soft) !important;
    color: var(--teal) !important;
    border-color: var(--teal-border) !important;
}

.info-box {
    display: none;
    margin-top: 8px;
    font-size: 12px;
    background: var(--surface-2);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.info-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.info-box-head strong {
    color: var(--amber);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-2);
}

.pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--teal-soft);
    color: var(--teal);
    border: 1px solid var(--teal-border);
}

.pvsyst-meta-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
    margin: 2px 4px 2px 0;
    font-weight: 500;
}

/* ---------- 9. Metric tiles ---------- */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-align: left;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-title {
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 500;
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* app.js paints a few plant-report values in a navy that vanishes on dark */
.metric-value[style*="2c3e50"] {
    color: var(--text-2) !important;
}

/* Monthly savings breakdown */
.savings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.savings-card {
    background: var(--surface-2);
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.savings-card .label {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 4px;
}

.savings-card .value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.savings-card .sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.savings-card.is-total {
    background: var(--teal-soft);
    border-color: var(--teal-border);
}

.savings-card.is-total .label {
    color: var(--teal);
    font-weight: 600;
}

.savings-card.is-total .value {
    font-size: 19px;
    color: var(--teal);
}

.savings-card.is-total .sub {
    color: var(--teal);
    opacity: .8;
}

/* ---------- 10. Tables ---------- */
.pvsyst-table-container {
    overflow-x: auto;
}

table.pvsyst-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.pvsyst-table th,
table.pvsyst-table td {
    border-bottom: 1px solid var(--surface-3);
    padding: 8px 10px;
}

table.pvsyst-table th {
    font-family: var(--font-display);
    background: transparent;
    text-align: center;
    font-weight: 600;
    color: var(--text-3);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

table.pvsyst-table th small {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-mono);
}

table.pvsyst-table td {
    font-family: var(--font-mono);
    color: var(--text);
}

table.pvsyst-table td:first-child {
    font-family: var(--font);
    text-align: left;
    font-weight: 500;
    color: var(--text-2);
}

table.pvsyst-table tbody tr:hover {
    background: var(--surface-2);
}

table.pvsyst-table tbody tr:last-child td {
    border-bottom: 0;
}

table.pvsyst-table tr.total-row {
    font-weight: 700;
    background: var(--surface-2);
}

table.pvsyst-table tr.total-row td {
    color: var(--amber);
}

table.pvsyst-table tr.total-row td:first-child {
    color: var(--text);
}

/* ---------- 11. Charts ---------- */
.chart-card {
    padding: 8px 10px 10px;
    margin-bottom: 16px;
}

#chart1,
#chart2,
#chart3,
#chart4,
#chart5,
#chart6,
#chart7 {
    width: 100%;
    height: 500px;
}

.plant-chart {
    width: 100%;
    height: 450px;
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.chart-caption {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px;
    margin: 8px 4px 2px;
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.65;
}

.chart-caption b {
    color: var(--text);
}

.chart-caption .tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    margin-right: 2px;
}

/* Raw plot tab */
.plot-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.plot-chart {
    width: 100%;
    height: 620px;
}

.plot-series-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.plot-series-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
}

.plot-series-item:hover {
    background: var(--surface-2);
}

.plot-series-item input {
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 15px;
}

.plot-series-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 10px;
}

.plot-series-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .plot-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- 12. Alerts ---------- */
.alert {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.alert-warn {
    background: var(--amber-soft);
    border-color: var(--amber-border);
    color: #FCD48A;
}

/* ---------- 13. Responsive ---------- */

@media (max-width: 900px) {
    :root {
        --gutter: 16px;
    }

    .app-header-inner {
        flex-wrap: wrap;
        align-items: center;
        padding-top: 10px;
        gap: 8px 20px;
    }

    .tab-nav {
        width: 100%;
        margin: 0;
        gap: 0;
    }

    .tab-btn {
        flex: 1;
        padding: 10px 4px;
        text-align: center;
    }

    #chart1,
    #chart2,
    #chart3,
    #chart4,
    #chart5,
    #chart6,
    #chart7,
    .plant-chart {
        height: 400px;
    }
}

@media (max-width: 560px) {
    .brand-subtitle {
        display: none;
    }

    .control-group {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    input,
    select {
        width: 100%;
    }

    .inline-input {
        width: 100%;
    }

    .inline-input input {
        flex: 1;
    }

    .action-bar {
        grid-template-columns: 1fr;
    }
}

/* ---------- 14. Print (force a light page) ---------- */
@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --surface-2: #f8fafc;
        --surface-3: #f1f5f9;
        --field: #fff;
        --border: #d0d7de;
        --border-strong: #cbd5e1;
        --text: #0f172a;
        --text-2: #334155;
        --text-3: #64748b;
        --amber: #b45309;
        --amber-soft: #fef3c7;
        --amber-border: #fcd34d;
        --teal: #0f766e;
        --teal-soft: #ccfbf1;
        --teal-border: #99f6e4;
    }

    html {
        color-scheme: light;
    }

    body {
        background: #fff;
    }

    .app-header,
    .tab-nav,
    .panel-container,
    .upload-grid,
    .chart-toolbar,
    .action-bar,
    button {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .panel,
    .calculation-details,
    .chart-card,
    .metric-card {
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    /* Plotly charts are drawn dark by chart-theme.js; print them light */
    .js-plotly-plot .main-svg {
        background: #fff !important;
    }

    .js-plotly-plot .bglayer rect {
        fill: #fff !important;
    }

    .js-plotly-plot .gridlayer path {
        stroke: #e5e7eb !important;
    }

    .js-plotly-plot .zerolinelayer path {
        stroke: #9ca3af !important;
    }

    .js-plotly-plot text {
        fill: #1f2937 !important;
    }

    #chart1,
    #chart2,
    #chart3,
    #chart4,
    #chart5,
    #chart6,
    #chart7 {
        break-inside: avoid;
        height: 400px;
    }

    .comparison-table-container,
    .calculation-details,
    .pvsyst-table-container {
        break-inside: avoid;
    }

    /* Show all tabs content when printing */
    .tab-page {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
    }
}