:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page: #f4f4f1;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  /* NETS International brand green (nets-international.com's Elementor kit:
     primary #3B9F47 / secondary #9BC61D / accent #61CE70) - kept separate
     from the series-* chart palette below so the validated categorical
     colors used for data series are never put at risk by a brand refresh. */
  --brand: #3B9F47;
  --brand-hover: #2E7D37;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --success-text: #006300;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --brand: #4CAF50;
  --brand-hover: #6ABF6E;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #e66767;
  --success-text: #0ca30c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --brand: #4CAF50;
    --brand-hover: #6ABF6E;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --success-text: #0ca30c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  font-size: 14px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .brand {
  font-weight: 700;
  font-size: 15px;
  padding: 8px 10px 16px;
  color: var(--brand);
}
.sidebar .brand small { display: block; color: var(--text-muted); font-weight: 400; font-size: 11px; }
.sidebar a.nav-link {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13.5px;
}
.sidebar a.nav-link:hover { background: var(--page); text-decoration: none; }
.sidebar a.nav-link.active { background: var(--brand); color: white; }
.sidebar .nav-section {
  margin-top: 14px;
  padding: 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.sidebar .spacer { flex: 1; }
.sidebar a.nav-mode-switch {
  border: 1px solid var(--border); font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.sidebar a.nav-mode-switch:hover { border-color: var(--brand); color: var(--brand); background: var(--accent-wash, var(--page)); }
/* Generic segmented toggle (theme switch, currency switch, ...) */
.theme-switch, .segmented { display: flex; gap: 2px; padding: 3px; background: var(--page); border-radius: 8px; }
.theme-switch { margin: 0 10px 10px; }
.theme-opt, .segmented-opt {
  flex: 1; border: none; background: transparent; color: var(--text-muted);
  font-size: 11.5px; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.theme-opt:hover, .segmented-opt:hover { color: var(--text-primary); }
.theme-opt.active, .segmented-opt.active { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.sidebar .user-box { padding: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }

.main { flex: 1; min-width: 0; padding: 24px 32px 60px; }
.main.presentation { padding: 40px 60px; }

/* The 4-page nav (Cash Flow/Payables/Receivables/Projects) collapsed every
   other dashboard into a tab under one of those (2026-09-09) - rendered
   automatically by base.html for any page in nav_sections, so no per-page
   template carries its own copy of this markup. */
.section-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: -8px -8px 20px; padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.section-tabs .section-tab {
  padding: 9px 14px 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.section-tabs .section-tab:hover { color: var(--text-primary); text-decoration: none; }
.section-tabs .section-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 28px 0 10px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.subtitle { color: var(--text-secondary); font-size: 13px; margin: 0; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--brand); text-decoration: none; }
.btn.primary { background: var(--brand); color: white; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.danger { color: var(--critical); }
.btn.small { padding: 4px 9px; font-size: 12px; }

/* "Ask" chat widget (2026-09-14) - floating on every authenticated page,
   markup in base.html, logic in static/js/assistant.js. */
.cf-ask-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 500;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--brand); color: #fff; font-family: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.cf-ask-toggle:hover { background: var(--brand-hover); }
.cf-ask-panel {
  position: fixed; right: 22px; bottom: 88px; z-index: 500;
  width: 340px; max-width: calc(100vw - 44px); height: 440px; max-height: calc(100vh - 140px);
  display: none; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28); overflow: hidden;
}
.cf-ask-panel.open { display: flex; }
.cf-ask-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--brand); color: #fff; font-weight: 600; font-size: 13px;
}
.cf-ask-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cf-ask-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cf-ask-hint { color: var(--text-muted); font-size: 12.5px; font-style: italic; padding: 4px 2px; }
.cf-ask-msg { padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; max-width: 88%; white-space: pre-wrap; }
.cf-ask-msg-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 2px; }
.cf-ask-msg-assistant { align-self: flex-start; background: var(--page); color: var(--text-primary); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
.cf-ask-msg-assistant-pending { align-self: flex-start; background: var(--page); color: var(--text-muted); border: 1px solid var(--border); font-style: italic; }
.cf-ask-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.cf-ask-form input {
  flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--page); color: var(--text-primary); font-family: inherit; font-size: 13px;
}
@media (max-width: 480px) {
  .cf-ask-panel { right: 12px; left: 12px; width: auto; bottom: 82px; }
  .cf-ask-toggle { right: 16px; bottom: 16px; }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.kpi-tile .label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-tile .value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-tile .value.neg { color: var(--critical); }
.kpi-tile .sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }

