/*!
 * مفتاح — نظام إدارة الأملاك والعقود
 * Design system (RTL · light / dark · print)
 * © s0sta.com — جميع الحقوق محفوظة
 */

/* ============================================================ Saudi riyal sign
 * U+20C1 (Unicode 17) — official SAMA artwork in a one-glyph font. unicode-range limits it to this
 * single character, so it never replaces the text font. Height = height of the figures; the weight
 * range stops browsers from faking a bold version (the sign keeps its official geometry). */
@font-face {
  font-family: "Miftah Riyal"; font-style: normal; font-weight: 100 900; font-display: block;
  unicode-range: U+20C1;
  src: url(data:font/woff;base64,d09GRgABAAAAAATUAAoAAAAABtAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABZAAAADYAAABgfTd692NtYXAAAAGkAAAALQAAADQADCEUZ2x5ZgAAAdwAAADMAAAA3HMU9vBoZWFkAAAA9AAAADYAAAA2L96wuGhoZWEAAAEsAAAAIAAAACQGNAGjaG10eAAAAZwAAAAIAAAACASiAB5sb2NhAAAB1AAAAAYAAAAGAG4AAG1heHAAAAFMAAAAFwAAACAABQBZbmFtZQAAAqgAAAIPAAAD9nyV3eNwb3N0AAAEuAAAABkAAAAusqA5pQABAAAAAQAA8CvYtV8PPPUAAwPoAAAAAOcNNo4AAAAA5w02jgAeAAACkAK8AAAAAwACAAAAAAAAeJxjYGRgYG75d4WBgWkdgxyDHNMEBkYGVMAEAGewA9x4nGNgZGBgYGIIZ2BiYACz0AAACUQAXwB4nGNgZgpknMDAykAsYIIxgg2CQxgYFA4qHGRu+XeFgYH5BaMOTI7xC9MeBgYGBQYGABZWCR8AAAH0AAACrgAeeJwlydENABAQwNDH3QgGMIrVTWIUgp82TVERaEJ5Th0pb/e59+ca7ztf1wc9AAAAAAAAAABuAAB4nAXBO04DMRAAUM94PvbaixXWbmkMSoRo2MjaIoU7JESflntwCag4QHpKBEL09JyAA5ArIN4zaM6MwSf8NKPZG3ORpLNdlpK4lu2SuFWtJQ2dt01b51WX1fXSWld8RCIiPFoWot93+2pJGQ8AbwAs7og3AGg35FTEfQOy6Bd8WBJ3sCEOwQ/hlp2PPvjwEEscgsylTMHNILDGMuWR691aY8l5fk57Yd2xI0J7pScln17ebyCXaaoA52P0TlX+XhL8iPdBnYj5Bz6tG1x4nHWRS2rbUBiFPzmP0tCWQAMtHf2jYpNYyBlm5jgkGOIQLBzI8Nq+lm4tXxk9Bt5DB11CNtA9dFC6gi6jK+io+PqS1qHRRJ8OR+d/AYf8IGDzjMFzwCvGnhu8wHre4R21512O+Ox5j9c8eN7nLV89H3DLN3YIdl8C34NDzwHvg5+eG7wJfnneIQx+e96l2Wh63uND49bzPh8bnzwf8ND4Eqt6amRoViqT0iRWmqPj06jXaYkqZVmPM1OmeirjlVSplo27p21VqEzOlZ1LM+4Ouq1QLnNbyVJN5ioxNjmTMiorFU7yxcDMKpVuSgx1Umeq2EhOaXup3Qmjf53i9TtdlCa30gmjKPrPf7GxSabbSbZapjJb9zDLC9nMIHF3dNGXYf++ey1x/+rmRFJtkrSShaom67GqXDJjjU1kZpK60GVIjKJmikEYYlihyBBKDAkWocmIY06J6NGhhaAoEZbUjMkwlKRopghjVgiV+5at7B4aS0Xh889RWOYuP6bLgC4tQoRLcudcV1BMmKNIMFgSzlxnESUVipAJOQsGGGZOSbemGKJJqMlQFFuuv572E1ebDiHRs5nyxH+HpnDbyt22Nn9HTxKerxf7yTI0bfdesXQ1Z497WFOBbN1B3NZGXNB3PfW5p8u10/tcccMJ4u6wvmPqchYoKiaP16rIEXdB67tY1zKuuwJNSfgHpJHHJQB4nGNgYsAPmBgYGJnYS/MyjQycDQEK2QIxAAAA) format("woff");
}

/* ============================================================ tokens */
:root {
  --font: "Miftah Riyal", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --brand-50: #e9f6f3; --brand-100: #cdebe4; --brand-200: #9dd7ca; --brand-300: #62bca8; --brand-400: #2f9f88;
  --brand-500: #12917a; --brand-600: #0e7461; --brand-700: #0a5c4d; --brand-800: #08483d; --brand-900: #06352d;
  --gold: #e9c46a; --gold-600: #b8861b; --gold-soft: #fbf3df;

  --bg: #f3f6f5;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --surface-3: #edf2f0;
  --border: #e1e8e6;
  --border-strong: #c9d4d1;
  --text: #0f1f1b;
  --text-2: #3c4d48;
  --muted: #687a75;
  --faint: #97a6a2;
  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);
  --primary-soft: var(--brand-50);
  --primary-text: var(--brand-700);
  --on-primary: #fff;
  --ring: 0 0 0 3px rgba(18, 145, 122, .28);
  --shadow-xs: 0 1px 2px rgba(15, 31, 27, .05);
  --shadow: 0 1px 3px rgba(15, 31, 27, .07), 0 1px 2px rgba(15, 31, 27, .04);
  --shadow-md: 0 6px 18px -6px rgba(15, 31, 27, .14);
  --shadow-lg: 0 18px 40px -12px rgba(15, 31, 27, .25);
  --radius: 14px; --radius-sm: 10px; --radius-xs: 7px;

  --green: #15803d; --green-bg: #dcfce7; --green-bd: #bbf7d0;
  --amber: #b45309; --amber-bg: #fef3c7; --amber-bd: #fde68a;
  --red: #b91c1c; --red-bg: #fee2e2; --red-bd: #fecaca;
  --blue: #1d4ed8; --blue-bg: #dbeafe; --blue-bd: #bfdbfe;
  --violet: #6d28d9; --violet-bg: #ede9fe; --violet-bd: #ddd6fe;
  --slate: #475569; --slate-bg: #e2e8f0; --slate-bd: #cbd5e1;
  --gray: #57534e; --gray-bg: #f1f5f4; --gray-bd: #e2e8e6;

  --c1: #0e7461; --c2: #e0a03a; --c3: #3b82f6; --c4: #8b5cf6; --c5: #e5484d; --c6: #94a3b8;

  --sb-bg: linear-gradient(180deg, #0b4a3f 0%, #07352d 55%, #062b25 100%);
  --sb-text: #cfe7e1; --sb-muted: #7fa79d; --sb-hover: rgba(255, 255, 255, .07); --sb-active: rgba(255, 255, 255, .12);
  --sidebar-w: 264px; --sidebar-w-collapsed: 78px; --topbar-h: 64px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0a1210;
  --surface: #101b18;
  --surface-2: #13211d;
  --surface-3: #192b26;
  --border: #213531;
  --border-strong: #2e4741;
  --text: #e3eeeb;
  --text-2: #b4c6c1;
  --muted: #88a099;
  --faint: #5f7771;
  --primary: #1fa98c;
  --primary-hover: #29bf9f;
  --primary-soft: rgba(31, 169, 140, .14);
  --primary-text: #4fd1b3;
  --on-primary: #04211b;
  --ring: 0 0 0 3px rgba(41, 191, 159, .3);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, .7);
  --gold-soft: rgba(233, 196, 106, .12);

  --green: #4ade80; --green-bg: rgba(74, 222, 128, .12); --green-bd: rgba(74, 222, 128, .28);
  --amber: #fbbf24; --amber-bg: rgba(251, 191, 36, .12); --amber-bd: rgba(251, 191, 36, .28);
  --red: #f87171; --red-bg: rgba(248, 113, 113, .13); --red-bd: rgba(248, 113, 113, .3);
  --blue: #60a5fa; --blue-bg: rgba(96, 165, 250, .13); --blue-bd: rgba(96, 165, 250, .3);
  --violet: #a78bfa; --violet-bg: rgba(167, 139, 250, .13); --violet-bd: rgba(167, 139, 250, .3);
  --slate: #a5b4c3; --slate-bg: rgba(148, 163, 184, .13); --slate-bd: rgba(148, 163, 184, .28);
  --gray: #a8b3b0; --gray-bg: rgba(148, 163, 160, .1); --gray-bd: rgba(148, 163, 160, .22);

  --c1: #22b394; --c2: #f0b453; --c3: #60a5fa; --c4: #a78bfa; --c5: #f87171; --c6: #64748b;
  --sb-bg: linear-gradient(180deg, #0b211d 0%, #081815 100%);
  --sb-text: #c3dbd5; --sb-muted: #6b8c84; --sb-hover: rgba(255, 255, 255, .05); --sb-active: rgba(41, 191, 159, .14);
  color-scheme: dark;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; color: var(--text); }
