/* =========================================================
   ========================================================= */
:root {
  --font-head: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef1f5;
  --border: #e1e5eb;
  --border-strong: #cfd6df;
  --text: #17212f;
  --text-2: #4a5668;
  --text-3: #7b8696;

  --navy: #0f2a4a;
  --navy-2: #163a63;
  --gold: #a8854a;
  --gold-soft: #f5efe3;

  --primary: #1b4677;
  --primary-2: #a8854a;
  --primary-soft: #e8eef6;
  --success: #1d7a4c;
  --success-soft: #e6f3ec;
  --danger: #b42318;
  --danger-soft: #fbeceb;
  --warning: #a35f06;
  --warning-soft: #fdf3e2;
  --info: #1f5f99;
  --info-soft: #e7f0f8;

  --input-bg: #ffffff;
  --head-bg: #f5f7fa;
  --hover: #f4f7fb;
  --sidebar-bg: #0f2a4a;
  --sidebar-text: #c6d1df;
  --sidebar-muted: #7f93ad;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(255, 255, 255, 0.1);
  --topbar-bg: #ffffff;
  --overlay: rgba(15, 23, 36, 0.45);

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 18px 50px -12px rgba(16, 24, 40, 0.25);
  --sidebar: 260px;
  --chart-1: #1b4677; --chart-2: #a8854a; --chart-3: #3f7f8c; --chart-4: #8a5a44;
  --chart-5: #5d6b7e; --chart-6: #2f6b4f; --chart-7: #9b6b9e; --chart-8: #c2a878; --chart-9: #b9c2cf;
  color-scheme: light;
  font-family: var(--font-body);
}

:root[data-theme='dark'] {
  --bg: #0e141d;
  --surface: #151d29;
  --surface-solid: #151d29;
  --surface-2: #1a2432;
  --surface-3: #202b3b;
  --border: #263244;
  --border-strong: #324157;
  --text: #e5e9ef;
  --text-2: #a9b4c3;
  --text-3: #7a8799;
  --primary: #6f9bd1;
  --primary-2: #c9a66b;
  --primary-soft: rgba(111, 155, 209, 0.14);
  --gold: #c9a66b;
  --gold-soft: rgba(201, 166, 107, 0.12);
  --success: #4cb782;
  --success-soft: rgba(76, 183, 130, 0.13);
  --danger: #f0776c;
  --danger-soft: rgba(240, 119, 108, 0.13);
  --warning: #e0a245;
  --warning-soft: rgba(224, 162, 69, 0.13);
  --info: #6aa8e0;
  --info-soft: rgba(106, 168, 224, 0.13);
  --input-bg: #111824;
  --head-bg: #18212e;
  --hover: #1a2433;
  --sidebar-bg: #0b1119;
  --topbar-bg: #121a25;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
  --chart-1: #6f9bd1; --chart-2: #c9a66b; --chart-3: #5fa8b4; --chart-4: #c08a6e;
  --chart-5: #8d9bb0; --chart-6: #4cb782; --chart-7: #b48fc0; --chart-8: #e0c99a; --chart-9: #56647a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .brand-name, .kpi-value, .modal-head h3, .card-head h3, .nav a, .tabs button, .btn, .badge, .t th {
  font-family: var(--font-head);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav a:hover, .acc-card:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }
.num, .money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.hidden { display: none !important; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); flex-shrink: 0; position: fixed; inset: 0 0 0 auto; z-index: 40;
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; transition: transform .25s ease;
  border-inline-start: 3px solid var(--gold);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.brand-logo {
  width: 44px; height: 44px; border-radius: 8px; background: transparent;
  border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold);
}
.brand-logo svg { width: 24px; height: 24px; stroke: currentColor; }
.brand-name { font-weight: 700; font-size: 15.5px; line-height: 1.4; color: #fff; }
.brand-sub { font-size: 12px; color: var(--sidebar-muted); }
.nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-color: var(--sidebar-bg); }
.nav-group { font-size: 11.5px; color: var(--sidebar-muted); padding: 16px 12px 6px; font-weight: 500; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0;
  border-radius: 6px; color: var(--sidebar-text); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s;
  position: relative;
}
.nav a:hover { background: var(--sidebar-hover); color: #fff; }
.nav a.active { background: var(--sidebar-active); color: #fff; }
.nav a.active::before {
  content: ''; position: absolute; inset-inline-start: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--gold);
}
.nav a.active svg { stroke: var(--gold); }
.side-foot { padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-family: var(--font-head);
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--border);
}
.sidebar .avatar { background: rgba(255, 255, 255, .08); color: var(--gold); border-color: rgba(255, 255, 255, .15); }
.user-chip .who { flex: 1; min-width: 0; }
.user-chip .who b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.user-chip .who span { font-size: 12px; color: var(--sidebar-muted); }
.sidebar .btn-ghost { color: var(--sidebar-text); }
.sidebar .btn-ghost:hover { background: var(--sidebar-hover); color: #fff; }

.main { flex: 1; margin-inline-start: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 12px 28px; background: var(--topbar-bg); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; color: var(--text); }
.topbar .crumb { color: var(--text-3); font-size: 12.5px; }
.topbar .spacer { flex: 1; }
.rate-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; transition: border-color .15s;
}
.rate-pill:hover { border-color: var(--primary); }
.rate-pill b { color: var(--text); font-family: var(--font-head); }
.rate-pill svg { color: var(--gold); }
.menu-btn { display: none; }
.view { padding: 26px 28px 60px; max-width: 1500px; width: 100%; margin: 0 auto; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.card-head .spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mb { margin-bottom: 16px; }

.kpi { padding: 18px 20px; position: relative; border-top: 3px solid var(--accent, var(--primary)); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kpi-label { color: var(--text-2); font-size: 13px; font-weight: 500; }
.kpi-icon {
  width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--primary)) 10%, transparent); color: var(--accent, var(--primary));
}
.kpi-icon svg.i { width: 17px; height: 17px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.5; }
.kpi-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.kpi-sub .money { color: var(--text-2); }
.progress { height: 5px; background: var(--surface-3); border-radius: 5px; overflow: hidden; margin-top: 10px; }
.progress > i { display: block; height: 100%; background: var(--accent, var(--primary)); border-radius: 5px; transition: width .6s ease; }

.acc-card { padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.acc-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .15); }
.acc-card .cur { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; font-family: var(--font-head); }
.cur-IQD { background: var(--success-soft); color: var(--success); }
.cur-USD { background: var(--info-soft); color: var(--info); }
.acc-card .bal { font-size: 18px; font-weight: 700; font-family: var(--font-head); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface);
  cursor: pointer; font-weight: 500; font-size: 13.5px; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; color: var(--text);
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); }
.btn-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
.btn-danger { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-icon { padding: 7px; }
.btn-icon svg.i { width: 16px; height: 16px; }
.actions { display: flex; gap: 4px; justify-content: flex-end; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.field label .req { color: var(--danger); }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--input-bg); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.input:disabled { background: var(--surface-2); color: var(--text-3); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8696' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 32px; }
select.input option { background: var(--surface); }
textarea.input { min-height: 80px; resize: vertical; }
input[type='date'].input, input[type='month'].input { direction: ltr; text-align: right; }
:root[data-theme='dark'] input[type='date']::-webkit-calendar-picker-indicator, :root[data-theme='dark'] input[type='month']::-webkit-calendar-picker-indicator { filter: invert(.75); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.hint { font-size: 12.5px; color: var(--text-3); }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--text-2); }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.search { position: relative; }
.search svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 11px; color: var(--text-3); width: 16px; height: 16px; }
.search .input { padding-inline-start: 36px; min-width: 240px; padding-block: 7px; }
.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--border); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 14px; border-radius: 6px; cursor: pointer; color: var(--text-2); font-size: 13px; font-family: var(--font-head); }
.seg button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); font-weight: 600; }
.info-box { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); border-inline-start: 3px solid var(--info); font-size: 13.5px; }
.info-box.warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 25%, transparent); border-inline-start-color: var(--warning); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
.t th {
  text-align: start; font-weight: 600; font-size: 12.5px; color: var(--text-2); padding: 11px 16px;
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--head-bg); user-select: none;
}
.t th.sortable { cursor: pointer; }
.t th.sortable:hover { color: var(--primary); }
.t td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.t tbody tr { transition: background .12s; }
.t tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.t tbody tr:hover { background: var(--hover); }
.t tbody tr.click { cursor: pointer; }
.t tfoot td { font-weight: 700; background: var(--head-bg); border-bottom: 0; border-top: 2px solid var(--border-strong); font-family: var(--font-head); }
.t .end { text-align: end; }
.t td.nowrap { white-space: nowrap; }
.empty { padding: 44px 20px; text-align: center; color: var(--text-3); }
.empty svg { width: 38px; height: 38px; stroke-width: 1.3; margin-bottom: 8px; opacity: .55; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 12.5px; color: var(--text-3); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 4px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap; border: 1px solid transparent;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.b-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.b-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.b-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.b-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.b-primary { background: var(--gold-soft); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 25%, transparent); }
.pulse::before { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.pos { color: var(--success); }
.neg { color: var(--danger); }

/* ---------- Lists ---------- */
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .ttl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot-ic { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.dot-ic svg.i { width: 15px; height: 15px; }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); animation: pop .18s ease; overflow: hidden;
}
.modal.sm { max-width: 440px; }
.modal.lg { max-width: 900px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); border-top: 3px solid var(--navy); }
:root[data-theme='dark'] .modal-head { border-top-color: var(--gold); }
.modal-head h3 { margin: 0; font-size: 16px; flex: 1; }
.modal-body { padding: 22px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-start; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.form-error { color: var(--danger); background: var(--danger-soft); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13.5px; border-inline-start: 3px solid var(--danger); }

/* ---------- Toast ---------- */
.toasts { position: fixed; bottom: 22px; left: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px 16px; min-width: 280px; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--success); border-radius: 8px;
  box-shadow: var(--shadow-lg); animation: toastIn .32s var(--ease-out) both; font-size: 14px;
}
.toast-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--success-soft); color: var(--success); flex-shrink: 0; }
.toast-ic svg { width: 16px; height: 16px; }
.toast.err { border-inline-start-color: var(--danger); }
.toast.err .toast-ic { background: var(--danger-soft); color: var(--danger); }
.toast-msg { flex: 1; }
.toast-x { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; }
.toast-x:hover { background: var(--surface-3); color: var(--text); }
.toast-x svg { width: 14px; height: 14px; }
.toast-life { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--success); transform-origin: right; animation: life var(--life) linear forwards; opacity: .5; }
.toast.err .toast-life { background: var(--danger); }
.toast.hold .toast-life { animation-play-state: paused; }
.toast.out { animation: toastOut .2s var(--ease-in) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-24px) scale(.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-16px); } }
@keyframes life { to { transform: scaleX(0); } }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; position: relative; overflow: hidden; background: var(--bg); }
.login-band {
  position: absolute; inset: 0 0 auto 0; height: 42%; background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a8854a' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M32 4 60 32 32 60 4 32z'/%3E%3Cpath d='M32 16 48 32 32 48 16 32z'/%3E%3Ccircle cx='32' cy='32' r='4'/%3E%3C/g%3E%3C/svg%3E");
  border-bottom: 3px solid var(--gold); animation: bandIn .8s var(--ease-out) both;
}
@keyframes bandIn { from { opacity: 0; } }
.login { position: relative; animation: loginIn .55s .1s var(--ease-out) both; }
.login.leaving { animation: loginOut .22s var(--ease-in) forwards; }
@keyframes loginIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes loginOut { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
.login-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 12px; color: var(--text-3); }
.login-foot svg { width: 14px; height: 14px; color: var(--success); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 42px; }
.pw-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; }
.pw-eye:hover { color: var(--text); background: var(--surface-3); }
.login { width: 100%; max-width: 420px; padding: 34px 32px 30px; border-top: 4px solid var(--gold); box-shadow: var(--shadow-lg); }
.login .brand-logo { width: 62px; height: 62px; margin: 0 auto 16px; color: var(--navy); border-color: var(--gold); }
:root[data-theme='dark'] .login .brand-logo { color: var(--gold); }
.login .brand-logo svg { width: 32px; height: 32px; }
.login h2 { text-align: center; margin: 0 0 4px; font-size: 20px; }
.login p.sub { text-align: center; color: var(--text-3); margin: 0 0 24px; }
.login .field { margin-bottom: 14px; }
.login .btn { width: 100%; padding: 11px; margin-top: 8px; }

