/*
 * Centrum 2.0 · interface tokens and navigation.
 * No remote fonts, trackers or injected CSS. Palettes are a fixed allow-list.
 */
:root {
  --palette-light:#475569; --palette-dark:#b8c4d5;
  --soft-light:#edf0f4; --soft-dark:#303944;
  --bg:#f5f5f3; --panel:#ffffff; --panel-alt:#f7f7f5;
  --text:#292d33; --muted:#616975; --line:#e2e3e1;
  --accent:var(--palette-light); --accent-soft:var(--soft-light);
  --on-accent:#ffffff; --sidebar:var(--panel); --side-text:var(--muted);
  --shadow:0 2px 10px #20242803; --radius:12px;
  --danger:#a52938; --danger-bg:#fff0f1;
  --header-height:72px;
}
:root[data-palette=stone] {
  --palette-light:#706254; --palette-dark:#d0c1ae;
  --soft-light:#f1ece6; --soft-dark:#3c352e;
}
:root[data-palette=sand] {
  --palette-light:#806239; --palette-dark:#dfc392;
  --soft-light:#f6efe3; --soft-dark:#3e3526;
}
:root[data-palette=blue] {
  --palette-light:#405f88; --palette-dark:#aec8ee;
  --soft-light:#eaf0f8; --soft-dark:#2b394a;
}
:root[data-palette=sage] {
  --palette-light:#4e6658; --palette-dark:#b3cfbd;
  --soft-light:#eaf0eb; --soft-dark:#2e3c34;
}
:root[data-theme=dark] {
  --bg:#191c20; --panel:#22262b; --panel-alt:#292e34;
  --text:#eceef1; --muted:#b2b8c1; --line:#3b4048;
  --accent:var(--palette-dark); --accent-soft:var(--soft-dark);
  --on-accent:#191c20; --sidebar:var(--panel); --side-text:var(--muted);
  --shadow:none; --danger:#ffb4bc; --danger-bg:#402b31;
}
@media(prefers-color-scheme:dark) {
  :root[data-theme=auto] {
    --bg:#191c20; --panel:#22262b; --panel-alt:#292e34;
    --text:#eceef1; --muted:#b2b8c1; --line:#3b4048;
    --accent:var(--palette-dark); --accent-soft:var(--soft-dark);
    --on-accent:#191c20; --sidebar:var(--panel); --side-text:var(--muted);
    --shadow:none; --danger:#ffb4bc; --danger-bg:#402b31;
  }
}
body { -webkit-font-smoothing:antialiased; }
h1 { font-size:29px; font-weight:680; letter-spacing:-.8px; }
h2 { font-weight:650; }
.main { max-width:1480px; padding:32px 32px 0; }
.page-heading .muted { max-width:760px; }
.button.primary,.today .day-number { color:var(--on-accent); }
.stat-card svg,.empty>svg { color:var(--muted); }
.task-dot { border-color:var(--muted); }
.auth { background:var(--bg); }
.auth-brand,.auth-brand b { color:var(--accent); }
.auth-footer { color:var(--muted); }
.avatar { background:var(--accent-soft); color:var(--accent); }
.brand-icon { background:var(--accent); color:var(--on-accent); }
.day-banner {
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  padding:26px 30px; box-shadow:var(--shadow);
}
.day-banner:after { display:none; }
.day-banner h2 { font-size:25px; font-weight:600; }
.day-banner p,.clock span { color:var(--muted); }
.live-label { color:var(--accent); }
.live-label span { background:var(--accent); }
.clock strong { font-size:43px; }
.stats-grid { gap:16px; }
.stat-card { min-height:130px; box-shadow:none; }
.stat-card strong { font-size:26px; font-weight:620; }
.badge.planned,.badge.open,.badge.high { background:var(--accent-soft); color:var(--accent); }
.calendar-event.plan { background:var(--accent-soft); color:var(--accent); }
.notice { border-left-color:var(--accent); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
input[type=radio] { accent-color:var(--accent); }

/* One nav DOM, three desktop layouts, one accessible mobile drawer. */
.topbar {
  height:var(--header-height); padding:0 32px; gap:18px; position:sticky; top:0;
  z-index:45; width:100%; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand-top { padding:0; color:var(--text); letter-spacing:-.3px; font-size:18px; gap:11px; }
.brand-top small { color:var(--muted); font-size:8px; letter-spacing:1.5px; margin-top:0; }
.brand-top b { color:var(--accent); margin-left:3px; }
.brand-top .brand-icon { width:33px; height:35px; border-radius:9px; }
.brand-top .brand-icon svg { width:20px; height:20px; }
.global-search { width:360px; max-width:40vw; margin-left:auto; }
.global-search input { background:var(--panel-alt); min-height:40px; font-size:12px; }
.profile-link { display:flex; align-items:center; gap:9px; color:var(--text); }
.profile-link:hover { text-decoration:none; }
.profile-name { max-width:150px; }
.mobile-menu { display:none; }
.sidebar {
  position:sticky; top:var(--header-height); inset-inline:auto; bottom:auto;
  width:auto; padding:0 24px; background:var(--panel); color:var(--text);
  z-index:40; display:block; transform:none; transition:none; border-bottom:1px solid var(--line);
}
.sidebar nav { display:flex; gap:5px; max-width:1416px; margin:auto; overflow-x:auto; padding:8px 0; }
.nav-item {
  color:var(--muted); padding:10px 14px; margin:0; min-height:42px; font-size:12px;
  border:1px solid transparent; border-radius:8px; gap:8px; white-space:nowrap;
}
.nav-item svg { width:17px; height:17px; }
.nav-item:hover { color:var(--text); background:var(--panel-alt); }
.nav-item.active { color:var(--accent); background:var(--accent-soft); box-shadow:none; }
.nav-item:focus-visible { outline-offset:-2px; }
.nav-heading,.sidebar-bottom,.nav-backdrop { display:none; }
.workspace { margin-left:0; }
[data-navigation=side] .sidebar,[data-navigation=compact] .sidebar {
  position:fixed; top:var(--header-height); left:0; bottom:0; width:216px; padding:16px 12px;
  border-bottom:0; border-right:1px solid var(--line); display:flex; flex-direction:column;
}
[data-navigation=side] .sidebar nav,[data-navigation=compact] .sidebar nav {
  display:flex; flex-direction:column; width:100%; gap:6px; padding:0; margin:0; overflow:visible;
}
[data-navigation=side] .nav-item { min-height:44px; }
[data-navigation=side] .workspace { margin-left:216px; }
[data-navigation=side] .nav-heading { display:block; color:var(--muted); font-size:10px; letter-spacing:1px; padding:12px 14px 22px; }
[data-navigation=side] .nav-heading button { display:none; }
[data-navigation=side] .sidebar-bottom {
  display:block; margin-top:auto; padding:20px 12px 8px; border-top:1px solid var(--line); color:var(--muted);
}
.sidebar-bottom p { color:var(--muted); }
[data-navigation=compact] .sidebar { width:78px; padding:18px 10px; }
[data-navigation=compact] .workspace { margin-left:78px; }
[data-navigation=compact] .nav-item { justify-content:center; height:48px; position:relative; padding:10px; }
[data-navigation=compact] .nav-item svg { width:20px; height:20px; }
[data-navigation=compact] .nav-item span {
  position:absolute; left:64px; top:6px; padding:8px 13px; background:var(--panel);
  color:var(--text); border:1px solid var(--line); border-radius:7px; box-shadow:0 4px 20px #0002;
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
[data-navigation=compact] .nav-item:hover span,[data-navigation=compact] .nav-item:focus-visible span {
  clip-path:none; width:auto; height:auto; overflow:visible;
}

/* Account-scoped preferences, with local preview only until explicit save. */
.settings-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr); gap:24px; align-items:start; }
.settings-account { position:sticky; top:150px; }
.appearance-fieldset { margin:0; }
.appearance-fieldset .helper { margin:0 0 14px; }
.appearance-fieldset .navigation-options+.helper { margin:14px 0 0; }
.palette-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.palette-option,.navigation-option { position:relative; cursor:pointer; font-weight:500; }
.palette-option>input,.navigation-option>input {
  position:absolute; left:0; top:0; width:1px; height:1px; min-height:0; opacity:0; margin:0;
}
.palette-card,.navigation-card {
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:13px 7px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted);
}
.palette-card strong,.navigation-card strong { font-size:11px; text-align:center; font-weight:550; }
.palette-swatch { display:block; width:26px; height:26px; border-radius:50%; border:1px solid #0001; }
.swatch-graphite { background:#475569; }
.swatch-stone { background:#706254; }
.swatch-sand { background:#806239; }
.swatch-blue { background:#405f88; }
.swatch-sage { background:#4e6658; }
.palette-option>input:checked+span,.navigation-option>input:checked+span {
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.palette-option>input:focus-visible+span,.navigation-option>input:focus-visible+span {
  outline:3px solid var(--accent); outline-offset:3px;
}
.navigation-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.layout-sample { width:72px; height:44px; border:1px solid var(--line); border-radius:5px; display:block; background:var(--panel); padding:5px; position:relative; }
.layout-sample b { background:var(--accent); display:block; border-radius:2px; height:7px; }
.layout-sample em { background:var(--panel-alt); display:block; height:20px; margin-top:5px; border:1px solid var(--line); border-radius:2px; }
.sample-side b { position:absolute; width:18px; height:32px; }
.sample-side em { margin:0 0 0 23px; height:32px; }
.sample-compact b { position:absolute; width:7px; height:32px; }
.sample-compact em { margin:0 0 0 12px; height:32px; }
.appearance-preview { background:var(--accent-soft); color:var(--accent); padding:12px 16px; border-radius:8px; font-size:12px; }
.appearance-preview button { display:block; padding:8px 0 0; text-align:left; text-decoration:underline; }
.widget-order { margin-top:12px; }
.widget-order-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:5px 0; }
.widget-order-row:last-child { border-bottom:0; }
.widget-order-row label { min-width:0; font-size:12px; }
.widget-move { display:none; flex-shrink:0; gap:2px; }
.js .widget-move { display:flex; }
.widget-move button { min-width:34px; min-height:40px; font-size:18px; }
.settings-grid .form-actions { margin:0; }

/* Analysis is server-rendered: charts never replace the accessible data table. */
.analysis-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.analysis-kpi { padding:20px; background:var(--panel-alt); border-radius:9px; border:1px solid var(--line); min-width:0; }
.analysis-kpi span { color:var(--muted); font-size:11px; display:block; }
.analysis-kpi strong { font-size:24px; font-weight:620; display:block; margin-top:9px; overflow-wrap:anywhere; }
.analysis-legend { display:flex; gap:20px; font-size:11px; color:var(--muted); margin:20px 0 12px; }
.analysis-legend span { display:flex; gap:7px; align-items:center; }
.chart-key { width:10px; height:10px; border-radius:2px; display:inline-block; background:var(--accent); }
.chart-key.expense { background:var(--muted); opacity:.55; }
.analysis-chart { width:100%; height:auto; display:block; min-width:600px; }
.chart-wrap { overflow:auto; margin-bottom:20px; }
.analysis-chart .chart-income { fill:var(--accent); }
.analysis-chart .chart-expense { fill:var(--muted); opacity:.55; }
.analysis-chart .chart-grid { stroke:var(--line); stroke-width:1; }
.analysis-chart text { fill:var(--muted); font-size:11px; font-family:inherit; }
.analysis-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.analysis-section .section-heading { flex-wrap:wrap; }
.category-meter { display:block; width:100%; min-width:70px; height:7px; margin:7px 0 0; appearance:none; -webkit-appearance:none; border:0; border-radius:9px; background:var(--panel-alt); }
.category-meter::-webkit-meter-bar { background:var(--panel-alt); border:0; border-radius:9px; height:7px; }
.category-meter::-webkit-meter-optimum-value { background:var(--accent); border-radius:9px; }
.category-meter::-moz-meter-bar { background:var(--accent); border-radius:9px; }
td.amount-up,td.amount-down { font-weight:650; }
.forecast-toolbar { margin:16px 0 20px; display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.forecast-toolbar select { min-width:190px; }
.analysis-print-title { display:none; }
[data-density=compact] .main { padding-top:22px; }
[data-density=compact] .panel { padding:20px; margin-bottom:16px; }
[data-density=compact] .stat-card { min-height:110px; padding:17px 20px; }
[data-density=compact] .stat-card strong { font-size:24px; margin-top:8px; }
[data-density=compact] td { padding-top:11px; padding-bottom:11px; }
[data-density=compact] .item-row { padding-top:11px; padding-bottom:11px; }
[data-density=compact] .page-heading { margin-bottom:20px; }
[data-density=compact] .form-grid { gap:17px; }
[data-density=compact] .day-banner { padding:20px 26px; }
@media(max-width:1150px) {
  .topbar { padding:0 24px; }
  .main { padding:26px 24px 0; }
  .nav-item { padding:10px 11px; font-size:11px; }
  .settings-grid { grid-template-columns:minmax(0,1fr); }
  .settings-account { position:static; }
  .profile-name { display:none; }
}
@media(max-width:900px) {
  :root { --header-height:64px; }
  .topbar { padding:0 14px; gap:8px; }
  .brand-top { font-size:16px; gap:8px; }
  .brand-top small { font-size:7px; }
  .brand-top .brand-icon { width:30px; height:32px; }
  .global-search { max-width:45vw; width:300px; }
  .global-search kbd { display:none; }
  .global-search input { padding-right:10px; font-size:12px; }
  .profile-link,.avatar { display:none; }
  .mobile-menu { display:inline-flex; min-width:36px; }
  html:not(.js) .mobile-menu { display:none; }
  .sidebar,[data-navigation] .sidebar {
    position:fixed; top:var(--header-height); bottom:0; left:0; width:min(320px,86vw);
    height:calc(100dvh - var(--header-height)); padding:16px;
    transform:translateX(-102%); visibility:hidden; border-right:1px solid var(--line);
    display:flex; flex-direction:column; overflow-y:auto; transition:none;
  }
  .sidebar nav,[data-navigation] .sidebar nav { flex-direction:column; gap:7px; padding:0; margin:0; overflow:visible; width:100%; }
  .nav-item,[data-navigation] .nav-item { min-height:48px; height:auto; font-size:13px; padding:12px 16px; justify-content:flex-start; gap:12px; }
  [data-navigation] .nav-item span {
    position:static; padding:0; box-shadow:none; background:none; color:inherit;
    border:0; width:auto; height:auto; overflow:visible; clip-path:none;
  }
  .nav-item svg,[data-navigation] .nav-item svg { width:20px; height:20px; }
  .workspace,[data-navigation] .workspace { margin-left:0; }
  .nav-heading,[data-navigation] .nav-heading {
    display:flex; align-items:center; justify-content:space-between; padding:0 6px 14px 16px;
    font-size:11px; color:var(--muted); letter-spacing:.5px;
  }
  [data-navigation] .nav-heading button { display:inline-flex; font-size:28px; }
  .nav-open { overflow:hidden; }
  .nav-open .sidebar,[data-navigation] .nav-open .sidebar {
    transform:translateX(0); visibility:visible; box-shadow:10px 20px 60px #0002;
  }
  .nav-open .nav-backdrop {
    display:block; position:fixed; inset:var(--header-height) 0 0; background:#15191d66; border:0; z-index:35;
    width:100%; padding:0; border-radius:0;
  }
  html:not(.js) .sidebar {
    position:static; transform:none; visibility:visible; width:100%; height:auto;
  }
  html:not(.js) .nav-heading { display:none; }
  html:not(.js) .sidebar nav { flex-direction:row; flex-wrap:wrap; }
  .sidebar-bottom,[data-navigation] .sidebar-bottom { display:block; color:var(--muted); border-top:1px solid var(--line); margin-top:auto; padding:20px 16px 6px; }
}
@media(max-width:760px) {
  .main,[data-density] .main { padding:22px 16px 0; }
  h1 { font-size:26px; }
  .global-search { width:auto; max-width:none; flex:1; margin-left:10px; }
  .brand-top>span:last-child { display:none; }
  .topbar>.mobile-menu { min-width:32px; }
  .day-banner,[data-density] .day-banner { padding:21px; }
  .day-banner h2 { font-size:20px; }
  .clock strong { font-size:31px; }
  .stat-card,[data-density] .stat-card { padding:17px; min-height:116px; }
  .stat-card strong,[data-density] .stat-card strong { font-size:22px; }
  .panel,[data-density] .panel { padding:20px; }
  .stats-grid { gap:10px; }
  .analysis-summary { grid-template-columns:1fr; gap:10px; }
  .analysis-kpi { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px; }
  .analysis-kpi strong { font-size:21px; margin:0; text-align:right; }
  .settings-grid { gap:0; }
  .palette-options { gap:5px; }
  .palette-card { padding:12px 3px; gap:8px; }
  .palette-card strong { font-size:10px; }
  .palette-swatch { width:23px; height:23px; }
  .navigation-options { gap:7px; }
  .navigation-card { padding:11px 5px; }
  .navigation-card strong { font-size:10px; }
  .layout-sample { width:54px; height:44px; }
  .appearance-fieldset { padding:12px; }
  .widget-order-row label { font-size:11px; }
  .widget-move button { min-width:30px; }
  .analysis-chart { min-width:680px; }
}
@media(max-width:370px) {
  .palette-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .navigation-options { grid-template-columns:1fr; }
  .navigation-card { flex-direction:row; padding:10px; }
  .brand-top { display:none; }
}
.kiosk .topbar,.kiosk .sidebar,.kiosk .nav-backdrop { display:none!important; }
[data-navigation] .kiosk .workspace { margin-left:0; }
@media print {
  :root { --text:#111; --muted:#444; --panel:#fff; --panel-alt:#f5f5f5; --line:#ccc; --accent:#333; }
  .topbar,.sidebar,.nav-backdrop,.no-print { display:none!important; }
  .workspace,[data-navigation] .workspace { margin:0; }
  .main,[data-density] .main { padding:0; max-width:none; }
  .panel,[data-density] .panel { padding:0; border:0; box-shadow:none; }
  .chart-wrap { overflow:visible; }
  .analysis-chart { min-width:0; }
  .analysis-print-title { display:block; }
  .analysis-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .analysis-kpi strong { font-size:18px; }
  .analysis-section { break-inside:avoid; }
}

.widget-move button[aria-disabled=true]{opacity:.35;cursor:default;}

/* 0.2.4: the loan module uses the common neutral palette and form components. */
.loan-create,.loan-preview { border:1px solid var(--line); border-radius:14px; padding:20px; margin:24px 0; }
.loan-create>summary { font-weight:650; display:flex; align-items:center; gap:8px; cursor:pointer; }
.loan-create[open]>summary { margin-bottom:20px; }
.loan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:18px; margin-top:24px; }
.loan-card { min-width:0; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.loan-card h3 { font-size:20px; margin:10px 0 5px; overflow-wrap:anywhere; }
.loan-card .section-heading { align-items:flex-start; }
.loan-facts { margin:20px 0; }
.loan-facts>div { margin:12px 0; }
.loan-facts dt { color:var(--muted); font-size:12px; }
.loan-facts dd { margin:4px 0; font-weight:600; }
.loan-card progress { width:100%; height:8px; accent-color:var(--accent); margin:0 0 18px; }
.loan-preview-table { max-height:440px; overflow:auto; margin:18px 0; }
.loan-schedule .inline-actions { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.loan-notes { white-space:normal; overflow-wrap:anywhere; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; }
[data-loan-section][hidden] { display:none!important; }
@media(max-width:760px) {
 .loan-create,.loan-preview { padding:16px; }
 .loan-card { padding:18px; }
 .loan-schedule { min-width:760px; }
 .finance-relations .item-row { flex-wrap:wrap; gap:12px; }
}
@media print {
 .loan-schedule { min-width:0; font-size:10pt; }
 .loan-schedule tr { break-inside:avoid; }
 .loan-schedule thead { display:table-header-group; }
}
