@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Royal Purple & Lavender theme. "--lime" is the historical name of the
     primary accent token — kept so no markup/JS has to change. */
  --lime: #7652B5;
  --lime-rgb: 118,82,181;
  --lime-hover: #634498;

  --charcoal: #5B3F8C;
  --charcoal-2: #4C3475;

  --bg: #F8F6FC;
  --surface: #FFFFFF;
  --surface-2: #F1ECF9;

  --text: #252033;
  --muted: #777087;
  --line: #E8E1F2;

  --accent-soft: #EEE7FA;

  --success: #459B62;
  --warning: #D99136;
  --info: #528BC5;
  --danger: #D94B4B;

  --success-soft: #E8F5EC;
  --warning-soft: #FFF2DF;
  --info-soft: #E8F1FC;
  --danger-soft: #FCEAEA;

  --radius: 14px;
  --shadow: 0 8px 28px rgba(91,63,140,.08);

  /* derived helpers (not colors of their own) */
  --shadow-sm: 0 1px 2px rgba(91,63,140,.04), 0 4px 14px rgba(91,63,140,.05);
  --ring: 0 0 0 3px rgba(var(--lime-rgb),.16);
  --purple: var(--charcoal);
  --sidebar-text: #D6CCEB;     /* readable lavender on the purple sidebar */
  --sidebar-muted: #B3A0D6;    /* sub-labels on the sidebar */
  --sidebar-width: 256px;
}
[data-accent="onyx"] {
  --lime: #d4b671;
  --lime-rgb: 212,182,113;
  --lime-hover: #b89a52;
  --charcoal: #121214;
  --charcoal-2: #1c1c1f;
}
[data-theme="dark"] {
  /* Same purple family, darkened — so the dark toggle still feels like the brand. */
  --bg: #110E18;
  --surface: #1A1625;
  --surface-2: #231D31;
  --text: #EEEAF6;
  --muted: #A59DB8;
  --line: #2F2840;
  --accent-soft: #2A2240;
  --success-soft: #1C3226;
  --warning-soft: #3A2C17;
  --info-soft: #1B2A3D;
  --danger-soft: #3A1D22;
  --shadow: 0 12px 36px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; font-size: .88rem; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before { background: radial-gradient(circle at 82% 10%, rgba(var(--lime-rgb),.07), transparent 30%), radial-gradient(circle at 4% 86%, rgba(var(--lime-rgb),.04), transparent 26%); content: ""; inset: 0; pointer-events: none; position: fixed; z-index: -1; }
a { color: inherit; text-decoration: none; }
button, .btn { border-radius: 10px !important; font-weight: 600; }
.btn { font-size: .82rem; padding: 8px 15px; }
.btn-sm { font-size: .76rem; padding: 5px 11px; }
.btn { overflow: hidden; position: relative; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.btn::before { background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.34) 48%, transparent 72%); content: ""; inset: 0; pointer-events: none; position: absolute; transform: translateX(-125%); transition: transform .55s ease; }
.btn:hover::before { transform: translateX(125%); }
.btn:active { transform: translateY(1px) scale(.975); }
.btn-lime { background: var(--lime); border-color: var(--lime); box-shadow: 0 4px 12px rgba(var(--lime-rgb),.22); color: #fff; }
.btn-lime:hover, .btn-lime:focus-visible { background: var(--lime-hover); border-color: var(--lime-hover); box-shadow: 0 8px 20px rgba(var(--lime-rgb),.30); color: #fff; transform: translateY(-1px); }
.btn-lime:disabled, .btn-lime.disabled { background: var(--lime); border-color: var(--lime); color: #fff; opacity: .55; }
.btn-dark { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.btn-dark:hover { background: var(--charcoal-2); border-color: var(--charcoal-2); box-shadow: 0 8px 20px rgba(91,63,140,.22); color: #fff; transform: translateY(-1px); }
.btn-soft { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--lime) 16%, transparent); color: var(--lime); }
.btn-soft:hover, .btn-soft:focus-visible { background: var(--accent-soft); border-color: color-mix(in srgb, var(--lime) 35%, transparent); box-shadow: 0 6px 16px rgba(var(--lime-rgb),.12); color: var(--lime-hover); transform: translateY(-1px); }
.text-muted { color: var(--muted) !important; }
.text-lime { color: var(--lime) !important; }
.small-label { color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.small-label a { color: inherit; transition: color .15s ease; }
.small-label a:hover { color: var(--lime); }
.brand-mark { width: 26px; height: 40px; object-fit: contain; display: block; transition: transform .25s ease, filter .25s ease; }
.brand:hover .brand-mark { filter: drop-shadow(0 5px 8px rgba(var(--lime-rgb),.34)); transform: rotate(-5deg) scale(1.08); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.03em; }
.brand span { color: var(--text); }

/* shared shell */
.app-shell { min-height: 100vh; }
.sidebar { background: var(--charcoal); color: var(--sidebar-text); width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; flex-direction: column; padding: 22px 14px 16px; box-shadow: 1px 0 0 rgba(255,255,255,.04), 6px 0 24px rgba(76,52,117,.10); transition: width .2s ease, transform .25s ease; }
.sidebar .brand { color: white; padding: 0 10px 6px; }
.sidebar .brand span { color: white; }
.brand-tenant { padding: 0 10px 21px; margin-top: -4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav a { border-radius: 10px; color: var(--sidebar-text); display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-weight: 500; transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.sidebar-nav a i { font-size: 1.05rem; width: 20px; flex: 0 0 20px; text-align: center; opacity: .9; transition: transform .2s ease, opacity .2s ease; }
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a:hover i { opacity: 1; }
.sidebar-nav a:hover i { transform: translateX(2px); }
.sidebar-nav a.active { background: var(--lime); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(36,20,64,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.sidebar-nav a.active i { opacity: 1; }
.sidebar-nav .nav-section-label { color: rgba(222,212,242,.5); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 14px 12px 5px; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; transition: color .15s ease; }
.sidebar-nav .nav-section-label:hover { color: rgba(222,212,242,.8); }
.sidebar-nav .nav-section:first-of-type .nav-section-label { padding-top: 3px; }
.sidebar-nav .nav-section-caret { font-size: .62rem; width: auto; transition: transform .2s ease; }
.sidebar-nav .nav-section-label[aria-expanded="false"] .nav-section-caret { transform: rotate(-90deg); }
.sidebar-nav .nav-section .collapse.show { display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav .nav-section .collapsing { display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: height .18s ease; }
.nav-divider { border-top: 1px solid rgba(255,255,255,.12); margin: 15px 10px 12px; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.12); margin-top: auto; padding-top: 12px; }
.profile-mini { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; background: var(--charcoal-2); border-radius: 12px; }
.profile-mini .avatar { flex: 0 0 32px; }
.profile-mini strong { display: block; color: #fff; font-size: .78rem; }
.profile-mini small { color: var(--sidebar-muted); font-size: .69rem; }
.logout { color: var(--sidebar-text); display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; transition: background .2s ease, color .2s ease; }
.logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left .2s ease; display: flex; flex-direction: column; }
.topbar { background: color-mix(in srgb, var(--surface) 62%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; padding: 13px 29px; flex-shrink: 0; }
.topbar-inner { display: flex; align-items: center; gap: 16px; }
.topbar-search { max-width: 340px; flex: 1; position: relative; }
.topbar-search i { color: var(--muted); position: absolute; left: 13px; top: 10px; }
.topbar-search input { padding-left: 37px; background: var(--surface-2); border-color: transparent; }
.topbar-search input:focus { background: var(--surface); border-color: var(--lime); box-shadow: var(--ring); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); width: 38px; height: 38px; box-shadow: var(--shadow-sm); display: grid; place-items: center; padding: 0; position: relative; overflow: hidden; transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.icon-btn::after { background: var(--lime); border-radius: 50%; content: ""; height: 5px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(0); transition: transform .25s ease, opacity .25s ease; width: 5px; z-index: 0; }
.icon-btn i { position: relative; transition: transform .25s ease; z-index: 1; }
.icon-btn:hover { border-color: color-mix(in srgb, var(--lime) 45%, var(--line)); box-shadow: 0 6px 16px rgba(var(--lime-rgb),.14); color: var(--lime); transform: translateY(-1px); }
.icon-btn:hover::after { opacity: .12; transform: translate(-50%, -50%) scale(9); }
.icon-btn:hover i { transform: rotate(-8deg) scale(1.08); }
.notify-dot { width: 7px; height: 7px; background: var(--danger); border: 2px solid var(--surface); border-radius: 50%; position: absolute; right: 6px; top: 5px; }
.top-user { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 14px; display: flex; align-items: center; gap: 9px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--lime); font-weight: 700; font-size: .72rem; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 18%, transparent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.crop-viewport { position: relative; width: 280px; height: 280px; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #111; cursor: grab; touch-action: none; }
.crop-viewport.dragging { cursor: grabbing; }
.crop-viewport img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.crop-mask { position: absolute; inset: 0; margin: auto; width: 280px; height: 280px; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.6); pointer-events: none; border: 2px solid rgba(255,255,255,.85); }
.page-content { padding: 28px 30px 44px; max-width: 1600px; margin: 0 auto; width: 100%; flex: 1 0 auto; }
.app-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 30px 26px; max-width: 1600px; margin: auto auto 0; width: 100%; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--line); flex-shrink: 0; }
.app-footer a { color: var(--muted); font-weight: 600; text-decoration: none; }
.app-footer a:hover { color: var(--lime); }
.brand-mark-custom { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.sidebar .brand-mark-custom { background: #fff; padding: 2px; }
.branding-logo-preview { width: 84px; height: 84px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.branding-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.branding-logo-fallback { font-weight: 700; font-size: 1.35rem; color: var(--muted); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 20px; margin-bottom: 26px; }
.page-heading h1 { color: var(--text); font-size: 1.62rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 4px 0 6px; }
h5, h6, .h6 { font-weight: 600; }
.page-heading p { color: var(--muted); font-size: .84rem; margin: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--text); }
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--lime) 30%, var(--line)); }
.stat-card { padding: 20px; height: 100%; }
/* Decorative waves (from the reference design).
   Shapes are SVG masks; the COLOR comes from theme tokens, so they follow the
   palette and dark mode automatically. Purely visual — pointer-events off. */
.stat-card { position: relative; overflow: hidden; isolation: isolate; --wave: color-mix(in srgb, var(--lime) 13%, transparent); }
.stat-card:has(.icon-amber) { --wave: color-mix(in srgb, var(--warning) 16%, transparent); }
.stat-card:has(.icon-blue) { --wave: color-mix(in srgb, var(--info) 15%, transparent); }
.stat-card:has(.icon-danger) { --wave: color-mix(in srgb, var(--danger) 13%, transparent); }
.stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: -1; pointer-events: none; background: var(--wave); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C70 35 150 95 245 62 C310 40 360 30 400 38 V120 H0 Z' fill-opacity='.45'/%3E%3Cpath d='M0 98 C95 66 185 118 285 88 C335 74 372 70 400 74 V120 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C70 35 150 95 245 62 C310 40 360 30 400 38 V120 H0 Z' fill-opacity='.45'/%3E%3Cpath d='M0 98 C95 66 185 118 285 88 C335 74 372 70 400 74 V120 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; transition: transform .35s ease; transform-origin: bottom; }
.stat-card:hover::after { transform: scaleY(1.08); }
/* No isolation here: an isolated .app-main traps every Bootstrap modal inside it, so the
   body-level .modal-backdrop (z 1050) covered the modal. The wave sits in the root
   negative layer instead, still behind all page content. */
.app-main { position: relative; }
.app-main::before { content: ""; position: absolute; top: 0; right: 0; width: min(1000px, 78%); height: 340px; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--lime) 22%, transparent); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath d='M260 0 H1200 V230 C1080 285 960 150 820 190 C660 236 560 120 420 120 C340 120 290 70 260 0 Z' fill-opacity='.35'/%3E%3Cpath d='M560 0 H1200 V120 C1100 175 1000 70 880 105 C760 140 660 70 560 0 Z' fill-opacity='.55'/%3E%3Cpath d='M860 0 H1200 V300 C1150 320 1100 250 1040 225 C960 190 900 110 860 0 Z' fill-opacity='.4'/%3E%3C/svg%3E") top right / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath d='M260 0 H1200 V230 C1080 285 960 150 820 190 C660 236 560 120 420 120 C340 120 290 70 260 0 Z' fill-opacity='.35'/%3E%3Cpath d='M560 0 H1200 V120 C1100 175 1000 70 880 105 C760 140 660 70 560 0 Z' fill-opacity='.55'/%3E%3Cpath d='M860 0 H1200 V300 C1150 320 1100 250 1040 225 C960 190 900 110 860 0 Z' fill-opacity='.4'/%3E%3C/svg%3E") top right / 100% 100% no-repeat; }
[data-theme="dark"] .app-main::before { background: color-mix(in srgb, var(--lime) 22%, transparent); }
@media (max-width: 767px) { .app-main::before { width: 100%; height: 220px; } }
@media print { .stat-card::after, .app-main::before { display: none !important; } }

.stat-head { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 40px; }
.stat-number { color: var(--text); font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-top: 16px; }
.stat-label { color: var(--muted); font-size: .77rem; margin-top: 3px; }
.trend { font-size: .7rem; font-weight: 700; }
.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }
/* Stat icons — soft tint + full-strength glyph, all from tokens (dark mode just
   swaps the *-soft tokens, so no per-theme overrides are needed). */
.icon-lime { background: var(--accent-soft); color: var(--lime); }
.icon-purple { background: var(--accent-soft); color: var(--charcoal); }
.icon-success { background: var(--success-soft); color: var(--success); }
.icon-blue { background: var(--info-soft); color: var(--info); }
.icon-amber { background: var(--warning-soft); color: var(--warning); }
.icon-danger { background: var(--danger-soft); color: var(--danger); }
[data-theme="dark"] .icon-lime, [data-theme="dark"] .icon-purple { color: color-mix(in srgb, var(--lime) 55%, white); }
/* ===================================================================
   Global loading indicators — site-wide, one place, zero per-page wiring.
   Every fetch() call (the only AJAX mechanism this app uses — no jQuery
   $.ajax anywhere) automatically drives two indicators:
     1. A thin animated bar across the very top of the page.
     2. A small floating "Working…" badge, bottom-left, with a spin ring.
   Both are re-entrant (a counter, not a boolean) so overlapping requests
   don't hide the indicator early, both wait a short beat before showing
   (so a fast request never flashes anything), and both stay visible a
   minimum stretch once shown (so a request that finishes right after
   showing doesn't blink). window.PageLoader.show()/hide() is exposed for
   any future manual, non-fetch use (e.g. wrapping a long client-side loop).
   =================================================================== */
#globalTopLoader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 3000; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .25s ease; }
#globalTopLoader.is-active { opacity: 1; }
#globalTopLoader .bar { position: absolute; top: 0; left: 0; height: 100%; width: 35%; background: linear-gradient(90deg, transparent, var(--lime), var(--lime-hover), var(--lime), transparent); box-shadow: 0 0 10px rgba(var(--lime-rgb),.65); animation: globalTopLoaderMove 1.1s ease-in-out infinite; }
@keyframes globalTopLoaderMove { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }

#globalSpinBadge { position: fixed; left: 20px; bottom: 20px; z-index: 1900; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 99px; padding: 9px 16px 9px 9px; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
#globalSpinBadge.is-active { opacity: 1; transform: translateY(0) scale(1); box-shadow: var(--shadow), 0 0 0 1px rgba(var(--lime-rgb),.14), 0 0 16px -2px rgba(var(--lime-rgb),.45); }
#globalSpinBadge .ring-wrap { position: relative; width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; }
#globalSpinBadge .track { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid rgba(var(--lime-rgb),.18); }
#globalSpinBadge .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, transparent 60%, var(--lime) 88%, var(--lime-hover) 100%); animation: globalSpinRing .8s cubic-bezier(.45,.05,.55,.95) infinite; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); }
#globalSpinBadge .ring::after { content: ""; position: absolute; top: -1px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--lime-hover); box-shadow: 0 0 5px 1.5px rgba(var(--lime-rgb),.75); }
#globalSpinBadge .label { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; display: flex; align-items: center; }
#globalSpinBadge .label .dots { display: inline-flex; width: 1.2em; }
#globalSpinBadge .label .dots span { animation: pageOverlayDots 1.2s infinite; opacity: 0; }
#globalSpinBadge .label .dots span:nth-child(2) { animation-delay: .2s; }
#globalSpinBadge .label .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes globalSpinRing { to { transform: rotate(360deg); } }
@media (max-width: 767px) { #globalSpinBadge { left: 12px; bottom: 12px; } #globalSpinBadge .label { display: none; } #globalSpinBadge { padding: 9px; } }

/* Full-page branded loader — for an actual page-to-page navigation (this app
   renders full server pages, so a normal link click reloads the whole
   document; this covers that gap the way a route-change spinner would in a
   single-page app). Deliberately separate from the top bar/badge above,
   which are for AJAX calls that DON'T replace the page.
   v12.1 redesign: the original was a flat single conic-gradient ring around a
   hard-edged dark square — looked static/plain in practice (screenshot-
   reported). Replaced with a soft lime glow halo + a faint static track ring
   + a brighter rotating gradient arc with a glowing leading dot, a gently
   "breathing" logo mark (subtle scale pulse, softer lime-tinted shadow
   instead of a flat black one), and an animated ellipsis on the label —
   same colors/tokens as the rest of the design system, just more alive. */
#pageTransitionOverlay { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(37,32,51,.62); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
#pageTransitionOverlay.is-active { opacity: 1; pointer-events: all; }
#pageTransitionOverlay .ring-wrap { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
#pageTransitionOverlay .glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--lime-rgb),.35), transparent 68%); filter: blur(6px); animation: pageOverlayGlowPulse 1.8s ease-in-out infinite; }
#pageTransitionOverlay .track { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(var(--lime-rgb),.16); }
#pageTransitionOverlay .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, transparent 62%, var(--lime) 88%, var(--lime-hover) 100%); animation: pageOverlaySpin 1.1s cubic-bezier(.45,.05,.55,.95) infinite; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
#pageTransitionOverlay .ring::after { content: ""; position: absolute; top: -2px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--lime-hover); box-shadow: 0 0 8px 2px rgba(var(--lime-rgb),.75); }
#pageTransitionOverlay .mark { width: 34px; height: 50px; position: relative; z-index: 1; background: none; box-shadow: none; padding: 0; display: grid; place-items: center; animation: pageOverlayMarkPulse 1.8s ease-in-out infinite; }
#pageTransitionOverlay .mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
#pageTransitionOverlay .label { color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; }
#pageTransitionOverlay .label .dots { display: inline-flex; width: 1.4em; }
#pageTransitionOverlay .label .dots span { animation: pageOverlayDots 1.2s infinite; opacity: 0; }
#pageTransitionOverlay .label .dots span:nth-child(2) { animation-delay: .2s; }
#pageTransitionOverlay .label .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pageOverlaySpin { to { transform: rotate(360deg); } }
@keyframes pageOverlayGlowPulse { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes pageOverlayMarkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes pageOverlayDots { 0%, 20% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.section-card { padding: 22px; }
.callout-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.callout-box:hover { border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); }
.section-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.section-title h2 { color: var(--text); font-size: .98rem; font-weight: 600; margin: 0; }
.section-title a { color: var(--lime); font-size: .76rem; font-weight: 600; }
.section-title a:hover { color: var(--lime-hover); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); margin-bottom: 0; vertical-align: middle; }
.table > :not(caption) > * > * { border-bottom-color: var(--line); padding: 13px 12px; }
.table thead th { background: var(--surface-2); color: var(--muted); font-size: .67rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.table tbody td { color: var(--text); font-size: .8rem; white-space: nowrap; }
.table tbody td strong { font-weight: 600; }
.table tbody tr:last-child > * { border-bottom-color: transparent; }
.table a:not(.btn) { color: var(--text); }
.table a:not(.btn):hover { color: var(--lime); }
.table tbody tr { opacity: 0; animation: fadeUp .45s ease forwards; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 65%, transparent); }
.table-wrap { overflow-x: auto; }
.customer-cell { align-items: center; display: flex; gap: 9px; }
.customer-cell .avatar { width: 29px; height: 29px; font-size: .63rem; }
/* Status pills. Default (unknown status) = neutral lavender; every known status
   maps to one of the four semantic tokens below. Text is the semantic color mixed
   a little toward --text so small labels stay readable on the soft tint (and,
   because --text flips in dark mode, the same rule reads correctly there too). */
.badge-status { --st: var(--lime); --st-soft: var(--accent-soft); background: var(--st-soft); color: color-mix(in srgb, var(--st) 82%, var(--text)); border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; letter-spacing: .01em; line-height: 1; padding: 6px 10px; white-space: nowrap; }
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); flex: 0 0 6px; }