/* ---------- Login (split layout) ---------- */
.login-split { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; background: var(--bg); }
.lg-brand { position: relative; overflow: hidden; background: linear-gradient(160deg, #0b2140 0%, var(--navy) 55%, #163a63 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
.lg-pattern { position: absolute; inset: 0; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23a8854a' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M40 4 76 40 40 76 4 40z'/%3E%3Cpath d='M40 20 60 40 40 60 20 40z'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3Cpath d='M0 0l20 20M80 0 60 20M0 80l20-20M80 80 60 60'/%3E%3C/g%3E%3C/svg%3E");
  animation: patDrift 60s linear infinite; }
@keyframes patDrift { to { background-position: -160px 160px; } }
.lg-brand::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 133, 74, .22), transparent 65%); bottom: -220px; left: -160px; }
.lg-brand-in { position: relative; z-index: 1; max-width: 460px; animation: rise .6s var(--ease-out) both; }
.lg-logo { width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; background: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5), 0 0 0 4px rgba(168, 133, 74, .5); margin-bottom: 22px; color: var(--navy); overflow: hidden; }
.lg-logo img { max-width: 82px !important; max-height: 82px !important; height: auto !important; }
.lg-logo > svg { width: 44px; height: 44px; }
.lg-brand h1 { margin: 0; font-size: 30px; line-height: 1.35; color: #fff; }
.lg-tag { margin: 6px 0 30px; color: #c6d1df; font-size: 15px; }
.lg-tag::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--gold); margin-top: 16px; }
.lg-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lg-feats li { display: flex; align-items: center; gap: 14px; animation: rise .5s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * 90ms); }
.lg-feats li > span { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(168, 133, 74, .35); color: var(--gold); flex-shrink: 0; }
.lg-feats b { display: block; font-family: var(--font-head); font-size: 14.5px; color: #fff; }
.lg-feats small { font-size: 12.5px; color: #9fb0c6; }
.lg-brand-foot { position: absolute; bottom: 24px; inset-inline: 56px; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9fb0c6; }
.lg-brand-foot svg { width: 14px; height: 14px; color: var(--gold); }

.lg-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; position: relative; }
.lg-card { width: 100%; max-width: 420px; animation: loginIn .55s .1s var(--ease-out) both; }
.lg-card.leaving { animation: loginOut .22s var(--ease-in) forwards; }
.lg-mobile-brand { display: none; }
.lg-head { margin-bottom: 26px; }
.lg-hello { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; font-family: var(--font-head); }
.lg-head h2 { margin: 0 0 6px; font-size: 26px; }
.lg-head p { margin: 0; color: var(--text-3); font-size: 14px; }
.lg-card .field { margin-bottom: 16px; }
.lg-input { position: relative; }
.lg-input > svg { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; transition: color var(--dur-fast); }
.lg-input .input { padding: 12px 42px 12px 42px; font-size: 15px; border-radius: 10px; background: var(--surface); }
.lg-input .input::placeholder { color: var(--text-3); opacity: .55; }
.lg-input:focus-within > svg { color: var(--primary); }
.lg-input.bad .input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.lg-input .pw-eye { inset-inline-end: 8px; }
.lg-caps { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--warning); }
.lg-caps svg { width: 14px; height: 14px; }
.lg-submit { width: 100%; padding: 13px; font-size: 15px; border-radius: 10px; margin-top: 6px; }
.lg-submit svg { transform: scaleX(-1); }
.lg-sep { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; color: var(--text-3); font-size: 12.5px; }
.lg-sep::before, .lg-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lg-support { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, #1f9d55 30%, var(--border)); background: color-mix(in srgb, #1f9d55 6%, var(--surface)); color: var(--text);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur-fast); }
.lg-support:hover { text-decoration: none; transform: translateY(-2px); border-color: #1f9d55; box-shadow: 0 10px 24px -14px rgba(31, 157, 85, .6); }
.lg-wa { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(31, 157, 85, .15); }
.lg-wa svg { width: 20px; height: 20px; }
.lg-support .grow { flex: 1; } .lg-support b { display: block; font-family: var(--font-head); font-size: 14px; } .lg-support small { font-size: 12.5px; color: var(--text-3); }
.lg-go { color: #1f9d55; font-size: 18px; transition: transform var(--dur); } .lg-support:hover .lg-go { transform: translateX(-4px); }
.lg-copy { margin: 28px 0 0; font-size: 11.5px; color: var(--text-3); }

/* Login: animated system scene */
.lg-brand { padding-block: 36px 56px; }
.lg-logo { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 16px; }
.lg-logo img { max-width: 64px !important; max-height: 64px !important; }
.lg-brand h1 { font-size: 27px; }
.lg-tag { margin: 4px 0 18px; }
.lg-tag::after { margin-top: 12px; }
.lg-scene { position: relative; height: 290px; max-width: 460px; margin: 6px 0 10px; }
.mall-svg { position: absolute; top: 0; right: 0; width: 330px; height: 270px; overflow: visible; animation: rise .7s .15s var(--ease-out) both; }
.mall-svg .shadow { fill: rgba(0, 0, 0, .35); }
.mall-svg .body { stroke: rgba(168, 133, 74, .55); stroke-width: 1.2; }
.mall-svg .sign { fill: #0b2140; stroke: #a8854a; stroke-width: 1.2; }
.mall-svg .sign-t { fill: #e3c27e; font: 700 12px 'Noto Kufi Arabic', sans-serif; text-anchor: middle; direction: rtl; }
.mall-svg .fl { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.mall-svg .fnum { fill: rgba(227, 194, 126, .55); font: 600 10px 'Noto Kufi Arabic', sans-serif; text-anchor: middle; }
.mall-svg .base { fill: #a8854a; opacity: .8; }
.mall-svg .win { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .16); stroke-width: 1; transition: fill .7s ease, stroke .7s ease; transform-box: fill-box; transform-origin: center; }
.mall-svg .win.lit { fill: #e3c27e; stroke: #f3dca6; filter: url(#glow); }
.mall-svg .win.flash { animation: winFlash .7s var(--ease-out); }
@keyframes winFlash { 40% { transform: scale(1.18); } }
.mall-svg .door-frame { fill: #0b2140; stroke: #a8854a; }
.mall-svg .door-l, .mall-svg .door-r { fill: rgba(227, 194, 126, .35); transform-box: fill-box; }
.mall-svg .door-l { animation: doorL 7s ease-in-out infinite; } .mall-svg .door-r { animation: doorR 7s ease-in-out infinite; }
@keyframes doorL { 0%, 40%, 100% { transform: none; } 50%, 70% { transform: translateX(-80%); } }
@keyframes doorR { 0%, 40%, 100% { transform: none; } 50%, 70% { transform: translateX(80%); } }
.mall-svg .sparks circle { fill: #e3c27e; opacity: 0; animation: spark 3s ease-out infinite; animation-delay: var(--d); }
@keyframes spark { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px); } }

.fc { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .97); color: #17212f;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(168, 133, 74, .25); animation: fcIn .6s var(--ease-out) both, float 6s ease-in-out infinite; }
.fc small { display: block; font-size: 10.5px; color: #66728c; line-height: 1.4; }
.fc b { display: block; font-family: var(--font-head); font-size: 14px; color: #0f2a4a; direction: ltr; text-align: right; }
@keyframes fcIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes float { 50% { transform: translateY(-7px); } }
.fc-receipt { top: 6px; left: 0; animation-delay: .5s, .5s; }
.fc-receipt.pop .fc-ok { animation: okPop .6s var(--ease-out); }
.fc-ok { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1d7a4c; color: #fff; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(29, 122, 76, .15); }
.fc-ok svg { width: 17px; height: 17px; stroke-width: 2.4; }
@keyframes okPop { 40% { transform: scale(1.25); } }
.fc-chart { top: 112px; left: 26px; flex-direction: column; align-items: stretch; gap: 6px; width: 132px; animation-delay: .75s, 1.6s; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.bars i { flex: 1; height: 10%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #e3c27e, #a8854a); animation: barGrow 4.2s var(--ease-out) infinite; animation-delay: var(--d); }
.bars i:last-child { background: linear-gradient(180deg, #2fa36b, #1d7a4c); }
@keyframes barGrow { 0% { height: 8%; } 30%, 80% { height: var(--h); } 100% { height: 8%; } }
.fc-ring { bottom: 4px; left: 0; animation-delay: 1s, 3.1s; }
.ring.sm { width: 46px; height: 46px; background: conic-gradient(#1d7a4c calc(var(--p) * 1%), #e1e5eb 0); transition: --p .8s var(--ease-out); animation: none; }
.ring.sm::before { inset: 5px; background: #fff; }
.ring.sm b { font-size: 11.5px; color: #0f2a4a; }
.fc-ring > div:last-child b { font-size: 12.5px; direction: rtl; }

.lg-ticker { display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 8px 10px 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #e3c27e; padding: 2px 8px; border-radius: 999px; background: rgba(168, 133, 74, .16); flex-shrink: 0; font-family: var(--font-head); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #2fd28a; box-shadow: 0 0 0 0 rgba(47, 210, 138, .6); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(47, 210, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 210, 138, 0); } }
.tk-view { position: relative; flex: 1; height: 38px; overflow: hidden; }
.tk-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; animation: tkIn .45s var(--ease-out) both; }
.tk-item.out { animation: tkOut .4s var(--ease-in) forwards; }
@keyframes tkIn { from { opacity: 0; transform: translateY(100%); } }
@keyframes tkOut { to { opacity: 0; transform: translateY(-100%); } }
.tk-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: rgba(255, 255, 255, .08); }
.tk-ic svg { width: 15px; height: 15px; }
.tk-item.ok .tk-ic { color: #2fd28a; } .tk-item.info .tk-ic { color: #6aa8e0; } .tk-item.gold .tk-ic { color: #e3c27e; } .tk-item.warn .tk-ic { color: #ffb547; }
.tk-txt { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.tk-txt b { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-txt small { font-size: 11.5px; color: #9fb0c6; white-space: nowrap; }
.lg-chips { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.lg-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #c6d1df; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(168, 133, 74, .3); background: rgba(255, 255, 255, .04);
  animation: rise .5s var(--ease-out) both; animation-delay: calc(.9s + var(--i) * 80ms); }
.lg-chips svg { width: 13px; height: 13px; color: #e3c27e; }
@media (max-height: 780px) { .lg-chips { display: none; } .lg-scene { height: 262px; } .mall-svg { transform: scale(.92); transform-origin: top right; } }
@media (max-width: 1150px) { .lg-brand { padding-inline: 36px; } .lg-brand-foot { inset-inline: 36px; } .fc-chart { display: none; } }

@media (max-width: 900px) {
  .login-split { grid-template-columns: minmax(0, 1fr); }
  .lg-brand { display: none; }
  .lg-main { justify-content: flex-start; padding: 0 0 20px; }
  .lg-mobile-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 -16px 22px; padding: 30px 16px 26px; text-align: center;
    background: linear-gradient(160deg, #0b2140, var(--navy)); color: #fff; border-bottom: 3px solid var(--gold); }
  .lg-mobile-brand img { height: 64px !important; background: #fff; border-radius: 14px; padding: 4px; }
  .lg-mobile-brand b { font-family: var(--font-head); font-size: 18px; }
  .lg-mobile-brand .brand-logo { width: 56px; height: 56px; }
  .lg-card { max-width: none; padding: 0 16px; }
  .lg-head h2 { font-size: 22px; }
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs button {
  background: none; border: 0; padding: 10px 16px; cursor: pointer; color: var(--text-2); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button.on { color: var(--primary); border-bottom-color: var(--gold); font-weight: 600; }

.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px; }
.detail-head .avatar { width: 54px; height: 54px; font-size: 20px; }
.detail-head h2 { margin: 0; font-size: 19px; }
.kv { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--text-2); font-size: 13.5px; }
.kv b { color: var(--text); font-weight: 600; }

.chart-box { position: relative; height: 290px; padding: 12px 16px 16px; }

/* ---------- Reports ---------- */
.rep-hero { display: flex; align-items: center; gap: 24px; padding: 22px 24px; flex-wrap: wrap; border-inline-start: 4px solid var(--gold); }
.rep-hero h2 { margin: 0 0 4px; font-size: 18px; }
.rep-hero p { margin: 0; color: var(--text-2); font-size: 13.5px; max-width: 420px; }
.rep-hero-kpis { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; min-width: 320px; }
.rep-hero-kpis > div { padding: 4px 18px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.rep-hero-kpis span { font-size: 12.5px; color: var(--text-3); }
.rep-hero-kpis b { font-size: 16.5px; font-family: var(--font-head); }
.rep-group { margin-bottom: 26px; }
.rep-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rep-group-head svg { color: var(--gold); }
.rep-group-head h3 { margin: 0; font-size: 15px; }
.rep-group-head span { margin-inline-start: auto; font-size: 12px; color: var(--text-3); }
.rep-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.rep-card:hover { text-decoration: none; border-color: var(--primary); box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .25); transform: translateY(-1px); }
.rep-card-ic { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); }
.rep-card-ic.sm { width: 36px; height: 36px; }
.rep-card:hover .rep-card-ic { background: var(--navy); color: #fff; }
.rep-card-body { flex: 1; min-width: 0; }
.rep-card-body b { display: block; font-family: var(--font-head); font-size: 14.5px; margin-bottom: 4px; }
.rep-card-body p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.rep-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.rep-top-title { display: flex; align-items: center; gap: 12px; }
.rep-top-title b { display: block; font-family: var(--font-head); font-size: 15px; }
.rep-top-title small { color: var(--text-3); font-size: 12.5px; }
.rep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; }
.rep-filters .spacer { flex: 1; }
.rep-dates { display: flex; align-items: center; gap: 8px; }
.rep-dates .input { width: 150px; padding-block: 7px; }
.rep-filters .muted { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rep-section { margin-bottom: 18px; }
.rep-section-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 8px; }
.rep-section-head h3 { margin: 0; font-size: 14.5px; padding-inline-start: 10px; border-inline-start: 3px solid var(--gold); }
.rep-section-head .hint { margin-inline-start: auto; }
.rep-t td, .rep-t th { padding: 10px 14px; }
.rep-t tr.rep-grp td { background: var(--primary-soft) !important; font-weight: 700; font-family: var(--font-head); color: var(--primary); }
.rep-t tr.rep-grp svg { width: 15px; height: 15px; vertical-align: -3px; }
.rep-share { min-width: 150px; }
.rep-share-in { display: flex; align-items: center; gap: 10px; }
.rep-share-in .rep-bar { flex: 1; }
.rep-bar { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; margin-top: 4px; }
.rep-share-in .rep-bar { margin-top: 0; }
.rep-bar > i { display: block; height: 100%; border-radius: 6px; }
.rep-chart { height: 320px; padding: 16px; position: relative; }
.rep-result { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px; margin-bottom: 18px; flex-wrap: wrap; text-align: center; }
.rep-result > div { display: flex; flex-direction: column; }
.rep-result > div > span { font-size: 12.5px; color: var(--text-3); }
.rep-result b { font-size: 19px; font-family: var(--font-head); }
.rep-result > i { font-style: normal; font-size: 22px; color: var(--text-3); }
.rep-result.ok > div:last-child b { color: var(--success); }
.rep-result.bad > div:last-child b { color: var(--danger); }
.rep-result.ok { border-top: 3px solid var(--success); }
.rep-result.bad { border-top: 3px solid var(--danger); }
.aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.aging-col { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 14px; border-inline-start: 1px solid var(--border); }
.aging-col:first-child { border: 0; padding: 0; }
.aging-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.aging-col b { font-size: 17px; font-family: var(--font-head); }
.rep-party { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.rep-party > div { display: flex; flex-direction: column; }
.rep-party span { font-size: 12px; color: var(--text-3); }
.rep-sign { display: none; }
.rep-print-head { display: none; }

/* ---------- Theme toggle ---------- */
.theme-btn { color: var(--text-2); }

/* ---------- Print ---------- */
#print-area { display: none; }


/* =========================================================
   Motion, feedback & polish
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-fast: 150ms; --dur: 240ms; }

/* Top loading bar */
#top-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 300; pointer-events: none; transform-origin: right; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, var(--gold), #d9b977, var(--gold)); box-shadow: 0 0 8px rgba(168, 133, 74, .5); }
#top-progress.on { opacity: 1; transform: scaleX(.85); transition: transform 4s cubic-bezier(.1, .6, .2, 1), opacity .1s; }
#top-progress.done { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .3s .15s; }

/* Entrance choreography */
.reveal { animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.row-in { animation: rowIn .35s var(--ease-out) both; animation-delay: calc(120ms + var(--r, 0) * 22ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } }
.view { animation: viewIn .28s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } }

/* Interactive surfaces */
.kpi { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .35); }
.btn { transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform 80ms; }
.btn-primary:hover { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--navy) 70%, transparent); }
.btn:active { transform: translateY(1px) scale(.985); }
.nav a { transition: background var(--dur-fast), color var(--dur-fast), padding var(--dur) var(--ease-out); }
.nav a svg { transition: transform var(--dur) var(--ease-out); }
.nav a:hover svg { transform: scale(1.1); }
.t tbody tr { transition: background var(--dur-fast); }
.progress > i, .rep-bar > i { animation: grow .9s .2s var(--ease-out) both; transform-origin: right; }
@keyframes grow { from { transform: scaleX(0); } }

/* Buttons: loading state */
.btn.loading { pointer-events: none; opacity: .9; }
.btn.loading svg { display: none; }
.btn.loading::before { content: ''; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Feedback */
.shake { animation: shake .4s var(--ease-out); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.num-preview { font-size: 12px; color: var(--primary); min-height: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur) var(--ease-out), opacity var(--dur); line-height: 1.6; }
.num-preview.on { max-height: 60px; opacity: 1; }
.num-preview b { font-family: var(--font-head); }

/* Modals: enter slower than exit */
.modal-back { animation: fadeIn .2s ease both; }
.modal { animation: modalIn .3s var(--ease-out) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-back.closing { animation: fadeOut .14s var(--ease-in) forwards; }
.modal-back.closing .modal { animation: modalOut .14s var(--ease-in) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Keyboard focus */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.input:focus-visible { outline: none; }
.btn:focus-visible, .nav a:focus-visible, .rep-card:focus-visible, .acc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: #d9b977; }

/* Theme switch cross-fade */
.theme-anim, .theme-anim * { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; }

.top-title { min-width: 0; }
.top-title h1, .top-title .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Topbar search pill */
.search-pill { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; min-width: 260px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: 13px; transition: border-color var(--dur-fast), background var(--dur-fast); }
.search-pill:hover { border-color: var(--primary); background: var(--surface); color: var(--text-2); }
.search-pill svg { width: 16px; height: 16px; }
.search-pill span { flex: 1; text-align: start; }
kbd { font-family: var(--font-body); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface); color: var(--text-2); direction: ltr; }
.rate-pill { font: inherit; color: inherit; }

/* Command palette */
.pal-back { position: fixed; inset: 0; z-index: 150; background: var(--overlay); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fadeIn .15s ease both; }
.pal { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; animation: modalIn .25s var(--ease-out) both; border-top: 3px solid var(--gold); }
.pal-back.closing { animation: fadeOut .13s var(--ease-in) forwards; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pal-in svg { color: var(--text-3); }
.pal-in input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-group { font-size: 11.5px; color: var(--text-3); padding: 10px 10px 4px; font-weight: 600; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.pal-item.on { background: var(--primary-soft); }
.pal-item.on .pal-ic { background: var(--navy); color: #fff; }
.pal-ic { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; transition: background var(--dur-fast), color var(--dur-fast); }
.pal-ic svg { width: 16px; height: 16px; }
.pal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-txt b { font-weight: 600; font-size: 14px; }
.pal-txt small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-hint { font-size: 12px; text-align: end; }
.pal-go { color: var(--text-3); opacity: 0; font-size: 14px; }
.pal-item.on .pal-go { opacity: 1; }
.pal-empty { padding: 34px; text-align: center; color: var(--text-3); }
.pal-empty svg { width: 32px; height: 32px; margin-bottom: 6px; }
.pal-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; color: var(--text-3); }
.pal-foot kbd { margin: 0 2px; }

/* Dashboard greeting */
.greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.greet h2 { margin: 0; font-size: 21px; }
.greet p { margin: 2px 0 10px; color: var(--text-3); font-size: 13.5px; }
.greet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
a.chip:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.chip svg { width: 14px; height: 14px; }
.chip-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.chip-warn { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.chip-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.chip-ok { background: var(--success-soft); color: var(--success); }
.delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; font-family: var(--font-head); }
.delta small { font-weight: 400; font-family: var(--font-body); opacity: .8; }
.delta.up { background: var(--success-soft); color: var(--success); }
.delta.down { background: var(--danger-soft); color: var(--danger); }
.delta.neu { background: var(--surface-3); color: var(--text-2); }

/* Collapsible sidebar (desktop) */
.brand { position: relative; }
.brand-txt { flex: 1; min-width: 0; }
.side-toggle {
  position: absolute !important; inset-inline-end: -14px; top: 30px; z-index: 45; width: 26px; height: 26px; padding: 0 !important;
  border-radius: 50% !important; background: var(--sidebar-bg) !important; border: 1px solid var(--gold) !important; color: var(--gold) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.side-toggle:hover { background: var(--gold) !important; color: var(--navy) !important; }
.side-toggle svg { width: 14px !important; height: 14px !important; }
.side-toggle svg { transition: transform var(--dur) var(--ease-out); }
.sidebar, .main { transition: width var(--dur) var(--ease-out), margin var(--dur) var(--ease-out), transform .25s ease; }
@media (min-width: 901px) {
  body.nav-mini { --sidebar: 76px; }
  body.nav-mini .brand { flex-direction: column; padding: 16px 10px; gap: 10px; }
  body.nav-mini .brand-txt, body.nav-mini .nav a span, body.nav-mini .user-chip .who, body.nav-mini .nav-group span { display: none; }
  body.nav-mini .side-toggle svg { transform: rotate(180deg); }
  body.nav-mini .nav { padding: 8px; }
  body.nav-mini .nav a { justify-content: center; padding: 11px 0; }
  body.nav-mini .nav-group { padding: 8px 0; margin: 6px 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
  body.nav-mini .nav a.active::before { inset-inline-start: -8px; }
  body.nav-mini .user-chip { flex-direction: column; }
}
.side-close { display: none; }
@media (max-width: 900px) { .side-toggle { display: none; } .side-close { display: inline-flex; margin-inline-start: auto; color: var(--sidebar-text) !important; } .search-pill { min-width: 0; } .search-pill span, .search-pill kbd { display: none; } }

/* ---------- Shops: floor map ---------- */
.shops-sum { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); align-items: stretch; overflow: hidden; }
.ss-main { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; }
.ss-main h3 { margin: 0; font-size: 16px; color: #fff; }
.ss-main p { margin: 2px 0 0; font-size: 13px; color: #c6d1df; }
.ring { --p: 0; width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); animation: ringIn 1s var(--ease-out) both; }
.ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--navy); }
.ring b, .ring small { position: relative; line-height: 1.1; }
.ring b { font-size: 17px; font-family: var(--font-head); color: #fff; }
.ring small { font-size: 10.5px; color: #c6d1df; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes ringIn { from { --p: 0; } }
.ss-stat { padding: 16px 20px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ss-stat span { font-size: 12.5px; color: var(--text-3); }
.ss-stat b { font-size: 19px; font-family: var(--font-head); }
.ss-stat b.warn { color: var(--warning); }
.ss-stat small { font-size: 11.5px; color: var(--text-3); }
.shops-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.shops-bar .spacer { flex: 1; }
.shops-bar .search .input { min-width: 230px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.seg button svg { width: 15px; height: 15px; }
.seg .cnt, .floor-tabs .cnt { font-size: 11px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--text-3); font-family: var(--font-body); }
.seg button.on .cnt, .floor-tabs button.on .cnt { background: var(--primary-soft); color: var(--primary); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.floor-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.floor-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: var(--font-head); font-size: 13px; color: var(--text-2); transition: all var(--dur-fast); }
.floor-tabs button:hover { border-color: var(--primary); color: var(--text); }
.floor-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.floor-tabs button.on .cnt { background: rgba(255, 255, 255, .18); color: #fff; }
.floor { margin-bottom: 24px; }
.floor-head { display: flex; align-items: center; gap: 14px; padding: 0 2px 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.floor-num { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--navy); color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.floor-head h3 { margin: 0; font-size: 15px; }
.floor-head small { font-size: 12px; color: var(--text-3); }
.floor-occ { display: flex; align-items: center; gap: 8px; width: 170px; margin-inline-start: auto; }
.floor-occ .rep-bar { flex: 1; margin: 0; }
.floor-occ span { font-size: 12.5px; font-weight: 700; }
.floor-rent { text-align: end; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; display: flex; flex-direction: column; }
.floor-rent small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--text-3); }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

.unit { --c: var(--primary); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 13px 14px 12px; text-align: start; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast);
  animation: rise .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.unit::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.unit:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(16, 24, 40, .4); border-color: var(--c); }
.unit.st-vacant { --c: var(--border-strong); background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 10px, var(--surface-2) 10px, var(--surface-2) 20px); border-style: dashed; box-shadow: none; }
.unit.st-rented { --c: var(--primary); }
.unit.st-expiring { --c: var(--warning); }
.unit.st-overdue { --c: var(--danger); }
.unit-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.unit-code { font-family: var(--font-head); font-weight: 700; font-size: 16px; direction: ltr; }
.unit-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 4px; white-space: nowrap; font-family: var(--font-head); }
.unit-badge.st-vacant { background: var(--surface-3); color: var(--text-2); }
.unit-badge.st-rented { background: var(--primary-soft); color: var(--primary); }
.unit-badge.st-expiring { background: var(--warning-soft); color: var(--warning); }
.unit-badge.st-overdue { background: var(--danger-soft); color: var(--danger); }
.dot.st-rented { background: var(--primary); } .dot.st-vacant { background: var(--border-strong); }
.dot.st-expiring { background: var(--warning); } .dot.st-overdue { background: var(--danger); }
.unit-mid b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-mid small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.unit-foot small { font-weight: 400; font-size: 11px; color: var(--text-3); }
.unit-foot small.warn { color: var(--warning); font-weight: 700; }
.unit-foot small.neg svg { width: 15px; height: 15px; }
.shops-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shops-empty b { font-size: 15px; color: var(--text); }
.shops-empty .btn { margin-top: 10px; }

/* ---------- Tenants ---------- */
.t-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.t-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; position: relative; border-top: 3px solid var(--primary); flex-wrap: wrap; }
.t-stat.ok { border-top-color: var(--success); } .t-stat.ok .set-ic { background: var(--success-soft); color: var(--success); }
.t-stat.bad { border-top-color: var(--danger); } .t-stat.bad .set-ic { background: var(--danger-soft); color: var(--danger); }
.t-stat b { display: block; font-size: 22px; font-family: var(--font-head); line-height: 1.3; }
.t-stat small { font-size: 12.5px; color: var(--text-3); }
.t-stat-amt { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--danger); text-align: end; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tcard { --c: var(--primary); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  cursor: pointer; overflow: hidden; position: relative; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast);
  animation: rise .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.tcard::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--c); }
.tcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(16, 24, 40, .4); border-color: var(--c); }
.tcard.tt-overdue { --c: var(--danger); } .tcard.tt-none { --c: var(--border-strong); }
.tcard header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.tcard header .grow { flex: 1; min-width: 0; }
.tname { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tname:hover { color: var(--primary); text-decoration: none; }
.tcard header small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tav { --av: var(--primary); width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: #fff; background: var(--av); box-shadow: 0 0 0 3px color-mix(in srgb, var(--av) 18%, transparent); letter-spacing: -1px; }
.tav.av-lg { width: 58px; height: 58px; font-size: 19px; }
.unit-badge.tt-active { background: var(--success-soft); color: var(--success); }
.unit-badge.tt-overdue { background: var(--danger-soft); color: var(--danger); }
.unit-badge.tt-none { background: var(--surface-3); color: var(--text-2); }
.dot.tt-active { background: var(--success); } .dot.tt-overdue { background: var(--danger); } .dot.tt-none { background: var(--border-strong); }
.tshops { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; font-size: 12.5px; min-height: 32px; }
.tshop { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 5px; background: var(--primary-soft); color: var(--primary); font-weight: 700; direction: ltr; font-size: 12px; }
.tshop svg { width: 12px; height: 12px; }
.tmeta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tmeta > div { padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tmeta > div + div { border-inline-start: 1px solid var(--border); }
.tmeta span { font-size: 11px; color: var(--text-3); }
.tmeta b { font-size: 13px; font-family: var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmeta b.warn { color: var(--warning); }
.tmeta b svg { width: 13px; height: 13px; vertical-align: -2px; }
.tmeta .money { font-size: 12.5px; }
.tcard footer { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.tcard footer .spacer { flex: 1; }
.btn.wa { color: #1f9d55; }
.btn.wa:hover { background: rgba(31, 157, 85, .1); color: #1f9d55; }
@media (max-width: 1100px) { .t-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tgrid { grid-template-columns: minmax(0, 1fr); } .t-sum { gap: 8px; } .t-stat { padding: 12px; gap: 10px; } .t-stat b { font-size: 18px; } }

.t-sum { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.t-stat.warn { border-top-color: var(--warning); } .t-stat.warn .set-ic { background: var(--warning-soft); color: var(--warning); }
.t-stat.info { border-top-color: var(--gold); } .t-stat.info .set-ic { background: var(--gold-soft); color: var(--gold); }
.t-stat-txt { min-width: 0; }
.t-stat-txt b .money { font-size: 17px; }

/* ---------- Contracts ---------- */
.ccard { --c: var(--success); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast); animation: rise .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.ccard::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--c); }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(16, 24, 40, .4); border-color: var(--c); }
.ccard.cs-soon { --c: var(--warning); } .ccard.cs-expired { --c: var(--danger); } .ccard.cs-ended { --c: var(--border-strong); } .ccard.cs-upcoming { --c: var(--info); }
.ccard.cs-ended { opacity: .85; }
.ccard header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.ccard header .grow { flex: 1; min-width: 0; }
.ccard header small { display: block; font-size: 12px; color: var(--text-3); }
.c-shop { width: 54px; height: 54px; border-radius: 10px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--navy); color: #fff; }
.c-shop span { font-family: var(--font-head); font-weight: 700; font-size: 14px; direction: ltr; line-height: 1.2; }
.c-shop small { font-size: 9.5px; color: var(--gold); line-height: 1.2; }
.unit-badge.cs-active { background: var(--success-soft); color: var(--success); }
.unit-badge.cs-soon { background: var(--warning-soft); color: var(--warning); }
.unit-badge.cs-expired { background: var(--danger-soft); color: var(--danger); }
.unit-badge.cs-ended { background: var(--surface-3); color: var(--text-2); }
.unit-badge.cs-upcoming { background: var(--info-soft); color: var(--info); }
.dot.cs-active { background: var(--success); } .dot.cs-soon { background: var(--warning); } .dot.cs-expired { background: var(--danger); } .dot.cs-ended { background: var(--border-strong); }
.c-money { display: grid; grid-template-columns: 1.3fr 1fr .7fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.c-money > div { padding: 9px 12px; display: flex; flex-direction: column; min-width: 0; }
.c-money > div + div { border-inline-start: 1px solid var(--border); }
.c-money span { font-size: 11px; color: var(--text-3); }
.c-money b { font-size: 14px; font-family: var(--font-head); white-space: nowrap; }
.c-time { padding: 12px 16px 4px; }
.c-dates { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.c-left { font-weight: 700; font-family: var(--font-head); font-size: 12px; color: var(--success); }
.c-left.soon { color: var(--warning); } .c-left.expired { color: var(--danger); } .c-left.ended { color: var(--text-3); } .c-left.upcoming { color: var(--info); }
.c-bar { height: 7px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.c-bar i { display: block; height: 100%; border-radius: 7px; background: var(--c, var(--primary)); transform-origin: right; animation: grow .9s .15s var(--ease-out) both; }
.c-bar.sm { width: 110px; height: 6px; }
.ccard footer { display: flex; align-items: center; gap: 4px; padding: 10px 12px; margin-top: auto; }
.ccard footer .spacer { flex: 1; }

/* ---------- Shared list bits ---------- */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > div { min-width: 0; }
.tav.sm { width: 32px; height: 32px; font-size: 11.5px; box-shadow: none; letter-spacing: -.5px; }
.type-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.type-chip.t-rent { background: var(--primary-soft); color: var(--primary); }
.type-chip.t-service { background: var(--gold-soft); color: var(--gold); }
.mini-bar { height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; min-width: 50px; }
.mini-bar i { display: block; height: 100%; border-radius: 5px; background: var(--success); transform-origin: right; animation: grow .8s .1s var(--ease-out) both; }
.mini-bar.out i { background: var(--danger); }
.t-stat .mini-bar { width: 100%; flex-basis: 100%; margin-top: 2px; }
.pay-prog { display: flex; flex-direction: column; gap: 4px; min-width: 90px; font-size: 12.5px; }
.unit-badge.ch-paid { background: var(--success-soft); color: var(--success); }
.unit-badge.ch-partial { background: var(--warning-soft); color: var(--warning); }
.unit-badge.ch-overdue { background: var(--danger-soft); color: var(--danger); }
.unit-badge.ch-due { background: var(--info-soft); color: var(--info); }
.unit-badge svg { width: 12px; height: 12px; vertical-align: -2px; }
.dot.ch-paid { background: var(--success); } .dot.ch-partial { background: var(--warning); } .dot.ch-overdue { background: var(--danger); } .dot.ch-due { background: var(--info); }
.v-no { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; direction: ltr; display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--surface-3); }
.v-no.in { background: var(--success-soft); color: var(--success); } .v-no.out { background: var(--danger-soft); color: var(--danger); }
.bar-title { margin: 0; font-size: 15px; }
.net-cell { font-size: 14.5px; }

/* Category chips (vouchers) */
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cchip { --w: 0%; position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13px; color: var(--text-2); transition: border-color var(--dur-fast), background var(--dur-fast); }
.cchip::after { content: ''; position: absolute; bottom: 0; right: 0; height: 3px; width: var(--w); background: var(--gold); opacity: .7; }
.cchip b { font-family: var(--font-head); color: var(--text); font-size: 12.5px; direction: ltr; }
.cchip small { font-size: 11px; color: var(--text-3); }
.cchip:hover { border-color: var(--primary); }
.cchip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cchip.on b, .cchip.on small { color: #fff; }

/* Accounts */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.acc2 { --c: var(--success); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast); animation: rise .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.acc2.cur-USD { --c: var(--info); }
.acc2::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--c); }
.acc2:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(16, 24, 40, .4); border-color: var(--c); }
.acc2.off { opacity: .6; }
.acc2 header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 4px; }
.acc2 header .grow { flex: 1; min-width: 0; } .acc2 header b { display: block; font-family: var(--font-head); font-size: 14.5px; } .acc2 header small { font-size: 12px; color: var(--text-3); }
.acc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
.acc-bal { padding: 6px 16px 14px; font-size: 26px; font-weight: 700; font-family: var(--font-head); }
.acc-flow { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); background: var(--surface-2); }
.acc-flow > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.acc-flow > div + div { border-inline-start: 1px solid var(--border); }
.acc-flow span { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.acc-flow span svg { width: 13px; height: 13px; }
.acc-flow b { font-size: 13.5px; font-family: var(--font-head); }
.acc2 footer { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 12.5px; color: var(--primary); border-top: 1px solid var(--border); font-family: var(--font-head); }
.acc2 footer svg { width: 14px; height: 14px; } .acc2 footer span { margin-inline-start: auto; transition: transform var(--dur); }
.acc2:hover footer span { transform: translateX(-4px); }

/* Payroll month navigator */
.month-nav { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; flex-wrap: wrap; }
.month-nav .spacer { flex: 1; }
.mn-center { display: flex; align-items: center; gap: 12px; }
.mn-center b { font-family: var(--font-head); font-size: 17px; min-width: 150px; text-align: center; }
.mn-center .input { width: 160px; padding-block: 6px; }
.btn.flip svg { transform: rotate(180deg); }

/* Users */
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.role-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-top: 3px solid var(--rc, var(--primary)); }
.role-card .grow { flex: 1; } .role-card b { display: block; font-family: var(--font-head); } .role-card small { font-size: 12px; color: var(--text-3); }
.role-n { font-size: 24px; font-weight: 700; font-family: var(--font-head); color: var(--rc); }
.r-admin { --rc: var(--gold); } .r-acc { --rc: var(--success); } .r-view { --rc: var(--info); }
.role-card .set-ic { background: color-mix(in srgb, var(--rc) 14%, transparent); color: var(--rc); }
.ucard { --c: var(--rc, var(--primary)); cursor: default; }
.role-b { background: color-mix(in srgb, var(--rc, var(--primary)) 14%, transparent); color: var(--rc, var(--primary)); }
.tcard header small.me-tag, .me-tag { display: inline-block; width: auto; font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: var(--gold-soft); color: var(--gold); vertical-align: middle; font-family: var(--font-body); }
.tmeta.two { grid-template-columns: 1fr 1fr; }

/* Audit timeline */
.tl-day { margin-bottom: 18px; }
.tl-date { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 8px; font-size: 14px; }
.tl-date small { font-size: 12px; color: var(--text-3); font-weight: 400; font-family: var(--font-body); }
.tl { padding: 6px 0; }
.tl-item { --c: var(--info); display: flex; align-items: flex-start; gap: 12px; padding: 9px 18px; position: relative; }
.tl-item + .tl-item::before { content: ''; position: absolute; top: -9px; height: 18px; inset-inline-start: 33px; border-inline-start: 1px dashed var(--border-strong); }
.tl-item:hover { background: var(--hover); }
.tl-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); position: relative; z-index: 1; }
.tl-ic svg { width: 14px; height: 14px; }
.a-create { --c: var(--success); } .a-update { --c: var(--info); } .a-delete { --c: var(--danger); } .a-login { --c: var(--gold); }
.tl-item .grow { flex: 1; min-width: 0; }
.tl-line { font-size: 13.5px; } .tl-line b { font-weight: 700; }
.tl-ent { display: inline-block; padding: 0 7px; border-radius: 4px; background: var(--surface-3); font-size: 12.5px; font-weight: 600; }
.tl-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.tl-time { font-size: 12px; color: var(--text-3); padding-top: 4px; }

@media (max-width: 900px) { .role-grid { grid-template-columns: minmax(0, 1fr); } .acc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Drawer (slides in from the left, opposite the sidebar) */
.drawer-back { position: fixed; inset: 0; z-index: 110; background: var(--overlay); animation: fadeIn .2s ease both; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(440px, 100%); background: var(--surface); display: flex; flex-direction: column; box-shadow: 20px 0 50px -20px rgba(0, 0, 0, .4); animation: drawerIn .32s var(--ease-out) both; }
@keyframes drawerIn { from { transform: translateX(-100%); } }
.drawer-back.closing { animation: fadeOut .18s var(--ease-in) forwards; }
.drawer-back.closing .drawer { animation: drawerOut .18s var(--ease-in) forwards; }
@keyframes drawerOut { to { transform: translateX(-100%); } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 20px 22px; border-bottom: 1px solid var(--border); border-top: 4px solid var(--c, var(--primary)); }
.drawer-head.st-vacant { --c: var(--border-strong); } .drawer-head.st-expiring { --c: var(--warning); } .drawer-head.st-overdue { --c: var(--danger); }
.drawer-head .unit-code { font-size: 13px; color: var(--text-3); }
.drawer-head h3 { margin: 2px 0 6px; font-size: 19px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.dr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dr-grid > div { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dr-grid > div.full { grid-column: 1 / -1; }
.dr-grid span { font-size: 11.5px; color: var(--text-3); }
.dr-grid b { font-size: 14px; font-weight: 600; }
.dr-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13.5px; font-family: var(--font-head); color: var(--text-2); }
.dr-title svg { width: 15px; height: 15px; color: var(--gold); }
.dr-tenant { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); transition: border-color var(--dur-fast), background var(--dur-fast); }
.dr-tenant:hover { text-decoration: none; border-color: var(--primary); background: var(--hover); }
.dr-tenant .grow { flex: 1; } .dr-tenant b { display: block; } .dr-tenant small { color: var(--text-3); font-size: 12px; }
.dr-timeline { display: flex; flex-direction: column; gap: 6px; }
.dr-tl-bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.dr-tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); border-radius: 8px; transform-origin: right; animation: grow .9s .2s var(--ease-out) both; }
.dr-timeline small { font-size: 12px; color: var(--text-3); }
.dr-vacant { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.dr-vacant svg { width: 34px; height: 34px; color: var(--text-3); }
.dr-vacant small { color: var(--text-3); font-size: 12.5px; }
.dr-notes { margin: 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; }
.drawer-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.drawer-foot .spacer { flex: 1; }

@media (max-width: 1100px) { .shops-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-main { grid-column: 1 / -1; } .ss-stat:nth-child(2) { border-inline-start: 0; } }
@media (max-width: 600px) {
  .shops-sum { grid-template-columns: minmax(0, 1fr); } .ss-stat { border-inline-start: 0; border-top: 1px solid var(--border); }
  .shops-bar .search { flex-basis: 100%; } .shops-bar .search .input { min-width: 0; }
  .shops-bar .seg { overflow-x: auto; max-width: 100%; }
  .rep-filters .seg, .month-nav .seg { overflow-x: auto; max-width: 100%; }
  .rep-filters .rep-dates { flex-wrap: wrap; } .rep-filters .rep-dates .input { width: 130px; }
  .mn-center b { min-width: 0; }
  .shops-bar select.input { width: auto !important; flex: 1; }
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .floor-occ { width: 100%; margin: 0; }
  .floor-rent { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .floor-rent br { display: none; }
}

/* ---------- Settings ---------- */
.set-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-nav { padding: 8px; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.set-nav button { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: start; color: var(--text); position: relative; transition: background var(--dur-fast); }
.set-nav button:hover { background: var(--surface-2); }
.set-nav button.on { background: var(--primary-soft); }
.set-nav button.on::before { content: ''; position: absolute; inset-inline-start: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.set-nav button b { display: block; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; }
.set-nav button small { display: block; font-size: 11.5px; color: var(--text-3); }
.set-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; transition: background var(--dur-fast), color var(--dur-fast); }
.set-ic svg { width: 17px; height: 17px; }
.set-nav button.on .set-ic { background: var(--navy); color: #fff; }
.set-in { animation: rise .32s var(--ease-out); }
.set-panel { overflow: hidden; }
.set-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.set-head h3 { margin: 0; font-size: 16px; }
.set-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.set-content { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
.set-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.set-foot .spacer { flex: 1; }
.set-foot .hint { display: flex; align-items: center; gap: 6px; }
.set-foot .hint svg { width: 15px; height: 15px; }
.set-dirty { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warning); opacity: 0; transform: translateY(4px); transition: opacity var(--dur), transform var(--dur); }
.set-dirty.on { opacity: 1; transform: none; }
.set-dirty svg { width: 15px; height: 15px; }
.set-sub h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-family: var(--font-head); }
.set-sub h4 svg { width: 16px; height: 16px; color: var(--gold); }
.set-sub + .set-sub { padding-top: 20px; border-top: 1px dashed var(--border); }
.set-list { margin: 6px 0 0; padding-inline-start: 18px; }
.set-list li { margin: 3px 0; }
.set-preview { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 16px 18px; background: var(--surface-2); }
.set-preview-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.set-preview-lbl svg { width: 14px; height: 14px; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; background: #fff; color: #000; padding: 14px 16px; border-radius: 6px; border-bottom: 2px solid #000; box-shadow: var(--shadow); }
.doc-head > div { display: flex; flex-direction: column; flex: 1; }
.doc-head .c { text-align: center; align-items: center; } .doc-head .l { text-align: left; }
.doc-head b { font-family: var(--font-head); font-size: 15px; }
.doc-head .c b { border: 1.5px solid #000; padding: 1px 14px; border-radius: 4px; }
.doc-head small { font-size: 11px; color: #444; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; }
.set-row b { display: block; font-size: 13.5px; } .set-row small { color: var(--text-3); font-size: 12px; }

/* Logo */
.logo-up { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.logo-up .grow { flex: 1; min-width: 0; }
.logo-up b { display: block; font-family: var(--font-head); font-size: 14px; }
.logo-up small { display: block; font-size: 12px; color: var(--text-3); margin: 2px 0 8px; }
.logo-box { width: 92px; height: 92px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); overflow: hidden; color: var(--text-3); }
.logo-box img { max-width: 84px; max-height: 84px; object-fit: contain; animation: rise .3s var(--ease-out); }
.logo-box svg { width: 34px; height: 34px; }
.logo-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.dh-brand { flex-direction: row !important; align-items: center; gap: 10px; }
.dh-brand > div { display: flex; flex-direction: column; }
.dh-brand img { height: 42px; width: auto; max-width: 120px; object-fit: contain; }
.brand-logo.has-logo { background: #fff; border-color: var(--gold); padding: 3px; overflow: hidden; }
.brand-logo.has-logo img { height: 100% !important; width: 100% !important; max-width: none !important; object-fit: contain; }
.login-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.login-logo img { max-height: 76px; }

/* Switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 22px; background: var(--border-strong); transition: background var(--dur); }
.switch i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--dur) var(--ease-out); }
.switch input:checked + i { background: var(--success); }
.switch input:checked + i::after { transform: translateX(-18px); }
.switch input:disabled + i { opacity: .45; cursor: not-allowed; }
.switch input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Currency */
.rate-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rate-box { padding: 20px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.rate-box > span { color: #c6d1df; font-size: 13px; }
.rate-box small { color: #9fb0c6; font-size: 12px; }
.rate-box small b { color: var(--gold); }
.rate-input { display: flex; align-items: center; gap: 10px; }
.rate-input .input { font-size: 26px; font-weight: 700; font-family: var(--font-head); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; padding: 8px 14px; }
.rate-input .input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 133, 74, .3); }
.rate-input b { font-size: 16px; color: var(--gold); }
.conv { padding: 18px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.conv h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-family: var(--font-head); }
.conv h4 svg { width: 16px; height: 16px; color: var(--gold); }
.conv-row { position: relative; }
.conv-row .input { padding-inline-start: 46px; font-size: 16px; font-weight: 600; }
.conv-cur { position: absolute; inset-inline-start: 1px; top: 1px; bottom: 1px; width: 40px; display: grid; place-items: center; background: var(--surface-3); border-radius: 0 6px 6px 0; font-weight: 700; color: var(--text-2); font-size: 13px; }
.conv-eq { text-align: center; color: var(--text-3); font-weight: 700; }

/* Categories */
.cat-search .input { max-width: 340px; }
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cat-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cat-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--head-bg); border-bottom: 1px solid var(--border); }
.cat-head h4 { margin: 0; font-size: 14px; font-family: var(--font-head); }
.cat-head .spacer { flex: 1; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; }
.cat-dot.income { background: var(--success); } .cat-dot.expense { background: var(--danger); }
.cat-list { max-height: 460px; overflow-y: auto; }
.cat-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); transition: background var(--dur-fast), opacity var(--dur); }
.cat-item:last-child { border-bottom: 0; }
.cat-item:hover { background: var(--hover); }
.cat-item .grow { flex: 1; min-width: 0; }
.cat-item b { display: block; font-weight: 600; font-size: 13.5px; }
.cat-item small { font-size: 11.5px; color: var(--text-3); }
.cat-item small .sys { color: var(--gold); font-weight: 600; }
.cat-item.off b { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* Account */
.profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile h3 { margin: 0 0 4px; font-size: 18px; }
.avatar.xl { width: 68px; height: 68px; font-size: 26px; border: 2px solid var(--gold); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.pw-meter i { height: 4px; border-radius: 4px; background: var(--surface-3); transition: background var(--dur); }
.pw-meter i.s1 { background: var(--danger); } .pw-meter i.s2 { background: var(--warning); }
.pw-meter i.s3 { background: var(--info); } .pw-meter i.s4 { background: var(--success); }
#pw-match svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Appearance */
.theme-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; }
.theme-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: start; color: var(--text); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.theme-card:hover { transform: translateY(-2px); }
.theme-card.on { border-color: var(--gold); }
.theme-card b { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 13.5px; margin-top: 6px; }
.theme-card b svg { width: 15px; height: 15px; }
.theme-card small { font-size: 11.5px; color: var(--text-3); }
.tc-prev { height: 84px; border-radius: 6px; display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 30% 1fr; gap: 5px; padding: 6px; }
.tc-prev i:nth-child(1) { grid-row: 1 / 3; border-radius: 3px; }
.tc-prev i { border-radius: 3px; }
.tc-prev.light { background: #f3f5f8; } .tc-prev.light i:nth-child(1) { background: #0f2a4a; } .tc-prev.light i:nth-child(2), .tc-prev.light i:nth-child(3) { background: #fff; border: 1px solid #e1e5eb; }
.tc-prev.dark { background: #0e141d; } .tc-prev.dark i:nth-child(1) { background: #0b1119; border: 1px solid #263244; } .tc-prev.dark i:nth-child(2), .tc-prev.dark i:nth-child(3) { background: #151d29; border: 1px solid #263244; }
.kbd-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.kbd-list > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kbd-list > div:last-child { border-bottom: 0; }

/* System */
.sys-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sys-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.sys-stat b { font-size: 20px; font-family: var(--font-head); }
.sys-stat small { font-size: 12px; color: var(--text-3); }
.backup-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--border); border-inline-start: 4px solid var(--success); flex-wrap: wrap; }
.backup-card.warn { border-inline-start-color: var(--warning); background: var(--warning-soft); }
.backup-card.danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.backup-card.ok { background: var(--success-soft); }
.backup-card .grow { flex: 1; min-width: 200px; }
.backup-card b { display: block; font-family: var(--font-head); }
.backup-card small { font-size: 12px; color: var(--text-2); }
.bk-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--text-2); }
.backup-card.danger .bk-ic { color: var(--danger); } .backup-card.warn .bk-ic { color: var(--warning); } .backup-card.ok .bk-ic { color: var(--success); }

@media (max-width: 1100px) { .sys-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .set-nav button { flex-shrink: 0; padding: 8px 10px; }
  .set-nav button small { display: none; }
  .set-nav button.on::before { display: none; }
  .rate-hero, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-content { padding: 16px; }
}

/* =========================================================
   Buttons v2 — one consistent, formal button system
   ========================================================= */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong);
  --b-sh: 0 1px 2px rgba(16, 24, 40, .07);
  position: relative; isolation: isolate; overflow: hidden;
  height: 38px; padding: 0 16px; gap: 8px; border-radius: 9px;
  border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-sh);
  font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .1px; line-height: 1;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .12s;
}
.btn svg.i { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover { --b-bd: var(--text-3); background: var(--b-bg); box-shadow: 0 6px 14px -8px rgba(16, 24, 40, .35); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--b-sh); transition-duration: .05s; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }

/* Primary: navy with a soft top highlight and a light sweep on hover */
.btn-primary {
  --b-bg: linear-gradient(180deg, #21507f 0%, var(--navy) 100%); --b-fg: #fff; --b-bd: #0b2140;
  --b-sh: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px -2px rgba(15, 42, 74, .55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.btn-primary:hover { --b-bg: linear-gradient(180deg, #275c91 0%, #13345c 100%); --b-bd: #0b2140; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -10px rgba(15, 42, 74, .75); }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(110%); transition: transform .6s ease; }
.btn-primary:hover::after { transform: translateX(-110%); }
:root[data-theme='dark'] .btn-primary { --b-bg: linear-gradient(180deg, #3468a6 0%, #24538a 100%); --b-bd: #1c4472; }

/* Secondary (default) look for cancel / close buttons in dialogs */
.modal-foot .btn-ghost, .drawer-foot .btn-ghost:not(.btn-icon) { --b-bg: var(--surface); --b-bd: var(--border-strong); --b-fg: var(--text-2); box-shadow: var(--b-sh); }
.modal-foot .btn-ghost:hover { --b-fg: var(--text); --b-bd: var(--text-3); }

/* Success: soft by default (repeated in tables), solid in dialogs */
.btn-success { --b-bg: var(--success-soft); --b-fg: var(--success); --b-bd: color-mix(in srgb, var(--success) 35%, transparent); }
.btn-success:hover { --b-bg: var(--success); --b-fg: #fff; --b-bd: var(--success); }
.modal-foot .btn-success, .month-nav .btn-success, .drawer-foot .btn-success {
  --b-bg: linear-gradient(180deg, #23915b 0%, #1a6f45 100%); --b-fg: #fff; --b-bd: #155a38;
  --b-sh: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px -2px rgba(29, 122, 76, .5);
}

/* Danger: outlined in lists, solid red where it confirms a destructive action */
.btn-danger { --b-bg: var(--surface); --b-fg: var(--danger); --b-bd: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover { --b-bg: var(--danger-soft); --b-bd: var(--danger); }
.modal-foot .btn-danger {
  --b-bg: linear-gradient(180deg, #c8382c 0%, #a41f15 100%); --b-fg: #fff; --b-bd: #8f1a11;
  --b-sh: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(180, 35, 24, .55);
}
.modal-foot .btn-danger:hover { --b-bg: linear-gradient(180deg, #d4483b 0%, #b0261b 100%); }

/* Ghost: quiet, no lift */
.btn-ghost { --b-bg: transparent; --b-bd: transparent; --b-fg: var(--text-2); box-shadow: none; }
.btn-ghost:hover { --b-bg: var(--surface-3); --b-bd: transparent; --b-fg: var(--text); box-shadow: none; transform: none; }

/* Sizes */
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn-sm svg.i { width: 14px; height: 14px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 9px; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.lg-submit { height: 48px; font-size: 15px; border-radius: 11px; }
.month-nav .btn-icon { border: 1px solid var(--border); }
.modal-foot .btn { min-width: 110px; }
.btn.loading::before { position: relative; z-index: 1; }

/* ---------- User menu (replaces the bare logout icon) ---------- */
.side-foot { position: relative; }
.user-chip { cursor: pointer; border-radius: 10px; padding: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s; width: 100%; background: none; color: inherit; font: inherit; text-align: start; }
.user-chip:hover, .user-chip[aria-expanded='true'] { background: var(--sidebar-hover); border-color: rgba(255, 255, 255, .08); }
.user-chip .uc-caret { color: var(--sidebar-muted); transition: transform .2s; }
.user-chip[aria-expanded='true'] .uc-caret { transform: rotate(180deg); }
.umenu { position: absolute; bottom: calc(100% - 4px); inset-inline: 12px; z-index: 60; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, .45); padding: 6px; transform-origin: bottom center; animation: umIn .18s var(--ease-out); }
.umenu[hidden] { display: none; }
@keyframes umIn { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-head b { display: block; font-family: var(--font-head); font-size: 13.5px; }
.um-head small { font-size: 11.5px; color: var(--text-3); }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: start; }
.um-item:hover, .um-item:focus-visible { background: var(--surface-3); outline: none; text-decoration: none; }
.um-item svg.i { width: 16px; height: 16px; color: var(--text-3); }
.um-item .um-kbd { margin-inline-start: auto; font-size: 11px; color: var(--text-3); }
.um-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.um-item.danger { color: var(--danger); }
.um-item.danger svg.i { color: var(--danger); }
.um-item.danger:hover { background: var(--danger-soft); }
body.nav-mini .umenu { inset-inline: auto; inset-inline-start: calc(100% + 8px); bottom: 8px; width: 250px; }

/* =========================================================
   Custom dropdowns (upgraded <select>)
   ========================================================= */
.cs { position: relative; min-width: 0; }
.field .cs, .form-grid .cs { width: 100%; }
.cs-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.cs-trigger { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; text-align: start; font: inherit; color: var(--text);
  background: var(--input-bg); background-image: none !important; padding-inline: 12px 10px !important; transition: border-color .15s, box-shadow .15s, background .15s; }
.cs-trigger:hover:not(:disabled) { border-color: var(--text-3); }
.cs-trigger:focus-visible, .cs-trigger.cs-open { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.cs-trigger:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.cs-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-trigger.cs-ph .cs-val { color: var(--text-3); }
.cs-chev { width: 16px !important; height: 16px !important; color: var(--text-3); flex-shrink: 0; transition: transform .2s var(--ease-out), color .15s; }
.cs-trigger.cs-open .cs-chev { transform: rotate(180deg); color: var(--primary); }
.cs-bad .cs-trigger { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.cs-pop { position: fixed; z-index: 400; max-height: 320px; display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 20px 44px -16px rgba(16, 24, 40, .4), 0 2px 6px rgba(16, 24, 40, .06);
  overflow: hidden; transform-origin: top center; animation: csIn .16s var(--ease-out); }
.cs-pop.cs-up { transform-origin: bottom center; }
.cs-pop.cs-out { animation: csOut .12s var(--ease-in) forwards; }
@keyframes csIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes csOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.cs-search { position: relative; padding: 8px; border-bottom: 1px solid var(--border); }
.cs-search svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 18px; width: 15px; height: 15px; color: var(--text-3); }
.cs-search input { width: 100%; padding: 8px 10px; padding-inline-start: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); outline: none; font-size: 13.5px; }
.cs-search input:focus { border-color: var(--primary); }
.cs-list { overflow-y: auto; padding: 5px; overscroll-behavior: contain; }
.cs-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 7px; cursor: pointer; font-size: 13.5px; line-height: 1.45; transition: background .08s; }
.cs-opt span { min-width: 0; }
.cs-opt.act { background: var(--surface-3); }
.cs-opt.sel { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.cs-opt.sel.act { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.cs-opt.ph { color: var(--text-3); font-size: 12.5px; }
.cs-opt.dis { opacity: .45; cursor: not-allowed; }
.cs-opt svg.i { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.4; }
.cs-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; }
.cs-back { position: fixed; inset: 0; z-index: 399; background: var(--overlay); animation: fadeIn .15s ease; }
.cs-back.cs-out { animation: fadeOut .12s ease forwards; }
.cs-sheet { inset: auto 0 0 0; max-height: 72vh; border-radius: 18px 18px 0 0; animation: sheetIn .25s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
.cs-sheet.cs-out { animation: sheetOut .14s var(--ease-in) forwards; }
.cs-sheet-head { padding: 14px 18px 10px; font-family: var(--font-head); font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--border); position: relative; }
.cs-sheet-head::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); }
.cs-sheet .cs-opt { padding: 13px 14px; font-size: 15px; }
@media (max-width: 640px) { .shops-bar .cs { width: auto !important; flex: 1 1 100%; } .cs-trigger { min-height: 44px; font-size: 16px; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }

/* =========================================================
   Phone layout
   ========================================================= */
@media (max-width: 640px) {
  /* Tables reflow into one card per row, each cell labelled by its column */
  .table-wrap { overflow: visible; }
  table.t, .t tbody, .t tfoot, .t tr, .t td { display: block; width: 100%; }
  .t thead { display: none; }
  .t tbody tr { margin: 10px; width: auto; padding: 6px 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface) !important; box-shadow: var(--shadow); }
  .t tbody tr:hover { background: var(--surface) !important; }
  .t td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 12px; border: 0; text-align: end !important; min-height: 34px; }
  .t td::before { content: attr(data-label); flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-3); text-align: start; }
  .t td[data-label=""]::before { display: none; }
  .t td.is-empty { display: none; }
  .t td > * { max-width: 70%; }
  .t td .who, .t td:first-child { justify-content: flex-start; }
  .t tbody td:first-child { border-bottom: 1px solid var(--border); padding-bottom: 9px; margin-bottom: 3px; }
  .t tbody td:first-child::before { display: none; }
  .t tbody td:first-child > * { max-width: none; }
  .t td .actions { justify-content: flex-start; flex-wrap: wrap; width: 100%; max-width: none; }
  .t td:has(.actions) { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 9px; }
  .t td:has(.actions)::before { display: none; }
  .t tfoot tr { margin: 6px 10px 12px; width: auto; border-radius: 10px; border: 2px solid var(--border-strong); background: var(--head-bg); padding: 4px 0; }
  .t tfoot td { border: 0 !important; }
  .t tfoot td:first-child { justify-content: flex-start; font-size: 14px; }
  .t tr.rep-grp td { justify-content: space-between; }
  .t .empty { width: 100%; }
  .rep-share-in { min-width: 120px; }
  .c-bar.sm { width: 90px; }

  /* Comfortable touch targets (≥ 40px) */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding-inline: 12px; }
  .btn-icon { min-width: 40px; min-height: 40px; }
  .seg button { min-height: 36px; padding-inline: 12px; }
  .floor-tabs button, .cchip { min-height: 36px; }
  .switch { width: 46px; height: 26px; } .switch i::after { width: 20px; height: 20px; } .switch input:checked + i::after { transform: translateX(-20px); }
  .input, select.input { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming into fields */
  .toast-x { padding: 8px; }

  /* Detail headers wrap instead of overflowing */
  .detail-head { padding: 16px; }
  .detail-head > div[style*="flex:1"] { min-width: 0 !important; flex: 1 1 0 !important; }
  .detail-head .tav { flex: 0 0 auto; }
  .detail-head .actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .detail-head h2 { font-size: 18px; }

  /* Modals become bottom sheets */
  .modal-back { align-items: flex-end; padding: 0; }
  .modal { max-width: none !important; border-radius: 16px 16px 0 0; max-height: 92vh; display: flex; flex-direction: column; animation: sheetIn .3s var(--ease-out) both; }
  .modal-back.closing .modal { animation: sheetOut .16s var(--ease-in) forwards; }
  .modal-body { overflow-y: auto; padding: 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
  .modal-head { padding: 14px 16px; }
  @keyframes sheetIn { from { transform: translateY(100%); } }
  @keyframes sheetOut { to { transform: translateY(100%); } }
  .drawer { width: 100%; }
  .pal-back { padding: 10px; align-items: flex-start; }
  .pal-list { max-height: 60vh; }
  .pal-foot { display: none; }

  /* Tighter summaries */
  .t-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  .t-stat .set-ic { width: 30px; height: 30px; }
  .t-stat-amt { margin: 0; text-align: start; }
  .t-stat-txt b .money { font-size: 14px; }
  .shops-bar > .btn-primary { width: 100%; }
  .greet-actions { width: 100%; } .greet-actions .btn { flex: 1; }
  .view { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .toasts { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
.overlay { display: none; }
@media (max-width: 1200px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(105%); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .overlay { display: block; position: fixed; inset: 0; z-index: 35; background: var(--overlay); }
  .main { margin-inline-start: 0; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .view { padding: 18px 16px 50px; }
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .rate-pill span.lbl { display: none; }
  .rep-hero-kpis, .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; min-width: 0; }
  .rep-hero-kpis > div:nth-child(3), .aging-col:nth-child(3) { border: 0; padding-inline-start: 0; }
  .rep-dates .input { width: 140px; }
}
@media (max-width: 560px) {
  .g-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .search .input { min-width: 0; width: 100%; }
  .search { flex: 1; }
  .kpi-value { font-size: 20px; }
}

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff !important; color: #000; }
  .sidebar, .topbar, .toolbar, .toasts, .modal-back, .no-print, .actions, .btn { display: none !important; }
  .main { margin: 0 !important; }
  .view { padding: 0 !important; max-width: none; animation: none; }
  .card { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; }
  .t th, .t td { color: #000 !important; border-color: #ccc !important; background: #fff !important; padding: 6px 8px; }
  .badge { background: none !important; color: #000 !important; border: 1px solid #999; }
  .print-title { display: block !important; }
  .rep-print-head { display: flex !important; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  .rep-print-head > div { display: flex; flex-direction: column; flex: 1; }
  .rep-print-head .c { text-align: center; }
  .rep-print-head .l { text-align: left; }
  .rep-print-head h2 { margin: 0; font-size: 18px; }
  .rep-print-head small { font-size: 11px; color: #444; }
  .rep-section-head h3 { border-color: #000 !important; }
  .rep-chart { height: 240px; page-break-inside: avoid; }
  .kpi { border: 1px solid #ccc !important; border-top: 2px solid #000 !important; padding: 8px 10px; }
  .kpi-icon { display: none; }
  .kpi-value { font-size: 15px; }
  .grid.g-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .grid.g-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .rep-bar { border: 1px solid #bbb; }
  .rep-bar > i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-t tr.rep-grp td { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-sign { display: flex !important; justify-content: space-between; margin-top: 40px; }
  .rep-sign > div { width: 40%; text-align: center; font-weight: 700; }
  .rep-sign span { display: block; border-top: 1px solid #000; margin-top: 40px; }
  a { color: #000 !important; }
  body.printing-doc .app, body.printing-doc > *:not(#print-area) { display: none !important; }
  body.printing-doc #print-area { display: block !important; }
}
.print-title { display: none; text-align: center; margin-bottom: 12px; }

/* First-run setup */
.setup-form .info-box { margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; }
.setup-form .info-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--info); }
.setup-form .field { margin-bottom: 12px; }

/* Account delete guard */
.acc-del:hover { color: var(--danger) !important; background: var(--danger-soft) !important; }
.del-block { text-align: center; }
.del-block p { margin: 8px 0; }
.del-ic { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--warning-soft); color: var(--warning); margin-bottom: 6px; }
.del-ic svg { width: 24px; height: 24px; }

/* Design style preview card */
.tc-prev.modern { background: #f2f4f9; padding: 8px; gap: 6px; }
.tc-prev.modern i { border-radius: 6px; background: #fff; box-shadow: 0 2px 6px -2px rgba(15, 27, 45, .2); }
.tc-prev.modern i:nth-child(1) { background: #fff; border: 1px solid #e6e9f1; box-shadow: 0 4px 10px -4px rgba(15, 27, 45, .25); }

/* ---------- Sectioned forms ---------- */
.form-sec { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-grid > .form-sec:first-child, .form-grid > .full:first-child + .form-sec { margin-top: 0; padding-top: 4px; border-top: 0; }
.form-sec-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); }
.form-sec-ic svg { width: 17px; height: 17px; }
.form-sec b { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--text); }
.form-sec small { display: block; font-size: 12px; color: var(--text-3); }
.dur-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dur-chip { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer;
  font-family: var(--font-head); font-size: 13px; font-weight: 500; transition: all .15s; }
.dur-chip:hover { border-color: var(--primary); color: var(--primary); }
.dur-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(16, 40, 74, .7); }
.c-summary { border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); padding: 14px 16px; animation: rise .3s var(--ease-out); }
.cs-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--primary); margin-bottom: 10px; }
.cs-title svg { width: 16px; height: 16px; }
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs-grid > div { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-grid > div > span { font-size: 11.5px; color: var(--text-3); }
.cs-grid b { font-family: var(--font-head); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-grid .hl { background: var(--navy); border-color: var(--navy); }
.cs-grid .hl > span { color: #c6d1df; } .cs-grid .hl b, .cs-grid .hl b .money { color: #fff; }
.cs-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 12.5px; font-weight: 600; }
.cs-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.modal-body .info-box svg { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 4px; color: var(--info); }
@media (max-width: 640px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ===================== National ID card photos ===================== */
.id-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.id-tile { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.id-tile.over { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.id-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.id-drop { position: relative; display: grid; place-items: center; aspect-ratio: 1.586; margin: 10px; border-radius: 10px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); overflow: hidden; transition: background .2s, border-color .2s; }
.id-drop:hover, .id-drop:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); outline: none; }
.id-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.id-tile.has .id-drop { border-style: solid; border-color: var(--border); background: #000; }
.id-tile.has .id-drop img { display: block; animation: idIn .35s ease; }
.id-tile.has .id-empty { display: none; }
.id-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px; color: var(--muted); }
.id-empty b { color: var(--text); font-size: 14px; }
.id-empty small { font-size: 11.5px; max-width: 200px; line-height: 1.5; }
.id-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 4px; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent); }
.id-ic svg { width: 22px; height: 22px; }
.id-busy { position: absolute; inset: 0; display: none; place-items: center; gap: 8px; background: color-mix(in srgb, var(--surface) 85%, transparent); font-size: 13px; }
.id-busy i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
.id-tile.busy .id-busy { display: grid; }
.id-bar { display: flex; align-items: center; gap: 6px; padding: 0 10px 10px; min-height: 36px; }
.id-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.id-tag svg, .id-ok svg { width: 15px; height: 15px; }
.id-ok { display: none; align-items: center; gap: 3px; font-size: 11.5px; color: var(--success); }
.id-tile.has .id-ok { display: inline-flex; }
.id-bar .btn { display: none; }
.id-tile.has .id-bar .btn { display: inline-flex; }
@keyframes idIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.id-card-row .card-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.id-card-row .card-head h3 svg { width: 18px; height: 18px; color: var(--primary); }
.id-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; padding: 14px 16px 16px; }
.id-thumb { position: relative; aspect-ratio: 1.586; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); padding: 0; cursor: pointer; font: inherit; color: inherit; }
.id-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.id-thumb:hover img { transform: scale(1.05); }
.id-thumb > span { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 18px 10px 7px; font-size: 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.id-thumb > span svg { width: 14px; height: 14px; }
.id-thumb.none { display: grid; place-items: center; align-content: center; gap: 3px; cursor: default; border-style: dashed; color: var(--muted); text-align: center; }
.id-thumb.none > svg { width: 22px; height: 22px; }
.id-thumb.none > span { position: static; background: none; padding: 0; color: var(--text); font-weight: 600; }
.id-thumb.none small { font-size: 11px; }
.id-thumb.none .btn { margin-top: 4px; }
.id-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.id-view figure { margin: 0; }
.id-view img { width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; background: #000; }
.id-view figcaption { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
@media (max-width: 640px) {
  .id-up { grid-template-columns: minmax(0, 1fr); }
  .id-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 12px; }
}

/* ===================== Coming-soon page (attendance) ===================== */
.nav-soon { margin-inline-start: auto; font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--gold, #c9a227) 22%, transparent); color: var(--gold, #c9a227); }
.sidebar.collapsed .nav-soon { display: none; }
.soon-page { max-width: 920px; margin: 0 auto; display: grid; gap: 16px; }
.soon-hero { text-align: center; padding: 40px 24px 34px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%), var(--surface); }
.soon-hero h2 { margin: 12px 0 8px; font-size: 24px; }
.soon-hero p { margin: 0 auto; max-width: 520px; color: var(--muted); line-height: 1.9; }
.soon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 99px; font-size: 13px; font-weight: 700;
  color: var(--gold, #c9a227); background: color-mix(in srgb, var(--gold, #c9a227) 15%, transparent); border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 35%, transparent); }
.soon-chip svg { width: 15px; height: 15px; }
.soon-art { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; display: grid; place-items: center; }
.soon-fp { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000)); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--primary) 70%, transparent); position: relative; z-index: 1; overflow: hidden; }
.soon-fp svg { width: 46px; height: 46px; stroke-width: 1.6; }
.soon-scan { position: absolute; z-index: 2; width: 84px; height: 3px; border-radius: 3px; background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: fpScan 2.4s ease-in-out infinite; }
.soon-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); animation: fpPulse 2.4s ease-out infinite; }
.soon-ring.r2 { animation-delay: 1.2s; }
@keyframes fpScan { 0%, 100% { transform: translateY(-36px); opacity: .2; } 50% { transform: translateY(36px); opacity: 1; } }
@keyframes fpPulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.soon-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.soon-feat { display: flex; gap: 12px; align-items: flex-start; padding: 16px; opacity: .92; }
.soon-feat b { display: block; margin-bottom: 3px; }
.soon-feat small { color: var(--muted); line-height: 1.6; }
.sf-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.sf-ic svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .soon-feats { grid-template-columns: minmax(0, 1fr); } .soon-hero { padding: 30px 16px 26px; } }
@media (prefers-reduced-motion: reduce) { .soon-scan, .soon-ring { animation: none; } }

/* ===================== Delete-contract dialog ===================== */
.btn-ghost.danger:hover { color: var(--danger); background: var(--danger-soft); }
.delc { display: grid; gap: 14px; }
.delc-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.delc-sum > div > span { display: block; font-size: 12px; color: var(--text-3); }
.delc-sum b { font-size: 14px; }
.delc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.delc-list li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.delc-list li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.delc-list li.bad { background: var(--danger-soft); color: var(--danger); }
.delc-list li.warn { background: var(--warning-soft); color: var(--warning); }
.delc-list li.ok { background: var(--success-soft); color: var(--success); }
.delc-ok { font-weight: 600; }
@media (max-width: 640px) { .delc-sum { grid-template-columns: minmax(0, 1fr); } }
/* Dialogs opened from a side panel must sit above it */
.drawer-back ~ .modal-back { z-index: 120; }

/* ===================== Company / units ===================== */
.ub-ic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: #fff;
  background: linear-gradient(140deg, var(--navy, #10284a), var(--navy-2, #1a3a66)); box-shadow: 0 6px 14px -8px rgba(16, 40, 74, .7); }
.ub-ic svg { width: 18px; height: 18px; color: var(--gold, #b38b4d); }
.ub-ic.sm { width: 28px; height: 28px; border-radius: 9px; vertical-align: middle; }
.ub-ic.sm svg { width: 15px; height: 15px; }
.ub-ic.lg { width: 46px; height: 46px; border-radius: 14px; }
.ub-ic.lg svg { width: 22px; height: 22px; }

/* Unit switcher under the brand */
.unit-sw { position: relative; padding: 10px 12px 2px; }
.unit-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; cursor: pointer; text-align: start;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; transition: border-color .2s, background .2s, box-shadow .2s; }
.unit-btn:not([disabled]):hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--surface-3); }
.unit-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.unit-btn[disabled] { cursor: default; opacity: 1; }
.ub-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ub-txt small { font-size: 11px; color: var(--text-3); }
.ub-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-caret { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; flex: none; }
.unit-btn[aria-expanded="true"] .ub-caret { transform: rotate(180deg); }
.unit-pop { position: absolute; z-index: 70; inset-inline: 12px; top: calc(100% + 4px); padding: 6px; border-radius: 14px; max-height: 60vh; overflow: auto;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: modalIn .18s ease both; }
.up-head { font-size: 11px; font-weight: 700; color: var(--text-3); padding: 6px 8px 4px; }
.up-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; text-align: start; font: inherit; }
.up-opt:hover, .up-opt:focus-visible { background: var(--surface-3); outline: none; }
.up-opt.on { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.up-opt .grow { display: flex; flex-direction: column; min-width: 0; }
.up-opt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-opt small { font-size: 11px; color: var(--text-3); }
.up-opt > svg.i { width: 16px; height: 16px; color: var(--primary); }
.up-foot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; display: grid; gap: 2px; }
.up-link { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.up-link:hover { background: var(--surface-3); color: var(--primary); }
.up-link svg { width: 16px; height: 16px; }
body.nav-mini .unit-sw { padding: 8px 10px 0; }
@media (min-width: 901px) {
  body.nav-mini .ub-txt, body.nav-mini .ub-caret { display: none; }
  body.nav-mini .unit-btn { justify-content: center; padding: 6px; }
  body.nav-mini .unit-pop { inset-inline: auto; inset-inline-start: calc(100% + 8px); top: 0; width: 260px; }
}
.greet-unit { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); }
.greet-unit svg { width: 15px; height: 15px; }
.no-unit { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.no-unit .card { max-width: 440px; }

/* Company overview */
.co-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.co-hero > div { flex: 1; min-width: 220px; }
.co-hero h2 { margin: 0 0 4px; font-size: 22px; }
.co-hero p { margin: 0; color: var(--text-3); font-size: 13px; }
.co-grid, .u-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.co-card, .u-card { border-radius: var(--radius, 16px); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.co-card { cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.co-card:hover, .co-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); outline: none; }
.co-card.off, .u-card.off { opacity: .6; }
.co-card header, .u-card header { display: flex; align-items: center; gap: 10px; }
.co-card header .grow, .u-card header .grow { display: flex; flex-direction: column; min-width: 0; }
.co-card header b, .u-card header b { font-size: 15px; }
.co-card header small, .u-card header small { font-size: 12px; color: var(--text-3); }
.co-month { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.co-month > div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.co-month > div.hl { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.co-month span { display: block; font-size: 11px; color: var(--text-3); }
.co-month b { font-size: 13px; }
.co-facts, .u-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.co-facts li, .u-meta li { display: flex; align-items: center; gap: 7px; }
.co-facts li b { margin-inline-start: auto; color: var(--text); }
.co-facts svg, .u-meta svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.co-card footer { margin-top: auto; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 12.5px; color: var(--primary); font-weight: 600; }
.co-rank { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); }
.co-rank .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--text-2); flex: none; }
.co-rank .grow { min-width: 0; }
.co-rank .grow b { font-size: 13px; }
.co-bar { height: 6px; border-radius: 6px; background: var(--surface-3); margin-top: 5px; overflow: hidden; }
.co-bar i { display: block; height: 100%; border-radius: 6px; background: var(--success); }
.co-bar.neg i { background: var(--danger); }
.co-intro { display: flex; align-items: center; gap: 10px; min-width: 0; }
.co-intro > svg { width: 22px; height: 22px; color: var(--primary); flex: none; }
.co-intro div { display: flex; flex-direction: column; }
.co-intro small { color: var(--text-3); font-size: 12px; }

/* Units management */
.u-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.u-feats span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.u-feats svg { width: 13px; height: 13px; }
.u-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.u-stats div { text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); }
.u-stats b { display: block; font-size: 17px; }
.u-stats span { font-size: 11px; color: var(--text-3); }
.u-card footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }

/* User and units picker */
.uu-pick { display: grid; gap: 10px; }
.uu-all, .uu-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s; }
.uu-all .grow, .uu-opt .grow { display: flex; flex-direction: column; min-width: 0; }
.uu-all small, .uu-opt small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.uu-all input, .uu-opt input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.uu-all:has(input:checked), .uu-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.uu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; transition: opacity .2s; }
.uu-pick.all .uu-list { opacity: .4; pointer-events: none; }
.uu-opt.off { opacity: .7; }
.uu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uu-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.uu-chip svg { width: 13px; height: 13px; }
.uu-chip.all { background: color-mix(in srgb, var(--gold, #b38b4d) 16%, transparent); color: var(--gold, #b38b4d); font-weight: 600; }
.uu-chip.warn { background: var(--warning-soft); color: var(--warning); }
@media (max-width: 640px) { .co-month { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Reset data (company manager) ===================== */
.set-nav button.danger .set-ic { background: var(--danger-soft); color: var(--danger); }
.rs-warn { display: flex; gap: 10px; align-items: flex-start; }
.rs-warn > svg { width: 20px; height: 20px; flex: none; color: var(--warning); margin-top: 2px; }
.rs-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 14px 0; }
.rs-part { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s; }
.rs-part input { width: 18px; height: 18px; accent-color: var(--danger); flex: none; }
.rs-part .grow { display: flex; flex-direction: column; min-width: 0; }
.rs-part small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.rs-part:has(input:checked) { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.rs-part.locked { opacity: .75; cursor: default; }
.rs-n { flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-3); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.rs-keep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); padding: 10px 12px; border-radius: 10px; background: var(--success-soft); }
.rs-keep svg { width: 16px; height: 16px; color: var(--success); }
.rs-confirm { display: grid; gap: 14px; }