/* Taxblock HRMS web — theme ported from the previous HRMS client (Inter/Outfit, hsl tokens, sidebar shell). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --background: hsl(210 40% 98%);
  --foreground: hsl(222.2 84% 4.9%);
  --card: hsl(0 0% 100%);
  --primary: hsl(226 71% 40%);
  --primary-fg: hsl(210 40% 98%);
  --primary-10: hsl(226 71% 40% / 0.1);
  --primary-5: hsl(226 71% 40% / 0.05);
  --secondary: hsl(214 32% 91%);
  --muted: hsl(210 40% 96%);
  --muted-fg: hsl(215.4 16.3% 46.9%);
  --border: hsl(214.3 31.8% 91.4%);
  --ring: hsl(226 71% 40%);
  --destructive: hsl(0 84.2% 60.2%);
  --radius: 0.75rem;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--foreground); font: 14px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }
a { color: inherit; }
button { font: inherit; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* ---------- auth screens ---------- */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: linear-gradient(135deg, hsl(226 71% 40% / 0.06), hsl(210 40% 98%) 40%, hsl(243 75% 59% / 0.06)); }
.auth .card { width: 100%; max-width: 420px; }
.auth .logo { height: 72px; width: auto; display: block; margin: 0 auto 10px; }
.auth h2 { font-size: 24px; text-align: center; }
.auth .sub { text-align: center; color: var(--muted-fg); margin: 4px 0 18px; }

/* ---------- cards / common ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card-h { padding: 16px 20px 0; }
.card-h h3 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-b { padding: 16px 20px 20px; }
.card.pad { padding: 20px 24px; }
.muted { color: var(--muted-fg); }
.small { font-size: 12px; }
.xs { font-size: 11px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 24px; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.right { margin-left: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: var(--muted-fg); padding: 40px 16px; }
.empty b { display: block; color: var(--foreground); font-size: 16px; margin-bottom: 4px; }

/* page header band (Employees-style) */
.band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--primary-10), hsl(214 100% 97%), hsl(226 100% 97%));
  border: 1px solid var(--primary-10); border-radius: 16px; padding: 24px; }
