/*
 * TÜV Austria reference theme · v5 visual update 1
 * Presentation only. Loaded after the original v5 stylesheet.
 * Forms, API routes, permissions, sessions and Finance decisions remain in v5.
 * No remote fonts or UI libraries are required.
 */
:root {
  --bg: #f5f7fa;
  --surface-alt: #f4f7fa;
  --text: #111820;
  --muted: #6e7d91;
  --border: #e4eaf1;
  --radius: 10px;
  --shadow: 0 5px 22px rgba(24, 43, 68, .035);
  --reference-sidebar: 220px;
  --reference-drawer: 340px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {background: var(--bg); color: var(--text); --soft: color-mix(in srgb,var(--primary) 7%,var(--surface))}
.app-shell {grid-template-columns: var(--reference-sidebar) minmax(0,1fr)}
.workspace {container-type: inline-size; min-width: 0}
.sidebar {
  width: var(--reference-sidebar);
  background: linear-gradient(155deg, color-mix(in srgb,var(--sidebar) 85%,#080c0f),color-mix(in srgb,var(--sidebar) 65%,#000));
  border-right: 1px solid color-mix(in srgb,var(--sidebar) 88%,#fff);
  color: #dbe1e8;
}
.brand {padding: 20px 25px 19px; text-align:center}
.brand-logo {background:none; border-radius:0; padding:0; min-height:0; display:inline-block}
.brand-logo img {width:130px; height:auto}
.brand-logo .logo-on-light {display:none}
.brand-logo .logo-on-dark {display:block}
.brand>span {font-size:7px; letter-spacing:1.9px; color:#85909a; margin-top:7px}
.sidebar nav {padding:0 7px; min-height:0; scrollbar-width:thin; scrollbar-color:#3d464f transparent}
.nav-label {display:none}
.nav-link {padding:11px 15px; min-height:43px; font-size:12px; font-weight:500; border-radius:5px; gap:14px; margin:0 0 3px; position:relative}
.nav-link svg {width:20px; height:20px; opacity:1; stroke-width:1.65}
.nav-link:hover {background:rgba(255,255,255,.055)}
.nav-link.active {box-shadow:none; background:var(--primary); font-weight:650}
.nav-link.active::before {content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:rgba(255,255,255,.25); border-radius:5px 0 0 5px}
.sidebar-bottom {padding:14px 18px 13px; margin-top:12px; border-top-color:rgba(255,255,255,.09)}
.sidebar-person b {font-size:11px; color:#fff}
.sidebar-person>div>span {font-size:9px; color:#a5b0bc}
.sidebar .avatar {background:#2a3038; color:#eef1f4; border-color:#454e59; width:32px; height:32px}
.sidebar-signout {width:100%; color:#d9e0e7; border-radius:6px; margin-top:8px; padding:7px 1px; font-size:11px; gap:9px}
.sidebar-signout:hover {background:rgba(255,255,255,.07); padding-left:6px}
.sidebar-version {margin-top:6px; color:#7f8b99; letter-spacing:.7px; font-size:8px}
/* A lightweight, CSS-only brand tile; no stock photograph or external asset. */
.reference-brand-note {margin:15px 14px 0; padding:15px 15px 12px; min-height:136px; border:1px solid #39454f; border-radius:8px; background:linear-gradient(138deg,#303e48,#111921 80%); position:relative; overflow:hidden; flex-shrink:0; color:#fff}
.reference-brand-note b {position:relative; display:block; z-index:1; font-size:18px; line-height:1.13; letter-spacing:-.6px; font-weight:690}
.reference-brand-note small {position:relative; font-size:8px; color:#d4dce5; display:block; margin-top:9px; z-index:1}
.brand-note-rule {position:relative; display:block; height:3px; width:32px; background:var(--primary); margin-top:12px; z-index:1}
.brand-mountains {position:absolute; inset:0; opacity:.8; background:radial-gradient(ellipse at 80% 30%,#6f849455,transparent 65%)}
.brand-mountains::before {content:""; position:absolute; inset:12% -18% 0 32%; background:linear-gradient(126deg,#cad6df88 0%,#75899d55 32%,#1e2c3888 33%,#0c121bd0 65%); clip-path:polygon(0 100%,23% 52%,35% 61%,63% 8%,82% 37%,100% 85%,100% 100%)}
.brand-mountains::after {content:""; position:absolute; inset:35% -12% 0 40%; background:linear-gradient(114deg,#9aadb555,#1c2a38dd); clip-path:polygon(0 100%,48% 16%,65% 47%,83% 33%,100% 68%,100% 100%)}
/* Header: search, notifications and account controls stay fully interactive. */
.topbar {height:68px; padding:0 24px; gap:18px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 3px 12px #24374d04}
.breadcrumb {display:none}
.search-trigger {margin:0 auto 0 0; width:auto; flex:1; max-width:610px; height:40px; padding:0 14px; border:1px solid #edf1f6; border-radius:9px; background:var(--surface-alt); font-size:12px; gap:10px}
.search-trigger kbd {font-size:9px; padding:1px 4px; background:var(--surface); color:var(--muted)}
.topbar-actions {gap:9px; margin-left:0; flex-shrink:0}
.icon-button {width:36px; height:36px; color:var(--text); border-radius:8px}
.icon-button:hover {color:var(--primary-ink); background:var(--soft)}
#themeButton {order:6; border:1px solid var(--border); margin-left:7px}
#topLogout {order:7; color:var(--muted)}
#notificationButton {order:0}
.topbar-divider {height:28px; margin:0 6px}
.profile-link {gap:10px; padding:2px 0}
.profile-link>div {display:block; max-width:164px}
.profile-link b {font-size:12px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.profile-link small {font-size:10px; line-height:1.4}
.profile-link::after {content:""; width:6px; height:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); margin-left:8px; margin-right:7px}
.avatar {width:37px; height:37px; background:var(--soft); border-color:color-mix(in srgb,var(--primary) 18%,var(--surface)); font-size:12px}
.notification-dot {height:8px; width:8px; right:7px; top:4px; box-shadow:0 0 0 2px var(--surface)}
/* Shared typography and components apply to all v5 modules. */
.content {padding:25px 24px 20px; max-width:none; width:100%; margin:0}
.page-head {margin-bottom:23px; align-items:center; gap:18px}
h1 {font-size:29px; letter-spacing:-1.05px; line-height:1.23; font-weight:720}
.page-head .eyebrow {font-size:8px; letter-spacing:1.55px; margin-bottom:9px}
.page-head p {font-size:12px; margin-top:6px; line-height:1.6; color:var(--muted)}
.head-actions {gap:8px; flex-wrap:wrap}
.btn {border-radius:7px; min-height:38px; padding:9px 13px; font-size:11px; box-shadow:0 1px 2px #182d4903}
.btn.primary {box-shadow:0 3px 9px color-mix(in srgb,var(--primary) 11%,transparent)}
.btn.small {border-radius:6px; min-height:30px; padding:6px 10px}
.btn:focus-visible,.nav-link:focus-visible,.preset:focus-visible {outline-offset:3px}
.card {border-color:var(--border); border-radius:10px; box-shadow:var(--shadow)}
.card-head {padding:19px 19px 15px; align-items:center; gap:10px}
.card-head h2 {font-size:15px; font-weight:690; letter-spacing:-.35px; line-height:1.4}
.card-head p {font-size:10px; line-height:1.5; margin-top:3px}
.card-head .text-link {font-size:10px}
.card-body {padding:0 20px 21px}
.card-body.padded {padding:21px}
.card-footer {padding:10px 17px; background:var(--surface); font-size:9px; line-height:1.5}
.reference-card-title {display:flex; gap:12px; align-items:center; min-width:0}
.reference-card-title>svg {color:var(--primary-ink); flex-shrink:0; stroke-width:1.8}
.reference-card-title>div {min-width:0}
.reference-date {display:flex; gap:12px; align-items:center; padding:0 15px 0 19px; border-left:1px solid var(--border); color:var(--muted)}
.reference-date small {display:block; font-size:10px; margin-bottom:2px}
.reference-date b {font-size:12px; color:var(--text); display:block; white-space:nowrap}
.reference-dashboard .page-head .eyebrow {display:none}
.reference-dashboard .page-head {margin-bottom:15px}
.reference-dashboard .page-head h1 {font-size:30px; font-weight:740}
.reference-dashboard .page-head p {font-size:13px}
.reference-dashboard .head-actions .btn {font-size:10px; min-height:34px}
.reference-dashboard .hero-strip {padding:9px 13px; border-radius:7px; background:color-mix(in srgb,var(--surface) 55%,transparent); margin-bottom:18px; gap:15px; box-shadow:none; min-height:40px}
.reference-dashboard .hero-mark {height:25px; width:25px; border-radius:7px; background:transparent}
.reference-dashboard .hero-copy {gap:7px; min-width:0}
.reference-dashboard .hero-copy>div:last-child {display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0}
.reference-dashboard .hero-copy b {font-size:10px; font-weight:600; margin:0}
.reference-dashboard .hero-copy p {font-size:9px; margin:0}
.reference-dashboard .live-pill {font-size:8px; margin-left:auto}
/* Pastel KPI row, real data only. The original four KPIs are retained. */
.kpi-grid.reference-kpis {grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:19px}
.reference-kpis .kpi {--kpi-tint:var(--primary); background:color-mix(in srgb,var(--kpi-tint) 5%,var(--surface)); border-color:color-mix(in srgb,var(--kpi-tint) 8%,var(--surface)); border-radius:8px; padding:16px 13px 14px; min-height:129px; box-shadow:none; transition:transform .15s,box-shadow .15s}
.reference-kpis .kpi:hover {transform:translateY(-2px); box-shadow:0 5px 16px color-mix(in srgb,var(--kpi-tint) 9%,transparent)}
.reference-kpis .kpi:nth-child(2) {--kpi-tint:#058052}
.reference-kpis .kpi:nth-child(3) {--kpi-tint:#d88a05}
.reference-kpis .kpi:nth-child(4) {--kpi-tint:#078666}
.reference-kpis .kpi:nth-child(5) {--kpi-tint:#6843d7}
.reference-kpis .kpi:nth-child(6) {--kpi-tint:#206ef0}
.reference-kpis .kpi-top {justify-content:flex-start; gap:8px; font-size:10px; color:var(--text); font-weight:550; min-height:29px; line-height:1.3}
.reference-kpis .kpi-icon {order:-1; width:26px; height:28px; border-radius:0; background:none; color:var(--kpi-tint); flex-shrink:0}
.reference-kpis .kpi-icon svg {width:23px; height:23px; stroke-width:1.85}
.reference-kpis .kpi-number {font-size:29px; line-height:1.2; letter-spacing:-1.1px; font-weight:720; margin:13px 0 6px; color:var(--text); overflow-wrap:anywhere}
.reference-kpis .kpi:nth-child(4) .kpi-number,.reference-kpis .kpi:nth-child(6) .kpi-number {font-size:23px; letter-spacing:-.7px}
.reference-kpis .kpi-note {font-size:9px; line-height:1.55; display:block; color:var(--muted)}
.reference-kpis .kpi-note.warning {color:#9a6409}
.reference-kpis .kpi-note.positive {color:#08744c}
/* Operational charts: v5 has status distributions, not historical time series. */
.dashboard-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:19px}
.reference-charts .card {min-height:264px}
.reference-charts .card-head {padding-bottom:12px}
.reference-charts .chart-body {grid-template-columns:minmax(130px,.8fr) minmax(145px,1fr); gap:24px; min-height:186px; padding:4px 25px 20px}
.reference-charts .donut-wrap svg {width:148px; height:148px}
.reference-charts .donut-number b {font-size:31px; font-weight:710}
.reference-charts .donut-number span {font-size:9px}
.reference-charts .legend-list {gap:10px}
.reference-charts .legend-row {font-size:10px}
.reference-charts .legend-row b {font-size:11px}
.reference-charts .legend-dot {height:7px; width:7px; border-radius:50%; flex-shrink:0}
.reference-live {padding:4px 9px; font-size:9px; font-weight:550; border:1px solid var(--border); border-radius:5px; color:var(--muted); background:var(--surface-alt)}
.reference-finance-chart {padding:0 16px 16px}
.reference-finance-chart>svg {display:block; width:100%; height:176px; overflow:visible}
.reference-grid-line {stroke:var(--border); stroke-width:1}
.reference-axis {font-family:inherit; fill:var(--muted); font-size:10px}
.reference-bar-number {font-family:inherit; fill:var(--text); font-size:12px; font-weight:650}
.reference-chart-key {display:flex; align-items:center; justify-content:center; gap:18px; font-size:9px; color:var(--muted); margin-top:4px; flex-wrap:wrap}
.reference-chart-key>span {display:flex; align-items:center; gap:6px}
.reference-chart-key i {height:8px; width:8px; border-radius:50%; background:var(--primary); display:inline-block}
.reference-chart-key i.complete {background:var(--accent); border:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}
/* Readable registers with fully clickable reference links. */
.reference-registers .card-head {padding:17px 16px 14px}
.reference-registers .reference-card-title {gap:9px}
.reference-registers .card-head h2 {font-size:14px}
.data-table {font-size:11px}
.data-table th {font-size:9px; font-weight:600; text-transform:none; letter-spacing:0; padding:10px 14px; background:var(--surface-alt); color:#50617a}
.data-table td {padding:12px 14px; border-bottom-color:color-mix(in srgb,var(--border) 85%,transparent)}
.data-table tbody tr:hover {background:var(--soft)}
.dashboard-table th {padding:9px 12px; font-size:9px}
.dashboard-table td {height:48px; padding:9px 12px; font-size:10px}
.dashboard-table .record-link {font-size:10px; font-weight:650}
.dashboard-table .record-secondary {font-size:9px; color:var(--muted); margin-top:3px; max-width:100%}
.dashboard-table .person-label {font-size:10px; line-height:1.5}
.dashboard-table .person-col,.dashboard-table .vendor-col {display:table-cell}
.dashboard-table .record-main {width:39%}
.dashboard-table .person-col {width:25%}
.dashboard-table .priority-col {width:16%}
.dashboard-table .status-col {width:20%}
.dashboard-table.finance-table .record-main {width:35%}
.dashboard-table.finance-table .vendor-col {width:21%}
.dashboard-table .amount-col {width:22%}
.dashboard-table .workflow-col {width:22%}
.money {font-size:10px; line-height:1.4}
.money small {font-size:8px}
.badge {font-size:9px; border-radius:6px; padding:4px 7px; line-height:1.2; font-weight:600; white-space:normal; text-align:center}
.workflow-mini b {font-size:9px; line-height:1.4}
.workflow-mini .steps {height:4px; margin-top:5px; max-width:83px}
.workflow-mini {min-width:0; max-width:100%}
.workflow-mini:hover b {text-decoration:underline}
.data-table .record-link:focus-visible {border-radius:3px; outline-offset:4px}
.list-toolbar {padding:16px 18px; border-bottom:1px solid var(--border)}
.list-search input {font-size:12px}
.list-table td {padding:14px 16px; line-height:1.6}
.list-table .record-link {font-size:11px}
.list-table .record-secondary {font-size:10px}
.pagination {padding:15px 18px}
.detail-grid {gap:19px}
.detail-meta {padding:22px}
.detail-meta .kv small {font-size:10px}
.detail-meta .kv b {font-size:12px}
.detail-description {font-size:12px; line-height:1.9}
.comment-box {border-radius:0 8px 8px 8px}
.approval-step {border-radius:9px}
.approval-step b {font-size:12px}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea {border-radius:7px; padding:10px 12px; font-size:12px}
label.field {font-size:11px; gap:7px}
label.field small {font-size:10px; line-height:1.6}
.modal {border-radius:12px; box-shadow:0 24px 85px #0e1b333b; width:670px}
.modal-top {font-size:11px; padding:12px 18px; color:var(--text); background:var(--surface-alt)}
.form-heading h2 {font-size:24px}
.workspace-footer {font-size:9px; padding:8px 24px 19px; color:var(--muted)}
/* Right-side customizer: same v5 form fields and server-side preferences. */
.theme-drawer {width:var(--reference-drawer); max-width:100vw; border-left:1px solid var(--border); box-shadow:-8px 0 28px #14284407; overflow-y:auto; scrollbar-width:thin; background:var(--surface)}
.theme-drawer::backdrop {background:#0b172b38; backdrop-filter:none}
.drawer-top {padding:21px 18px 16px; border:0; align-items:flex-start; background:var(--surface); position:sticky; top:0; z-index:2}
.drawer-top h2 {font-size:17px; margin:0; letter-spacing:-.4px; display:flex; align-items:center; gap:10px; font-weight:690; line-height:1.5}
.drawer-top p {font-size:10px; color:var(--muted); margin-top:7px; line-height:1.5}
.drawer-top>.icon-button {height:29px; width:24px; margin:0 -4px 0 3px; color:var(--text); font-size:17px}
.theme-content {padding:2px 18px 22px}
.theme-brand-card {border:1px solid var(--primary); border-radius:7px; background:var(--surface); padding:13px 10px; gap:11px; margin:0 0 21px; min-height:87px}
.theme-brand-card img {width:72px; padding:3px; border-radius:3px; background:#fff; flex-shrink:0}
.theme-brand-card b {font-size:11px; letter-spacing:-.1px; line-height:1.5}
.theme-brand-card small {font-size:9px; margin-top:3px; color:var(--muted)}
.theme-active-label {background:var(--primary); color:var(--on-primary); padding:2px 7px; border-radius:4px; font-size:9px; font-weight:550; margin-top:6px; display:inline-block}
.theme-label {font-size:11px; font-weight:650; margin-bottom:9px; color:var(--text)}
.presets {grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:21px}
.preset {padding:9px 4px 8px; border-radius:7px; border-color:transparent; font-size:10px; gap:6px; min-height:75px; position:relative; background:transparent}
.preset:hover {background:var(--surface-alt); border-color:var(--border)}
.preset.selected {border-color:var(--primary); color:var(--text); font-weight:650; background:var(--soft); box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 5%,transparent)}
.preset-swatch {width:39px; height:39px; box-shadow:inset 0 -3px 6px #00000009; border:0; position:relative; overflow:hidden}
.preset-swatch::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(30deg,transparent 47%,#ffffff18 48%,#ffffff04 76%,transparent 77%)}
.theme-section-heading {padding-top:17px; border-top:1px solid var(--border); margin:0 0 13px; font-size:10px; color:var(--muted)}
.theme-content .forms {gap:13px}
label.field.theme-color-row {display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:13px; font-size:10px; font-weight:500}
.color-field {display:flex; width:184px; align-items:center; border:1px solid var(--border); background:var(--surface-alt); padding:3px 7px 3px 4px; border-radius:6px; gap:9px}
.color-field input[type=color] {width:31px; height:29px; border:0; border-radius:4px; padding:0; background:none}
.color-field input[type=color]::-webkit-color-swatch-wrapper {padding:2px}
.color-field input[type=color]::-webkit-color-swatch {border:0; border-radius:3px}
.color-field input[type=color]::-moz-color-swatch {border:0; border-radius:3px}
.color-field span {font-family:inherit; font-size:10px; color:var(--text)}
.theme-style-fieldset {margin:2px 0 0; padding:0; min-width:0; border:0}
.theme-style-fieldset legend {padding:0}
.sidebar-style-options {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
.sidebar-style-choice {border:1px solid var(--border); border-radius:6px; padding:6px 5px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; font-size:10px; position:relative; background:var(--surface)}
.sidebar-style-choice:has(input:checked) {border-color:var(--primary); background:var(--soft); font-weight:600}
.sidebar-style-choice input,.radio-button input {position:absolute; opacity:0; width:1px; height:1px}
.sidebar-style-choice:has(input:focus-visible),.radio-button:has(input:focus-visible) {outline:3px solid var(--primary); outline-offset:3px}
.sidebar-thumbnail {height:47px; width:100%; max-width:73px; display:block; border-radius:4px; background:#f3f6fa; border:1px solid #e5eaf1; position:relative; overflow:hidden}
.sidebar-thumbnail i {position:absolute; left:0; top:0; bottom:0; width:22%; background:#19212b}
.sidebar-thumbnail i::after {content:""; position:absolute; left:4px; top:8px; width:4px; height:3px; border-radius:1px; background:#5b6b7d; box-shadow:0 7px #5b6b7d,0 14px #5b6b7d}
.sidebar-thumbnail b {position:absolute; top:5px; left:30%; right:8%; height:5px; background:#e0e7ef; border-radius:2px}
.sidebar-thumbnail em {position:absolute; left:30%; top:17px; height:22px; right:8%; background:linear-gradient(90deg,#e4eaf2 47%,transparent 48%,transparent 52%,#e8edf3 53%); border-radius:2px}
.sidebar-thumbnail.light i {background:#cbd6e2}
.sidebar-thumbnail.light i::after,.sidebar-thumbnail.minimal i::after {background:#9bacbf; box-shadow:0 7px #9bacbf,0 14px #9bacbf}
.sidebar-thumbnail.minimal i {background:#e8eef5}
.appearance-grid {gap:10px}
.radio-button {position:relative; padding:10px 12px; border-radius:6px; font-size:11px; min-height:40px; justify-content:center; gap:9px; background:var(--surface-alt)}
.radio-button:has(input:checked) {background:var(--surface); border-color:var(--primary); color:var(--primary-ink)}
.theme-content .btn.full {height:41px; min-height:41px; border-radius:6px; font-size:12px; margin:0}
.theme-content .btn.primary.full {margin-top:3px}
.theme-content .form-error:empty {display:none}
.theme-tip {font-size:9px; color:var(--muted); margin-top:2px; line-height:1.65}
/* Login theme shares the same restrained red / charcoal palette. */
.auth-brand {background:linear-gradient(145deg,#10191f,#070b10); padding:45px 62px}
.auth-brand:before {background:radial-gradient(ellipse,color-mix(in srgb,var(--primary) 18%,transparent),transparent 68%)}
.auth-brand h1 {font-size:clamp(40px,4.2vw,64px)}
.auth-brand .eyebrow {color:#ff7e87}
.auth-brand em {color:#ff5160}
.auth-brand p {color:#a2afbd}
.auth-right {background:linear-gradient(140deg,#fff,#f7f9fc)}
.auth-logo {border-radius:6px; padding:7px 12px}
.auth-card h2 {font-weight:710}
.auth-card .btn.primary {border-radius:7px}
/* Respect every user's existing color and appearance preferences. */
body[data-appearance=dark] {--bg:#10151c; --surface:#181f2a; --surface-alt:#1f2835; --text:#e8eef5; --muted:#a0afc2; --border:#2d3746; --shadow:0 4px 16px #00000012}
body[data-appearance=dark] .search-trigger {border-color:var(--border)}
body[data-appearance=dark] .data-table th {color:#a5b6ce}
body[data-appearance=dark] .reference-kpis .kpi {background:color-mix(in srgb,var(--kpi-tint) 9%,var(--surface)); border-color:color-mix(in srgb,var(--kpi-tint) 20%,var(--border))}
body[data-appearance=dark] .reference-kpis .kpi-icon {color:color-mix(in srgb,var(--kpi-tint) 55%,white)}
body[data-appearance=dark] .reference-kpis .kpi-note.warning {color:#ebc56b}
body[data-appearance=dark] .reference-kpis .kpi-note.positive {color:#71d4b1}
body[data-appearance=dark] .reference-finance-chart svg rect[fill="var(--accent)"] {stroke:var(--muted); stroke-width:1}
body[data-sidebar=light] .sidebar,body[data-sidebar=minimal] .sidebar {background:var(--surface); color:var(--muted); border-color:var(--border)}
body[data-sidebar=light] .brand-logo .logo-on-light,body[data-sidebar=minimal] .brand-logo .logo-on-light {display:block; background:#fff; border-radius:3px; padding:3px}
body[data-sidebar=light] .brand-logo .logo-on-dark,body[data-sidebar=minimal] .brand-logo .logo-on-dark {display:none}
body[data-sidebar=light] .sidebar .avatar,body[data-sidebar=minimal] .sidebar .avatar {background:var(--soft); color:var(--primary-ink); border-color:var(--border)}
body[data-sidebar=light] .sidebar-person b,body[data-sidebar=minimal] .sidebar-person b {color:var(--text)}
body[data-sidebar=light] .sidebar-signout,body[data-sidebar=minimal] .sidebar-signout {color:var(--muted)}
body[data-sidebar=light] .sidebar-signout:hover,body[data-sidebar=minimal] .sidebar-signout:hover {background:var(--soft); color:var(--primary-ink)}
body[data-sidebar=light] .sidebar-bottom,body[data-sidebar=minimal] .sidebar-bottom {border-color:var(--border)}
/* Wide monitors dock the modal visually without changing its v5 modal behavior. */
@media(min-width:1440px) {
  body:has(#themeDrawer[open]) .app-shell {padding-right:var(--reference-drawer)}
  .theme-drawer::backdrop {background:transparent}
}
/* Container queries respond to the usable workspace, including a docked drawer. */
@container(max-width:1080px) {
  .reference-kpis .kpi-number {font-size:26px}
  .reference-kpis .kpi:nth-child(4) .kpi-number,.reference-kpis .kpi:nth-child(6) .kpi-number {font-size:20px}
  .reference-kpis .kpi {padding:14px 11px}
  .reference-kpis .kpi-top {font-size:9px}
  .reference-card-title {gap:8px}
  .reference-card-title>svg {width:21px; height:21px}
  .reference-registers .card-head h2 {font-size:13px}
  .reference-registers .card-head .text-link {font-size:9px}
  .reference-registers .card-head p {font-size:9px}
  .profile-link>div {max-width:137px}
  .reference-date {padding-right:7px; padding-left:12px}
}
@container(max-width:940px) {
  .kpi-grid.reference-kpis {grid-template-columns:repeat(3,minmax(0,1fr))}
  .reference-kpis .kpi {min-height:120px; padding:14px 16px}
  .reference-kpis .kpi-top {font-size:11px}
  .reference-kpis .kpi-number {font-size:27px}
  .reference-kpis .kpi:nth-child(4) .kpi-number,.reference-kpis .kpi:nth-child(6) .kpi-number {font-size:25px}
  .reference-charts .chart-body {padding-left:17px; padding-right:17px; gap:12px; grid-template-columns:120px minmax(120px,1fr)}
  .reference-charts .donut-wrap svg {width:123px; height:123px}
  .reference-charts .card-head {padding:16px 14px}
  .reference-charts .card-head h2 {font-size:14px}
  .reference-date {display:none}
  .profile-link>div {display:none}
  .profile-link::after {display:none}
  .dashboard-table .person-col,.dashboard-table .vendor-col {display:none}
  .dashboard-table .record-main {width:49%}
  .dashboard-table .priority-col {width:22%}
  .dashboard-table .status-col {width:29%}
  .dashboard-table.finance-table .record-main {width:40%}
  .dashboard-table .amount-col {width:30%}
  .dashboard-table .workflow-col {width:30%}
  .reference-dashboard .hero-copy>div:last-child {display:block}
  .reference-dashboard .hero-copy p {margin-top:3px}
}
@container(max-width:720px) {
  .dashboard-grid {grid-template-columns:1fr}
  .reference-charts .chart-body {grid-template-columns:145px minmax(130px,1fr); justify-content:center; gap:30px; padding-left:23px; padding-right:23px}
  .reference-charts .donut-wrap svg {width:145px; height:145px}
  .reference-registers .card-head h2 {font-size:15px}
  .reference-registers .card-head .text-link {font-size:10px}
  .reference-registers .card-head p {font-size:10px}
  .reference-registers .dashboard-table .person-col,.reference-registers .dashboard-table .vendor-col {display:table-cell}
  .reference-registers .dashboard-table .record-main {width:39%}
  .reference-registers .dashboard-table .person-col {width:24%}
  .reference-registers .dashboard-table .priority-col {width:16%}
  .reference-registers .dashboard-table .status-col {width:21%}
  .reference-registers .dashboard-table.finance-table .record-main {width:35%}
  .reference-registers .dashboard-table .vendor-col {width:21%}
  .reference-registers .dashboard-table .amount-col {width:22%}
  .reference-registers .dashboard-table .workflow-col {width:22%}
  .reference-dashboard .page-head {align-items:flex-start; flex-wrap:wrap}
  .reference-dashboard .head-actions {justify-content:flex-start; margin-top:2px}
  .reference-dashboard .hero-strip .live-pill {display:none}
}
@container(max-width:490px) {
  .kpi-grid.reference-kpis {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .reference-kpis .kpi {min-height:123px; padding:14px 12px}
  .reference-kpis .kpi-top {font-size:10px; gap:7px}
  .reference-kpis .kpi:nth-child(4) .kpi-number,.reference-kpis .kpi:nth-child(6) .kpi-number {font-size:21px}
  .reference-registers .dashboard-table .person-col,.reference-registers .dashboard-table .vendor-col {display:none}
  .reference-registers .dashboard-table .record-main {width:49%}
  .reference-registers .dashboard-table .priority-col {width:22%}
  .reference-registers .dashboard-table .status-col {width:29%}
  .reference-registers .dashboard-table.finance-table .record-main {width:41%}
  .reference-registers .dashboard-table .amount-col {width:29%}
  .reference-registers .dashboard-table .workflow-col {width:30%}
  .reference-registers .card-head {padding-left:12px; padding-right:12px}
  .reference-registers .card-head h2 {font-size:13px}
  .reference-registers .card-head p {font-size:9px}
  .reference-registers .card-head .text-link {font-size:9px}
  .reference-registers .reference-card-title>svg {width:19px}
  .reference-charts .chart-body {gap:16px; grid-template-columns:122px minmax(120px,1fr); padding:0 18px 22px}
  .reference-charts .donut-wrap svg {width:122px; height:122px}
}
@media(max-width:1050px) {
  :root {--reference-sidebar:204px}
  .topbar {padding:0 18px; gap:10px}
  .content {padding:23px 18px 19px}
  .brand {padding-left:20px; padding-right:20px}
  .sidebar-bottom {padding-left:15px; padding-right:15px}
  .reference-dashboard .page-head h1 {font-size:27px}
  .reference-dashboard .page-head p {font-size:12px}
}
@media(max-height:930px) and (min-width:761px) {
  .reference-brand-note {min-height:98px; padding:12px}
  .reference-brand-note b {font-size:15px}
  .reference-brand-note small {display:none}
  .brand-note-rule {margin-top:8px}
  .brand {padding-top:18px; padding-bottom:16px}
  .brand-logo img {width:112px}
}
@media(max-height:760px) {.reference-brand-note {display:none}}
@media(max-width:760px) {
  :root {--reference-sidebar:240px}
  .app-shell {display:block; padding-right:0!important}
  .sidebar {width:240px}
  .brand-logo img {width:120px}
  .brand {padding:21px}
  .reference-brand-note {display:none}
  .topbar {height:61px; padding:0 12px; gap:5px}
  .mobile-menu {display:inline-flex}
  .search-trigger {border:0; background:none; padding:7px; flex:0; max-width:none; margin-left:0; margin-right:auto; width:33px; height:34px}
  .search-trigger>span:not(:first-child),.search-trigger kbd {display:none}
  .topbar-actions {gap:2px}
  .topbar-divider {margin:0 5px; height:24px}
  .topbar .icon-button {height:34px; width:32px}
  #themeButton {margin-left:2px; border-color:transparent}
  .profile-link>div,.profile-link::after {display:none}
  .profile-link .avatar {height:31px; width:31px; font-size:10px}
  .content {padding:23px 13px 16px}
  .page-head h1,.reference-dashboard .page-head h1 {font-size:26px}
  .page-head p,.reference-dashboard .page-head p {font-size:11px}
  .head-actions {width:100%; justify-content:flex-start}
  .head-actions .btn {flex:0 1 auto; font-size:10px}
  .reference-dashboard .hero-strip {padding:9px 10px; margin-bottom:16px}
  .reference-dashboard .hero-copy b {font-size:9px}
  .reference-dashboard .hero-copy p {font-size:9px; line-height:1.5}
  .reference-dashboard .hero-mark {flex-shrink:0}
  .reference-kpis .kpi-note {font-size:9px}
  .reference-charts .card {min-height:253px}
  .reference-charts .card-head h2 {font-size:14px}
  .reference-charts .card-head p {font-size:9px}
  .reference-finance-chart {padding-left:8px; padding-right:8px}
  .data-table.dashboard-table td {padding:10px; height:49px}
  .dashboard-table .record-link {font-size:9px}
  .dashboard-table .record-secondary {font-size:9px}
  .workflow-mini b {font-size:9px}
  .badge {font-size:8px; padding:4px 6px}
  .workspace-footer {padding:10px 14px 18px; font-size:8px}
  .theme-drawer {width:min(360px,100vw)}
  .drawer-top {padding-top:19px}
  .theme-content {padding-bottom:25px}
  .modal {max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px)}
  .modal #modalBody {padding:20px}
  .detail-meta {padding:18px; gap:16px}
  .detail-meta .kv b {font-size:11px}
  .auth-right {padding:27px 19px; min-height:100dvh}
  .auth-card {padding:25px 23px}
  .auth-card h2 {font-size:27px}
}
@media(prefers-reduced-motion:reduce) {* {animation:none!important; transition:none!important}}
@media print {
  :root {--text:#000; --muted:#555; --surface:#fff; --surface-alt:#f6f6f6; --border:#ccc}
  .app-shell {padding:0!important; display:block}
  .workspace {container-type:normal}
  .reference-brand-note,.reference-date,.theme-drawer {display:none!important}
  .reference-kpis .kpi {box-shadow:none; border-color:#ccc}
  .reference-charts .card,.reference-registers .card {break-inside:avoid}
  .reference-chart-key,.reference-axis {color:#555; fill:#555}
  .reference-bar-number {fill:#000}
}