/* Toggle (+/-) column kept separate from the label column so a row's label
   always starts at the same x position whether or not it has a button -
   otherwise labels ragged-left depending on which rows happened to be
   expandable (see dashboard_executive.html's Monthly Detail table). */
.toggle-cell { width: 32px; padding-left: 10px !important; padding-right: 0 !important; text-align: left; }
.toggle-cell + td { text-align: left; white-space: normal; }
.toggle-cell .btn { min-width: 26px; text-align: center; }
.indent-1 { padding-left: 24px !important; }
.indent-2 { padding-left: 44px !important; }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.02em; position: sticky; top: 0; background: var(--surface-1); z-index: 2; box-shadow: 0 1px 0 var(--border); }
tr.section-row td { font-weight: 700; background: var(--page); }
tr.total-row td { font-weight: 700; border-top: 1px solid var(--baseline); }
tr.milestone-summary td { background: var(--surface-1); font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; }
/* Summary column appended after the last selected month in a monthly-detail
   table (e.g. Executive Summary) - left border + weight sets it apart as a
   period total rather than just another month. */
th.total-col, td.total-col { border-left: 1px solid var(--border); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.table-wrap table { min-width: 600px; }
/* overflow-x:auto above forces overflow-y:auto too (can't mix visible with
   non-visible per the CSS overflow spec), which quietly makes .table-wrap
   itself the sticky-positioning containing block - but since .table-wrap
   never actually scrolls (the page does), a sticky <th> never stays put.
   Giving it a real bounded height makes it the genuine scroll container,
   so its own sticky header correctly freezes as you scroll within it. */
.table-wrap-scroll { max-height: calc(100vh - 260px); overflow-y: auto; }

.sort-th-link { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.sort-th-link:hover { text-decoration: underline; color: var(--brand); }
.sort-th-hint { font-size: 9px; opacity: 0.35; }
.sort-th-link:hover .sort-th-hint { opacity: 1; }

tr.detail-row > td { background: var(--page); padding: 10px 10px 10px 36px; border-bottom: 1px solid var(--gridline); }
.detail-table { font-size: 12px; min-width: 0; }
.detail-table th { position: static; }
.detail-table th, .detail-table td { padding: 5px 8px; }
.detail-table-nested td { padding-left: 22px; font-size: 11px; color: var(--text-muted); }
.remarks-cell { text-align: left !important; white-space: normal !important; min-width: 260px; max-width: 420px; color: var(--text-secondary); font-style: italic; }
th.remarks-cell { color: var(--text-muted); font-style: normal; }
.remarks-cell input, .remarks-cell textarea { font-style: normal; }
.qedit-wrap { display: flex; align-items: flex-start; gap: 8px; }
.qedit-notes, .qedit-expected {
  border: 1px solid transparent; background: transparent; color: var(--text-primary);
  font-family: inherit; font-size: 12px; padding: 4px 6px; border-radius: 5px; transition: border-color 0.15s, background 0.15s;
}
.qedit-notes {
  flex: 1; min-width: 0; width: 100%; resize: none; overflow: hidden;
  line-height: 1.45; min-height: 24px;
}
.qedit-notes:hover, .qedit-expected:hover { background: var(--page); }
.qedit-notes:focus, .qedit-expected:focus {
  outline: none; border-color: var(--brand, var(--series-1)); background: var(--surface-1);
  box-shadow: 0 0 0 2px var(--accent-wash, rgba(59, 159, 71, 0.12));
}
.save-indicator { font-size: 10.5px; white-space: nowrap; flex-shrink: 0; min-width: 0; transition: opacity 0.2s; margin-top: 4px; }
.save-indicator.saving { color: var(--text-muted); }
.save-indicator.saved { color: var(--success-text); font-weight: 600; }
.save-indicator.error { color: var(--critical); font-weight: 600; }

/* Auto-save data grid (Receivables etc.) - fields look like plain text
   until you touch them, so the sheet reads clean instead of like a wall
   of boxed inputs. */
.qedit-grid td { vertical-align: top; }
.qedit-grid tr.qedit-row:hover { background: var(--page); }
.qcell {
  display: block; width: 100%; border: 1px solid transparent; background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 12.5px; padding: 4px 6px;
  border-radius: 5px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
select.qcell { cursor: pointer; }
.qcell:hover { background: var(--surface-1); border-color: var(--border); }
.qcell:focus {
  outline: none; background: var(--surface-1); border-color: var(--brand, var(--series-1));
  box-shadow: 0 0 0 2px var(--accent-wash, rgba(59, 159, 71, 0.12));
}
input.qcell.num, textarea.qcell.num { text-align: right; font-variant-numeric: tabular-nums; }
.qcell-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.qcell-sub:focus { color: var(--text-primary); }
.qedit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qedit-actions .btn.danger {
  width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; opacity: 0.55;
}
.qedit-actions .btn.danger:hover { opacity: 1; }

.negative { color: var(--critical); }
.positive { color: var(--success-text); }

tr.row-flag td { background: rgba(250, 178, 25, 0.10); }
tr.row-flag td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
tr.row-flag-serious td { background: rgba(236, 131, 90, 0.10); }
tr.row-flag-serious td:first-child { box-shadow: inset 3px 0 0 var(--serious); }
tr.row-flag-manual td { background: rgba(59, 130, 246, 0.08); }
tr.row-flag-manual td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }
.pin-toggle { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 15px; line-height: 1; color: var(--text-muted); opacity: 0.5; }
.pin-toggle:hover { opacity: 1; }
.pin-toggle.pinned { color: #3b82f6; opacity: 1; }

form.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.flash.success { background: rgba(12, 163, 12, 0.12); color: var(--success-text); }
.flash.error { background: rgba(208, 59, 59, 0.12); color: var(--critical); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge.pending { background: rgba(250, 178, 25, 0.18); color: #9a6b00; }
.badge.partial { background: rgba(236, 131, 90, 0.18); color: var(--serious); }
.badge.paid { background: rgba(12, 163, 12, 0.15); color: var(--success-text); }
.badge.overdue { background: rgba(208, 59, 59, 0.14); color: var(--critical); }
.badge.status-good { background: rgba(12, 163, 12, 0.15); color: var(--good); }
.badge.status-warning { background: rgba(250, 178, 25, 0.18); color: #9a6b00; }
.badge.status-serious { background: rgba(236, 131, 90, 0.18); color: var(--serious); }
.badge.status-critical { background: rgba(208, 59, 59, 0.14); color: var(--critical); }
.badge.status-neutral { background: var(--border); color: var(--text-muted); }
.badge.badge-toggle { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; }
.badge.badge-toggle:hover { filter: brightness(0.93); }

.alert-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 13.5px;
  background: rgba(208, 59, 59, 0.10); border: 1px solid rgba(208, 59, 59, 0.35); color: var(--critical);
}
.alert-banner .icon { font-size: 16px; line-height: 1; }
.alert-banner strong { font-weight: 700; }
.alert-banner.warning { background: rgba(250, 178, 25, 0.12); border-color: rgba(250, 178, 25, 0.4); color: #9a6b00; }

.chart-svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.chart-legend .item { display: flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.login-card h1 { text-align: center; margin-bottom: 20px; }
.login-card .field { margin-bottom: 12px; }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

.empty-state { color: var(--text-muted); font-size: 13px; padding: 24px; text-align: center; }

/* Board Summary */
.board-verdict {
  display: flex; align-items: center; gap: 20px; padding: 28px 32px; border-radius: 14px; margin-bottom: 24px;
  background: var(--surface-1); border: 1px solid var(--border); border-left: 6px solid var(--verdict-color, var(--good));
}
.board-verdict .dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--verdict-color, var(--good)); flex-shrink: 0;
}
.board-verdict .headline { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.board-verdict .sub { font-size: 14px; color: var(--text-secondary); margin: 0; }
.board-verdict .figure { margin-left: auto; text-align: right; }
.board-verdict .figure .value { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--verdict-color, var(--text-primary)); line-height: 1.1; }
.board-verdict .figure .label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }

.board-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.board-kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.board-kpi .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.board-kpi .value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.board-kpi .value.neg { color: var(--critical); }
.board-kpi .sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

.board-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 900px) { .board-charts { grid-template-columns: 1fr; } }

.board-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 28px; }
.board-point { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.board-point .stripe { width: 4px; align-self: stretch; border-radius: 2px; background: var(--point-color, var(--text-muted)); flex-shrink: 0; }
.board-point .text { font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.board-point .text strong { font-variant-numeric: tabular-nums; }

@media print {
  .sidebar, .toolbar, form { display: none !important; }
  .board-verdict, .board-kpi, .board-point { break-inside: avoid; box-shadow: none !important; }
  .board-charts { break-inside: avoid; }
  body { background: #fff !important; }
  .main { padding: 0 !important; }
  table thead { display: table-header-group; }
  tr.total-row { break-inside: avoid; }
  .kpi-tile { box-shadow: none !important; }
}