.band h1, .page h1 { font-size: 30px; font-weight: 700; }
.band h1.grad { background: linear-gradient(90deg, var(--primary), hsl(243 75% 50%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band p, .page .lead { color: var(--muted-fg); margin: 4px 0 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid transparent; background: var(--primary); color: var(--primary-fg); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: filter .15s ease, background .15s ease; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.shadow { box-shadow: 0 10px 15px -3px hsl(226 71% 40% / 0.2); }
.btn.outline { background: var(--card); color: var(--foreground); border-color: var(--border); }
.btn.outline:hover { background: var(--muted); filter: none; }
.btn.ghost { background: transparent; color: var(--muted-fg); }
.btn.ghost:hover { background: var(--muted); color: var(--foreground); filter: none; }
.btn.danger { background: var(--destructive); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: 34px; padding: 0; }
.btn.block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; }
.field .hint { font-size: 11px; color: var(--muted-fg); }
.input, select.input, textarea.input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); }
textarea.input { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.input:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: transparent; }
.input[readonly] { background: var(--muted); color: var(--muted-fg); }
.form { display: grid; gap: 14px; }
.form .g2, .form .g3 { gap: 14px; }
.suffix { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.suffix .input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.suffix span { display: flex; align-items: center; padding: 0 12px; background: var(--muted); color: var(--muted-fg); font-weight: 500; }
.search { position: relative; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-fg); }
.search .input { padding-left: 34px; width: 256px; }
.alert { padding: 12px 14px; border-radius: 8px; font-size: 13px; text-align: center; }
.alert.error { background: hsl(0 86% 97%); color: hsl(0 72% 42%); }
.alert.ok { background: hsl(152 76% 95%); color: hsl(161 94% 24%); }
.fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 16px; }
.fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- badges / avatar ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; max-width: 100%; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.active { background: hsl(152 81% 96%); color: hsl(161 94% 24%); border-color: hsl(152 76% 80%); }
.badge.inactive { background: hsl(0 86% 97%); color: hsl(0 72% 42%); border-color: hsl(0 93% 87%); }
.badge.dept { background: hsl(251 91% 97%); color: hsl(263 70% 45%); border-color: hsl(252 95% 90%); }
.badge.role { background: var(--primary-10); color: var(--primary); }
.badge.soft { background: var(--muted); color: var(--muted-fg); }
.badge.pin { background: hsl(43 96% 93%); color: hsl(32 81% 29%); }
.chip { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: hsl(226 71% 40% / 0.85); background: var(--primary-5); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px;
  background: linear-gradient(135deg, #3b82f6, #4f46e5); border: 2px solid var(--primary-10); box-shadow: 0 0 0 2px var(--primary-5); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: 11px; }
.avatar.lg { width: 72px; height: 72px; font-size: 22px; }
.avatar.intern { background: linear-gradient(135deg, #fbbf24, #f97316); }
.avatar.contract, .avatar.consultant { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.avatar.inactive { background: linear-gradient(135deg, #9ca3af, #6b7280); }
.avatar.me { background: linear-gradient(135deg, #8b5cf6, #9333ea); border-color: #ddd6fe; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; white-space: nowrap; background: var(--primary-5); }
.tbl td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tr:hover td { background: hsl(226 71% 40% / 0.02); }
.tbl .actions { text-align: right; white-space: nowrap; }
.tbl .name { font-weight: 600; }
.pager { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

/* ---------- filter tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; border: 2px solid var(--border); background: var(--card); cursor: pointer; text-align: left; transition: box-shadow .15s ease, transform .1s ease; }
.tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), 0 10px 15px -3px hsl(226 71% 40% / 0.2); }
.tile .ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.tile .ico svg { width: 22px; height: 22px; }
.tile .n { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
.tile .l { font-size: 12px; color: var(--muted-fg); margin-top: 4px; }
.tile.all { background: linear-gradient(135deg, hsl(214 100% 97%), hsl(226 100% 97%), hsl(270 100% 98%)); border-color: hsl(213 97% 87%); }
.tile.all .ico { background: linear-gradient(135deg, #3b82f6, #4f46e5); box-shadow: 0 10px 15px -3px rgba(59,130,246,.3); }
.tile.active-t { background: linear-gradient(135deg, hsl(152 81% 96%), hsl(166 76% 97%)); border-color: hsl(152 76% 80%); }
.tile.active-t .ico { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 10px 15px -3px rgba(16,185,129,.3); }
.tile.inactive-t { background: linear-gradient(135deg, hsl(0 86% 97%), hsl(24 100% 97%)); border-color: hsl(0 93% 87%); }
.tile.inactive-t .ico { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 10px 15px -3px rgba(239,68,68,.3); }
/* compact single-row variant (Tasks: Total + 5 statuses) */
.tiles.row6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tiles.row6 .tile { gap: 10px; padding: 12px 14px; border-radius: 14px; }
.tiles.row6 .tile .ico { width: 34px; height: 34px; border-radius: 10px; }
.tiles.row6 .tile .ico svg { width: 18px; height: 18px; }
.tiles.row6 .tile .n { font-size: 20px; }
.tiles.row6 .tile .l { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1279px) { .tiles.row6 .tile .ico { display: none; } }
.tile.st-todo .ico { background: linear-gradient(135deg, #94a3b8, #64748b); }
.tile.st-in_progress .ico { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.tile.st-pending .ico { background: linear-gradient(135deg, #fbbf24, #d97706); }
.tile.st-completed .ico { background: linear-gradient(135deg, #34d399, #059669); }
.tile.st-cancelled .ico { background: linear-gradient(135deg, #f87171, #dc2626); }

/* ---------- rainbow cards (departments / teams) ---------- */
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.rcard { border-radius: var(--radius); border: 1px solid; padding: 12px; cursor: pointer; display: flex; flex-direction: column; height: 96px; justify-content: space-between; transition: transform .1s ease, box-shadow .15s ease; }
.rcard:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.rcard.on { box-shadow: 0 0 0 2px var(--primary); }
.rcard .t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.rcard .t .ico { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.rcard .t .ico svg { width: 14px; height: 14px; }
.rcard .c { display: flex; align-items: baseline; gap: 4px; border-top: 1px solid hsl(0 0% 0% / 0.06); padding-top: 6px; }
.rcard .c b { font-size: 18px; }
.rcard .c span { font-size: 10px; color: var(--muted-fg); }
.rc0 { background: hsl(214 100% 97%); border-color: hsl(213 97% 87%); } .rc0 .ico { background: hsl(213 94% 68% / .25); color: #1d4ed8; } .rc0 b { color: #1d4ed8; }
.rc1 { background: hsl(152 81% 96%); border-color: hsl(152 76% 80%); } .rc1 .ico { background: hsl(160 84% 39% / .2); color: #047857; } .rc1 b { color: #047857; }
.rc2 { background: hsl(270 100% 98%); border-color: hsl(269 100% 92%); } .rc2 .ico { background: hsl(271 91% 65% / .2); color: #6d28d9; } .rc2 b { color: #6d28d9; }
.rc3 { background: hsl(33 100% 96%); border-color: hsl(32 98% 83%); } .rc3 .ico { background: hsl(25 95% 53% / .2); color: #c2410c; } .rc3 b { color: #c2410c; }
.rc4 { background: hsl(327 73% 97%); border-color: hsl(326 85% 90%); } .rc4 .ico { background: hsl(330 81% 60% / .2); color: #be185d; } .rc4 b { color: #be185d; }
.rc5 { background: hsl(183 100% 96%); border-color: hsl(185 96% 80%); } .rc5 .ico { background: hsl(189 94% 43% / .2); color: #0e7490; } .rc5 b { color: #0e7490; }
.rc6 { background: hsl(48 100% 96%); border-color: hsl(48 96% 77%); } .rc6 .ico { background: hsl(45 93% 47% / .25); color: #a16207; } .rc6 b { color: #a16207; }
.rc7 { background: hsl(226 100% 97%); border-color: hsl(228 96% 89%); } .rc7 .ico { background: hsl(239 84% 67% / .2); color: #4338ca; } .rc7 b { color: #4338ca; }

/* ---------- pill tabs (Settings) ---------- */
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 500; cursor: pointer; background: var(--card); display: inline-flex; align-items: center; gap: 6px; }
.pill svg { width: 14px; height: 14px; }
.pill.p0 { border-color: hsl(32 98% 83%); background: hsl(48 100% 96%); color: #b45309; } .pill.p0.on { background: #d97706; color: #fff; border-color: #d97706; }
.pill.p1 { border-color: hsl(152 76% 80%); background: hsl(152 81% 96%); color: #047857; } .pill.p1.on { background: #059669; color: #fff; border-color: #059669; }
.pill.p2 { border-color: hsl(291 93% 90%); background: hsl(289 100% 98%); color: #a21caf; } .pill.p2.on { background: #c026d3; color: #fff; border-color: #c026d3; }
.pill.p3 { border-color: hsl(269 100% 92%); background: hsl(270 100% 98%); color: #6d28d9; } .pill.p3.on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.pill.p4 { border-color: hsl(213 97% 87%); background: hsl(214 100% 97%); color: #1d4ed8; } .pill.p4.on { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ---------- field rows (Profile) ---------- */
.frow { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.frow:last-child { border-bottom: 0; }
.frow .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-fg); flex-shrink: 0; }
.frow .ico svg { width: 15px; height: 15px; }
.frow .k { font-size: 11px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .04em; }
.frow .v { font-weight: 500; word-break: break-word; }

/* ---------- lists ---------- */
.list { display: grid; gap: 0; }
.li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.li:last-child { border-bottom: 0; }
.li .who b { display: block; font-size: 13px; }
.li .who span { font-size: 12px; color: var(--muted-fg); }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; backdrop-filter: blur(2px); }
.modal { background: var(--card); border-radius: 14px; width: 100%; max-width: 640px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.modal.wide { max-width: 900px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-h h3 { font-size: 17px; }
.modal-b { padding: 20px; overflow: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }

/* ---------- toast ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 200; }
.toast { background: var(--foreground); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); animation: toast-in .2s ease; }
.toast.error { background: var(--destructive); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- app shell ---------- */
.shell { min-height: 100dvh; display: flex; }
.sidebar { display: none; width: 224px; flex-shrink: 0; border-right: 1px solid var(--border); background: hsl(0 0% 100% / .5); backdrop-filter: blur(4px); height: 100dvh; position: sticky; top: 0; flex-direction: column; }
.sidebar .logo-box { padding: 20px 16px; border-bottom: 1px solid hsl(214 32% 91% / .5); }
.sidebar .logo-box img { height: 56px; width: auto; max-width: 190px; object-fit: contain; object-position: left; display: block; }
.sidebar nav { flex: 1; padding: 12px 8px; display: grid; gap: 2px; align-content: start; overflow: auto; }
.nav-a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; border-radius: 8px; color: var(--muted-fg); text-decoration: none; border-left: 3px solid transparent; transition: background .15s ease; }
.nav-a svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-a:hover { background: hsl(210 40% 96% / .6); }
.nav-a.on { font-weight: 600; }
.nav-a.on.c-violet  { background: linear-gradient(90deg, #ede9fe, #faf5ff); color: #6d28d9; border-left-color: #8b5cf6; box-shadow: 0 2px 8px -2px rgba(139,92,246,.3); }
.nav-a.on.c-emerald { background: linear-gradient(90deg, #d1fae5, #f0fdf4); color: #047857; border-left-color: #10b981; box-shadow: 0 2px 8px -2px rgba(16,185,129,.3); }
.nav-a.on.c-cyan    { background: linear-gradient(90deg, #cffafe, #f0fdfa); color: #0e7490; border-left-color: #06b6d4; box-shadow: 0 2px 8px -2px rgba(6,182,212,.3); }
.nav-a.on.c-indigo  { background: linear-gradient(90deg, #e0e7ff, #eff6ff); color: #4338ca; border-left-color: #6366f1; box-shadow: 0 2px 8px -2px rgba(99,102,241,.3); }
.nav-a.on.c-slate   { background: linear-gradient(90deg, #f1f5f9, #f9fafb); color: #334155; border-left-color: #64748b; box-shadow: 0 2px 8px -2px rgba(100,116,139,.3); }
.nav-a.on.c-blue    { background: linear-gradient(90deg, #dbeafe, #f0f9ff); color: #1d4ed8; border-left-color: #3b82f6; box-shadow: 0 2px 8px -2px rgba(59,130,246,.3); }
.nav-a.on.c-pink    { background: linear-gradient(90deg, #fce7f3, #fff1f2); color: #be185d; border-left-color: #ec4899; }
.nav-a.on.c-green   { background: linear-gradient(90deg, #dcfce7, #f7fee7); color: #15803d; border-left-color: #22c55e; }
.nav-a.on.c-amber   { background: linear-gradient(90deg, #fef3c7, #fefce8); color: #b45309; border-left-color: #f59e0b; }
.nav-a .soon { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); background: var(--muted); padding: 2px 6px; border-radius: 999px; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; position: sticky; top: 0; z-index: 30; height: 56px; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border); background: hsl(210 40% 98% / .9); backdrop-filter: blur(6px); }
.topbar .who { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; text-decoration: none; }
.topbar .who:hover { background: hsl(210 40% 96% / .6); }
.topbar .who span { font-size: 13px; font-weight: 500; max-width: 160px; }
.mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 50; }
.mobilebar img { height: 40px; width: auto; max-width: min(180px, calc(100vw - 8rem)); object-fit: contain; }
.mobilenav { position: sticky; top: 61px; z-index: 40; border-bottom: 1px solid var(--border); background: hsl(210 40% 98% / .95); backdrop-filter: blur(6px); overflow-x: auto; scrollbar-width: none; }
.mobilenav::-webkit-scrollbar { display: none; }
.mobilenav nav { display: flex; gap: 8px; padding: 8px 12px; min-width: max-content; }
.mnav { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted-fg); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mnav svg { width: 14px; height: 14px; }
.mnav.on { border-color: transparent; color: var(--primary); background: var(--primary-10); }
main.page { flex: 1; padding: 12px; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; gap: 28px; align-content: start; }
.footer { color: var(--muted-fg); font-size: 11px; text-align: center; padding: 16px; }

@media (min-width: 1024px) {
  .sidebar { display: flex; }
  .topbar { display: flex; }
  .mobilebar, .mobilenav { display: none; }
  main.page { padding: 40px 48px 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) { main.page { padding: 24px 32px; } }
@media (max-width: 767px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles .tile:first-child { grid-column: span 2; }
  .tiles.row6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tiles.row6 .tile:first-child { grid-column: auto; }
  .tiles.row6 .tile { padding: 10px 12px; }
  .search .input { width: 100%; }
  .band { padding: 18px; }
  .band h1, .page h1 { font-size: 24px; }
  .card.pad { padding: 16px; }
  .tbl .hide-m { display: none; }
}

/* ---------- impersonation ---------- */
.impbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #f59e0b; color: #451a03; font-size: 13px; font-weight: 500; border-bottom: 1px solid #b45309; }
.impbar span { display: inline-flex; align-items: center; gap: 8px; }
.impbar svg { width: 16px; height: 16px; }
.impbar .btn { background: #fef3c7; color: #78350f; height: 28px; }
.access-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.access-row { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.access-row:last-child { border-bottom: 0; }
@media (max-width: 767px) { .access-row { grid-template-columns: 1fr; } }

/* ---------- platform operator console (taxblock.co/operator) ---------- */
.opshell { min-height: 100vh; background: var(--background); }
.opbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--border); }
.opbar img { height: 30px; }
.opbar b { font-family: var(--font-display); font-size: 15px; }
.oppage { max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; }
.tiles.op-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.op-h svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .opbar { padding: 10px 16px; }
  .oppage { padding: 20px 16px 40px; }
  .tiles.op-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opbar .hide-m { display: none; }
  .oppage .between > .row { width: 100%; }
  .oppage .between .search { flex: 1; min-width: 0; }
  .oppage .between .search .input { width: 100%; }
  .oppage .tbl td.actions .op-open-l { display: none; }
}
.oppage .tbl td.actions { white-space: nowrap; }