p { margin: 0 0 .75em; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: rgba(18, 145, 122, .22); }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
small { font-size: .82em; }
code, kbd { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; }
code { background: var(--surface-3); padding: 2px 6px; border-radius: 6px; direction: ltr; unicode-bidi: embed; }
.icon { width: 18px; height: 18px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: embed; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* amount + currency: the riyal sign stays left of the value (SAMA), same size & colour as the figures */
.amt { white-space: nowrap; }
.sar { font-family: "Miftah Riyal", var(--font); font-style: normal; font-synthesis: none; }
.neg { color: var(--red); }
.pos { color: var(--green); }
.strong { font-weight: 700; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.ml-n { margin-right: -10px; }
.hidden, [hidden] { display: none !important; }
.skip-link { position: absolute; top: -40px; right: 12px; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 10px; }
.text-center { text-align: center; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ============================================================ app shell */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); background: var(--sb-bg); color: var(--sb-text);
  display: flex; flex-direction: column; z-index: 40; transition: width .2s ease, transform .25s ease; border-inline-end: 1px solid rgba(255, 255, 255, .04);
}
.main { flex: 1; min-width: 0; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; transition: margin .2s ease; }
.sb-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 72px; padding: 0 16px 0 12px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); border-radius: 12px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text b { font-size: 19px; letter-spacing: -.2px; }
.brand-text small { color: var(--sb-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.sb-collapse { background: transparent; border: 0; color: var(--sb-muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.sb-collapse:hover { background: var(--sb-hover); color: #fff; }
.sb-nav { flex: 1; overflow-y: auto; padding: 6px 12px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.sb-group { margin-top: 10px; }
.sb-title { font-size: 11px; font-weight: 600; color: var(--sb-muted); padding: 10px 12px 6px; letter-spacing: .2px; }
.sb-nav ul { list-style: none; margin: 0; padding: 0; }
.sb-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0; border-radius: 10px;
  color: var(--sb-text); font-weight: 500; font-size: 14px; transition: background .15s, color .15s;
}
.sb-link:hover { background: var(--sb-hover); color: #fff; text-decoration: none; }
.sb-link .icon { width: 19px; height: 19px; opacity: .85; }
.sb-link.active { background: var(--sb-active); color: #fff; font-weight: 600; }
.sb-link.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
[dir="rtl"] .sb-link.active::before { border-radius: 4px 0 0 4px; }
.sb-link.active .icon { opacity: 1; color: var(--gold); }
.sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-badge { background: var(--gold); color: #3b2a04; font-size: 11px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; }
.sb-foot { padding: 12px 14px 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.sb-credit { display: flex; align-items: center; gap: 8px; color: var(--sb-muted); font-size: 12px; padding: 8px 10px; border-radius: 10px; }
.sb-credit b { color: var(--gold); font-weight: 600; letter-spacing: .3px; }
.sb-credit:hover { background: var(--sb-hover); text-decoration: none; color: #fff; }
.sb-credit .icon { width: 16px; height: 16px; color: var(--gold); }
.sb-backdrop { display: none; }

.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.sb-collapsed .main { margin-inline-start: var(--sidebar-w-collapsed); }
.sb-collapsed .brand-text, .sb-collapsed .sb-label, .sb-collapsed .sb-title, .sb-collapsed .sb-credit span { display: none; }
.sb-collapsed .sb-brand { flex-direction: column; justify-content: center; height: auto; padding: 14px 0 6px; }
.sb-collapsed .sb-collapse { transform: rotate(180deg); }
.sb-collapsed .sb-link { justify-content: center; padding: 11px 0; }
.sb-collapsed .sb-badge { position: absolute; top: 3px; inset-inline-end: 6px; min-width: 18px; height: 16px; font-size: 10px; }
.sb-collapsed .sb-credit { justify-content: center; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.sb-open { display: none; }
.tb-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.icon-btn {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .icon { width: 20px; height: 20px; }
.dot-count { position: absolute; top: 4px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
[data-theme="dark"] .i-moon, [data-theme="light"] .i-sun { display: none; }

.user-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; padding: 4px 8px 4px 10px; border-radius: 12px; }
.user-btn:hover { background: var(--surface-3); }
.avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); flex: none; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: start; }
.user-meta b { font-size: 13.5px; }
.user-meta small { color: var(--muted); font-size: 11.5px; }
.user-caret { width: 16px; height: 16px; color: var(--muted); }

.content { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 24px 28px 40px; }
.content:focus { outline: none; }
.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 18px 24px 22px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--border); }
.footer a { color: var(--primary-text); font-weight: 600; }
.footer-sep { color: var(--faint); }

.banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; border: 1px solid; }
.banner .icon { flex: none; }
.banner a { font-weight: 600; }
.banner-demo { background: var(--gold-soft); border-color: rgba(233, 196, 106, .55); color: var(--text); }
.banner-demo .icon { color: var(--gold-600); }
.banner-warn { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--text); }
.banner-warn .icon { color: var(--amber); }

/* ============================================================ global search */
.gsearch { position: relative; flex: 1; max-width: 560px; }
.gsearch-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.gsearch input {
  width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); padding: 0 44px 0 70px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gsearch input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background: var(--surface); }
.gsearch input::-webkit-search-cancel-button { display: none; }
.gsearch-kbd { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; direction: ltr; }
.gsearch-panel {
  position: absolute; top: calc(100% + 8px); inset-inline: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; z-index: 60;
}
.gs-group { padding: 4px 0; }
.gs-group + .gs-group { border-top: 1px solid var(--border); }
.gs-label { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 10px 4px; }
.gs-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); }
.gs-item:hover, .gs-item.active { background: var(--primary-soft); text-decoration: none; }
.gs-item .gs-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; color: var(--primary-text); flex: none; }
.gs-item .gs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.gs-item b { font-weight: 600; font-size: 14px; }
.gs-item small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty, .gs-hint { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.gs-hint b { color: var(--text-2); }
mark { background: rgba(233, 196, 106, .45); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ============================================================ dropdowns & menus */
.dropdown { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 70; display: none;
}
.dropdown.open > .menu { display: block; animation: pop .14s ease-out; }
.menu-wide { width: 380px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; color: var(--text); background: none; border: 0; text-align: start; font-size: 14px; }
.menu-item:hover { background: var(--surface-3); text-decoration: none; }
.menu-item .icon { color: var(--muted); }
.menu-item.danger, .menu-item.danger .icon { color: var(--red); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.menu-foot { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--border); font-weight: 600; font-size: 13.5px; }
.menu-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; color: var(--muted); }
.notif-menu { max-height: 520px; display: none; flex-direction: column; }
.dropdown.open > .notif-menu { display: flex; }
.notif-menu .notif-item { display: flex; gap: 10px; padding: 12px 16px; color: var(--text); border-bottom: 1px solid var(--border); }
.notif-menu > .notif-item:last-of-type { border-bottom: 0; }
.notif-menu { overflow-y: auto; }
.notif-item:hover { background: var(--surface-2); text-decoration: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 8px; flex: none; }
.notif-item.unread .notif-dot { background: var(--primary); }
.notif-item.unread b { color: var(--text); }
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-text b { font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.notif-text small { color: var(--muted); }
.notif-text time { color: var(--faint); font-size: 11.5px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ============================================================ page head */
.page-head { margin-bottom: 22px; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; margin-bottom: 8px; }
.crumbs a { color: var(--muted); }
.crumbs .icon { width: 14px; height: 14px; color: var(--faint); }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ref { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.ref-term { color: var(--muted); font-weight: 500; }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px;
  border: 1px solid transparent; font-weight: 600; font-size: 14px; white-space: nowrap; line-height: 1; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  user-select: none; text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(14, 116, 97, .3), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--faint); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger-soft { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.btn-danger-soft:hover { background: var(--red-bd); }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-gold { background: var(--gold); color: #3b2a04; }
.btn-gold:hover { background: #dfb54f; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn-xs .icon { width: 15px; height: 15px; }
.btn-icon { width: 36px; padding: 0; }
.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.inline-form { display: inline; margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ============================================================ cards & layout */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); min-width: 0; }
.card + .card { margin-top: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-head.flat { border-bottom: 0; padding-bottom: 4px; }
.card-title { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.card-title .icon { color: var(--primary-text); }
.card-sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 0; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.grid { display: grid; gap: 20px; }
.grid > .card + .card { margin-top: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.cols-main-wide { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.span-2 { grid-column: span 2; }
.span-full { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack > .card + .card { margin-top: 0; }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ============================================================ KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary-text); }
.kpi-icon .icon { width: 22px; height: 22px; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 23px; font-weight: 700; letter-spacing: -.3px; margin-top: 2px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
.kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.tone-green .kpi-icon { background: var(--green-bg); color: var(--green); }
.tone-amber .kpi-icon { background: var(--amber-bg); color: var(--amber); }
.tone-red .kpi-icon { background: var(--red-bg); color: var(--red); }
.tone-blue .kpi-icon { background: var(--blue-bg); color: var(--blue); }
.tone-violet .kpi-icon { background: var(--violet-bg); color: var(--violet); }
.tone-slate .kpi-icon { background: var(--slate-bg); color: var(--slate); }
.tone-gold .kpi-icon { background: var(--gold-soft); color: var(--gold-600); }
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; border-radius: 6px; padding: 1px 6px; }
.trend .icon { width: 13px; height: 13px; }
.trend.up { color: var(--green); background: var(--green-bg); }
.trend.down { color: var(--red); background: var(--red-bg); }

/* ============================================================ badges & chips */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-green { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); }
.badge-amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-bd); }
.badge-red { color: var(--red); background: var(--red-bg); border-color: var(--red-bd); }
.badge-blue { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-bd); }
.badge-violet { color: var(--violet); background: var(--violet-bg); border-color: var(--violet-bd); }
.badge-slate { color: var(--slate); background: var(--slate-bg); border-color: var(--slate-bd); }
.badge-gray { color: var(--gray); background: var(--gray-bg); border-color: var(--gray-bd); }
.badge-gold { color: var(--gold-600); background: var(--gold-soft); border-color: rgba(233, 196, 106, .5); }
.badge-brand { color: var(--primary-text); background: var(--primary-soft); border-color: transparent; }
.badge-lg { height: 30px; font-size: 13px; padding: 0 12px; }
.chip { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: var(--surface-3); color: var(--muted); font-weight: 500; white-space: nowrap; }
.chip-red { background: var(--red-bg); color: var(--red); }
.chip-amber { background: var(--amber-bg); color: var(--amber); }
.chip-muted { background: var(--surface-3); color: var(--muted); }
.pill-ref { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.pill-ref .t { color: var(--muted); font-weight: 600; }
.tag-auto { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-text); font-size: 12px; font-weight: 600; }
.tag-auto .icon { width: 14px; height: 14px; }

/* ============================================================ tables */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.8px; }
.table th, .table td { padding: 11px 14px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; z-index: 1; }
.table thead th:first-child { border-start-start-radius: 0; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: 0; }
.table .num, .table th.num { text-align: left; }
.table td.actions { text-align: left; white-space: nowrap; width: 1%; }
.table td .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.table td b, .table td strong { font-weight: 600; }
.table tr[data-href] { cursor: pointer; }
.table tr.row-muted td { color: var(--muted); }
.table tr.row-muted td b { color: var(--muted); }
.table tr.row-danger td:first-child { box-shadow: inset -3px 0 0 #e5484d; }
.table tr.row-warn td:first-child { box-shadow: inset -3px 0 0 #e0a03a; }
.table tr.row-group td { background: var(--surface-3); font-weight: 700; color: var(--text-2); font-size: 12.5px; padding: 8px 14px; }
.table-compact th, .table-compact td { padding: 8px 12px; }
.th-sort { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--text); text-decoration: none; }
.sort-ind { width: 14px; height: 14px; }
.cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); color: var(--primary-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.cell-avatar .icon { width: 18px; height: 18px; }

/* pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pager-info { color: var(--muted); font-size: 13px; }
.pager-info b { color: var(--text); font-weight: 600; }
.pager-controls { display: flex; align-items: center; gap: 4px; }
.pg { min-width: 34px; height: 34px; display: inline-grid; place-items: center; grid-auto-flow: column; padding: 0 8px; border-radius: 9px; color: var(--text-2); font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.pg:hover { background: var(--surface-3); text-decoration: none; }
.pg.current { background: var(--primary); color: var(--on-primary); }
.pg.disabled { opacity: .35; pointer-events: none; }
.pg .icon { width: 16px; height: 16px; }
.per-form { margin-inline-start: 8px; }

/* ============================================================ filters */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
.f-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
.f-search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.f-search .icon { position: absolute; inset-inline-start: 11px; bottom: 9px; width: 16px; height: 16px; color: var(--muted); }
.f-search input { padding-inline-start: 34px; width: 100%; }
.filters-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.seg { display: inline-flex; background: var(--surface-3); padding: 3px; border-radius: 11px; gap: 2px; flex-wrap: wrap; }
.seg a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg .count { font-size: 11px; background: var(--surface-3); color: var(--muted); border-radius: 6px; padding: 0 6px; }
.seg a.on .count { background: var(--primary-soft); color: var(--primary-text); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }

/* ============================================================ forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 18px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-full { grid-column: 1 / -1; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.req { color: #e5484d; margin-inline-start: 3px; }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); transition: border-color .15s, box-shadow .15s; font-size: 14px;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 84px; line-height: 1.6; }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687a75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.input[readonly] { background: var(--surface-2); color: var(--text-2); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input-sm, .select-sm { height: 34px; font-size: 13px; border-radius: 9px; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: #e5484d; }
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); }
input[type="date"].input { direction: ltr; text-align: right; }
.input-money, input[dir="ltr"].input { text-align: left; }
.input-group { display: flex; align-items: stretch; }
/* physical sides on purpose: the app is RTL while money inputs are dir=ltr */
.input-group .input { border-radius: 0; flex: 1; min-width: 0; }
.input-group > :first-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.input-group > :last-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.input-group .addon { display: grid; place-items: center; padding: 0 12px; background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--muted); font-size: 13px; white-space: nowrap; }
.input-group .addon:first-child { border-left: 0; }
.input-group .addon:last-child { border-right: 0; }
.field-help { font-size: 12.3px; color: var(--muted); }
.field-error { font-size: 12.5px; color: var(--red); display: flex; align-items: center; gap: 5px; font-weight: 500; }
.field-error .icon { width: 15px; height: 15px; }
.form-section { padding: 20px; border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: 0; }
.form-section-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
.form-section-title .icon { color: var(--primary-text); }
.form-section-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); position: sticky; bottom: 0; z-index: 5; }
.form-actions .spacer { flex: 1; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 42px; height: 24px; border-radius: 12px; background: var(--border-strong); position: relative; flex: none; transition: background .15s; margin-top: 1px; }
.switch .thumb { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s; }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track .thumb { transform: translateX(-18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch-text { display: flex; flex-direction: column; line-height: 1.45; }
.switch-text b { font-weight: 600; font-size: 14px; }
.switch-text small { color: var(--muted); font-size: 12.5px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.radio-card { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.radio-card input { margin-top: 4px; accent-color: var(--primary); }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.radio-card b { display: block; font-size: 14px; }
.radio-card small { color: var(--muted); }

/* combobox */
.combo { position: relative; }
.combo-box { position: relative; }
.combo-icon { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.combo .input { padding-inline-start: 34px; padding-inline-end: 34px; }
.combo-clear { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); display: none; place-items: center; }
.combo.has-value .combo-clear { display: grid; }
.combo.has-value .input { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); font-weight: 600; }
.combo-clear:hover { background: var(--surface-3); color: var(--text); }
.combo-clear .icon { width: 15px; height: 15px; }
.combo-list { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; z-index: 80; padding: 5px; }
.combo-opt { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.combo-opt b { font-weight: 600; font-size: 13.8px; }
.combo-opt small { color: var(--muted); font-size: 12px; }
.combo-opt.active, .combo-opt:hover { background: var(--primary-soft); }
.combo-opt.disabled { opacity: .55; }
.combo-opt .warn { color: var(--red); font-size: 12px; }
.combo-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* ============================================================ alerts, empty states */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 12px; border: 1px solid; font-size: 13.8px; line-height: 1.6; }
.alert > .icon { margin-top: 2px; }
.alert b { font-weight: 700; }
.alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.alert-info { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--text); }
.alert-info > .icon { color: var(--blue); }
.alert-warn { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--text); }
.alert-warn > .icon { color: var(--amber); }
.alert-danger { background: var(--red-bg); border-color: var(--red-bd); color: var(--text); }
.alert-danger > .icon { color: var(--red); }
.alert-success { background: var(--green-bg); border-color: var(--green-bd); color: var(--text); }
.alert-success > .icon { color: var(--green); }
.alert-brand { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.alert-brand > .icon { color: var(--primary-text); }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 14px; color: var(--faint); }
.empty-icon .icon { width: 30px; height: 30px; }
.empty h3 { color: var(--text); font-size: 16px; margin-bottom: 4px; }
.empty p { margin: 0 auto; max-width: 420px; font-size: 13.5px; }
.empty-action { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ============================================================ definition list, timeline, tabs */
.dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.dl-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.dl-row:last-child { border-bottom: 0; }
.dl dt { color: var(--muted); font-size: 13px; }
.dl dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dl.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; padding: 13px 14px; font-weight: 600; font-size: 14px; color: var(--muted); background: none; border: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--primary-text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.tab .count { font-size: 11px; background: var(--surface-3); color: var(--muted); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 15px; width: 2px; background: var(--border); }
.tl-item { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; flex: none; z-index: 1; color: var(--muted); }
.tl-dot .icon { width: 15px; height: 15px; }
.tl-item.is-current .tl-dot { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.tl-item.is-upcoming .tl-dot { border-color: var(--blue); color: var(--blue); border-style: dashed; }
.tl-item.is-red .tl-dot { border-color: #e5484d; color: #e5484d; }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-meta { color: var(--muted); font-size: 12.5px; }

/* periods (contract terms) */
.periods { display: grid; gap: 12px; }
.period { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; scroll-margin-top: 90px; }
.period.is-current { border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 0 0 3px var(--primary-soft); }
.period:target { box-shadow: 0 0 0 3px rgba(233, 196, 106, .55); border-color: var(--gold); }
.period-no { min-width: 64px; padding: 0 10px; height: 56px; border-radius: 14px; background: var(--surface-3); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; flex: none; }
.period-no b { font-size: 19px; font-variant-numeric: tabular-nums; direction: ltr; }
.period-no small { color: var(--muted); font-size: 10.5px; }
.period.is-current .period-no { background: var(--primary); color: #fff; }
.period.is-current .period-no small { color: rgba(255, 255, 255, .8); }
.period-dates { font-weight: 600; font-variant-numeric: tabular-nums; }
.period-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12.8px; margin-top: 4px; }
.period-meta b { color: var(--text-2); font-weight: 600; }
.period-amount { text-align: left; }
.period-amount b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.period-amount small { color: var(--muted); }

/* progress */
.progress { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 6px; background: var(--primary); transition: width .4s ease; }
.progress.tone-green > span { background: #16a34a; }
.progress.tone-amber > span { background: #e0a03a; }
.progress.tone-red > span { background: #e5484d; }

/* summary strip */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 20px; }
.summary > div { padding: 14px 18px; border-inline-start: 1px solid var(--border); }
.summary > div:first-child { border-inline-start: 0; }
.summary span { display: block; font-size: 12.5px; color: var(--muted); }
.summary b { font-size: 18px; font-variant-numeric: tabular-nums; }
.summary .is-red b { color: var(--red); }
.summary .is-green b { color: var(--green); }

/* entity header */
.entity-head { display: flex; gap: 16px; align-items: center; }
.entity-icon { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-md); font-weight: 700; font-size: 18px; }
.entity-icon .icon { width: 26px; height: 26px; }

/* ============================================================ charts */
.chart-wrap { width: 100%; }
.chart { width: 100%; height: auto; display: block; overflow: visible; direction: ltr; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .axis { stroke: var(--border-strong); }
.chart .ax { fill: var(--muted); font-size: 11.5px; font-family: var(--font); }
.chart .bar { transition: opacity .15s; }
.chart .bar:hover { opacity: .8; }
.chart .c1 { fill: var(--c1); stroke: var(--c1); } .chart .c2 { fill: var(--c2); stroke: var(--c2); } .chart .c3 { fill: var(--c3); stroke: var(--c3); }
.chart .c4 { fill: var(--c4); stroke: var(--c4); } .chart .c5 { fill: var(--c5); stroke: var(--c5); } .chart .c6 { fill: var(--c6); stroke: var(--c6); }
.chart rect.bar { stroke: none; }
.chart .line { fill: none !important; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { stroke: none !important; fill-opacity: .1; }
.chart .pt { stroke: var(--surface) !important; stroke-width: 2; }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.donut { width: 190px; height: 190px; flex: none; }
.donut-track { fill: none; stroke: var(--surface-3); stroke-width: 24; }
.donut-seg { fill: none !important; stroke-width: 24; transition: opacity .15s; }
.donut-seg:hover { opacity: .8; }
.donut-value { font-size: 26px; font-weight: 700; fill: var(--text); font-family: var(--font); }
.donut-label { font-size: 12px; fill: var(--muted); font-family: var(--font); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--text-2); justify-content: center; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-col { flex-direction: column; gap: 8px; min-width: 190px; flex: 1; max-width: 300px; }
.legend-col li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.legend-col b { font-variant-numeric: tabular-nums; }
.legend-col small { color: var(--muted); min-width: 42px; text-align: left; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.swatch.c1 { background: var(--c1); } .swatch.c2 { background: var(--c2); } .swatch.c3 { background: var(--c3); }
.swatch.c4 { background: var(--c4); } .swatch.c5 { background: var(--c5); } .swatch.c6 { background: var(--c6); }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.hb-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.3px; margin-bottom: 5px; }
.hb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-label small { color: var(--muted); }
.hb-head b { font-variant-numeric: tabular-nums; font-weight: 600; }
.hb-track { height: 8px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 5px; }
.hb-fill.c1 { background: var(--c1); } .hb-fill.c2 { background: var(--c2); } .hb-fill.c3 { background: var(--c3); }
.hb-fill.c4 { background: var(--c4); } .hb-fill.c5 { background: var(--c5); } .hb-fill.c6 { background: var(--c6); }
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--faint); min-height: 160px; font-size: 13px; }
.chart-empty .icon { width: 28px; height: 28px; }

/* ============================================================ modal & toasts */
.modal { border: 0; padding: 0; border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
.modal-sm { width: min(440px, calc(100vw - 24px)); }
.modal-lg { width: min(780px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(6, 20, 17, .52); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .16s ease-out; }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 40px); margin: 0; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 8px; }
.modal-head h3 { font-size: 17px; }
.modal-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary-text); }
.modal-icon.tone-amber { background: var(--amber-bg); color: var(--amber); }
.modal-icon.tone-red { background: var(--red-bg); color: var(--red); }
.modal-icon.tone-green { background: var(--green-bg); color: var(--green); }
.modal-body { padding: 10px 22px 18px; overflow-y: auto; }
.modal-body p { color: var(--text-2); }
.modal-foot { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.toasts { position: fixed; bottom: 20px; left: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); animation: toast-in .25s ease-out; border-inline-start: 4px solid var(--primary); }
.toast-success { border-inline-start-color: #16a34a; } .toast-success > .icon { color: var(--green); }
.toast-error { border-inline-start-color: #e5484d; } .toast-error > .icon { color: var(--red); }
.toast-warn { border-inline-start-color: #e0a03a; } .toast-warn > .icon { color: var(--amber); }
.toast-info > .icon { color: var(--blue); }
.toast-msg { flex: 1; font-size: 14px; font-weight: 500; }
.toast-close { border: 0; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.toast-close:hover { background: var(--surface-3); }
.toast-close .icon { width: 15px; height: 15px; }
.toast.hide { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ============================================================ auth & install */
.blank { background: var(--bg); }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); }
.auth-brand {
  position: relative; overflow: hidden; color: #e9f6f3; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(1200px 600px at 110% -10%, rgba(233, 196, 106, .22), transparent 60%), radial-gradient(800px 500px at -20% 120%, rgba(31, 169, 140, .35), transparent 55%), linear-gradient(160deg, #0d5a4c 0%, #083f35 55%, #052a24 100%);
}
.auth-brand::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 6 50 24v26H6V24z' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 56px 56px; }
.auth-brand > * { position: relative; }
.auth-logo { display: flex; align-items: center; gap: 14px; }
.auth-logo b { font-size: 30px; color: #fff; letter-spacing: -.4px; }
.auth-logo small { display: block; color: rgba(233, 246, 243, .7); font-size: 13px; }
.auth-hero h1 { color: #fff; font-size: 38px; line-height: 1.35; letter-spacing: -.5px; max-width: 560px; }
.auth-hero h1 span { color: var(--gold); }
.auth-hero p { color: rgba(233, 246, 243, .78); font-size: 16px; max-width: 520px; margin-top: 14px; }
.auth-feats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 520px; }
.auth-feats li { display: flex; gap: 12px; align-items: flex-start; }
.auth-feats .icon { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; }
.auth-feats b { color: #fff; display: block; }
.auth-feats span { color: rgba(233, 246, 243, .72); font-size: 13.5px; }
.auth-credit { font-size: 12.5px; color: rgba(233, 246, 243, .62); }
.auth-credit a { color: var(--gold); font-weight: 600; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-size: 26px; letter-spacing: -.3px; }
.auth-card .lead { color: var(--muted); margin: 6px 0 26px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .btn-primary { height: 46px; font-size: 15px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-left: 44px; padding-right: 12px; }
.pw-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; display: grid; place-items: center; }
.pw-toggle:hover { background: var(--surface-3); }
.auth-foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 12.5px; }
.theme-fab { position: fixed; top: 16px; left: 16px; z-index: 50; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; box-shadow: var(--shadow); }
.code-input { letter-spacing: 10px; font-size: 24px; text-align: center !important; height: 56px !important; font-weight: 700; }

.install { max-width: 920px; margin: 0 auto; padding: 40px 20px 60px; }
.install-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.install-head h1 { font-size: 26px; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.req-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 6px 0; }
.req-list .icon { width: 18px; height: 18px; margin-top: 2px; }
.req-list .ok .icon { color: var(--green); }
.req-list .bad .icon { color: var(--red); }
.req-list .opt .icon { color: var(--amber); }
.req-list small { display: block; color: var(--muted); }

/* ============================================================ error page */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.error-code { font-size: 88px; font-weight: 800; letter-spacing: -2px; line-height: 1; background: linear-gradient(135deg, var(--brand-400), var(--brand-800)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page h1 { font-size: 22px; margin: 10px 0 6px; }
.error-page p { color: var(--muted); max-width: 460px; margin: 0 auto 22px; }
.debug { direction: ltr; text-align: left; font-size: 12px; background: var(--surface-3); padding: 10px; border-radius: 8px; max-width: 760px; overflow: auto; margin: 0 auto 18px; }

/* ============================================================ dashboard bits */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hello h1 { font-size: 24px; }
.hello p { color: var(--muted); margin: 4px 0 0; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); color: var(--text); }
.list-item:last-child { border-bottom: 0; }
a.list-item:hover { background: var(--surface-2); text-decoration: none; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-main b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .li-main small { color: var(--muted); }
.list-item .li-end { text-align: left; flex: none; }
.list-item .li-end b { font-variant-numeric: tabular-nums; display: block; }
.mini-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.mini-stat:last-child { border-bottom: 0; }
.mini-stat b { font-variant-numeric: tabular-nums; }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.status-cell { padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.status-cell b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.status-cell span { font-size: 12px; color: var(--muted); }

/* reports */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.report-card { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.report-card:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.report-card .kpi-icon { width: 46px; height: 46px; }
.report-card b { display: block; font-size: 15px; margin-bottom: 3px; }
.report-card small { color: var(--muted); font-size: 12.8px; line-height: 1.55; display: block; }
.report-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 12.8px; }
.report-meta b { color: var(--text-2); }
.print-only { display: none; }
.aging-cell { font-variant-numeric: tabular-nums; }
.aging-0 { color: var(--text-2); } .aging-1 { color: var(--amber); } .aging-2 { color: #ea580c; } .aging-3 { color: var(--red); } .aging-4 { color: #9f1239; font-weight: 700; }
[data-theme="dark"] .aging-4 { color: #fb7185; }

/* attachments */
.attach-list { list-style: none; padding: 0; margin: 0; }
.attach-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.attach-list li:last-child { border-bottom: 0; }
.attach-list .grow small { display: block; color: var(--muted); }
.upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.upload input[type="file"] { font-size: 13px; max-width: 100%; }

/* permission matrix */
.perm-group { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.perm-group h4 { font-size: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.perm-list { display: grid; gap: 7px; }

/* settings layout */
.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 20px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-weight: 500; font-size: 14px; }
.settings-nav a:hover { background: var(--surface-3); text-decoration: none; }
.settings-nav a.on { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.settings-nav a.danger { color: var(--red); }

/* receipts allocation */
.alloc-table td .input { height: 34px; max-width: 150px; }
.alloc-sum { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; }
.alloc-sum b { font-variant-numeric: tabular-nums; }
.alloc-sum .bad { color: var(--red); }
.alloc-sum .good { color: var(--green); }

/* contract form */
.unit-rows, .fee-rows { display: flex; flex-direction: column; gap: 10px; }
.unit-row, .fee-row { display: grid; gap: 10px; align-items: end; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.unit-row { grid-template-columns: minmax(0, 1.7fr) minmax(140px, .8fr) auto; }
.fee-row { grid-template-columns: minmax(0, 1.3fr) minmax(140px, .9fr) minmax(120px, .8fr) auto auto; }
.row-remove { width: 40px; height: 42px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); display: grid; place-items: center; }
.row-remove:hover { color: var(--red); border-color: var(--red-bd); background: var(--red-bg); }
.unit-warn { grid-column: 1 / -1; font-size: 12.5px; color: var(--amber); display: flex; gap: 6px; align-items: center; }
.unit-warn.is-red { color: var(--red); }
.preview { position: sticky; top: calc(var(--topbar-h) + 20px); }
.preview .table td, .preview .table th { padding: 8px 10px; font-size: 12.8px; }
.preview-total { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; padding: 14px 18px; }
.preview-total .grand { font-size: 17px; font-weight: 700; color: var(--primary-text); }
.preview-total dt { color: var(--muted); }
.preview-total dd { margin: 0; text-align: left; font-variant-numeric: tabular-nums; font-weight: 600; }
.loading-bar { height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================ documentation */
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.doc-toc { position: sticky; top: calc(var(--topbar-h) + 18px); max-height: calc(100vh - var(--topbar-h) - 36px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; scrollbar-width: thin; }
.doc-toc b { display: block; font-size: 12px; color: var(--muted); padding: 6px 10px; }
.doc-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.doc-toc a:hover { background: var(--surface-3); text-decoration: none; }
.doc-toc a.on { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.doc-body { min-width: 0; }
.doc-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; margin-bottom: 20px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.doc-section h2 { font-size: 21px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.doc-section h2 .icon { color: var(--primary-text); width: 22px; height: 22px; }
.doc-section h3 { font-size: 16px; margin: 22px 0 10px; }
.doc-section p, .doc-section li { color: var(--text-2); line-height: 1.85; }
.doc-section ul, .doc-section ol { padding-inline-start: 22px; }
.doc-section li { margin-bottom: 4px; }
.doc-section .table { margin: 10px 0 6px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.doc-hero { background: radial-gradient(900px 400px at 0% 0%, rgba(233, 196, 106, .18), transparent 60%), linear-gradient(135deg, var(--brand-600), var(--brand-900)); color: #fff; border-radius: 18px; padding: 34px; margin-bottom: 20px; display: flex; gap: 22px; align-items: center; }
.doc-hero h1 { color: #fff; font-size: 28px; }
.doc-hero p { color: rgba(255, 255, 255, .82); margin: 8px 0 0; max-width: 680px; }
.steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.steps > li { counter-increment: s; position: relative; padding: 12px 56px 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.steps > li::before { content: counter(s); position: absolute; right: 14px; top: 12px; width: 28px; height: 28px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.flow .node { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 600; font-size: 13.5px; }
.flow .node.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.flow .node.red { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.flow .node.gray { color: var(--muted); }
.flow .arrow { color: var(--faint); }
.callout { border-inline-start: 4px solid var(--gold); background: var(--gold-soft); padding: 12px 16px; border-radius: 10px; margin: 12px 0; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.compare > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.compare .bad { background: var(--red-bg); border-color: var(--red-bd); }
.compare .good { background: var(--green-bg); border-color: var(--green-bd); }
.compare h4 { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.kbd { display: inline-block; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; font-size: 12px; background: var(--surface); direction: ltr; }
pre.cmd { direction: ltr; text-align: left; background: #0b1714; color: #d1fae5; padding: 14px 16px; border-radius: 12px; overflow-x: auto; font-size: 12.8px; line-height: 1.6; }

/* ============================================================ printable documents */
.print-page { background: #e9eeec; }
.print-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.sheet { background: #fff; color: #111; width: 210mm; min-height: 148mm; margin: 24px auto; padding: 14mm 14mm 10mm; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); border-radius: 4px; position: relative; overflow: hidden; }
.sheet.a4 { min-height: 297mm; }
.letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 12px; border-bottom: 3px solid var(--brand-600); margin-bottom: 16px; }
.lh-brand { display: flex; gap: 12px; align-items: center; }
.lh-brand h2 { font-size: 19px; color: #0b2a24; }
.lh-en { font-size: 12px; color: #555; }
.lh-meta { display: flex; gap: 14px; font-size: 11.5px; color: #444; margin-top: 2px; flex-wrap: wrap; }
.lh-logo { max-height: 60px; max-width: 160px; }
.lh-contact { font-size: 11.5px; color: #444; display: grid; gap: 3px; text-align: left; }
.lh-contact div { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.lh-contact .icon { width: 13px; height: 13px; color: var(--brand-600); }
.doc-title { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; gap: 12px; }
.doc-title h1 { font-size: 21px; color: #0b2a24; display: flex; align-items: center; gap: 10px; }
.doc-title .doc-no { font-size: 13px; color: #333; text-align: left; line-height: 1.6; }
.doc-title .doc-no b { font-size: 15px; color: #000; }
.v-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #cfd8d5; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.v-grid > div { padding: 8px 12px; border-bottom: 1px solid #e3e9e7; border-inline-start: 1px solid #e3e9e7; font-size: 13px; }
.v-grid > div:nth-child(odd) { border-inline-start: 0; }
.v-grid span { color: #5b6a66; display: block; font-size: 11px; }
.v-grid b { color: #111; }
.v-grid .full { grid-column: 1 / -1; border-inline-start: 0; }
.amount-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border: 2px solid var(--brand-600); border-radius: 10px; background: #f2faf7; margin: 10px 0 12px; }
.amount-box .big { font-size: 24px; font-weight: 800; color: #0b2a24; font-variant-numeric: tabular-nums; direction: ltr; }
.amount-box .words { font-size: 13px; color: #1d3a33; font-weight: 600; }
.sheet .table { font-size: 12px; }
.sheet .table th { background: #eef4f2; color: #333; }
.sheet .table th, .sheet .table td { padding: 6px 8px; border-bottom: 1px solid #e1e8e6; }
.sheet .table tfoot td { background: #eef4f2; }
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.signs div { border-top: 1px dashed #8a9a96; padding-top: 6px; text-align: center; font-size: 12px; color: #444; }
.print-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 8px; border-top: 1px solid #e1e8e6; font-size: 10.5px; color: #777; flex-wrap: wrap; }
.watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 110px; font-weight: 800; color: rgba(220, 38, 38, .1); transform: rotate(-24deg); }
.watermark.draft { color: rgba(100, 116, 139, .1); }

/* ============================================================ responsive */
@media (max-width: 1280px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-main, .cols-main-wide { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .sidebar { transform: translateX(105%); width: var(--sidebar-w) !important; box-shadow: var(--shadow-lg); }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .sb-open-state .sidebar { transform: none; }
  .sb-open-state .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(6, 20, 17, .45); z-index: 35; }
  .main, .sb-collapsed .main { margin-inline-start: 0; }
  .sb-open { display: grid; }
  .sb-collapse { display: none; }
  .sb-collapsed .brand-text, .sb-collapsed .sb-label, .sb-collapsed .sb-title, .sb-collapsed .sb-credit span { display: initial; }
  .sb-collapsed .sb-link { justify-content: flex-start; padding: 9px 12px; }
  .sb-collapsed .sb-brand { flex-direction: row; height: 72px; padding: 0 16px 0 12px; }
  .cols-main, .cols-main-wide { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; max-height: none; }
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { padding: 32px 28px; }
  .auth-hero h1 { font-size: 28px; }
  .auth-feats { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .content { padding: 16px 14px 32px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .user-meta, .user-caret, .gsearch-kbd { display: none; }
  .tb-new span { display: none; }
  .tb-new { width: 38px; padding: 0; }
  .gsearch input { padding: 0 38px 0 12px; }
  .cols-2, .cols-3, .cols-4, .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .field.span-2 { grid-column: auto; }
  .page-title { font-size: 20px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; gap: 10px; flex-direction: column; }
  .kpi-icon { width: 38px; height: 38px; }
  .kpi-value { font-size: 19px; }
  .dl-row { grid-template-columns: 120px 1fr; }
  .dl.two { grid-template-columns: minmax(0, 1fr); }
  .unit-row, .fee-row { grid-template-columns: minmax(0, 1fr); }
  .period { grid-template-columns: auto 1fr; }
  .period-amount { grid-column: 1 / -1; text-align: start; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr; }
  .doc-section { padding: 20px 18px; }
  .sheet { width: 100%; margin: 0; padding: 16px; box-shadow: none; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .filters { padding: 12px; }
  .f-search { min-width: 100%; }
  .filters-actions { margin-inline-start: 0; }
  .auth-brand { display: none; }
}

/* ============================================================ utilities (v1.1) */
.mt-2 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 16px; }
.label-like { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.check.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 12px; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.todo-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); }
.todo-icon .icon { width: 17px; height: 17px; }
.todo-icon.tone-amber { background: var(--amber-bg); color: var(--amber); }
.todo-icon.tone-red { background: var(--red-bg); color: var(--red); }
.todo-icon.tone-blue { background: var(--blue-bg); color: var(--blue); }
.todo-icon.tone-slate { background: var(--slate-bg); color: var(--slate); }
.mini-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.mini-card > .icon { width: 22px; height: 22px; color: var(--primary-text); }
.mini-card p { margin: 0 0 6px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.opening-form { display: inline-flex !important; gap: 4px; align-items: center; }
.flex > .progress { flex: 1; min-width: 70px; }
/* KPI tiles adapt to their own width (5 tiles in a row stay on one line) */
.kpi { container-type: inline-size; }
@container (max-width: 250px) {
  .kpi-icon { width: 34px; height: 34px; border-radius: 10px; }
  .kpi-icon .icon { width: 18px; height: 18px; }
  .kpi-value { font-size: 19px; }
}
.p-card .pill-ref b { margin-inline-start: 4px; }
.show-sm { display: none !important; }
.pay-table td .sub { display: block; }
.opening-form .input { width: 130px; }

/* statement-style tables (balance sheet, cash flow, VAT return) */
.table tr.row-section td { background: var(--surface-3); font-weight: 700; color: var(--text); padding-top: 10px; padding-bottom: 10px; }
.table tr.row-indent td:first-child { padding-inline-start: 34px; color: var(--text-2); }
.table tr.row-sub td { font-weight: 600; border-top: 1px dashed var(--border-strong); }
.table tr.row-total td { font-weight: 700; border-top: 1.5px solid var(--border-strong); background: var(--surface-2); }
.table tr.row-grand td { font-weight: 800; font-size: 14.5px; background: var(--primary-soft); color: var(--primary-text); border-top: 2px solid var(--primary); }
.table tr.row-indent.row-muted td { color: var(--faint); }

/* message log / templates */
.msg-sum { cursor: pointer; list-style: none; }
.msg-sum::-webkit-details-marker { display: none; }
.msg-full { margin-top: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1.8; white-space: normal; }
.tpl-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface); }
.tpl-box > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpl-box[open] { background: var(--surface-2); }
.tpl-chs { margin-inline-start: auto; display: inline-flex; gap: 4px; }

/* maintenance progress (portal) */
.mtrack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: none; }
.mtrack li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); position: relative; }
.mtrack li::after { content: ""; position: absolute; top: 17px; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--border); }
.mtrack li:last-child::after { display: none; }
.mtrack-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-weight: 700; z-index: 1; }
.mtrack-dot .icon { width: 18px; height: 18px; }
.mtrack li.done { color: var(--text); }
.mtrack li.done .mtrack-dot { background: var(--primary); color: #fff; }
.mtrack li.done::after { background: var(--primary); }
.mtrack li.current { color: var(--text); font-weight: 600; }
.mtrack li.current .mtrack-dot { background: var(--primary-soft); color: var(--primary-text); box-shadow: 0 0 0 3px var(--primary); }

/* ============================================================ portal */
body.portal { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.p-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.p-top { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-xs); }
.p-top-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.p-brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.p-brand:hover { text-decoration: none; }
.p-brand b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.p-brand small { display: block; color: var(--muted); font-size: 12px; }
.p-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; border-radius: 8px; }
.p-logo.lg { height: 54px; max-width: 160px; background: #fff; padding: 4px; }
.p-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.p-nav::-webkit-scrollbar { display: none; }
.p-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.p-nav a .icon { width: 17px; height: 17px; }
.p-nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.p-nav a.on { background: var(--primary-soft); color: var(--primary-text); }
.p-user { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.p-main { flex: 1; padding-top: 24px; padding-bottom: 40px; }
.p-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.p-narrow { max-width: 560px; margin: 0 auto; }
.p-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.p-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s, transform .15s; }
.p-card:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.p-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-card-units, .p-card-dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; }
.p-card-units .icon, .p-card-dates .icon { width: 16px; height: 16px; color: var(--muted); }
.p-card-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.p-card-foot small { display: block; color: var(--muted); font-size: 11.5px; }
.p-card-foot b { font-variant-numeric: tabular-nums; }
.portal-auth .auth-brand { background: linear-gradient(160deg, #0b4a3f 0%, #07352d 60%, #062b25 100%); }
.seg-full { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-3); padding: 4px; border-radius: 12px; gap: 4px; }
.seg-full label { position: relative; cursor: pointer; }
.seg-full input { position: absolute; opacity: 0; inset: 0; }
.seg-full span { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.seg-full span .icon { width: 17px; height: 17px; }
.seg-full input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg-full input:focus-visible + span { box-shadow: var(--ring); }

/* online payment */
.pay-box { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-md); }
.pay-brands { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pay-brands span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); letter-spacing: .2px; }
.pay-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay-total small { display: block; color: var(--muted); font-size: 12.5px; }
.pay-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.pay-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; border-top: 0; padding-top: 0; }
.pay-note .icon { width: 16px; height: 16px; color: var(--green); flex: none; }
.pay-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--primary-soft), transparent), var(--bg); }
.pay-card { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.pay-card .card { box-shadow: none; }
.pay-head { display: flex; align-items: center; gap: 12px; }
.pay-head b { display: block; font-size: 18px; }
.pay-head small { color: var(--muted); }
.pay-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-who div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.pay-who span { display: block; color: var(--muted); font-size: 12px; }
.pay-done { text-align: center; padding: 18px 8px; }
.pay-done > .icon { width: 56px; height: 56px; color: var(--primary-text); }
.pay-done.ok > .icon { color: var(--green); }
.pay-done.wait > .icon { color: var(--amber); }
.pay-done.bad > .icon { color: var(--red); }
.pay-done h2 { margin: 10px 0 6px; }
.pay-done p { color: var(--text-2); margin: 0 0 12px; }
.pay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pay-legal { color: var(--muted); font-size: 12px; text-align: center; margin: 0; }
.pay-credit { color: var(--muted); font-size: 12px; }

/* Ejar data sheet */
.ej-h { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); color: var(--primary-text); }
.ej-h .icon { width: 18px; height: 18px; }
.ej-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-bottom: 8px; }
.ej-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dotted var(--border-strong); min-width: 0; }
.ej-row span { color: var(--muted); font-size: 12.5px; min-width: 120px; }
.ej-row b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ej-copy { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.ej-copy:hover { background: var(--surface-3); color: var(--primary-text); }
.ej-copy .icon { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .p-wrap { padding-inline: 14px; }
  .p-top-in { flex-wrap: wrap; min-height: 0; padding-top: 10px; gap: 8px 12px; }
  .p-nav { order: 3; flex-basis: 100%; padding-bottom: 8px; }
  .p-brand b { max-width: 170px; }
  .p-cards { grid-template-columns: 1fr; }
  .mtrack { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .mtrack li::after { display: none; }
  .ej-grid, .pay-who { grid-template-columns: 1fr; }
  .pay-card { padding: 16px; border-radius: 16px; }
  .pay-foot .btn { width: 100%; justify-content: center; }
  .user-meta { display: none; }
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
  body.portal .table th, body.portal .table td { padding-inline: 8px; }
  .pay-table th, .pay-table td { padding-inline: 8px; }
  .pay-card .pay-box .card-head { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================ print */
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  :root, [data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-2: #f6f8f7; --surface-3: #eef2f1; --border: #dfe6e4; --border-strong: #c9d4d1;
    --text: #111; --text-2: #333; --muted: #555; --faint: #888; --primary-text: #0a5c4d; --primary: #0e7461;
    --c1: #0e7461; --c2: #e0a03a; --c3: #3b82f6; --c4: #8b5cf6; --c5: #e5484d; --c6: #94a3b8;
  }
  body { background: #fff !important; font-size: 11.5px; color: #111; }
  .sidebar, .topbar, .footer, .no-print, .filters, .page-actions, .toasts, .pager, .banner, .print-toolbar, .theme-fab, .crumbs, .tabs, .btn, form.inline-form, .p-top, .p-foot, .ej-copy { display: none !important; }
  .p-main { padding: 0; } .p-wrap { max-width: none; padding: 0; }
  .main { margin: 0 !important; }
  .content { padding: 0; max-width: none; }
  .print-only { display: block !important; }
  .card, .kpi, .summary { box-shadow: none !important; break-inside: avoid; border-color: #dfe6e4; }
  .kpis { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .kpi { padding: 10px; } .kpi-icon { display: none; } .kpi-value { font-size: 16px; }
  .table { font-size: 10.5px; } .table th, .table td { padding: 5px 7px; }
  .table thead th { position: static; }
  .table-wrap { overflow: visible; }
  .tab-panel { display: block !important; }
  .print-page { background: #fff; }
  .sheet { box-shadow: none; margin: 0; width: auto; min-height: 0; padding: 0; border-radius: 0; }
  a { color: inherit; text-decoration: none; }
  .chart .area { fill-opacity: .15; }
  .page-head { margin-bottom: 10px; }
  .grid { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}