:root {
  --ink: #10263a; --muted: #718196; --line: #dce5ec; --canvas: #f3f6f8;
  --navy: #071b2d; --navy-2: #0e2f49; --teal: #18a99a; --lime: #9bd547;
  --amber: #ffb547; --coral: #ef6a64; --blue: #4d84e2; --violet: #7e6de0;
  --white: #fff; --shadow: 0 12px 30px rgba(20, 45, 68, .08); --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Leelawadee UI", Tahoma, Arial, sans-serif; }
button, select, input { font: inherit; }
button, select { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px 20px; background: linear-gradient(180deg, var(--navy), #0a2338); color: white; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 32px; color: white; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, var(--teal), #5bd0bc); font-weight: 900; box-shadow: 0 8px 20px #18a99a35; }
.brand strong { display: block; letter-spacing: .12em; font-size: 17px; }.brand small { color: #8da5b7; font-size: 9px; letter-spacing: .22em; }
.nav { display: flex; flex-direction: column; gap: 4px; }.nav p { margin: 20px 12px 7px; color: #678198; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 13px; color: #adc0cf; border-radius: 11px; text-decoration: none; font-size: 13px; transition: .2s ease; }
.nav a span { width: 18px; text-align: center; font-size: 17px; }.nav a:hover { color: white; background: #ffffff0c; }.nav a.active { color: white; background: linear-gradient(90deg, #18a99a31, #18a99a08); box-shadow: inset 3px 0 var(--teal); }
.source-card { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 13px; background: #ffffff0b; border: 1px solid #ffffff10; border-radius: 13px; }
.source-card strong,.source-card small { display: block; }.source-card strong { font-size: 12px; }.source-card small { color: #8da5b7; font-size: 10px; margin-top: 2px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px #ffb54720; }
.main { min-width: 0; overflow: hidden; }.topbar { min-height: 92px; padding: 18px 34px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; }
.page-heading p { margin: 0 0 4px; color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .2em; }.page-heading h1 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 15px; }.freshness { display: flex; align-items: center; gap: 9px; }.freshness > span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }.freshness small,.freshness strong { display: block; }.freshness small { color: var(--muted); font-size: 9px; }.freshness strong { margin-top: 2px; font-size: 11px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }.icon-button:hover { border-color: var(--teal); color: var(--teal); }.menu-button { display: none; }
.filterbar { display: flex; gap: 10px; align-items: end; padding: 16px 34px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.filterbar label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }.filterbar select { min-width: 122px; height: 34px; padding: 0 30px 0 10px; color: var(--ink); background: #f7f9fb; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }.text-button { height: 34px; padding: 0 12px; color: var(--teal); background: transparent; border: 0; font-size: 11px; font-weight: 700; white-space: nowrap; }
.active-filters{display:flex;align-items:center;gap:8px;padding:9px 34px;background:#eef7f6;border-bottom:1px solid #d6ebe8;overflow-x:auto;white-space:nowrap}.active-filters[hidden]{display:none}.active-filters>span{color:var(--muted);font-size:9px;font-weight:800}.active-filters button{padding:5px 9px;border:1px solid #b9ded9;border-radius:16px;background:#fff;color:var(--ink);font-size:9px;cursor:pointer}.active-filters button:hover{border-color:var(--teal);color:var(--teal)}.active-filters button b{margin-left:4px}.active-filters .clear-cross-filters{border-color:transparent;background:transparent;color:var(--teal);font-weight:800}
.content { padding: 26px 34px 48px; }.hero { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }.eyebrow { margin: 0 0 5px; color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }.hero h2 { margin: 0; font-size: 22px; }.hero p:last-child { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 16px; }.grid.kpis { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 16px; }.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }.span-2 { grid-column: span 2; }.span-3 { grid-column: span 3; }
.card { min-width: 0; padding: 20px; background: white; border: 1px solid #e2e9ee; border-radius: var(--radius); box-shadow: var(--shadow); }.card-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 18px; }.card-header h3 { margin: 0; font-size: 14px; }.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }.badge { padding: 5px 8px; color: var(--teal); background: #18a99a12; border-radius: 20px; font-size: 9px; font-weight: 800; }
.kpi { position: relative; min-height: 132px; overflow: hidden; }.kpi::after { content:""; position:absolute; right:-22px; bottom:-28px; width:90px; height:90px; border-radius:50%; background:var(--accent,#18a99a); opacity:.08; }.kpi .label { color: var(--muted); font-size: 10px; font-weight: 700; }.kpi .value { margin: 13px 0 6px; font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.04em; }.kpi .context { color: var(--muted); font-size: 10px; }.kpi .spark { position:absolute; right:18px; top:20px; width:30px; height:4px; border-radius:4px; background:var(--accent,var(--teal)); }
.chart { min-height: 230px; display: flex; align-items: end; gap: 9px; padding-top: 8px; overflow: hidden; }.bar-item { flex: 1; min-width: 24px; height: 212px; display: grid; grid-template-rows: 18px 155px 29px; align-items: end; justify-items: center; gap: 5px; }.bar { align-self:end; justify-self:center; width: min(40px,75%); min-height: 3px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--teal), #118b85); transition: height .4s ease; }.bar-value { align-self:end; font-size: 10px; font-weight: 800; }.bar-label { align-self:start; width: 100%; height: 29px; color: var(--muted); font-size: 8px; line-height:1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.monthly-comparison-card{padding:0;overflow:hidden}.monthly-comparison-wrap{width:100%;overflow:auto}.monthly-comparison-table{width:100%;min-width:430px;border-collapse:separate;border-spacing:0;font-size:11px;font-variant-numeric:tabular-nums}.monthly-comparison-table th,.monthly-comparison-table td{height:34px;padding:6px 9px;border-bottom:1px solid #fff;white-space:nowrap;text-align:right}.monthly-comparison-table th:nth-child(1),.monthly-comparison-table td:nth-child(1){width:42px;text-align:left}.monthly-comparison-table th:nth-child(2),.monthly-comparison-table td:nth-child(2){text-align:left}.monthly-comparison-table thead th{background:#fff;border-bottom:1px solid #6aa6ff;color:#263746;font-weight:900}.monthly-comparison-table tbody td{background:#f7f7f7}.monthly-comparison-table tbody tr:nth-child(even) td{background:#e7e7e7}.monthly-comparison-table tbody tr:hover td{background:#e7f2ff}.monthly-comparison-table tbody tr.selected td{background:#cfe5ff;box-shadow:inset 0 1px #4d84e2,inset 0 -1px #4d84e2}.monthly-comparison-table tfoot th,.monthly-comparison-table tfoot td{background:#fff;border-top:1px solid #6aa6ff;border-bottom:0;font-weight:900}.month-diff-layout{display:grid;grid-template-columns:22px 64px;align-items:center;justify-content:end}.month-diff-arrow{font-size:22px;line-height:12px;text-align:center;font-weight:900}.month-diff-value{text-align:right}.month-diff.up .month-diff-arrow{color:#cf554e}.month-diff.down .month-diff-arrow{color:#168d78}.month-diff.flat .month-diff-arrow{color:#718196}
.donut-layout { min-height: 235px; display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 20px; }.donut { position:relative; width:160px; aspect-ratio:1; }.donut svg { display:block; width:100%; height:100%; transform:rotate(-90deg); }.donut-center { position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center; }.donut-center strong { font-size:25px; }.donut-center small { color:var(--muted); font-size:9px; }.legend { display:grid; gap:10px; }.legend-row { display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:10px; }.legend-row i { width:8px; height:8px; border-radius:3px; }.legend-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }.legend-row strong { font-size:10px; }
.gauge { display:grid; place-items:center; min-height:235px; }.gauge-ring { --value:50; position:relative; width:180px; aspect-ratio:2/1; overflow:hidden; }.gauge-ring::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:conic-gradient(from 270deg, var(--amber) calc(var(--value)*1.8deg), #edf0f2 0 180deg, transparent 0); }.gauge-ring::after { content:""; position:absolute; inset:28px 28px -90px; border-radius:50%; background:#fff; }.gauge-number { position:absolute; inset:auto 0 5px; z-index:2; text-align:center; font-size:27px; font-weight:900; }.gauge-number small { display:block; margin-top:3px; color:var(--muted); font-size:9px; font-weight:400; }
.complaint-gauge-card{padding:0;overflow:hidden}.complaint-gauges{display:grid;grid-template-columns:1fr}.complaint-gauge{min-height:148px}.complaint-gauge+ .complaint-gauge{border-top:1px solid var(--line)}.complaint-gauge h4{margin:0;padding:8px 14px;background:linear-gradient(90deg,#f4b9bd,#f7ced1);color:#512229;text-align:center;font-size:15px;font-weight:900}.complaint-gauge-dial{position:relative;width:220px;height:102px;margin:8px auto 0;overflow:hidden}.complaint-gauge-dial::before{content:"";position:absolute;left:10px;top:4px;width:200px;height:200px;border-radius:50%;background:conic-gradient(from 270deg,#63d8eb var(--gauge-angle),#edf0f2 0 180deg,transparent 0)}.complaint-gauge-dial::after{content:"";position:absolute;left:38px;top:32px;width:144px;height:144px;border-radius:50%;background:#fff}.complaint-gauge-target{position:absolute;left:50%;bottom:0;z-index:3;width:0;height:98px;transform:rotate(calc(-90deg + var(--target-angle)));transform-origin:50% 100%}.complaint-gauge-target::after{content:"";position:absolute;top:2px;left:-1px;width:2px;height:13px;background:#ef6a64}.complaint-gauge-target-value{position:absolute;left:50%;top:0;z-index:4;transform:translateX(-50%);color:#d94e49;font-size:10px}.complaint-gauge-dial>strong{position:absolute;left:50%;bottom:5px;z-index:4;transform:translateX(-50%);font-size:25px;font-weight:500}.complaint-gauge-min,.complaint-gauge-max{position:absolute;bottom:4px;z-index:4;color:#667787;font-size:12px}.complaint-gauge-min{left:0}.complaint-gauge-max{right:0}
.table-wrap { width:100%; overflow:auto; max-height:500px; }.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:10px; }.data-table th { position:sticky; top:0; z-index:1; padding:10px 9px; color:#68798b; background:#f5f8fa; border-bottom:1px solid var(--line); text-align:left; font-size:9px; white-space:nowrap; }.data-table td { max-width:280px; padding:10px 9px; border-bottom:1px solid #edf1f4; vertical-align:top; }.data-table tr:hover td { background:#f9fbfc; }.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:12px; background:#eef2f4; font-size:8px; font-weight:800; white-space:nowrap; }.status::before { content:""; width:5px; height:5px; border-radius:50%; background:#81909d; }.status.closed,.status.complete { color:#4a821d; background:#eef8e5; }.status.closed::before,.status.complete::before{background:var(--lime)}.status.open{color:#b43c3c;background:#fff0ef}.status.open::before{background:var(--coral)}.status.in-process{color:#a46a14;background:#fff7e8}.status.in-process::before{background:var(--amber)}
.search { width:min(300px,100%); height:36px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:0; }.search:focus { border-color:var(--teal); box-shadow:0 0 0 3px #18a99a14; }.empty,.error-state,.loading { min-width:0; min-height:360px; display:grid; align-items:center; text-align:center; }.empty>div,.error-state>div { width:100%; max-width:540px; justify-self:center; padding:0 16px; }.loading::before { content:""; width:36px; height:36px; margin:0 auto 15px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; }.empty-icon,.error-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 16px; border-radius:20px; background:#e9f6f4; color:var(--teal); font-size:28px; }.error-icon{background:#fff0ef;color:var(--coral)}.empty h3,.error-state h3 { margin:0 0 8px; }.empty p,.error-state p { max-width:100%; margin:0; color:var(--muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.ncr-register-card .table-wrap{max-height:620px}.ncr-register-header{align-items:end}.ncr-register-actions{display:flex;align-items:end;gap:12px}.ncr-number-search{display:grid;gap:4px;color:var(--muted);font-size:9px;font-weight:700}.ncr-number-search input{width:230px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;outline:0;color:var(--ink);background:#f9fbfc}.ncr-number-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #18a99a14}
.attachment-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:9px;background:#e9f6f4;color:#087f75;text-decoration:none;font-size:9px;font-weight:800;white-space:nowrap}.attachment-button:hover{background:#18a99a;color:#fff}.attachment-button.secondary{background:#f1f4f6;color:#68798b}.attachment-menu{position:relative}.attachment-menu summary{display:inline-flex;padding:6px 11px;border-radius:9px;background:#e9f6f4;color:#087f75;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}.attachment-menu div{position:absolute;right:0;z-index:5;display:grid;min-width:220px;max-width:320px;padding:7px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 12px 30px #10263a24}.attachment-menu a{padding:7px 9px;border-radius:7px;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-menu a:hover{background:#e9f6f4;color:#087f75}
.linked-status-card .table-wrap{max-height:600px}.linked-status-card .data-table{min-width:1280px}.relation-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.relation-summary>span,.relation-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:#f1f4f6;color:#647789;font-size:9px;font-weight:800;white-space:nowrap}.relation-summary .both,.relation-badge.both{background:#e4f5ef;color:#087f75}.relation-summary .ncr-only,.relation-badge.ncr-only{background:#e9f0ff;color:#3268bb}.relation-summary .carpar-only,.relation-badge.carpar-only{background:#f1edff;color:#6853bd}.reference-number{color:#7c8b99;border-bottom:1px dashed #aab5bf}
.wait-close-card{padding:0;overflow:hidden}.wait-matrix{min-height:285px;font-size:11px}.wait-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 14px;background:linear-gradient(90deg,#f2a9ae,#f7c6c9);color:#512229;font-weight:900}.wait-title>span{min-width:0}.wait-actions{display:flex;gap:5px}.wait-actions button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:28px;padding:4px 8px;border:1px solid #fff9;border-radius:8px;background:#fff9;color:#512229;font:inherit;font-size:8px;font-weight:900;white-space:nowrap;cursor:pointer}.wait-actions button:hover{background:#fff}.wait-actions button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.wait-actions button span{font-size:13px;line-height:1}.wait-columns,.wait-total,.wait-items>div{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center}.wait-columns{padding:8px 12px;border-bottom:1px solid var(--line);font-weight:700}.wait-columns span:last-child,.wait-total strong,.wait-items strong{text-align:right}.wait-groups{max-height:280px;overflow:auto}.wait-groups details{border-bottom:1px solid #edf1f4}.wait-groups summary{display:grid;grid-template-columns:20px minmax(0,1fr) 72px;align-items:center;padding:7px 12px;cursor:pointer;font-weight:800;list-style:none}.wait-groups summary::-webkit-details-marker{display:none}.wait-groups summary::before{content:'›';display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#e9f6f4;color:#087f75;font-size:17px;line-height:1;transition:transform .16s ease}.wait-groups details[open] summary::before{transform:rotate(90deg)}.wait-groups summary strong{text-align:right}.wait-groups summary:hover{background:#f7f9fb}.wait-items>div{padding:6px 12px 6px 34px;background:#f7f8f9;border-top:1px solid white}.wait-items a{color:var(--ink);text-decoration:none}.wait-items a:hover{color:var(--teal);text-decoration:underline}.wait-total{padding:9px 12px;border-top:2px solid var(--line);font-weight:900}
.department-matrix-card{padding:0;overflow:hidden}.department-matrix-wrap{width:100%;max-height:355px;overflow:auto}.department-matrix{min-width:820px;width:100%;border-collapse:separate;border-spacing:0;font-size:10px}.department-matrix th,.department-matrix td{height:27px;padding:5px 8px;border-bottom:1px solid #fff;text-align:center;white-space:nowrap}.department-matrix thead th{position:sticky;top:0;z-index:3;background:#fff;border-bottom:1px solid #77a8ff;font-weight:900}.department-matrix th:first-child{position:sticky;left:0;z-index:2;width:154px;max-width:154px;text-align:left;overflow:hidden;text-overflow:ellipsis}.department-matrix thead th:first-child{z-index:4}.department-matrix tbody th,.department-matrix tbody td{background:#f7f7f7}.department-matrix tbody tr:nth-child(even) th,.department-matrix tbody tr:nth-child(even) td{background:#e9e9e9}.department-matrix tbody th{border-right:1px solid #77a8ff;font-weight:500}.department-matrix tbody tr:hover th,.department-matrix tbody tr:hover td{background:#e8f2ff}.department-matrix .matrix-total{font-weight:800}.department-matrix tfoot th,.department-matrix tfoot td{position:sticky;bottom:0;z-index:2;background:#fff;border-top:2px solid var(--line);font-weight:900}.department-matrix tfoot th:first-child{z-index:3}
.interactive-filter{cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease,opacity .16s ease}.interactive-filter:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.legend-row.interactive-filter,.metric-list-row.interactive-filter{padding:6px;border-radius:8px;margin:-6px}.legend-row.interactive-filter:hover,.metric-list-row.interactive-filter:hover{background:#f0f7f6}.legend-row.interactive-filter.selected,.metric-list-row.interactive-filter.selected{background:#e2f4f1;box-shadow:inset 0 0 0 1px #74c8bd}.bar-item.interactive-filter:hover .bar{filter:brightness(.92)}.bar-item.interactive-filter.selected .bar{box-shadow:0 0 0 3px #10263a26,0 0 0 5px #18a99a55}.bar-item.interactive-filter.selected .bar-label{color:var(--ink);font-weight:900}.donut circle.interactive-filter:hover{opacity:.78}.donut circle.interactive-filter.selected{stroke-width:29}.matrix-filter-button{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;font-weight:800}.matrix-filter-button:hover,.matrix-filter-button.selected{color:var(--teal);text-decoration:underline}.department-matrix .interactive-filter:hover{background:#dcecff!important}.department-matrix .interactive-filter.selected{background:#cfe5ff!important;box-shadow:inset 0 0 0 1px #4d84e2;color:#10263a;font-weight:900}
.toast { position:fixed; right:24px; bottom:24px; z-index:50; padding:12px 16px; color:white; background:var(--navy); border-radius:11px; box-shadow:var(--shadow); font-size:11px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; }.toast.show{opacity:1;transform:none}.subgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.metric-list { display:grid; gap:12px; }.metric-list-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }.metric-list-row span { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.metric-list-row strong { font-size:10px; }.progress { grid-column:1/-1; height:5px; overflow:hidden; background:#edf1f4; border-radius:6px; }.progress i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue),var(--teal)); }

/* Readability scale: keep every dashboard page legible without compressing table columns. */
body{font-size:14px}.brand strong{font-size:19px}.brand small{font-size:11px}.nav p{font-size:11px}.nav a{min-height:46px;font-size:14px}.nav a span{font-size:18px}.source-card strong{font-size:13px}.source-card small{font-size:11px}.page-heading p{font-size:11px}.page-heading h1{font-size:28px}.freshness small{font-size:11px}.freshness strong{font-size:13px}.filterbar label{font-size:11px}.filterbar select,.text-button{height:38px;font-size:13px}.active-filters>span,.active-filters button{font-size:11px}.eyebrow{font-size:12px}.hero h2{font-size:26px}.hero p:last-child{font-size:14px}.card-header h3{font-size:17px}.card-header p{font-size:13px}.badge{font-size:11px}.kpi .label,.kpi .context{font-size:12px}.kpi .value{font-size:34px}.bar-value{font-size:12px}.bar-label{font-size:10px}.monthly-comparison-table{min-width:520px;font-size:13px}.donut-center strong{font-size:28px}.donut-center small{font-size:11px}.legend-row,.legend-row strong{font-size:12px}.gauge-number{font-size:30px}.gauge-number small{font-size:11px}.data-table{font-size:12px}.data-table th{padding:11px 10px;font-size:11px}.data-table td{padding:11px 10px}.status{font-size:10px}.search{height:40px;font-size:13px}.ncr-number-search{font-size:11px}.ncr-number-search input{height:40px;font-size:13px}.attachment-button,.attachment-menu summary{font-size:11px}.linked-status-card .data-table{min-width:1500px}.relation-summary>span,.relation-badge{font-size:11px}.wait-matrix{font-size:13px}.wait-actions button{font-size:10px}.department-matrix{min-width:960px;font-size:12px}.toast{font-size:13px}.metric-list-row span,.metric-list-row strong{font-size:12px}
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1100px){.grid.kpis{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr 1fr}.span-3{grid-column:span 2}}
@media (max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-100%);width:250px;transition:.25s}.sidebar.open{transform:none;box-shadow:20px 0 50px #071b2d44}.menu-button{display:inline-grid;place-items:center}.topbar{padding:16px 18px}.filterbar{padding:12px 18px}.active-filters{padding:9px 18px}.content{padding:20px 18px 40px}.freshness{display:none}.grid.two,.grid.three{grid-template-columns:1fr}.span-2,.span-3{grid-column:span 1}}
@media (max-width:560px){.grid.kpis{grid-template-columns:1fr 1fr;gap:10px}.card{padding:16px}.kpi{min-height:115px}.kpi .value{font-size:29px}.donut-layout{grid-template-columns:1fr}.donut{margin:auto}.subgrid{grid-template-columns:1fr}.hero h2{font-size:23px}.page-heading h1{font-size:24px}.ncr-register-header,.ncr-register-actions{align-items:stretch;flex-direction:column}.ncr-number-search input{width:100%}}
.empty,.error-state,.loading { width:100%; grid-template-columns:minmax(0,1fr); }
.empty>div,.error-state>div { width:auto; max-width:540px; }
.bar { display:block; flex:none; }