/* ---- Settings: Phase / Block / Street / Size chips ---- */
.setting-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.setting-chip-empty { color: var(--muted); font-size: .82rem; }
.setting-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
  padding: 6px 8px 6px 14px; font-size: .82rem; font-weight: 600; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.setting-chip:hover { border-color: rgba(var(--lime-rgb), .5); }
.setting-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0; line-height: 1;
  background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.setting-chip-remove:hover { background: var(--danger); color: #fff; }

/* Wraps each sub-section (Blocks/Sections/Phases, Streets, Plot sizes) in its own
   card instead of a plain <hr> divider, so the tab reads as organized groups. */
.settings-subsection {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}
.settings-subsection:last-child { margin-bottom: 0; }

/* Live suggestion dropdown under the merged Block/Section/Phase input. */
.settings-input-row { position: relative; }
.setting-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.setting-suggestion-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; border: none; background: transparent;
  text-align: left; font-size: .84rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.setting-suggestion-item:hover { background: var(--surface-2); color: var(--lime); }
.setting-suggestion-item small { color: var(--muted); font-weight: 500; font-size: .7rem; }

/* Clickable "add with one tap" pill — used by Designation suggestions (Departments)
   and Salary component quick-add presets. Same shape as .setting-chip, but it's a
   button that ADDS an item instead of a chip that removes one. */
.setting-chip-addable {
  cursor: pointer; font: inherit; appearance: none;
}
.setting-chip-addable:hover { background: var(--lime); color: #fff; border-color: transparent; }
.setting-chip-addable:disabled { opacity: .5; cursor: not-allowed; }
.setting-chip-addable i { font-size: .72rem; }
.setting-chip-addable small { color: inherit; opacity: .65; font-weight: 500; margin-left: 2px; }

/* Default installment plan — quick-pick pills next to the free "type any number"
   input (Settings > Installment settings). */
.setting-quickpick-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.setting-quickpick {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 13px; font-size: .78rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.setting-quickpick:hover { border-color: rgba(var(--lime-rgb), .5); }
.setting-quickpick.active { background: var(--lime); color: #fff; border-color: transparent; }
/* Success / Paid / Completed */
.status-active, .status-paid, .status-available, .status-completed, .status-resolved, .status-received, .status-approved, .status-closed { --st: var(--success); --st-soft: var(--success-soft); }
/* Warning / Pending / Upcoming */
.status-pending, .status-on-hold, .status-onhold, .status-inprogress, .status-upcoming, .status-partial, .status-partlypaid, .status-reserved, .status-open { --st: var(--warning); --st-soft: var(--warning-soft); }
/* Information */
.status-booked, .status-promisetopay, .status-transferred, .status-possessed, .status-sold { --st: var(--info); --st-soft: var(--info-soft); }
/* Danger / Overdue / Failed */
.status-overdue, .status-cancelled, .status-escalated, .status-failed, .status-rejected, .status-voided, .status-void, .status-locked { --st: var(--danger); --st-soft: var(--danger-soft); }
.status-active, .status-paid, .status-available, .status-completed, .status-resolved, .status-received, .status-approved, .status-closed,
.status-pending, .status-on-hold, .status-onhold, .status-inprogress, .status-upcoming, .status-partial, .status-partlypaid, .status-reserved, .status-open,
.status-booked, .status-promisetopay, .status-transferred, .status-possessed, .status-sold,
.status-overdue, .status-cancelled, .status-escalated, .status-failed, .status-rejected, .status-voided, .status-void, .status-locked { background: var(--st-soft); color: color-mix(in srgb, var(--st) 82%, var(--text)); }
/* Phase 2.4.a: refined 4-tier aging severity (1-30/31-60/61-90/91+ days), used by both
   the Installments page's aging-bucket cards and the Recovery worklist's per-customer
   badge — distinct from the 2-tier status-pending/status-overdue above so "just turned
   overdue" and "90+ days gone" don't look identical. */
/* Aging severity: a 4-step blend from Warning to Danger — no extra colors. */
.severity-1 { --st: var(--warning); --st-soft: var(--warning-soft); }
.severity-2 { --st: color-mix(in srgb, var(--warning) 67%, var(--danger)); --st-soft: color-mix(in srgb, var(--warning-soft) 67%, var(--danger-soft)); }
.severity-3 { --st: color-mix(in srgb, var(--warning) 33%, var(--danger)); --st-soft: color-mix(in srgb, var(--warning-soft) 33%, var(--danger-soft)); }
.severity-4 { --st: var(--danger); --st-soft: var(--danger-soft); }
.severity-1, .severity-2, .severity-3, .severity-4 { background: var(--st-soft); color: color-mix(in srgb, var(--st) 82%, var(--text)); }
/* Phase 2.5.a: Block-wise Recovery progress bars — the app's own lime accent instead
   of Bootstrap's default progress-bar green. */
.progress { background: var(--line); }
.progress-bar.bg-lime { background: var(--lime) !important; }

/* Phase 3: Recovery workspace status — same "add a distinct color set for a new
   status vocabulary" pattern as .status-booked and .severity-1..4 above. */
/* (Recovery statuses are mapped in the semantic groups above.) */

/* New Transfer wizard steps (Details -> Review -> Fee payment). */
.wizard-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wizard-step.active, .wizard-step.done { color: var(--lime); }
.wizard-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.wizard-step.active .wizard-step-num, .wizard-step.done .wizard-step-num { background: var(--lime); color: #fff; box-shadow: var(--ring); }
.wizard-step-sep { flex: 1; height: 1px; background: var(--line); margin: 0 2px; }

/* A locked/disabled text input (e.g. the New Transfer form's auto-filled Fee field)
   next to a locked TomSelect dropdown (e.g. "Transfer from") were rendering at
   visibly different heights — force both to the exact same box so a "locked" row of
   fields actually looks like one, not one field looking oversized. */
.form-control:disabled, .form-control[readonly] { min-height: 38px; box-sizing: border-box; }
.ts-wrapper.disabled .ts-control { min-height: 38px; box-sizing: border-box; }
.ts-wrapper .ts-control { min-height: 38px; box-sizing: border-box; }

/* CNIC front/back upload — a plain browser file input looked cramped and inconsistent
   next to everything else on the New Transfer form; this reuses the same card/border
   language as the rest of the app instead of raw OS chrome. */
.cnic-upload-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 76px; border: 1.5px dashed color-mix(in srgb, var(--lime) 28%, var(--line)); border-radius: 12px;
  cursor: pointer; color: var(--muted); background: var(--surface); font-size: 12px; transition: border-color .15s, background .15s;
}
.cnic-upload-box:hover { border-color: var(--lime); background: var(--accent-soft); }
.cnic-upload-box i { font-size: 18px; color: var(--lime); opacity: .75; }
.cnic-upload-box.has-file { border-style: solid; border-color: var(--lime); color: var(--lime); background: var(--accent-soft); }
.cnic-upload-box.has-file i { color: var(--lime); opacity: 1; }
.cnic-upload-box .cnic-upload-text { max-width: 100%; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-control, .form-select { background-color: var(--surface); border-color: color-mix(in srgb, var(--lime) 10%, var(--line)); border-radius: 10px; color: var(--text); font-size: .82rem; padding: 9px 12px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--lime) 30%, var(--line)); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--muted); }
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--lime); box-shadow: var(--ring); color: var(--text); }
.form-label { color: var(--text); font-size: .74rem; font-weight: 600; margin-bottom: 6px; }
.input-group-text { background: var(--surface-2); border-color: color-mix(in srgb, var(--lime) 10%, var(--line)); color: var(--muted); border-radius: 10px; }
.dropdown-menu { background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.dropdown-item { color: var(--text); font-size: .8rem; padding: 9px 12px; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--accent-soft); color: var(--lime-hover); }
.dropdown-item.active, .dropdown-item:active { background: var(--lime); color: #fff; }
.dropdown-divider { border-color: var(--line); }
.modal-content, .offcanvas { background: var(--surface); border-color: var(--line); color: var(--text); }
.modal-content { border-radius: calc(var(--radius) + 2px); box-shadow: 0 24px 60px rgba(37,32,51,.18); }
.modal-backdrop { --bs-backdrop-bg: #251F33; --bs-backdrop-opacity: .45; }
/* Record Payment modal (Phase 2.2/2.3): Booking select + Smart/Manual toggle + line
   items + live preview + method fields + proof upload can add up to more height than
   fits on screen at once. Simplest, most reliable fix: let the WHOLE modal scroll
   vertically (Bootstrap's own .modal wrapper already supports this — overflow-y:auto
   is its default — this just guarantees it with !important and gives the dialog
   breathing room top/bottom so nothing sits flush against the screen edge), instead
   of trying to confine scrolling to just the body while pinning header/footer. That
   approach depends on vh/dvh math that behaves inconsistently across mobile browsers;
   scrolling the whole modal is plain block-level overflow and works everywhere.
   align-items:flex-start on the dialog fixes a known Bootstrap gotcha where
   modal-dialog-centered + content taller than the screen can leave the TOP of the
   modal unreachable even while scrolling — starting it flush at the top avoids that
   entirely. */
#recordPaymentModal { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
#recordPaymentModal .modal-dialog { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; align-items: flex-start !important; }
.modal-header, .modal-footer { border-color: var(--line); padding: 16px 22px; }
.modal-body { padding: 20px 22px; }
.modal-title { color: var(--text); font-size: 1rem; font-weight: 600; }
.modal.fade .modal-dialog { transform: scale(.97) translateY(8px); transition: transform .2s ease-out; }
.modal.show .modal-dialog { transform: scale(1) translateY(0); }
.toast { background: var(--charcoal); color: white; border: 0; border-radius: 12px; }
.toast-container { z-index: 2000; }
.filter-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.filter-bar .form-select, .filter-bar .form-control { width: auto; min-width: 128px; }
/* Tom Select-wrapped filter dropdowns (see makeTomSelect in app.js) sometimes carry a
   longer default label than a plain <select> would ("All team members", a full Role
   name) — give those a bit more breathing room than the 128px baseline above so the
   label never crowds against the dropdown's own caret/clear icon. */
.filter-bar .ts-wrapper { min-width: 160px; }
.filter-bar .search-field { min-width: 220px; }
.view-toggle .btn { border-color: var(--line); color: var(--muted); padding: 8px 10px; background: var(--surface); }
.view-toggle .btn:hover { color: var(--lime); }
.view-toggle .btn.active { background: var(--lime); border-color: var(--lime); color: #fff; }
.action-btn { border: 0; background: transparent; color: var(--muted); padding: 4px 6px; transition: color .18s ease, transform .18s ease, background .18s ease; }
.action-btn:hover { background: var(--accent-soft); border-radius: 8px; color: var(--lime); transform: translateY(-1px); }
.action-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Professional custom tooltips — replaces the slow, plain native browser title
   tooltip everywhere in the app. Keyed off data-tooltip (converted from every icon-
   only button/element's old title attribute); aria-label carries the same text for
   screen readers since data-tooltip itself isn't announced. Uses ::before (not
   ::after) so it doesn't collide with .icon-btn's own ::after hover-ripple effect.
   Appears almost instantly (60ms fade, no browser-native ~1s hover delay) and stays
   above modals/offcanvases (z-index 2000 vs Bootstrap's ~1055). */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--charcoal);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  max-width: 220px;
  width: max-content;
  max-width: min(220px, 60vw);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .06s ease-out, transform .06s ease-out;
  z-index: 2000;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  letter-spacing: .01em;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Row-edge tooltips (e.g. the last action icon in a right-aligned column) would
   otherwise clip past the viewport/card edge — flip them to right-align instead of
   centering, so the bubble grows leftward from the icon instead of overflowing. */
.text-end [data-tooltip]:last-child::before,
[data-tooltip].tooltip-align-end::before {
  left: auto;
  right: 0;
  transform: translateY(2px);
}
.text-end [data-tooltip]:last-child:hover::before,
[data-tooltip].tooltip-align-end:hover::before {
  transform: translateY(0);
}

.plot-grid { display: none; }
.plot-grid.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 13px; }
.plot-tile { padding: 16px; cursor: pointer; }
.plot-tile h3 { font-size: .95rem; margin: 0 0 6px; }
.plot-tile .plot-meta { color: var(--muted); font-size: .73rem; }
.plot-tile-actions { border-top: 1px solid var(--line); padding-top: 10px; }
.plot-tile-actions .action-btn { text-align: center; border-radius: 6px; }

/* Digital Plot Map (Phase 3) — a real block-by-block site-plan look, built from
   status-* / badge-status' existing color pairs (no new palette to invent) applied as
   filled tiles instead of pill badges, so a block reads like a real layout at a
   glance rather than a list. */
.plot-map-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.plot-map-block-section { margin-bottom: 28px; }
.plot-map-block-section:last-child { margin-bottom: 0; }
.plot-map-block-title { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.plot-map-block-title .badge-status { text-transform: none; letter-spacing: normal; }
.plot-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
/* Digital Plot Map, Edit layout mode: positioned tiles get an inline grid-row/grid-column
   style so the grid genuinely reflects a Block's saved Row/Column layout instead of just
   auto-flowing by Number order — grid-template-columns is set inline per-block (from the
   Block's own highest saved Column) so explicit placement lines up predictably. */
.plot-map-grid-positioned { display: grid; gap: 8px; grid-auto-rows: minmax(52px, auto); }
.plot-map-edit-block { margin-bottom: 22px; }
.plot-map-edit-block:last-child { margin-bottom: 0; }
.plot-map-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.plot-map-edit-row:last-child { border-bottom: none; }
.plot-map-edit-number { flex: 1; font-size: .8rem; font-weight: 700; }
.plot-map-edit-row input[type="number"] { width: 80px; }
.plot-map-tile {
  border-radius: 8px; padding: 8px 6px; text-align: center; cursor: pointer;
  font-size: .72rem; font-weight: 700; border: 1px solid transparent;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.plot-map-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.plot-map-tile .plot-map-tile-number { font-size: .78rem; }
.plot-map-tile .plot-map-tile-size { font-size: .62rem; font-weight: 500; opacity: .85; }
/* Reuse the exact status-* color pairs badge-status already defines app-wide, just as
   a filled tile/swatch background instead of a pill. Applies to both the map tiles
   and the legend swatches above them. */
/* Plot-map tiles/swatches inherit the semantic status tokens defined above. */
.plot-map-tile[class*="status-"] { border-color: color-mix(in srgb, var(--st, var(--lime)) 22%, transparent); }
.plot-map-swatch[class*="status-"] { background: var(--st-soft, var(--accent-soft)); box-shadow: inset 0 0 0 1.5px var(--st, var(--lime)); }
.plot-price { font-size: 1rem; font-weight: 700; margin: 13px 0; }
.donut-wrap { display: flex; align-items: center; gap: 27px; }
.donut { background: conic-gradient(var(--lime) 0 45%, var(--info) 45% 73%, var(--charcoal) 73% 90%, var(--warning) 90% 100%); border-radius: 50%; height: 172px; position: relative; width: 172px; transform: rotate(-18deg); transition: clip-path 1s ease; }
.donut::after { background: var(--surface); border-radius: 50%; content: ""; inset: 25px; position: absolute; }
.donut-center { align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; position: absolute; z-index: 1; transform: rotate(18deg); }
.donut-center strong { font-size: 1.35rem; }
.donut-center span { color: var(--muted); font-size: .66rem; }
.legend { display: grid; gap: 11px; }
.legend-item { align-items: center; display: flex; gap: 8px; color: var(--muted); font-size: .74rem; }
.legend-item b { color: var(--text); margin-left: auto; }
.legend-dot { border-radius: 50%; height: 8px; width: 8px; }
.bar-chart { align-items: end; display: flex; gap: 16px; height: 196px; padding: 10px 8px 0; border-bottom: 1px solid var(--line); }
.bar-col { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 7px; height: 100%; justify-content: end; }
.bar { background: linear-gradient(to top, var(--lime-hover), var(--lime)); border-radius: 5px 5px 0 0; height: 0; max-width: 42px; transition: height 1s cubic-bezier(.2,.8,.2,1); width: 100%; }
.bar-col span { color: var(--muted); font-size: .65rem; }
.bar-value { color: var(--muted); font-size: .63rem; }
.skeleton-row td { height: 40px; }
.bulk-toolbar { background: color-mix(in srgb, var(--lime) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lime) 35%, var(--line)); border-radius: var(--radius); padding: 8px 14px; }
.shimmer { animation: shimmer 1.1s infinite linear; background: linear-gradient(90deg, var(--surface-2) 20%, color-mix(in srgb, var(--surface-2) 50%, var(--surface) 50%) 40%, var(--surface-2) 60%); background-size: 200% 100%; border-radius: 5px; height: 12px; }
.empty-row { color: var(--muted); text-align: center; padding: 30px !important; }
.tabs { border-bottom-color: var(--line); }
.tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; color: var(--muted); font-size: .8rem; font-weight: 500; padding: 12px 14px; transition: color .15s ease, border-color .15s ease; }
.tabs .nav-link:hover { background: transparent; border-bottom-color: color-mix(in srgb, var(--lime) 35%, transparent); color: var(--text); }
.tabs .nav-link.active { background: transparent; border-bottom-color: var(--lime); color: var(--lime); font-weight: 600; }
.tabs .nav-link .text-muted { font-weight: 500; }
.settings-panel { padding: 22px 0 6px; max-width: none; }
/* Full-width panel (was capped at 740px) so chip/quick-add lists actually use the
   screen instead of wrapping into a tall, narrow column with empty space beside it.
   The description paragraphs still cap their own line length so they stay readable
   at full width instead of stretching edge to edge. */
.settings-panel p.text-muted.small { max-width: 760px; }
.accent-option { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.accent-option:has(input:checked) { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(var(--lime-rgb),.16); }
.accent-swatch { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.accent-swatch-classic { background: linear-gradient(135deg, #5B3F8C 0 55%, #7652B5 55% 100%); }
.accent-swatch-onyx { background: linear-gradient(135deg, #121214 0 55%, #d4b671 55% 100%); }
.timeline { border-left: 2px solid var(--line); display: grid; gap: 19px; margin: 19px 0 0 8px; padding-left: 21px; }
.timeline-item { position: relative; }
.timeline-item::before { background: var(--lime); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--lime); content: ""; height: 10px; left: -28px; position: absolute; top: 4px; width: 10px; }
.timeline-item strong { font-size: .78rem; }
.timeline-item p { color: var(--muted); font-size: .72rem; margin: 3px 0 0; }
.receipt-paper { background: #fff; color: #252033; margin: 0 auto; max-width: 410px; padding: 28px; }
.receipt-paper .receipt-line { border-top: 1px dashed #E8E1F2; margin: 17px 0; }
.receipt-paper table { width: 100%; font-size: .78rem; }
.receipt-paper td:last-child { text-align: right; }
.quick-report { display: flex; align-items: center; gap: 13px; padding: 17px; }
.quick-report i { background: var(--accent-soft); border-radius: 12px; color: var(--lime); font-size: 1.1rem; padding: 11px; }
.quick-report strong { display: block; font-size: .79rem; }
.quick-report span { color: var(--muted); display: block; font-size: .7rem; margin-top: 3px; }

/* landing + login */
.public-page { background: var(--bg); min-height: 100vh; }
.public-nav { align-items: center; display: flex; justify-content: space-between; padding: 19px 5vw; }
.public-nav .brand span { color: var(--text); }
.public-nav-links { align-items: center; display: flex; gap: 26px; }
.public-nav-links a { color: var(--muted); font-size: .8rem; font-weight: 500; }
.public-nav-links a:hover { color: var(--text); }
.landing-hero { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1fr; margin: 48px auto 94px; max-width: 1180px; padding: 0 26px; }
.eyebrow { align-items: center; color: var(--lime-hover); display: flex; font-size: .7rem; font-weight: 700; gap: 8px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { background: var(--lime); content: ""; height: 2px; width: 26px; }
.landing-hero h1 { font-size: clamp(2.45rem, 5vw, 4.55rem); letter-spacing: -.075em; line-height: 1.02; margin: 19px 0; max-width: 600px; }
.landing-hero h1 em { color: var(--lime-hover); font-style: normal; }
.landing-hero p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 500px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.browser-frame { animation: browserFloat 5s ease-in-out infinite; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 20px 24px 50px rgba(91,63,140,.14), 0 0 0 10px rgba(var(--lime-rgb),.04); overflow: hidden; transform: rotate(1.5deg); }
.browser-top { align-items: center; background: var(--surface-2); display: flex; gap: 5px; padding: 10px 13px; }
.browser-dot { background: color-mix(in srgb, var(--lime) 25%, var(--line)); border-radius: 50%; height: 7px; width: 7px; }
.browser-address { background: #fff; border-radius: 5px; color: var(--muted); font-size: .52rem; margin-left: 8px; padding: 4px 10px; width: 150px; }
.mock-dashboard { display: grid; grid-template-columns: 72px 1fr; min-height: 310px; }
.mock-side { background: var(--charcoal); padding: 13px 11px; }
.mock-side .mini-logo { background: var(--lime); border-radius: 7px; height: 22px; margin-bottom: 22px; width: 22px; }
.mock-side i { color: var(--sidebar-muted); display: block; font-size: .75rem; margin: 17px auto; text-align: center; }
.mock-content { background: var(--bg); padding: 15px; }
.mock-title { background: var(--line); border-radius: 3px; height: 10px; margin-bottom: 15px; width: 75px; }
.mock-stats { display: grid; gap: 7px; grid-template-columns: repeat(3,1fr); }
.mock-stat { background: #fff; border-radius: 6px; height: 53px; padding: 9px; }
.mock-stat::before { background: var(--accent-soft); border-radius: 2px; content: ""; display: block; height: 6px; width: 30px; }
.mock-stat::after { background: var(--muted); border-radius: 2px; content: ""; display: block; height: 10px; margin-top: 9px; width: 42px; }
.mock-panels { display: grid; gap: 8px; grid-template-columns: 1.2fr 1fr; margin-top: 9px; }
.mock-panel { background: #fff; border-radius: 6px; height: 155px; padding: 11px; }
.mock-panel .line { background: var(--surface-2); border-radius: 2px; height: 5px; margin: 12px 0; }
.mock-panel .line:nth-child(2) { width: 82%; } .mock-panel .line:nth-child(3) { width: 62%; } .mock-panel .line:nth-child(4) { width: 91%; }
.feature-section { margin: 0 auto 94px; max-width: 1180px; padding: 0 26px; }
.center-heading { margin: 0 auto 36px; max-width: 600px; text-align: center; }
.center-heading h2 { font-size: 2.15rem; letter-spacing: -.06em; margin: 13px 0; }
.center-heading p { color: var(--muted); line-height: 1.6; }
.feature-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); }
.feature-card { overflow: hidden; padding: 24px; position: relative; }
.feature-card::after { background: var(--lime); border-radius: 50%; content: ""; height: 95px; opacity: .07; position: absolute; right: -38px; top: -40px; transition: transform .35s ease; width: 95px; }
.feature-card:hover::after { transform: scale(1.55); }
.feature-card i { color: var(--lime-hover); font-size: 1.4rem; transition: transform .25s ease; }
.feature-card:hover i { transform: rotate(-7deg) scale(1.12); }
.feature-card h3 { font-size: .95rem; margin: 18px 0 7px; }
.feature-card p { color: var(--muted); font-size: .75rem; line-height: 1.6; margin: 0; }
.steps { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.step { border-top: 2px solid var(--line); padding-top: 14px; }
.step b { color: var(--lime-hover); font-size: .75rem; }
.step h3 { font-size: .9rem; margin: 10px 0 6px; }
.step p { color: var(--muted); font-size: .73rem; line-height: 1.55; }
.final-cta { background: var(--charcoal); border-radius: 16px; color: white; margin: 0 auto 65px; max-width: 1130px; overflow: hidden; padding: 48px; position: relative; }
.final-cta::after { border: 1px solid rgba(var(--lime-rgb),.4); border-radius: 50%; content: ""; height: 310px; position: absolute; right: -70px; top: -140px; width: 310px; }
.final-cta h2 { font-size: 2rem; letter-spacing: -.05em; max-width: 480px; }
.final-cta p { color: var(--sidebar-text); max-width: 470px; }
.public-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; padding: 25px 5vw; }
/* ---------- Sign-in page: layered, premium first impression ----------
   Left: brand panel with a gradient base + glow blobs + dot texture + 3 wave
   layers + orbit rings, and glass feature cards. Right: lavender waves/blob
   behind a raised form card. All colors come from theme tokens. */
.login-page { display: grid; grid-template-columns: 46% 54%; min-height: 100vh; }
.login-brand-panel { background: linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 48%, color-mix(in srgb, var(--charcoal) 72%, var(--lime)) 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 6vw 6.5vw 9vw; position: relative; overflow: hidden; isolation: isolate; }
.login-brand-panel::before, .login-brand-panel::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.login-brand-panel::before { width: 520px; height: 520px; top: -260px; left: -190px; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.login-brand-panel::after { width: 470px; height: 470px; bottom: -210px; right: -180px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 60px rgba(255,255,255,.025); }
.login-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.login-blob { position: absolute; border-radius: 50%; filter: blur(70px); animation: loginFloat 16s ease-in-out infinite; }
.login-blob-1 { width: 440px; height: 440px; top: -140px; right: -110px; background: var(--lime); opacity: .55; }
.login-blob-2 { width: 380px; height: 380px; bottom: 16%; left: -150px; background: color-mix(in srgb, var(--lime) 55%, #fff); opacity: .28; animation-delay: -7s; }
.login-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%); }
.login-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; }
.login-waves .w1 { fill: rgba(255,255,255,.05); animation: loginWave 12s ease-in-out infinite; }
.login-waves .w2 { fill: rgba(var(--lime-rgb),.45); animation: loginWave 15s ease-in-out infinite reverse; }
.login-waves .w3 { fill: rgba(36,20,64,.38); }
.login-hero { position: relative; max-width: 470px; }
.login-hero > * { opacity: 0; animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
.login-hero > :nth-child(2) { animation-delay: .08s; }
.login-hero > :nth-child(3) { animation-delay: .16s; }
.login-hero > :nth-child(4) { animation-delay: .24s; }
.login-hero > :nth-child(5) { animation-delay: .32s; }
.login-brand-panel .brand { color: #fff; display: flex; width: max-content; margin-bottom: 56px; }
.login-brand-panel .brand span { color: #fff; }
.login-brand-panel .eyebrow { display: inline-flex; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 6px 12px; font-size: .66rem; letter-spacing: .12em; margin-bottom: 18px; backdrop-filter: blur(6px); }
.login-brand-panel .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--sidebar-text); box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.login-brand-panel h1 { font-size: clamp(2.2rem, 3.9vw, 3.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; margin: 0 0 18px; max-width: 460px; color: #fff; background: linear-gradient(100deg, #fff 30%, var(--sidebar-text) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-brand-panel p { color: var(--sidebar-text); font-size: .95rem; line-height: 1.7; max-width: 420px; margin-bottom: 30px; }
.login-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 400px; }
.login-features li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: .84rem; font-weight: 500; transition: transform .25s ease, background .25s ease; }
.login-features li:hover { transform: translateX(4px); background: rgba(255,255,255,.13); }
.login-feature-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: 1rem; }
.login-stats { display: flex; gap: 34px; margin-top: 52px; }
.login-stats strong { display: block; font-size: 1.25rem; }
.login-stats span { color: var(--sidebar-muted); display: block; font-size: .66rem; margin-top: 4px; }
.login-form-side { align-items: center; background: var(--bg); display: flex; justify-content: center; padding: 35px; position: relative; overflow: hidden; isolation: isolate; }
.login-form-side::before { content: ""; position: absolute; width: 520px; height: 520px; top: -200px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--lime-rgb),.20), transparent 68%); z-index: -1; pointer-events: none; }
.login-form-side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--lime) 12%, transparent); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C200 90 380 210 600 150 C780 100 900 90 1000 120 V300 H0 Z' fill-opacity='.45'/%3E%3Cpath d='M0 220 C220 170 420 270 640 215 C800 178 920 190 1000 205 V300 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C200 90 380 210 600 150 C780 100 900 90 1000 120 V300 H0 Z' fill-opacity='.45'/%3E%3Cpath d='M0 220 C220 170 420 270 640 215 C800 178 920 190 1000 205 V300 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.login-form-box { max-width: 440px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 38px 36px 34px; box-shadow: 0 30px 70px rgba(91,63,140,.14), 0 2px 6px rgba(91,63,140,.05); animation: fadeUp .6s cubic-bezier(.2,.8,.2,1); }
.login-form-box h2 { color: var(--text); font-size: 1.6rem; font-weight: 700; letter-spacing: -.035em; margin: 0 0 7px; }
.login-form-box > p { color: var(--muted); margin-bottom: 28px; }
.login-form-box .form-control { min-height: 46px; background: var(--bg); }
.login-form-box .form-control:focus { background: var(--surface); }
.login-form-box .btn-lime { min-height: 48px; background: linear-gradient(135deg, var(--lime), var(--lime-hover)); border: 0; font-size: .9rem; box-shadow: 0 10px 24px rgba(var(--lime-rgb),.32); }
.login-form-box .btn-lime:hover { box-shadow: 0 14px 30px rgba(var(--lime-rgb),.40); }
.login-form-box .btn-lime i { transition: transform .2s ease; }
.login-form-box .btn-lime:hover i { transform: translateX(4px); }
[data-theme="dark"] .login-form-box { box-shadow: 0 30px 70px rgba(0,0,0,.45); }
[data-theme="dark"] .login-form-side::after { background: color-mix(in srgb, var(--lime) 20%, transparent); }
@keyframes loginFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px, 26px) scale(1.08); } }
@keyframes loginWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
@media (prefers-reduced-motion: reduce) { .login-blob, .login-waves path, .login-hero > *, .login-form-box { animation: none !important; opacity: 1 !important; } }
@media (max-width: 650px) { .login-form-box { padding: 28px 22px; border-radius: 18px; } }
.password-wrap { position: relative; }
.password-wrap .icon-btn { border: 0; background: transparent; box-shadow: none; position: absolute; right: 4px; top: 4px; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes countPulse { from { opacity: .4; } to { opacity: 1; } }
@keyframes browserFloat { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-8px); } }
.animate-count { animation: countPulse .45s ease; }
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: 3px solid rgba(var(--lime-rgb),.38); outline-offset: 3px; }

@media (max-width: 1199px) {
  .landing-hero { gap: 35px; }
  .donut-wrap { gap: 17px; }
}
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); box-shadow: 12px 0 34px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-backdrop { background: rgba(37,31,51,.5); inset: 0; position: fixed; z-index: 1030; display: none; }
  .sidebar-backdrop.show { display: block; }
  .topbar { padding: 12px 18px; }
  .page-content { padding: 23px 18px 40px; }
  .mobile-menu { display: grid !important; }
  .topbar-search { max-width: none; }
  .top-user-text { display: none; }
  .landing-hero { grid-template-columns: 1fr; margin-top: 25px; }
  .browser-frame { max-width: 680px; width: 100%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .login-page { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
}
@media (min-width: 992px) {
  .mobile-menu { display: none !important; }
  .sidebar-collapsed .sidebar { width: 76px; }
  .sidebar-collapsed .sidebar .brand span, .sidebar-collapsed .sidebar .brand-tenant, .sidebar-collapsed .sidebar-nav a span, .sidebar-collapsed .sidebar-nav .nav-section-label, .sidebar-collapsed .sidebar .profile-mini > div, .sidebar-collapsed .sidebar .logout span { display: none; }
  .sidebar-collapsed .sidebar .brand, .sidebar-collapsed .sidebar-nav a { justify-content: center; }
  .sidebar-collapsed .app-main { margin-left: 76px; }
  /* Icon-only mode has no visible section header to expand a collapsed section from —
     so every section's links stay visible here regardless of its saved open/closed
     state in the full sidebar. Only the header (hidden above) tracked that state. */
  .sidebar-collapsed .sidebar-nav .nav-section .collapse:not(.show) { display: flex !important; height: auto; }
}
@media (max-width: 650px) {
  .public-nav { padding: 16px 20px; }
  .public-nav-links > a:not(.btn) { display: none; }
  .landing-hero { margin-bottom: 70px; padding: 0 20px; }
  .landing-hero h1 { font-size: 2.8rem; }
  .feature-section { padding: 0 20px; }
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .final-cta { border-radius: 0; margin-bottom: 45px; padding: 35px 24px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .filter-bar .form-select, .filter-bar .form-control { flex: 1; min-width: 130px; }
  .donut-wrap { align-items: flex-start; flex-direction: column; }
  .login-form-side { padding: 24px; }
}

/* =====================================================================================
   Customer Portal (Phase 5) — a top-nav layout instead of the staff sidebar (a
   Customer only ever has six things to look at, not 25+ modules across sections).
   Reuses every existing card/table/badge/status-* / btn-* class as-is — this is the
   ONLY new CSS the Portal needed.
   ===================================================================================== */
.portal-topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
.portal-topbar-inner { display: flex; align-items: center; gap: 22px; padding: 13px 30px; max-width: 1600px; margin: 0 auto; }
.portal-nav { display: flex; align-items: center; gap: 4px; }
.portal-nav a { border-radius: 8px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .87rem; font-weight: 600; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.portal-nav a:hover { background: var(--accent-soft); color: var(--lime-hover); }
.portal-nav a.active { background: var(--lime); color: #fff; }
.portal-nav-mobile { display: none; flex-direction: column; gap: 3px; padding: 0 20px 16px; }
.portal-nav-mobile.show { display: flex; }
.portal-nav-mobile a { border-radius: 8px; color: var(--muted); display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-weight: 600; }
.portal-nav-mobile a.active { background: var(--lime); color: #fff; }
.portal-main { flex: 1 0 auto; }
@media (max-width: 991px) {
  .portal-nav { display: none; }
}

/* =====================================================================================
   Royal Purple theme — Bootstrap integration layer.
   Bootstrap 5.3 ships its own blue/green/red defaults; this maps every Bootstrap
   component the app uses (or may use) onto the design tokens above, so a plain
   btn-primary / alert-danger / form-check / pagination never looks off-brand.
   Kept last in the file on purpose: same specificity, later in the cascade wins.
   ===================================================================================== */
:root {
  --bs-body-font-family: Inter, sans-serif;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-primary: #7652B5;
  --bs-primary-rgb: 118,82,181;
  --bs-success: #459B62;
  --bs-success-rgb: 69,155,98;
  --bs-warning: #D99136;
  --bs-warning-rgb: 217,145,54;
  --bs-info: #528BC5;
  --bs-info-rgb: 82,139,197;
  --bs-danger: #D94B4B;
  --bs-danger-rgb: 217,75,75;
  --bs-link-color: var(--lime);
  --bs-link-color-rgb: 118,82,181;
  --bs-link-hover-color: var(--lime-hover);
  --bs-link-hover-color-rgb: 99,68,152;
  --bs-focus-ring-color: rgba(var(--lime-rgb),.25);
}

/* Primary = brand purple, white text (e.g. Customer Profile "Receive payment"). */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lime);
  --bs-btn-border-color: var(--lime);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lime-hover);
  --bs-btn-hover-border-color: var(--lime-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lime-hover);
  --bs-btn-active-border-color: var(--lime-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--lime);
  --bs-btn-disabled-border-color: var(--lime);
  --bs-btn-focus-shadow-rgb: var(--lime-rgb);
  background-image: none;
  box-shadow: 0 4px 12px rgba(var(--lime-rgb),.22);
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(var(--lime-rgb),.30); transform: translateY(-1px); }
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 86%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--danger) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--danger) 80%, #000);
  --bs-btn-disabled-bg: var(--danger);
  --bs-btn-disabled-border-color: var(--danger);
  --bs-btn-focus-shadow-rgb: 217,75,75;
}
.btn-danger, .btn-success, .btn-outline-primary, .btn-outline-secondary { background-image: none; }
.btn-success { --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: color-mix(in srgb, var(--success) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--success) 86%, #000); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--lime); --bs-btn-border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--lime-hover); --bs-btn-hover-border-color: var(--lime); --bs-btn-active-bg: var(--lime); --bs-btn-active-color: #fff; }
.btn-link { color: var(--lime); text-decoration: none; }
.btn-link:hover { color: var(--lime-hover); }
.btn:disabled, .btn.disabled { transform: none !important; box-shadow: none !important; }
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible, .form-check-input:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Semantic text utilities → tokens. */
.text-primary { color: var(--lime) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-danger { color: var(--danger) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-primary { background-color: var(--lime) !important; }
.progress { border-radius: 99px; }
.progress-bar { background-color: var(--lime); }

/* Alerts — soft tint, no hard border, same radius as cards. */
.alert { border: 0; border-radius: 12px; font-size: .8rem; padding: 11px 14px; }
.alert-danger { --bs-alert-bg: var(--danger-soft); --bs-alert-color: color-mix(in srgb, var(--danger) 82%, var(--text)); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: color-mix(in srgb, var(--warning) 78%, var(--text)); --bs-alert-border-color: transparent; }
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: color-mix(in srgb, var(--success) 82%, var(--text)); --bs-alert-border-color: transparent; }
.alert-info { --bs-alert-bg: var(--info-soft); --bs-alert-color: color-mix(in srgb, var(--info) 82%, var(--text)); --bs-alert-border-color: transparent; }
.alert-primary, .alert-secondary, .alert-light { --bs-alert-bg: var(--accent-soft); --bs-alert-color: var(--charcoal); --bs-alert-border-color: transparent; }

/* Checkboxes, radios, switches. */
.form-check-input { border-color: color-mix(in srgb, var(--lime) 25%, var(--line)); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--lime); border-color: var(--lime); }
.form-check-input:focus { border-color: var(--lime); box-shadow: var(--ring); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237652B5'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background: var(--lime); }
.form-range::-moz-range-thumb { background: var(--lime); }

/* Pagination. */
.pagination { --bs-pagination-color: var(--text); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--lime-hover); --bs-pagination-hover-bg: var(--accent-soft); --bs-pagination-hover-border-color: var(--line); --bs-pagination-focus-color: var(--lime-hover); --bs-pagination-focus-bg: var(--accent-soft); --bs-pagination-focus-box-shadow: var(--ring); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--lime); --bs-pagination-active-border-color: var(--lime); --bs-pagination-disabled-color: var(--muted); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-border-radius: 10px; gap: 4px; }
.pagination .page-link { border-radius: 10px !important; font-size: .8rem; font-weight: 500; min-width: 36px; text-align: center; }

/* Nav pills / list groups / badges (Bootstrap) — in case a page uses them. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--lime); --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-border-radius: 10px; }
.nav-pills .nav-link { color: var(--muted); }
.nav-pills .nav-link:hover { color: var(--lime); }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--text); --bs-list-group-action-hover-bg: var(--accent-soft); --bs-list-group-active-bg: var(--lime); --bs-list-group-active-border-color: var(--lime); }
.badge { font-weight: 600; border-radius: 99px; }
.btn-close:focus { box-shadow: var(--ring); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Toasts built by common.js (HRX.toast) — light card with a semantic accent bar. */
.hr-toast { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--hr-toast-c, var(--lime)); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.hr-toast.is-success { --hr-toast-c: var(--success); }
.hr-toast.is-info { --hr-toast-c: var(--info); }
.hr-toast.is-error { --hr-toast-c: var(--danger); }
.hr-toast > i { color: var(--hr-toast-c, var(--lime)); font-size: 1.25rem; line-height: 1.2; }
.hr-toast-title { font-weight: 600; font-size: .88rem; }
.hr-toast-msg { color: var(--muted); font-size: .82rem; }
.hr-confirm-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.hr-confirm-icon.is-warning { background: var(--warning-soft); color: var(--warning); }

/* Accent "onyx" (gold) keeps dark text on its light-gold fills for contrast. */
[data-accent="onyx"] .btn-lime, [data-accent="onyx"] .btn-lime:hover, [data-accent="onyx"] .btn-primary,
[data-accent="onyx"] .sidebar-nav a.active, [data-accent="onyx"] .portal-nav a.active, [data-accent="onyx"] .portal-nav-mobile a.active,
[data-accent="onyx"] .setting-quickpick.active, [data-accent="onyx"] .view-toggle .btn.active { color: #181410; --bs-btn-color: #181410; --bs-btn-hover-color: #181410; }

/* Selection + scrollbars in the brand colors. */
::selection { background: rgba(var(--lime-rgb),.22); color: inherit; }
.table-wrap, .modal-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lime) 30%, var(--line)) transparent; }

