/* Shared theme for the app and the login page — "Forest & Oat".
   Palette: forest green #0F6B5C, deep green-black ink #1B2A27, warm oat paper #F3EFE6,
   with terracotta, plum and mint as supporting tints. Light is the default;
   dark follows the device unless the user picks one with the toggle. */

:root {
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bg: #F3EFE6;
  --card: #FFFEFB;
  --input-bg: #FAF7F0;
  --ink: #1B2A27;
  --muted: #5E6B67;
  --line: #E3DDCF;

  --accent: #0F6B5C;
  --accent-dark: #0A4F43;
  --accent-soft: #D6EBE4;
  --accent-line: #B2D6CB;
  --on-accent: #FFFFFF;
  --disabled: #BFD8D0;

  --good: #1E8A5F;
  --good-bg: #E2F3EA;
  --good-line: #B5DEC8;
  --bad: #B3263E;
  --bad-bg: #F6DDE0;
  --bad-line: #E8B9C0;
  --warn: #A86A12;
  --warn-bg: #F6EAC0;
  --warn-line: #E6D18A;

  --lavender: #7A5A8C;
  --lavender-bg: #ECE2F1;
  --mint: #2E8B76;
  --mint-bg: #D6EBE4;
  --coral: #C8553D;
  --coral-bg: #F8E1D8;

  --shadow: 0 1px 2px rgba(27,42,39,.05), 0 10px 28px rgba(27,42,39,.07);
  --focus-ring: rgba(15,107,92,.22);
  --overlay: rgba(12,22,20,.45);
  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark;
  --bg: #0C1614; --card: #13221E; --input-bg: #0F1C19; --ink: #E8F0EC; --muted: #93A8A1; --line: #223731;
  --accent: #2FA58A; --accent-dark: #8FDCC7; --accent-soft: #17342D; --accent-line: #25504A; --disabled: #244840;
  --good: #4CC795; --good-bg: #123226; --good-line: #1F5440;
  --bad: #F0788C; --bad-bg: #3A1B22; --bad-line: #5E2B36;
  --warn: #E4B04A; --warn-bg: #352D12; --warn-line: #5C4D1C;
  --lavender: #C4A3D6; --lavender-bg: #2C2036; --mint: #6FD0B7; --mint-bg: #163A31; --coral: #F0905F; --coral-bg: #38231B;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.28);
  --focus-ring: rgba(47,165,138,.30); --overlay: rgba(3,8,7,.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --bg: #0C1614; --card: #13221E; --input-bg: #0F1C19; --ink: #E8F0EC; --muted: #93A8A1; --line: #223731;
    --accent: #2FA58A; --accent-dark: #8FDCC7; --accent-soft: #17342D; --accent-line: #25504A; --disabled: #244840;
    --good: #4CC795; --good-bg: #123226; --good-line: #1F5440;
    --bad: #F0788C; --bad-bg: #3A1B22; --bad-line: #5E2B36;
    --warn: #E4B04A; --warn-bg: #352D12; --warn-line: #5C4D1C;
    --lavender: #C4A3D6; --lavender-bg: #2C2036; --mint: #6FD0B7; --mint-bg: #163A31; --coral: #F0905F; --coral-bg: #38231B;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.28);
    --focus-ring: rgba(47,165,138,.30); --overlay: rgba(3,8,7,.65);
  }
}

