/* Independent work areas, reports navigation, and workspace configuration. */
html, body, #app-shell { height: 100%; }
body { overflow: hidden; }
.shell { height: 100vh; min-height: 0; overflow: hidden; }
.sidebar { height: 100vh; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.workspace { height: 100vh; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.brand-mark { border-radius: 10px; font-size: 12px; letter-spacing: -.08em; }
.brand-copy strong { font-size: 11px; letter-spacing: .13em; }
.brand-copy small { font-size: 10px; }
.reports-page { max-width: 1750px; margin: 0 auto; }
.reports-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 17px; }
.reports-header h2 { margin: 4px 0 0; }
.report-period-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.reports-layout { display: grid; grid-template-columns: minmax(190px,230px) minmax(0,1fr); align-items: start; gap: 17px; }
.reports-secondary-sidebar { position: sticky; top: 98px; max-height: calc(100vh - 132px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.reports-secondary-sidebar section + section { margin-top: 15px; }
.reports-secondary-sidebar h3 { margin: 7px 8px 5px; color: var(--faint); font-size: 9px; letter-spacing: .1em; }
.reports-secondary-sidebar button { display: block; width: 100%; min-height: 33px; margin: 2px 0; padding: 7px 9px; border-color: transparent; background: transparent; color: var(--muted); text-align: left; font-size: 11px; }
.reports-secondary-sidebar button:hover, .reports-secondary-sidebar button.active { color: var(--text); background: var(--surface-raised); border-color: var(--border); }
.reports-content { min-width: 0; }
.report-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.report-title-row h2 { margin: 0; }
.report-title-row p { margin: 5px 0 0; }
.report-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 13px 0; }
.report-kpi-card { min-width: 0; display: grid; gap: 8px; padding: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; text-align: left; }
.report-kpi-card:hover { border-color: var(--blue); }
.report-kpis span { color: var(--muted); font-size: 10px; }
.report-kpis strong { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.report-kpis small { color: var(--faint); font-size: 9px; line-height: 1.4; }
.report-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0 0 12px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.report-filter-row label { display: grid; gap: 4px; min-width: min(170px,100%); color: var(--muted); font-size: 9px; }
.report-filter-row select { min-width: 145px; max-width: min(240px,70vw); height: 31px; padding: 4px 7px; font-size: 10px; }
.report-filter-row button { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.report-warning { margin: 12px 0; padding: 11px 13px; color: #9a6a0b; background: #fff6df; border: 1px solid #ecd497; border-radius: 8px; font-size: 11px; line-height: 1.5; }
.report-empty { display: grid; gap: 5px; place-items: center; min-height: 140px; padding: 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; text-align: center; }
.report-empty strong { color: var(--text); font-size: 12px; }
.report-empty span { font-size: 10px; }
.report-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 13px; color: var(--muted); font-size: 11px; }
.reports-mobile-select { display: none; }
.factory-cost-settings { margin-top: 19px; }
.factory-cost-form { display: grid; grid-template-columns: repeat(3,minmax(150px,1fr)); gap: 11px; align-items: end; margin: 14px 0; }
.factory-cost-form label { min-width: 0; }
.factory-cost-form input { min-width: 0; }
.factory-cost-form .check-field { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.factory-cost-form .check-field input { width: auto; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; max-width: 1100px; }
.settings-logo-note { display: grid; gap: 5px; margin-top: 18px; padding: 12px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; }
.settings-logo-note strong { color: var(--text); }
.sales-period-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 7px; }
.sales-period-controls label { min-width: 95px; color: var(--muted); font-size: 9px; }
.sales-period-controls select, .sales-period-controls input { min-width: 110px; height: 32px; padding: 5px 8px; font-size: 10px; }
.period-source { align-self: center; color: var(--faint); font-size: 9px; white-space: nowrap; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f8; --sidebar: #fff; --surface: #fff; --surface-raised: #f6f9fc; --surface-soft: #f5f7fa;
  --border: #dce4eb; --border-strong: #c7d2dd; --text: #172b40; --muted: #5e7185; --faint: #718398;
  --blue: #1675bd; --cyan: #11889a; --green: #158653; --amber: #a97008; --red: #be443a;
  background: var(--bg); color: var(--text);
}
html[data-theme="light"] body, html[data-theme="light"] main, html[data-theme="light"] .shell { background: var(--bg); color: var(--text); }
html[data-theme="light"] .sidebar { background: #fff; border-color: #dce4eb; }
html[data-theme="light"] .workspace { background: #f3f6f9; }
html[data-theme="light"] .brand, html[data-theme="light"] .brand-copy strong { color: #18334d; }
html[data-theme="light"] .brand-mark { color: #fff; background: #174d78; box-shadow: none; }
html[data-theme="light"] .nav-label, html[data-theme="light"] .reports-secondary-sidebar h3 { color: #74869a; }
html[data-theme="light"] .nav button { color: #53677b; }
html[data-theme="light"] .nav button:hover, html[data-theme="light"] .owner-profile:hover, html[data-theme="light"] .owner-profile[aria-expanded="true"] { background: #edf4fa; border-color: #dbe6ee; color: #193c5c; }
html[data-theme="light"] .nav button.active { color: #123d62; background: #e6f1fa; border-color: #c8ddec; box-shadow: inset 2px 0 #1778bc; }
html[data-theme="light"] .nav button.active svg { color: #1477b8; }
html[data-theme="light"] .sidebar-footer { color: #344a60; border-color: #dbe3eb; }
html[data-theme="light"] .owner-avatar { color: #144a73; background: #e1eff8; }
html[data-theme="light"] .owner-menu { color: #172b40; background: #fff; border-color: #d7e1e9; box-shadow: 0 14px 34px #20364c20; }
html[data-theme="light"] .owner-menu-item { color: #334a60; }
html[data-theme="light"] .owner-menu-item:hover:not(:disabled) { background: #eef4f8; }
html[data-theme="light"] .owner-menu-separator { background: #e0e7ed; }
html[data-theme="light"] .topbar { color: #172b40; background: #ffffffed; border-color: #dce4eb; }
html[data-theme="light"] .page-heading h1, html[data-theme="light"] .view h2, html[data-theme="light"] .view h3, html[data-theme="light"] .card-heading h2 { color: #17334d; }
html[data-theme="light"] .view, html[data-theme="light"] .reports-page { color: #172b40; }
html[data-theme="light"] .section-kicker { color: #637d95; }
html[data-theme="light"] button, html[data-theme="light"] .button { color: #214564; background: #fff; border-color: #cbd7e1; }
html[data-theme="light"] button:hover, html[data-theme="light"] .button:hover { color: #123e64; background: #edf5fa; border-color: #9ebbd0; }
html[data-theme="light"] button.primary, html[data-theme="light"] .login-card button[type=submit], html[data-theme="light"] .dialog-actions button[type=submit] { color: #fff; background: #15527f; border-color: #15527f; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: #1b3147; background: #fff; border-color: #cbd6e0; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #8191a1; }
html[data-theme="light"] .panel, html[data-theme="light"] .metric, html[data-theme="light"] .detail-card, html[data-theme="light"] .login-card,
html[data-theme="light"] .dash-card, html[data-theme="light"] .reports-secondary-sidebar, html[data-theme="light"] .report-kpi-card { color: #1b3147; background: #fff; border-color: #d9e2e9; box-shadow: 0 5px 20px #15304a0b; }
html[data-theme="light"] .kpi-card { background: linear-gradient(145deg,#fff,#f6f9fc 72%); border-color: #d8e3eb; box-shadow: 0 5px 18px #1836500c; }
html[data-theme="light"] .kpi-label, html[data-theme="light"] .trend-heading, html[data-theme="light"] .operations-list span:nth-child(2), html[data-theme="light"] .spotlight-main strong, html[data-theme="light"] .spotlight-total strong, html[data-theme="light"] .attention-copy strong, html[data-theme="light"] .funnel-step strong { color: #233d56; }
html[data-theme="light"] .kpi-label span, html[data-theme="light"] .kpi-foot, html[data-theme="light"] .card-subtitle, html[data-theme="light"] .card-caption, html[data-theme="light"] .card-footnote, html[data-theme="light"] .attention-copy small, html[data-theme="light"] .attention-foot, html[data-theme="light"] .spotlight-main span, html[data-theme="light"] .spotlight-batch, html[data-theme="light"] .dashboard-source-note { color: #687d91; }
html[data-theme="light"] .kpi-value { color: #193c5b; }
html[data-theme="light"] .kpi-revenue { background: linear-gradient(135deg,#f2fbf6,#fff 78%); border-color: #cfe6d9; }
html[data-theme="light"] .kpi-revenue .kpi-value { color: #16734b; }
html[data-theme="light"] .kpi-icon, html[data-theme="light"] .customer-icon, html[data-theme="light"] .order-icon, html[data-theme="light"] .pcs-icon, html[data-theme="light"] .revenue-icon { color: #166394; background: #e4f1f8; }
html[data-theme="light"] .trend-panel, html[data-theme="light"] .ads-summary-grid>div, html[data-theme="light"] .payment-summary-grid>div, html[data-theme="light"] .detail-item, html[data-theme="light"] .item-row { background: #f6f9fb; border-color: #dfe7ed; }
html[data-theme="light"] .trend-heading strong, html[data-theme="light"] .ads-summary-grid strong, html[data-theme="light"] .payment-summary-grid strong, html[data-theme="light"] .operations-list strong, html[data-theme="light"] .spotlight-total strong { color: #1b3853; }
html[data-theme="light"] .trend-revenue .trend-heading strong, html[data-theme="light"] .payment-summary-grid .positive-value { color: #16734b; }
html[data-theme="light"] .chart-gridline { stroke: #d8e1e9; }
html[data-theme="light"] .chart-end { stroke: #fff; }
html[data-theme="light"] .chart-empty, html[data-theme="light"] .trend-labels, html[data-theme="light"] .dash-empty span, html[data-theme="light"] .funnel-step>span:last-child, html[data-theme="light"] .funnel-index, html[data-theme="light"] .funnel-arrow { color: #718398; }
html[data-theme="light"] .dash-empty strong { color: #39536b; }
html[data-theme="light"] .attention-row { border-color: #e4eaf0; }
html[data-theme="light"] .attention-row:hover { background: #f5f8fa; }
html[data-theme="light"] .source-warning, html[data-theme="light"] .data-limits { color: #7d5e1d; background: #fff8e6; border-color: #ebddb6; }
html[data-theme="light"] .coverage-stat strong { color: #16734b; }
html[data-theme="light"] .watch-row, html[data-theme="light"] .comparison-group { color: #263d54; background: #f7fafc; border-color: #dfe7ed; }
html[data-theme="light"] .watch-label strong, html[data-theme="light"] .spotlight-code, html[data-theme="light"] .comparison-title strong { color: #173b5a; }
html[data-theme="light"] .watch-row p, html[data-theme="light"] .watch-row small, html[data-theme="light"] .watch-metrics, html[data-theme="light"] .comparison-title span, html[data-theme="light"] .comparison-facts { color: #64798d; }
html[data-theme="light"] .watch-badge { color: #78570a; background: #fbf0d1; }
html[data-theme="light"] .period-badge { color: #526b81; background: #f0f5f8; border-color: #dce4eb; }
html[data-theme="light"] .table-wrap { color: #243c54; background: #fff; border-color: #d8e2e9; }
html[data-theme="light"] th, html[data-theme="light"] td { color: #2a4258; border-color: #e0e7ed; }
html[data-theme="light"] th { color: #526a80; background: #f1f5f8; }
html[data-theme="light"] tbody tr:hover td { background: #f5f8fa; }
html[data-theme="light"] .badge { color: #405a71; background: #edf2f6; }
html[data-theme="light"] .badge.active, html[data-theme="light"] .badge.open, html[data-theme="light"] .badge.ready, html[data-theme="light"] .badge.confirmed, html[data-theme="light"] .badge.full_payment { color: #17653f; background: #e2f3e8; }
html[data-theme="light"] .badge.closed, html[data-theme="light"] .badge.inactive, html[data-theme="light"] .badge.posted { color: #647487; background: #edf0f3; }
html[data-theme="light"] .badge.unpaid, html[data-theme="light"] .badge.deposit { color: #89610d; background: #fbf1d7; }
html[data-theme="light"] .unpaid, html[data-theme="light"] .unpaid-row td { color: #8b473d; background: #fff3ee; }
html[data-theme="light"] .editor { color: #1b3147; background: #fff; border-color: #ccd9e3; }
html[data-theme="light"] .editor::backdrop { background: #10233966; }
html[data-theme="light"] .help, html[data-theme="light"] .muted { color: #6e8295; }
html[data-theme="light"] .reports-secondary-sidebar button { color: #5d7286; }
html[data-theme="light"] .reports-secondary-sidebar button:hover, html[data-theme="light"] .reports-secondary-sidebar button.active { color: #17466d; background: #edf5fa; border-color: #d5e5ef; }
html[data-theme="light"] .login-card h2 { color: #17334d; }
html[data-theme="light"] .settings-logo-note { color: #5f7387; background: #f6f9fb; border-color: #dce5eb; }
html[data-theme="light"] .settings-logo-note strong { color: #24435f; }

@media (max-width: 1000px) {
  .reports-layout { grid-template-columns: minmax(0,1fr); }
  .reports-secondary-sidebar { display: none; }
  .reports-mobile-select { display: grid; max-width: 430px; margin: 0 0 12px; }
}
@media (max-width: 850px) {
  .reports-secondary-sidebar { max-height: calc(100vh - 100px); }
  .report-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .factory-cost-form { grid-template-columns: repeat(2,minmax(140px,1fr)); }
  .sales-period-controls { justify-content: flex-start; }
}
@media (max-width: 620px) {
  body { overflow: auto; }
  #app-shell, .shell { height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { height: auto; min-height: 0; max-height: 38vh; overflow-y: auto; }
  .workspace { height: auto; min-height: 62vh; overflow: visible; }
  .topbar { position: sticky; top: 0; }
  .reports-header, .report-title-row { align-items: stretch; flex-direction: column; }
  .report-period-controls { justify-content: flex-start; }
  .report-period-controls .filter-row { width: 100%; }
  .report-filter-row { align-items: stretch; }
  .report-filter-row label, .report-filter-row select, .report-filter-row button { width: 100%; max-width: none; }
  .report-kpis { gap: 7px; }
  .report-kpi-card { padding: 10px; }
  .report-kpis strong { font-size: 14px; }
  .factory-cost-form { grid-template-columns: 1fr; }
  .sales-period-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sales-period-controls label, .sales-period-controls select, .sales-period-controls input { min-width: 0; }
  .period-source { grid-column: 1/-1; }
}
@media print {
  body, .workspace { height: auto !important; overflow: visible !important; }
  .reports-layout { display: block; }
  .reports-secondary-sidebar, .reports-mobile-select { display: none !important; }
  .report-kpis { grid-template-columns: repeat(4,1fr); }
  .reports-content, .factory-cost-settings { break-inside: avoid; }
}