/* Responsive polish (tablet / mobile). */
@media (max-width: 991px) {
  .page-heading > .d-flex { width: 100%; }
}
@media (max-width: 767px) {
  .page-heading h1 { font-size: 1.38rem; }
  .stat-card { padding: 16px; }
  .stat-number { font-size: 1.32rem; margin-top: 12px; }
  .stat-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 1rem; }
  .section-card { padding: 16px; }
  .page-heading .btn { flex: 1 1 auto; }
  .table > :not(caption) > * > * { padding: 11px 10px; }
  .modal-header, .modal-footer { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .nav-link { white-space: nowrap; }
}

@media print {
  .card { box-shadow: none !important; }
  .table thead th { background: transparent !important; }
}

/* Small additions shared by all apps. */
.login-brand-panel .eyebrow:empty { display: none; }
.bg-success-subtle { background-color: var(--success-soft) !important; }
.bg-warning-subtle { background-color: var(--warning-soft) !important; }
.bg-info-subtle { background-color: var(--info-soft) !important; }
.bg-danger-subtle { background-color: var(--danger-soft) !important; }
.bg-primary-subtle, .bg-secondary-subtle { background-color: var(--accent-soft) !important; }
.btn-outline-warning { --bs-btn-color: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-bg: var(--warning); --bs-btn-hover-border-color: var(--warning); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--warning); --bs-btn-active-color: #fff; background-image: none; }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--danger); --bs-btn-active-color: #fff; background-image: none; }
.btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--success); --bs-btn-active-color: #fff; background-image: none; }