/* ---------- Type ---------- */
body { font-family: var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.sub { font-size: 14.5px; }
.card h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.field-group-label { letter-spacing: .12em; font-weight: 700; }
label { font-weight: 600; font-size: 13px; }
.hint { color: var(--muted); }

/* ---------- Surfaces ---------- */
.card { border-radius: 22px; border: 1px solid var(--line); padding: 22px; }
.card[style*="border-top"] { border-top-width: 2px !important; }
.result-big { border-radius: 18px; }
.result-big .value { font-weight: 800; letter-spacing: -0.02em; }
.result-big .label { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; }
.filter-bar { border-radius: 16px; }
.history-table th { color: var(--muted); font-size: 10.5px; letter-spacing: .1em; font-weight: 700; }
.history-scroll tr:first-child th { background: var(--card); }
.history-table td, .history-table th { border-bottom-color: var(--line); }

/* ---------- Inputs ---------- */
input[type=number], input[type=text], input[type=password], input[type=date], input[type=email], select, textarea {
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
select option { background: var(--card); color: var(--ink); }

/* ---------- Buttons: pill shaped ---------- */
.primary-btn, .small-btn, .count-btn, .currency-btn, .qc-mode-btn, .page-tab-btn { border-radius: 999px; font-family: inherit; }
.primary-btn { background: var(--accent); color: var(--on-accent); padding: 10px 20px; font-weight: 700; }
.primary-btn:hover { background: var(--accent-dark); color: var(--on-accent); }
:root[data-theme="dark"] .primary-btn:hover { background: #3DB89B; color: #06231D; }
.small-btn { background: var(--card); border: 1px solid var(--line); color: var(--accent-dark); }
.small-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.count-btn, .currency-btn, .qc-mode-btn, .page-tab-btn { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-weight: 700; }
.count-btn:hover, .currency-btn:hover, .qc-mode-btn:hover, .page-tab-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.count-btn.active, .currency-btn.active, .qc-mode-btn.active, .page-tab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.page-tab-btn { padding: 12px; }
.text-btn { color: var(--muted); }
.text-btn:hover { color: var(--accent-dark); }
.text-btn.act-btn { border-radius: 999px; background: var(--card); }
.badge { border-radius: 999px; }
.filter-clear-btn, .filter-date-group, .filter-bar input[type="text"], .filter-bar select { background: var(--card); }

/* ---------- Pipeline cards, toast, overlays ---------- */
.pipeline-card { border-radius: 16px !important; }
.toast { background: var(--ink); color: var(--bg); border-radius: 14px; }
.toast button { color: var(--bg); opacity: .7; }
:root[data-theme="dark"] .toast { background: #1E3A33; color: #E8F0EC; }
:root[data-theme="dark"] .toast button { color: #E8F0EC; }
.edit-actions { background: linear-gradient(to top, var(--bg) 70%, transparent); }
a { color: var(--accent-dark); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card);
  color: var(--muted); border-radius: 999px; padding: 5px 12px 5px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-dark); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}

/* ---------- Board / List switch ---------- */
.pipeline-view-btn { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pipeline-view-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.pipeline-view-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Accent-coloured text in dark mode uses the lighter green so it stays readable. */
:root[data-theme="dark"] [style*="color:var(--accent)"], :root[data-theme="dark"] [style*="color: var(--accent)"] { color: var(--accent-dark) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="color:var(--accent)"], :root:not([data-theme="light"]) [style*="color: var(--accent)"] { color: var(--accent-dark) !important; }
}

/* ---------- Refinements ---------- */
.result-big .value, .history-table td, .pipeline-card, .value { font-variant-numeric: tabular-nums; }
.primary-btn { box-shadow: 0 1px 2px rgba(15,107,92,.25), 0 6px 14px rgba(15,107,92,.18); }
.primary-btn:hover { transform: translateY(-1px); }
.primary-btn:active { transform: none; }
:root[data-theme="dark"] .primary-btn { box-shadow: none; color: #06231D; }
:root[data-theme="dark"] .page-tab-btn.active, :root[data-theme="dark"] .count-btn.active, :root[data-theme="dark"] .currency-btn.active,
:root[data-theme="dark"] .qc-mode-btn.active, :root[data-theme="dark"] .pipeline-view-btn.active { color: #06231D; }
.history-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 55%, var(--card)); }
.card, .pipeline-card, .result-big { transition: box-shadow .2s ease, border-color .2s ease; }
.pipeline-card:hover { box-shadow: var(--shadow); border-color: var(--accent-line); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* Summary tiles keep a clear edge so they never blend into the card behind them. */
#glance-card .result-big, #commission-glance-card .result-big { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(27,42,39,.04); }

/* ---------- Pipeline tab: calmer layout ---------- */
.pipe-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pipe-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; margin-bottom: 12px; }
.pipe-strip:hover { border-color: var(--accent-line); }
.pipe-strip .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pipe-strip .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pipe-strip .s { font-size: 12.5px; color: var(--muted); }
.pipe-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pipe-pill { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--line); background: var(--input-bg); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.pipe-pill:hover { border-color: var(--accent); }
.pipe-pill .k { color: var(--muted); font-weight: 600; font-size: 12px; }
.pipe-pill b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pipe-pill .s { color: var(--muted); font-size: 11.5px; }
.pipe-pill.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.pipe-pill.warn .k, .pipe-pill.warn b { color: var(--warn); }

/* ---------- Business dashboard ---------- */
:root { --ch1: #008A68; --ch2: #E0561B; }              /* chart colours — validated for colour-blind readers, light */
:root[data-theme="dark"] { --ch1: #25A585; --ch2: #E4683A; } /* and dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch1: #25A585; --ch2: #E4683A; } }

#dash-root .good { color: var(--good); } #dash-root .bad { color: var(--bad); } #dash-root .warn { color: var(--warn); }
.dash-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.dash-ctrl { display: flex; align-items: flex-end; gap: 10px; }
.dash-sel { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dash-sel select { padding: 7px 10px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.dk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .dk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dk-v { font-size: 22px; } }
.dk { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.dk-l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dk-v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.dk-d { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.dk-d.good { color: var(--good); } .dk-d.bad { color: var(--bad); } .dk-d.flat { color: var(--muted); }
.dk-s { font-size: 12px; color: var(--muted); line-height: 1.4; }
.dg { display: grid; gap: 16px; margin-bottom: 16px; }
.dg-21 { grid-template-columns: 1.8fr 1fr; } .dg-11 { grid-template-columns: 1fr 1fr; } .dg-111 { grid-template-columns: repeat(3, 1fr); }
.dg .card, .d-attn { margin: 0; }
.d-attn { margin-bottom: 16px; }
.dcard { padding: 20px; min-width: 0; }
.dcard-h h2 { margin: 0 0 4px; }
.dcard-h .hint { margin: 0 0 12px; font-size: 12.5px; }
.d-att { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.d-att li { display: flex; gap: 10px; font-size: 13.5px; align-items: baseline; }
.d-att-i { flex: none; width: 14px; text-align: center; }
.d-att li.bad .d-att-i { color: var(--bad); } .d-att li.warn .d-att-i { color: var(--warn); }
.d-att.ok { color: var(--good); font-weight: 600; font-size: 13.5px; }
.dc-svg { display: block; max-width: 100%; overflow: visible; }
.dc-grid { stroke: var(--line); stroke-width: 1; }
.dc-ax { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.dc-val { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.dc-end { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font); }
.dc-bar.c1 { fill: var(--ch1); } .dc-bar.c2 { fill: var(--ch2); }
.dc-bar { stroke: var(--card); stroke-width: 2; paint-order: stroke; }
.dc-bar.dim { opacity: .62; }
.dc-line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dc-line.c1 { stroke: var(--ch1); } .dc-line.c2 { stroke: var(--ch2); }
.dc-line.dash { stroke-dasharray: 6 4; }
.dc-dot { fill: var(--muted); stroke: var(--card); stroke-width: 2; }
.dc-dot.c1 { fill: var(--ch1); } .dc-dot.c2 { fill: var(--ch2); }
.dc-hit { fill: transparent; }
.dc-hit:hover { fill: var(--accent-soft); fill-opacity: .45; }
.dc-cross { stroke: var(--muted); stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.dc-hitg:hover .dc-cross { opacity: .8; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.dc-legend .dc-sw { margin-right: 0; }
.dc-sw.c1 { background: var(--ch1); } .dc-sw.c2 { background: var(--ch2); } .dc-sw.c3 { background: var(--muted); opacity: .6; }
.dc-sw.ln { background: var(--muted); height: 3px; border-radius: 2px; width: 14px; }
.dc-sw.dash:not(.ln) { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); height: 3px; border-radius: 0; width: 14px; }
.dc-sw.c1.dash { background: repeating-linear-gradient(90deg, var(--ch1) 0 4px, transparent 4px 7px); }
.dc-sw.c2.dash { background: repeating-linear-gradient(90deg, var(--ch2) 0 4px, transparent 4px 7px); }
.dc-sw.ln.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.dc-empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.dh-row { margin-bottom: 14px; cursor: default; }
.dh-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 5px; }
.dh-l { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-of { font-weight: 500; color: var(--muted); font-size: 12px; }
.dh-track { position: relative; height: 10px; background: var(--line); border-radius: 0 5px 5px 0; }
.dh-fill { height: 100%; border-radius: 0 5px 5px 0; }
.dh-fill.c1 { background: var(--ch1); } .dh-fill.c2 { background: var(--ch2); } .dh-fill.c3 { background: var(--muted); opacity: .6; }
.dh-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .75; border-radius: 1px; }
.dh-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.dc-mini { margin-top: 14px; font-size: 12.5px; width: 100%; min-width: 0 !important; }
.dc-mini th, .dc-mini td { padding: 6px 8px; }
.dash-details { margin-top: 10px; }
.dash-details summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.dash-details .history-table { margin-top: 8px; font-size: 12.5px; }
#dash-tip { position: fixed; z-index: 9999; display: none; pointer-events: none; max-width: 270px; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#dash-tip .dc-tipx { margin-top: 4px; opacity: .8; font-size: 12px; }
@media (max-width: 900px) { .dg-111 { grid-template-columns: 1fr; } .dg-21, .dg-11 { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .page-tabs { flex-wrap: wrap; } .page-tabs .page-tab-btn { flex: 1 1 28%; padding: 10px 6px; font-size: 13px; } }

/* No blinking text cursor when clicking on plain text, charts or cards — only inside real inputs. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: var(--accent); }
.dcard svg, .dcard svg *, .dk, .page-tabs, button, summary { -webkit-user-select: none; user-select: none; }
.dcard svg:focus, .dcard svg *:focus { outline: none; }

/* "Install app" button (shown by theme.js only when the browser offers install) */
button.install-btn { width: auto; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--card); color: var(--accent-dark); border: 1px solid var(--line); font-size: 12px; font-weight: 600; box-shadow: none; cursor: pointer; }
button.install-btn:hover { border-color: var(--accent); background: var(--card); }
button.install-btn.install-floating { position: fixed; top: 14px; right: 96px; z-index: 5; }

/* dashboard drill-downs */
#dash-root [data-drill] { cursor: pointer; }
#dash-root .dk[data-drill]:hover, #dash-root .d-att li[data-drill]:hover { box-shadow: 0 0 0 2px var(--accent, #1f8a4c) inset; }
#dash-root .dh-row[data-drill]:hover .dh-l { text-decoration: underline; }
#dash-root .dc-hit[data-drill] { cursor: pointer; }
#dash-drill .dd-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
#dash-drill .dd-row { cursor: pointer; }
#dash-drill .dd-row:hover td { background: rgba(31,138,76,.08); }
#dash-drill .dd-foot td { border-top: 2px solid var(--line, #ddd); }
#dash-drill .dd-table { font-size: 13px; }