/* ReNew dashboard: Neuralix product layout (header, sidebar, breadcrumb, panels, card hub) in the slide deck's colours and type.
   Layout tokens follow renew_solar-dash (src/assets/style.css); colours and DM Sans follow the deck. Dash loads every file in assets/ automatically. */
@font-face { font-family: "DM Sans"; src: url("DMSans-Regular-static.ttf"); font-weight: 400; font-style: normal; }
@font-face { font-family: "DM Sans"; src: url("DMSans-Bold-static.ttf"); font-weight: 700; font-style: normal; }
@font-face { font-family: "DM Sans"; src: url("DMSans-Italic-static.ttf"); font-weight: 400; font-style: italic; }

:root {
  --sidebar-width: 285px; --sidebar-collapsed-width: 72px; --header-height: 56px; --radius: 12px; --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --teal: #074a43; --teal2: #267263; --amber: #f5a623; --red: #c81e3a; --dark: #2a3535;
  --text: #1e2b2b; --muted: #5d706d; --soft: #8a9a97; --border: #dfe6e4; --surface: #ffffff; --bg: #f4f6f5; --panel: #f3f6f5;
  --active-bg: #e4efed; --active-border: #b8d4cf; --active-text: #074a43;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--soft); font-weight: 400; }

/* ---------------------------------------------------------------- header */
.app-header { height: var(--header-height); position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; }
.brand { display: flex; align-items: center; gap: .9rem; }
.brand-logo-renew { height: 30px; width: auto; display: block; }
.brand-powered-row { display: flex; align-items: center; gap: .35rem; padding-left: .9rem; border-left: 1px solid var(--border); height: 26px; font-size: .68rem; color: var(--soft); }
.brand-powered-logo { height: 15px; width: auto; display: block; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.dataset-switcher { display: flex; align-items: center; gap: .5rem; }
.dataset-label { font-size: .72rem; color: var(--soft); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dataset-select { width: 250px; }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 1.15rem; padding: .35rem .5rem; border-radius: 8px; cursor: pointer; display: inline-flex; }
.icon-btn:hover { background: var(--bg); color: var(--text); }

/* ---------------------------------------------------------------- sidebar */
.sidebar { position: fixed; top: var(--header-height); bottom: 0; left: 0; width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; transition: width var(--transition); z-index: 1020; padding-bottom: 1rem; }
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.workspace-card { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.workspace-icon-btn { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.workspace-icon-btn:hover { background: var(--bg); color: var(--text); }
.workspace-title { font-weight: 700; font-size: .9rem; line-height: 1.2; } .workspace-subtitle { font-size: .72rem; color: var(--soft); white-space: nowrap; }
.sidebar.collapsed .workspace-text, .sidebar.collapsed .link-text, .sidebar.collapsed .section-title { display: none; }
.sidebar.collapsed .workspace-card { justify-content: center; padding: .9rem 0; }
.sidebar-section { padding: .7rem .5rem 0; }
.section-title { font-size: .68rem; font-weight: 700; letter-spacing: .07em; color: var(--soft); padding: .4rem .75rem; text-transform: uppercase; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; margin: 0 .35rem; border-radius: 8px; color: var(--text); font-size: .85rem; border: 1px solid transparent; }
.sidebar-link:hover { background: var(--bg); }
.sidebar-link.active { background: var(--active-bg); color: var(--active-text); border-color: var(--active-border); font-weight: 700; }
.sidebar-link i { width: 18px; flex: 0 0 18px; text-align: center; font-size: 1rem; }
.link-text { line-height: 1.25; }
.sidebar.collapsed .sidebar-link { justify-content: center; padding: .6rem 0; margin: 0 .5rem; }

/* ---------------------------------------------------------------- content */
.content-area { margin-left: var(--sidebar-width); margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); transition: margin-left var(--transition); display: flex; flex-direction: column; }
.content-area.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }
#page { flex: 1 1 auto; }
.breadcrumb-wrap { padding: .85rem 1.6rem 0; font-size: .8rem; color: var(--soft); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.crumb:hover { color: var(--teal); } .crumb.current { color: var(--muted); font-weight: 700; } .crumb-sep { opacity: .6; }
.page-wrap { padding: .6rem 1.6rem 1.8rem; max-width: 1560px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .35rem 0 1.1rem; }
.page-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--teal); margin-bottom: .3rem; }
.page-title-row { display: flex; align-items: center; gap: .65rem; }
.page-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--active-bg); color: var(--active-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.page-title { font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.page-subtitle { color: var(--muted); font-size: .92rem; margin-top: .3rem; max-width: 880px; line-height: 1.5; }
.pager { display: flex; gap: .5rem; flex-wrap: wrap; }
.pager-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .7rem; }
.pager-link:hover { color: var(--teal); border-color: var(--active-border); }

/* ---------------------------------------------------------------- panels */
.panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.03); margin-bottom: 1.1rem; overflow: hidden; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .95rem 1.2rem .15rem; }
.panel-title { font-weight: 700; font-size: .98rem; } .panel-subtitle { color: var(--soft); font-size: .78rem; margin-top: .1rem; }
.panel-body { padding: .75rem 1.2rem 1.1rem; }
.panel-body p { font-size: .88rem; line-height: 1.55; color: var(--text); margin-bottom: .6rem; } .panel-body p.small { font-size: .78rem; color: var(--soft); font-style: italic; }
.dark-panel { background: var(--dark); border-color: var(--dark); color: #fff; }
.dark-panel .panel-title { color: var(--amber); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .dark-panel .panel-subtitle { color: #b9c6c3; }
.dark-panel .panel-body p { color: #fff; } .dark-panel .panel-body p.small { color: #c3cfcc; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-block; color: #fff; font-size: .72rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; }
.ds-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; background: #e1eeec; color: var(--teal); white-space: nowrap; }
.ds-chip-expl { background: #f1e8f6; color: #5f2f80; }

/* ---------------------------------------------------------------- KPI cards (shared component) */
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; }
.kpi-head { display: flex; align-items: center; gap: .5rem; } .kpi-icon { background: var(--active-bg); color: var(--active-text); border-radius: 8px; padding: .3rem .45rem; }
.kpi-card-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .kpi-card-value { font-size: 1.55rem; font-weight: 700; margin-top: .2rem; } .kpi-card-note { color: var(--soft); font-size: .75rem; }

/* ---------------------------------------------------------------- home: card hub */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.1rem; }
.dashboard-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.1rem; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); min-height: 285px; color: var(--text); }
.dashboard-card:hover { box-shadow: 0 8px 20px rgba(7,74,67,.12); transform: translateY(-2px); border-color: var(--active-border); }
.dashboard-card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--active-bg); color: var(--active-text); font-size: 1.2rem; margin-bottom: .9rem; }
.dashboard-card-title { font-weight: 700; font-size: 1.02rem; margin-bottom: .35rem; } .dashboard-card-desc { color: var(--text); font-size: .86rem; line-height: 1.5; margin-bottom: .35rem; } .dashboard-card-note { color: var(--soft); font-size: .8rem; font-style: italic; line-height: 1.45; }
.dashboard-card-counts { display: flex; gap: 1.8rem; margin-top: auto; padding-top: 1rem; } .count-num { font-size: 1.5rem; font-weight: 700; color: var(--teal); } .count-unit { font-size: .82rem; color: var(--muted); } .count-ds { font-size: .72rem; color: var(--soft); }
.dashboard-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.dashboard-card-tag { font-size: .68rem; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; } .dashboard-card-open { font-size: .82rem; font-weight: 700; color: var(--teal2); display: inline-flex; align-items: center; gap: .3rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ds-list { display: flex; flex-direction: column; gap: .8rem; } .ds-item { border: 1px solid var(--border); border-radius: 10px; padding: .75rem .9rem; background: var(--panel); } .ds-name { font-weight: 700; font-size: .9rem; } .ds-desc { color: var(--muted); font-size: .82rem; margin-top: .15rem; line-height: 1.45; }
.steps { padding-left: 1.2rem; margin: .2rem 0 0; font-size: .88rem; line-height: 1.6; } .steps li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------- category: summary table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.summary-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.summary-table thead th { background: var(--dark); color: #fff; text-align: left; padding: .65rem .9rem; font-size: .8rem; font-weight: 700; vertical-align: top; }
.th-sub { font-weight: 400; font-size: .7rem; color: #c3cfcc; margin-top: .1rem; }
.summary-table td { padding: .75rem .9rem; border-top: 1px solid var(--border); vertical-align: top; }
.summary-table tbody tr:nth-child(even) td { background: #f8faf9; }
.rule-cell { color: var(--muted); font-size: .84rem; line-height: 1.45; max-width: 460px; }
.sum-num { font-size: 1.35rem; font-weight: 700; color: var(--teal); } .sum-unit { font-size: .82rem; color: var(--muted); } .sum-sub { font-size: .76rem; color: var(--soft); margin-top: .1rem; } .sum-zero { color: var(--soft); font-size: 1.2rem; }
.summary-table tr.total-row td { font-weight: 700; border-top: 2px solid var(--teal2); background: #eaf2f0; } .measure { font-weight: 700; }
.log-strip { background: var(--panel); border-left: 4px solid var(--amber); border-radius: 8px; padding: .75rem 1rem; margin-top: .9rem; font-size: .88rem; line-height: 1.5; }
.sum-note { font-size: .78rem; color: var(--soft); font-style: italic; margin-top: .6rem; }
.jump-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; font-weight: 700; color: var(--teal2); font-size: .85rem; }

/* ---------------------------------------------------------------- category: filters, plot, details */
.explore-head { margin: 1.6rem 0 .7rem; scroll-margin-top: 80px; } .section-title-lg { font-size: 1.25rem; font-weight: 700; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1.2rem 1rem; margin-bottom: 1.1rem; }
.ctl { flex: 1 1 200px; min-width: 190px; } .ctl-wide { flex: 2 1 380px; } .ctl-ds { flex: 0 0 auto; min-width: 0; } .ctl-tog { flex: 0 0 auto; min-width: 180px; }
.ctl label { display: block; font-size: .7rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; letter-spacing: .05em; text-transform: uppercase; }
.ds-echo { height: 38px; display: flex; align-items: center; } .hint { font-size: .7rem; color: var(--soft); margin-top: .3rem; max-width: 190px; line-height: 1.3; }
.switch label { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid #c5d0cd; border-radius: 22px; padding: .42rem 1rem .42rem .7rem; font-size: .86rem; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0; }
.switch input { appearance: none; -webkit-appearance: none; width: 34px; height: 18px; border-radius: 9px; background: #c5d0cd; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; }
.switch input:checked { background: var(--teal); } .switch input:checked::after { left: 18px; } .switch label:has(input:checked) { border-color: var(--teal); color: var(--teal); }
.body-grid { display: flex; gap: 1.1rem; align-items: flex-start; } .plot-col { flex: 1 1 0; min-width: 0; } .side-col { flex: 0 0 340px; display: flex; flex-direction: column; }
.plot-panel .panel-body { padding: .4rem .6rem .5rem; }
.info-title { font-size: 1.05rem; } .info-panel .panel-body { padding-top: .6rem; }
.slide-ref { font-size: .86rem; color: var(--teal); margin-bottom: .7rem; display: flex; align-items: center; gap: .25rem; }
.facts { width: 100%; border-collapse: collapse; font-size: .84rem; } .facts td { padding: .45rem .25rem; border-top: 1px solid var(--border); vertical-align: top; } .facts td:first-child { color: var(--muted); width: 46%; padding-right: .6rem; }

/* ---------------------------------------------------------------- guide */
.legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1.4rem; }
.legend-item { display: flex; gap: .7rem; align-items: flex-start; } .legend-title { font-weight: 700; font-size: .86rem; } .legend-desc { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.sw { flex: 0 0 22px; margin-top: 3px; display: inline-block; } .sw-dot { width: 12px; height: 12px; flex-basis: 12px; border-radius: 50%; margin-right: 5px; margin-left: 2px; } .sw-line { height: 3px; margin-top: 8px; }
.sw-band { width: 22px; height: 14px; border-radius: 3px; opacity: .55; } .sw-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid; flex-basis: 12px; margin-right: 5px; margin-left: 3px; }

/* ---------------------------------------------------------------- footer */
.app-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.6rem 1.2rem; border-top: 1px solid var(--border); font-size: .68rem; color: var(--soft); background: var(--surface); }

/* ---------------------------------------------------------------- Dash dropdowns (Dash 4 markup) */
.dash-dropdown-wrapper { width: 100%; }
button.dash-dropdown { width: 100%; min-height: 38px; background: var(--surface); border: 1px solid #c5d0cd; border-radius: 8px; font-family: inherit; font-size: .88rem; color: var(--text); padding: 0 .7rem; text-align: left; cursor: pointer; }
button.dash-dropdown:hover { border-color: var(--teal2); } button.dash-dropdown:focus-visible { outline: 2px solid var(--active-border); }
.dataset-select button.dash-dropdown { min-height: 34px; font-weight: 700; color: var(--teal); background: var(--active-bg); border-color: var(--active-border); }
.dash-dropdown-content { font-family: "DM Sans", system-ui, sans-serif; font-size: .88rem; z-index: 2000; border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.14); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1250px) { .hub-grid { grid-template-columns: 1fr 1fr; } .legend-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .body-grid { flex-direction: column; } .side-col { flex: 1 1 auto; width: 100%; } .two-col { grid-template-columns: 1fr; } .sidebar:not(.collapsed) { box-shadow: 4px 0 24px rgba(15,23,42,.1); } }
@media (max-width: 900px) { .sidebar { width: var(--sidebar-collapsed-width); } .sidebar .workspace-text, .sidebar .link-text, .sidebar .section-title { display: none; } .content-area { margin-left: var(--sidebar-collapsed-width); } .dataset-label, .brand-powered-row { display: none; } .dataset-select { width: 190px; } }
@media (max-width: 640px) { .hub-grid, .legend-grid { grid-template-columns: 1fr; } .page-wrap { padding: .5rem 1rem 1.4rem; } .rule-cell { display: none; } }

/* plot headings and the three-column key */
.plot-heading { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .1rem; color: var(--ink, #1e2b2b); } #tr-block .plot-heading { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #e4ebe9; }
.lg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem 1.2rem; font-size: .8rem; color: var(--muted); margin: .4rem 0 .3rem 8px; } .lg-item { display: flex; align-items: center; gap: .5rem; min-height: 22px; }
.lg-item .sw { margin-top: 0; flex: 0 0 22px; } .lg-item .sw-dot { flex-basis: 12px; margin: 0 5px 0 2px; } .sw-dash { height: 0; width: 22px; border-top: 2px dashed; background: transparent; }
@media (max-width: 800px) { .lg-cols { grid-template-columns: 1fr; margin-left: 0; } }

/* the folded summary table of Categories 4 and 5 */
.fold { margin-bottom: 1rem; } .fold > .panel-card { margin-top: .5rem; }
.fold-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; background: var(--surface, #fff); border: 1px solid #dbe3e1; border-radius: 12px; padding: .8rem 1.1rem; font-size: .95rem; color: var(--ink, #1e2b2b); user-select: none; }
.fold-head::-webkit-details-marker { display: none; } .fold-head:hover { border-color: var(--teal, #46877a); } .fold-title { font-weight: 700; } .fold-sub { color: var(--muted, #8a9a97); font-size: .85rem; flex: 1; }
.fold-head .bi-chevron-down { transition: transform .15s; } .fold[open] .fold-head .bi-chevron-down { transform: rotate(180deg); }

.lg-flat { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; font-size: .8rem; color: var(--muted); margin: .4rem 0 .2rem 8px; }

.how-list { padding-left: 1.1rem; margin: .2rem 0 .6rem; } .how-list li { margin-bottom: .55rem; line-height: 1.5; } .how-list li::marker { color: #f5a623; font-weight: 700; } .how-list b { color: #fff; }