/* "Login as tenant" support session (Super Admin), see SupportSession. */
.support-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 30px 0; padding: 10px 14px; border-radius: 12px; background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text)); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); font-size: .8rem; }
.support-banner > i { font-size: 1.05rem; }
.support-banner .btn { background: var(--warning); border-color: var(--warning); color: #fff; }
.support-banner .btn:hover { background: color-mix(in srgb, var(--warning) 85%, #000); color: #fff; }
@media (max-width: 767px) { .support-banner { margin: 12px 16px 0; } }

/* ===================================================================
   Digital Building (/BuildingMap) — tower view, unit panel, floor summary.
   All colours come from theme tokens, so dark mode and accents just work.
   Each status gets its own colour here (the shared badges use blue for
   both Sold and Possessed, which is too close on a map).
   =================================================================== */
.bm-available { --c: var(--success); --c-soft: var(--success-soft); }
.bm-reserved  { --c: var(--warning); --c-soft: var(--warning-soft); }
.bm-sold      { --c: var(--lime);    --c-soft: var(--accent-soft); }
.bm-possessed { --c: var(--info);    --c-soft: var(--info-soft); }

/* building switcher */
.bm-buildings { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 10px; scrollbar-width: thin; }
.bm-skeleton { flex: 0 0 250px; height: 92px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: bmShimmer 1.2s linear infinite; }
@keyframes bmShimmer { to { background-position: -200% 0; } }
.bm-bcard { flex: 0 0 auto; min-width: 250px; max-width: 320px; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); color: var(--text); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.bm-bcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lime) 35%, var(--line)); box-shadow: var(--shadow); }
.bm-bcard.active { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(var(--lime-rgb),.14), var(--shadow); background: color-mix(in srgb, var(--lime) 5%, var(--surface)); }
.bm-bcard-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--lime); font-size: 1.15rem; }
.bm-bcard.active .bm-bcard-icon { background: var(--lime); color: #fff; }
.bm-bcard-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.bm-bcard-body strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-bcard-body small { color: var(--muted); font-size: .72rem; }
.bm-bcard-bar { display: block; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.bm-bcard-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lime), color-mix(in srgb, var(--lime) 60%, var(--info))); }
.bm-money { font-size: 1.3rem; }

/* layout: tower + sticky panel */
.bm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bm-panel { position: sticky; top: 84px; padding: 0 !important; overflow: hidden; }
@media (max-width: 1199px) { .bm-layout { grid-template-columns: 1fr; } .bm-panel { position: static; } }

/* toolbar */
.bm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bm-toolbar-2 { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.bm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bm-tools .form-select { width: auto; min-width: 120px; }
.bm-search { position: relative; }
.bm-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .8rem; }
.bm-search input { padding-left: 30px; min-width: 200px; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); background: var(--c-soft); color: color-mix(in srgb, var(--c) 80%, var(--text)); border-radius: 99px; padding: 5px 12px; font-size: .76rem; font-weight: 600; transition: opacity .15s ease, background .15s ease; }
.bm-chip b { background: var(--surface); color: var(--text); border-radius: 99px; padding: 0 7px; font-size: .7rem; }
.bm-chip.off { opacity: .45; background: transparent; text-decoration: line-through; }
.bm-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.bm-seg .btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 600; font-size: .74rem; }
.bm-seg .btn.active { background: var(--lime); border-color: var(--lime); color: #fff; }
.bm-heat-legend { display: flex; align-items: center; gap: 10px; font-size: .72rem; color: var(--muted); margin: -6px 0 14px; }
.bm-heat-bar { flex: 0 0 180px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 12%, var(--surface)), var(--lime)); }

/* the tower */
.bm-stage { --tile: 92px; --tile-h: 74px; overflow-x: auto; padding: 4px 2px 6px; }
.bm-stage[data-zoom="s"] { --tile: 70px; --tile-h: 54px; }
.bm-stage[data-zoom="l"] { --tile: 118px; --tile-h: 92px; }
.bm-tower { width: max-content; margin: 0 auto; display: flex; flex-direction: column; padding-top: 22px; }
.bm-roof { margin: 0 64px 0 58px; padding: 12px 18px; border-radius: 16px 16px 4px 4px; background: linear-gradient(135deg, var(--charcoal), var(--lime)); color: #fff; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 10px 22px rgba(var(--lime-rgb),.22); position: relative; }
.bm-roof::before { content: ""; position: absolute; left: 50%; top: -14px; width: 3px; height: 14px; background: var(--charcoal); transform: translateX(-50%); }
.bm-roof::after { content: ""; position: absolute; left: 50%; top: -19px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); transform: translateX(-50%); box-shadow: 0 0 10px var(--danger); animation: bmBeacon 1.6s ease-in-out infinite; }
@keyframes bmBeacon { 50% { opacity: .35; } }
.bm-roof-name { font-weight: 700; font-size: .9rem; }
.bm-roof-type { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.bm-floor { display: flex; align-items: stretch; gap: 0; }
.bm-floor-label { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); border-right: 2px solid var(--line); padding-right: 6px; }
.bm-floor-label strong { font-size: .95rem; color: var(--text); line-height: 1.1; }
.bm-floor-label small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.bm-floor-units { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--tile)); gap: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); border-left: 3px solid color-mix(in srgb, var(--charcoal) 55%, var(--line)); border-right: 3px solid color-mix(in srgb, var(--charcoal) 55%, var(--line)); border-bottom: 1px dashed var(--line); min-height: calc(var(--tile-h) + 16px); align-items: stretch; transition: background .3s ease; }
.bm-floor.flash .bm-floor-units { background: color-mix(in srgb, var(--lime) 18%, var(--surface)); }
.bm-floor-empty { grid-column: 1 / -1; align-self: center; color: var(--muted); font-size: .76rem; font-style: italic; padding-left: 4px; }
.bm-floor-side { flex: 0 0 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding-left: 10px; color: var(--muted); font-size: .62rem; }
.bm-floor-count { font-weight: 700; font-size: .8rem; color: var(--text); }
.bm-floor-mini { display: block; width: 46px; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bm-floor-mini > span { display: block; height: 100%; background: var(--lime); border-radius: 99px; }
td .bm-floor-mini { width: auto; height: 7px; }
.bm-entrance { margin: 0 64px 0 58px; height: 26px; background: color-mix(in srgb, var(--charcoal) 85%, black); border-radius: 0 0 4px 4px; display: flex; justify-content: center; align-items: flex-end; }
.bm-entrance span { background: var(--surface); color: var(--text); font-size: .64rem; font-weight: 700; padding: 3px 14px; border-radius: 8px 8px 0 0; text-transform: uppercase; letter-spacing: .06em; }
.bm-basement .bm-floor-units { background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, color-mix(in srgb, var(--surface-2) 60%, var(--line)) 10px 20px); border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.bm-basement .bm-floor-units { flex: 1; }
.bm-basement-fill { display: flex !important; align-items: center; color: var(--muted); font-size: .76rem; font-weight: 600; min-height: 46px !important; grid-template-columns: none; }
.bm-groundline { margin: 0 20px 0 30px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--success) 55%, var(--line)), transparent); margin-top: 6px; }

/* unit tile */
.bm-unit { position: relative; width: var(--tile); height: var(--tile-h); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: var(--c-soft); color: color-mix(in srgb, var(--c) 70%, var(--text)); border-radius: 10px; padding: 6px 8px 6px 11px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; box-shadow: inset 4px 0 0 var(--c); transition: transform .14s ease, box-shadow .14s ease, opacity .2s ease, filter .2s ease; }
.bm-unit:hover { transform: translateY(-2px); box-shadow: inset 4px 0 0 var(--c), 0 8px 18px color-mix(in srgb, var(--c) 28%, transparent); z-index: 4; }
.bm-unit:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--c), 0 0 0 3px rgba(var(--lime-rgb),.35); }
.bm-unit.selected { box-shadow: inset 4px 0 0 var(--c), 0 0 0 3px var(--surface), 0 0 0 5px var(--lime), 0 10px 22px rgba(var(--lime-rgb),.3); transform: translateY(-2px) scale(1.04); z-index: 3; }
.bm-unit.dim { opacity: .2; filter: grayscale(.8); }
.bm-unit-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.bm-unit-no { font-weight: 800; font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-unit-top i { font-size: .8rem; color: var(--c); }
.bm-unit-meta { font-size: .6rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-unit-price { font-size: .66rem; font-weight: 700; color: color-mix(in srgb, var(--c) 85%, var(--text)); }
.bm-unit-paid { position: absolute; left: 4px; right: 0; bottom: 0; height: 3px; border-radius: 0 0 9px 0; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, transparent); }
.bm-unit-paid > span { display: block; height: 100%; background: var(--c); }
.bm-stage[data-zoom="s"] .bm-unit-meta, .bm-stage[data-zoom="s"] .bm-unit-price { display: none; }
.bm-stage[data-zoom="s"] .bm-unit { justify-content: center; }
/* colour modes */
.bm-stage[data-color="price"] .bm-unit, .bm-stage[data-color="paid"] .bm-unit { --c: var(--lime); background: color-mix(in srgb, var(--lime) var(--heat, 10%), var(--surface)); border-color: color-mix(in srgb, var(--lime) 40%, transparent); }
.bm-stage[data-color="price"] .bm-unit .bm-unit-no, .bm-stage[data-color="paid"] .bm-unit .bm-unit-no { color: var(--text); }
.bm-stage[data-color="paid"] .bm-unit.bm-available { background: var(--surface); border-style: dashed; }

/* unit panel */
.bm-panel-empty { text-align: center; padding: 42px 26px; }
.bm-panel-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--lime); font-size: 1.5rem; animation: bmNudge 2.4s ease-in-out infinite; }
@keyframes bmNudge { 50% { transform: translateY(-4px); } }
.bm-panel-head { position: relative; padding: 18px 20px 16px; background: linear-gradient(135deg, var(--c-soft), color-mix(in srgb, var(--c-soft) 40%, var(--surface))); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.bm-panel-head h2 { margin: 2px 0 0; font-size: 1.35rem; font-weight: 800; color: var(--text); }
.bm-status-pill { align-self: flex-start; background: var(--c); color: #fff; border-radius: 99px; padding: 3px 11px; font-size: .72rem; font-weight: 700; }
.bm-panel-close { position: absolute; right: 14px; top: 14px; }
.bm-price { padding: 16px 20px 6px; display: flex; flex-direction: column; }
.bm-price small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.bm-price strong { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.bm-price span { color: var(--muted); font-size: .76rem; }
.bm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 20px 16px; }
.bm-facts > div { background: var(--surface-2); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.bm-facts i { color: var(--lime); font-size: 1rem; }
.bm-facts strong { font-size: .86rem; color: var(--text); }
.bm-facts small { color: var(--muted); font-size: .64rem; }
.bm-owner { margin: 0 20px 14px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.bm-owner-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.bm-owner-head a { color: var(--lime); }
.bm-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #fff; font-weight: 700; }
.bm-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .8rem; border-bottom: 1px dashed var(--line); }
.bm-kv:last-of-type { border-bottom: 0; }
.bm-kv span { color: var(--muted); }
.bm-kv strong { text-align: right; color: var(--text); }
.bm-progress { margin-top: 10px; }
.bm-progress-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bm-progress-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 60%, var(--lime))); transition: width .5s ease; }
.bm-note { margin: 0 20px 14px; padding: 10px 12px; border-radius: 12px; background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text)); font-size: .78rem; }
.bm-actions { display: grid; gap: 8px; padding: 0 20px 14px; }
.bm-nav-hint { padding: 10px 20px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.bm-nav-hint kbd { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: .64rem; margin-right: 2px; box-shadow: none; }
.bm-floor-row { cursor: pointer; }

@media (max-width: 767px) {
  .bm-roof, .bm-entrance { margin-left: 46px; margin-right: 0; }
  .bm-floor-label { flex-basis: 46px; }
  .bm-floor-side { display: none; }
  .bm-search input { min-width: 150px; }
}

@media print {
  .bm-buildings, .bm-toolbar, .bm-heat-legend, .bm-panel, .page-heading .btn, #bmKpis .stat-icon { display: none !important; }
  .bm-layout { display: block; }
  .bm-stage { overflow: visible; }
  .bm-unit { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bm-roof, .bm-entrance, .bm-floor-units, .bm-floor-mini > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bm-unit.dim { opacity: 1; filter: none; }
}

/* ===================================================================
   Visitors (/Visitors) — gate entry. Theme tokens only.
   =================================================================== */
.vis-pass-card { background: linear-gradient(120deg, color-mix(in srgb, var(--lime) 7%, var(--surface)), var(--surface) 60%); }
.vis-pass-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: #fff; font-size: 1.35rem; box-shadow: 0 8px 18px rgba(var(--lime-rgb),.28); }
.vis-pass-input { font-size: 1.25rem; font-weight: 700; letter-spacing: .3em; text-align: center; max-width: 220px; }
.vis-pass-ok { border: 1px solid color-mix(in srgb, var(--success) 40%, var(--line)); background: var(--success-soft); border-radius: 14px; padding: 12px 14px; }
.vis-pass-bad { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 80%, var(--text)); border-radius: 12px; padding: 10px 14px; font-size: .84rem; font-weight: 600; }
.vis-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--lime); font-weight: 700; font-size: .85rem; }
.vis-avatar.lg { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.05rem; background: var(--lime); color: #fff; }
.vis-code { color: var(--muted); font-size: .7rem; }
.vis-code b { color: var(--lime); letter-spacing: .05em; }
.vis-purpose-tag { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.vis-plate { display: inline-block; border: 1.5px solid var(--text); border-radius: 6px; padding: 1px 7px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; font-weight: 700; letter-spacing: .04em; background: var(--surface); }
.vis-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--success); }
.vis-live.over { color: var(--danger); }
.vis-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: visPulse 1.6s ease-out infinite; }
@keyframes visPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.vis-over-row > td { background: color-mix(in srgb, var(--danger) 5%, transparent) !important; }

/* form */
.vis-purpose { display: flex; flex-wrap: wrap; gap: 8px; }
.vis-purpose-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vis-purpose-opt span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--surface); cursor: pointer; transition: all .15s ease; }
.vis-purpose-opt span i { color: var(--lime); }
.vis-purpose-opt:hover span { border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); color: var(--text); }
.vis-purpose-opt input:checked + span { background: var(--lime); border-color: var(--lime); color: #fff; box-shadow: 0 6px 14px rgba(var(--lime-rgb),.25); }
.vis-purpose-opt input:checked + span i { color: #fff; }
.vis-purpose-opt input:focus-visible + span { box-shadow: var(--ring); }
.vis-returning { background: var(--success-soft); color: color-mix(in srgb, var(--success) 75%, var(--text)); border-radius: 12px; padding: 9px 12px; font-size: .8rem; margin-bottom: 14px; }
.vis-returning.warn { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 75%, var(--text)); }

/* gate pass ticket */
.vis-ticket { border: 2px dashed color-mix(in srgb, var(--lime) 55%, var(--line)); border-radius: 18px; padding: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 6%, var(--surface)), var(--surface)); }
.vis-ticket-top { display: flex; flex-direction: column; gap: 2px; }
.vis-ticket-top strong { font-size: 1.1rem; }
.vis-ticket-code { font-size: 2.6rem; font-weight: 800; letter-spacing: .18em; color: var(--charcoal); margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .vis-ticket-code { color: color-mix(in srgb, var(--lime) 60%, white); }
.vis-ticket-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.vis-ticket-rows > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.vis-ticket-rows span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.vis-ticket-rows strong { font-size: .82rem; }
/* QR on the gate pass + camera scanner */
.vis-ticket-qr { display: flex; justify-content: center; margin: 12px 0 2px; }
.vis-qr { width: 180px; height: 180px; image-rendering: pixelated; border-radius: 12px; background: #fff; padding: 6px; box-shadow: var(--shadow-sm); }
.vis-scan-box { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; }
.vis-scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vis-scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.vis-scan-line { position: absolute; left: 20%; right: 20%; top: 20%; height: 3px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: visScan 1.8s ease-in-out infinite alternate; }
@keyframes visScan { to { top: 79%; } }

/* ===================================================================
   HR & Payroll (/Employees, /Payroll). Theme tokens only.
   =================================================================== */
.hr-money, .pr-money { font-size: 1.3rem; }
.hr-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--lime); font-weight: 700; font-size: .78rem; }
.hr-avatar.lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.2rem; background: linear-gradient(135deg, var(--charcoal), var(--lime)); color: #fff; }
.hr-form-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--lime); margin-bottom: 12px; }
.hr-salary-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; height: 100%; }
.hr-salary-sum { background: var(--surface); border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); }
.hr-salary-sum > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: .82rem; }
.hr-salary-sum span { color: var(--muted); }
.hr-salary-sum .net { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; font-size: .95rem; }
.hr-salary-sum .net strong { color: var(--lime); }
.hr-bar, .pr-run-bar, .pr-paidbar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.hr-bar > span, .pr-run-bar > span, .pr-paidbar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 55%, var(--lime))); }
.hr-adv-plan { background: var(--accent-soft); color: color-mix(in srgb, var(--lime) 80%, var(--text)); border-radius: 12px; padding: 10px 12px; font-size: .8rem; }
.hr-profile-head { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hr-mini { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; height: 100%; }
.hr-mini small { color: var(--muted); font-size: .68rem; }
.hr-mini strong { font-size: 1rem; }
.hr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .82rem; }
.hr-kv span { color: var(--muted); }
.hr-kv strong { text-align: right; }
.hr-kv.total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 4px; font-size: .92rem; }
.hr-kv.total strong { color: var(--lime); }
.hr-note { background: var(--warning-soft); border-radius: 12px; padding: 10px 12px; font-size: .8rem; }
.hr-adv-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }

.pr-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1199px) { .pr-layout { grid-template-columns: 1fr; } }
.pr-runs { position: sticky; top: 84px; }
@media (max-width: 1199px) { .pr-runs { position: static; } }
.pr-run-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.pr-run { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.pr-run:hover { border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); }
.pr-run.active { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(var(--lime-rgb),.13); background: color-mix(in srgb, var(--lime) 5%, var(--surface)); }
.pr-run-top, .pr-run-mid { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pr-run-mid { font-size: .76rem; color: var(--muted); }
.pr-run-mid b { color: var(--text); }
.pr-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.pr-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.pr-bar-col span { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 55%, var(--surface))); }
.pr-bar-col small { font-size: .62rem; color: var(--muted); }
.pr-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.pr-empty > i { font-size: 2.2rem; color: var(--lime); }
.pr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-head h2 { margin: 2px 0 0; font-size: 1.4rem; font-weight: 800; }
.pr-steps { display: flex; gap: 6px; align-items: center; }
.pr-step { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: 99px; background: var(--surface-2); }
.pr-step span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pr-step.now { background: var(--accent-soft); color: var(--lime); }
.pr-step.now span { background: var(--lime); box-shadow: 0 0 0 3px rgba(var(--lime-rgb),.2); }
.pr-step.done { color: var(--success); background: var(--success-soft); }
.pr-step.done span { background: var(--success); }
.pr-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 767px) { .pr-totals { grid-template-columns: repeat(2, 1fr); } }
.pr-totals > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pr-totals small { color: var(--muted); font-size: .68rem; }
.pr-totals strong { font-size: 1.05rem; }
.pr-totals .net { background: linear-gradient(135deg, var(--charcoal), var(--lime)); color: #fff; }
.pr-totals .net small { color: rgba(255,255,255,.8); }
.pr-hint { background: var(--info-soft); color: color-mix(in srgb, var(--info) 70%, var(--text)); border-radius: 12px; padding: 10px 12px; font-size: .8rem; margin-bottom: 14px; }
.pr-toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.pr-toolbar .search-field { max-width: 260px; }
.pr-table tfoot th { background: var(--surface-2); font-size: .78rem; }
.pr-net { color: var(--lime); }
.pr-how > div { display: flex; gap: 8px; font-size: .78rem; color: var(--muted); padding: 3px 0; }
.pr-how i { color: var(--lime); }
.pr-calc { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.pr-calc > div { display: flex; justify-content: space-between; font-size: .8rem; padding: 3px 0; }
.pr-calc span { color: var(--muted); }
.pr-calc .net { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 7px; font-size: .95rem; }
.pr-calc .net b { color: var(--lime); }
.pr-calc .net.bad b { color: var(--danger); }
.pr-pay-sum { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.pr-pay-total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--line); }
.pr-pay-total strong { font-size: 1.3rem; color: var(--lime); }
.pr-table td, .pr-table th { padding-left: 8px; padding-right: 8px; }
.pr-table td .small { white-space: nowrap; }
@media (max-width: 1399px) { .pr-layout { grid-template-columns: 1fr; } .pr-runs { position: static; } .pr-run-list { flex-direction: row; overflow-x: auto; max-height: none; } .pr-run { min-width: 210px; } .pr-trend { display: none; } }
/* HR & Payroll hub: one page, three big tabs */
.hub-tabs { display: flex; gap: 8px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: var(--shadow-sm); width: max-content; max-width: 100%; overflow-x: auto; }
.hub-tab { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .86rem; padding: 9px 18px; border-radius: 11px; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.hub-tab:hover { color: var(--text); background: var(--surface-2); }
.hub-tab.active { background: var(--lime); color: #fff; box-shadow: 0 6px 16px rgba(var(--lime-rgb),.28); }
.hub-tab b { background: color-mix(in srgb, currentColor 16%, transparent); border-radius: 99px; padding: 0 8px; font-size: .72rem; }

/* ===================================================================
   Zameenix brand logo  (v zx1)
   One wordmark logo everywhere. Surfaces that are always dark (sidebar,
   login hero) use the "ondark" file; surfaces that follow the theme
   carry two images and CSS shows the right one (.zx-for-light/.zx-for-dark).
   =================================================================== */
.zx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.zx-brand:hover { text-decoration: none; }
.zx-logo { display: block; height: auto; max-width: 100%; }
.zx-logo-full { height: 36px; width: auto; }
.zx-logo-mark { display: none; height: 34px; width: auto; }
.zx-for-dark { display: none; }
[data-theme="dark"] .zx-for-light { display: none; }
[data-theme="dark"] .zx-for-dark { display: block; }
.sidebar .zx-brand { padding: 2px 8px 8px; }
.zx-brand:hover .zx-logo { filter: drop-shadow(0 4px 10px rgba(var(--lime-rgb), .35)); }
.login-hero .zx-logo-full, .login-brand-panel .zx-logo-full { height: 54px; }
.login-form-box .zx-logo-full { height: 42px; }
.portal-topbar .zx-logo-full { height: 34px; }
.public-nav .zx-logo-full { height: 40px; }
.public-footer .zx-logo-full { height: 30px; }
/* product label that used to be part of the old text logo ("High-Rise", "Platform", "Customer Portal") */
.zx-chip { display: inline-block; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.zx-chip--theme { background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); }
/* second line under the sidebar logo: product chip + tenant name */
.zx-sub { display: flex; align-items: center; gap: 9px; padding: 0 10px 20px; min-width: 0; }
.zx-sub .brand-tenant { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; }
/* page-transition loader now shows the Z mark (wider than the old tall icon) */
#pageTransitionOverlay .mark { width: 62px; height: 58px; }
@media (max-width: 480px) {
  .zx-brand .zx-chip { display: none; }
  .zx-logo-full { height: 30px; }
  .login-form-box .zx-logo-full { height: 34px; }
}
@media (min-width: 992px) {
  .sidebar-collapsed .sidebar .zx-logo-full { display: none; }
  .sidebar-collapsed .sidebar .zx-logo-mark { display: block; }
  .sidebar-collapsed .sidebar .zx-sub { display: none; }
  .sidebar-collapsed .sidebar .zx-brand { padding: 2px 0 8px; }
}