/* Executive dashboard — Arabic RTL, dark (default) + day (light) themes.
   The theme is <html data-theme="dark|light">, set before first paint by the inline script in _Layout
   (saved per browser). Every color below is a token — components never hard-code theme colors.
   Dark colors use the validated dark-mode data-viz palette (surface #1a1a19). */
:root {
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #202120;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255,255,255,0.10);

    /* Interaction tokens (formerly hard-coded for dark). */
    --text-strong: #ffffff;                    /* hover / active text */
    --hover-bg: #2b2c2a;                       /* hovered neutral button */
    --overlay-hover: rgba(255,255,255,.08);    /* hovered option in a list */
    --placeholder: #ffffff;                    /* list-search placeholder at rest */
    --shadow-pop: 0 10px 30px rgba(0,0,0,.45); /* floating menus */
    --chart-grid: rgba(255,255,255,.06);       /* chart grid lines */
    --accent-soft: rgba(57,135,229,.14);       /* tinted icon tiles / hover glow */
    --accent-line: rgba(57,135,229,.50);       /* accent border on hover */
    --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 12px 28px -12px rgba(0,0,0,.60); /* lifted card */

    --series-1: #3987e5; /* blue  */
    --aqua: #199e70;     /* green */
    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;
    --violet: #9085e9;
    --gold: #c98500;

    --radius: 14px;
    --gap: 16px;
    color-scheme: dark;   /* native controls (date pickers, scrollbars) follow the theme */
    font-family: system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif;
}

/* ---------- Day theme (نهاري) ---------- */
:root[data-theme="light"] {
    --page: #f3f4f6;
    --surface-1: #ffffff;
    --surface-2: #f0f1f3;
    --text-primary: #16181b;
    --text-secondary: #474b52;
    --muted: #6b7078;
    --grid: #e4e6e9;
    --baseline: #d3d7dc;
    --border: rgba(17,24,39,0.12);

    --text-strong: #0b0d10;
    --hover-bg: #e6e8eb;
    --overlay-hover: rgba(17,24,39,.06);
    --placeholder: #474b52;
    --shadow-pop: 0 10px 30px rgba(17,24,39,.16);
    --chart-grid: rgba(17,24,39,.08);
    --accent-soft: rgba(47,120,214,.10);
    --accent-line: rgba(47,120,214,.45);
    --shadow-card: 0 1px 2px rgba(17,24,39,.05), 0 12px 28px -14px rgba(17,24,39,.22);

    /* Same hues, deepened where they carry text on a white surface (contrast). */
    --series-1: #2f78d6;
    --aqua: #13855e;
    --good: #0a8a0a;
    --warning: #b97c00;
    --critical: #c62f2f;
    --violet: #6e62d4;
    --gold: #a86f00;

    color-scheme: light;
}
/* Cards read as raised panels on the light page. */
:root[data-theme="light"] .card-tile,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .auth-card { box-shadow: 0 1px 2px rgba(17,24,39,.06); }

/* ---------- Soft theme switch ---------- */
/* Fallback (no View Transitions API): colors ease while html.theme-fading is set by theme.js. */
html.theme-fading, html.theme-fading *, html.theme-fading *::before, html.theme-fading *::after {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important;
}
/* View Transitions: the new theme is revealed as a circle growing from the toggle (see theme.js). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
    html.theme-fading, html.theme-fading * { transition: none !important; }
}

/* Theme toggle button (top bar + login page) */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.theme-toggle:hover { background: var(--hover-bg); color: var(--text-strong); }
/* The icon shows the theme a click switches TO: ☀️ while dark, 🌙 while day. */
.theme-toggle .ico-moon, :root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
.auth-theme-toggle { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 10; }

/* ---------- Shared filter bar (_FilterBar.cshtml + filter-bar.js) ---------- */
/* Header (title, active count, reset) · body (date range + presets, then an auto-fit grid of fields) ·
   footer (summary, print/Excel, search). Tokens only, so it follows the dark / day theme. */
.card-tile.fb { padding: 0; margin-bottom: 14px; }
.fb-form { display: flex; flex-direction: column; }
.fb-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.fb-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--text-primary); }
.fb-title-ico {
    width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(57,135,229,.14); background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1);
}
.fb-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--series-1); color: #fff;
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.fb-reset { font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 5px 10px; border-radius: 8px; transition: color .15s, background .15s; }
.fb-reset:hover { color: var(--critical); background: rgba(208,59,59,.10); }

.fb-body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px 16px; padding: 16px 18px 18px; align-items: start;
}
.fb-range { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-wide { grid-column: span 2; }
.fb-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; line-height: 1.2; }
.fb-on > .fb-label::after {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--series-1); margin-inline-start: 6px; vertical-align: middle;
}

/* date range: one box, two parts */
.fb-range-box {
    display: flex; align-items: stretch; min-height: 42px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.fb-range-box:focus-within { border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(57,135,229,.18); }
.fb-range-part { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin: 0; min-width: 0; cursor: text; }
.fb-range-tag { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.fb-range-part input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary);
    padding: 9px 0; font-size: 14px; outline: none; font-family: inherit;
}
.fb-range-sep {
    display: flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 13px;
    border-inline: 1px solid var(--border); background: var(--surface-1);
}
.fb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip {
    border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 999px;
    padding: 4px 13px; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.fb-chip:hover { color: var(--text-strong); border-color: var(--series-1); }
.fb-chip.active { background: var(--series-1); border-color: var(--series-1); color: #fff; }

/* inputs */
.fb .form-control.fb-input, .fb .ss-input { margin: 0; min-height: 42px; padding: 8px 12px; }
.fb .form-control:focus, .fb .ss-input:focus { border-color: var(--series-1); box-shadow: 0 0 0 3px rgba(57,135,229,.18); }
.fb-on .form-control, .fb-on .ss-input { border-color: rgba(57,135,229,.55); }
.fb-text { position: relative; }
.fb-text-ico { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .55; pointer-events: none; }
.fb-text .fb-input { padding-inline-start: 32px; }

/* footer */
.fb-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}
.fb-summary { color: var(--muted); font-size: 13px; }
.fb-summary:empty { display: none; }
.fb-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-inline-start: auto; }
.fb-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
    text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s;
}
.fb-btn:hover { border-color: var(--series-1); color: var(--text-strong); }
.fb-submit {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 28px; border-radius: 10px;
    border: none; background: var(--series-1); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(57,135,229,.28); transition: filter .15s, transform .15s;
}
.fb-submit:hover { filter: brightness(1.08); }
.fb-submit:active { transform: translateY(1px); }

.fb-toggle { display: none; }
@media (max-width: 720px) {
    .fb-range, .fb-wide { grid-column: 1 / -1; }
    /* Filters start folded: the header (title + active count) opens them. */
    .fb-collapsible .fb-head { cursor: pointer; padding: 10px 14px; }
    .fb-toggle {
        display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin-inline-start: 4px;
        border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-secondary); cursor: pointer;
    }
    .fb-toggle svg { transition: transform .15s; }
    .fb-open .fb-toggle svg { transform: rotate(180deg); }
    /* Folded: the summary and print / Excel stay reachable; «بحث» returns with the fields. */
    .fb-collapsible:not(.fb-open) .fb-body, .fb-collapsible:not(.fb-open) .fb-submit { display: none; }
    .fb-collapsible:not(.fb-open) .fb-foot:not(:has(.fb-btn, .fb-summary:not(:empty))) { display: none; }
    .fb-collapsible:not(.fb-open) .fb-foot .fb-btn { flex: 1; justify-content: center; }
    .fb-collapsible .fb-head { justify-content: flex-start; gap: 6px; }
    .fb-collapsible .fb-title { margin-inline-end: auto; }
    .fb-body { padding: 14px; gap: 14px; }
    .fb-foot { padding: 12px 14px; }
    .fb-actions { width: 100%; }
    .fb-submit { flex: 1; justify-content: center; }
}
/* Phones: stack «من» over «إلى» so full date-time values are never clipped. */
@media (max-width: 560px) {
    .fb-range-box { flex-direction: column; }
    .fb-range-sep { display: none; }
    .fb-range-part + .fb-range-part { border-top: 1px solid var(--border); }
}

/* ---------- System-wide preloader (loader.js) ---------- */
/* Blocks the page while a submit / save / delete runs. It fades in after a short delay, so instant
   operations don't flash it; hidden it doesn't intercept clicks. */
.app-loader {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35);                                   /* fallback */
    background: color-mix(in srgb, var(--page) 55%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.app-loader.show {
    opacity: 1; visibility: visible; pointer-events: all; cursor: progress;
    transition: opacity .2s ease .15s, visibility 0s linear 0s;
}
.app-loader-box {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
    padding: 22px 30px; box-shadow: var(--shadow-pop); min-width: 180px;
}
.app-loader-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--grid); border-top-color: var(--series-1);
    animation: app-loader-spin .8s linear infinite;
}
.app-loader-text { color: var(--text-primary); font-weight: 700; font-size: 14px; }
@keyframes app-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-loader-spinner { animation-duration: 2.4s; } }

/* SweetAlert2 dialogs / toasts follow the theme too. */
.swal2-popup { background: var(--surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border); }
.swal2-title, .swal2-html-container { color: var(--text-primary) !important; }
.swal2-timer-progress-bar { background: var(--series-1) !important; }

* { box-sizing: border-box; }

/* Keep LTR content (dates, phones, emails, codes) from being reordered by the RTL paragraph. */
[dir="ltr"] { unicode-bidi: isolate; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif;
}

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; transition: grid-template-columns .22s ease; }

.sidebar {
    background: var(--surface-1);
    border-inline-start: 1px solid var(--border);
    padding: 20px 14px;
    position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overflow-x: hidden;
    width: 100%; z-index: 40;
    transition: width .22s ease, padding .22s ease, box-shadow .22s ease;
}

.brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 8px 22px; min-height: 40px; }
.brand-logo { max-height: 66px; max-width: 210px; object-fit: contain; transition: max-width .22s ease, max-height .22s ease; }
.brand-fallback { font-weight: 700; letter-spacing: .5px; line-height: 1.2; font-size: 17px; }
.brand-mini { display: none; }

/* ---------- Side menu collapse (wwwroot/js/sidebar.js) ---------- */
/* Header: the logo is centred on the full sidebar width, in a fixed-height band (same centre line in both states). */
.sb-head {
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.sb-head .brand { flex: 1; min-width: 0; padding: 0; min-height: 0; }
.sb-head .brand-logo { max-width: 100%; max-height: 60px; }
/* Rounded-square toggle on the sidebar's inner edge, level with the logo (20px sidebar padding + half the 64px band). */
.sb-collapse {
    --sb-w: 248px;
    position: fixed; top: 35px; inset-inline-start: calc(var(--sb-w) - 17px); z-index: 45;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; cursor: pointer; padding: 0;
    background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: inset-inline-start .22s ease, background .15s, color .15s, border-color .15s;
}
.sb-collapse:hover { background: var(--series-1); border-color: var(--series-1); color: #fff; }
/* Scrollbar only while the pointer is on the menu — keeps the edge (and the toggle) clean. */
.sidebar { scrollbar-width: none; }
.sidebar:hover { scrollbar-width: thin; }
.sb-collapse svg { transition: transform .22s ease; }
[dir="ltr"] .sb-collapse svg { transform: scaleX(-1); }
/* Phones only: opens the drawer from the top bar. */
.sb-toggle {
    display: none; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.sb-toggle:hover { background: var(--hover-bg); color: var(--text-strong); }
.sb-backdrop { display: none; }

/* Collapsed rail: hover label (plain links) / pop-out sub-menu (groups) — one floating element, sidebar.js. */
.sb-fly { position: fixed; z-index: 1060; display: none; }
.sb-fly.show { display: block; animation: sbFlyIn .12s ease-out; }
@keyframes sbFlyIn { from { opacity: 0; } to { opacity: 1; } }
.sb-fly.tip {
    background: var(--text-strong); color: var(--surface-1); font-size: 12.5px; font-weight: 600;
    padding: 6px 10px; border-radius: 7px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none;
}
.sb-fly.menu {
    min-width: 190px; max-height: 70vh; overflow-y: auto; padding: 6px;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.sb-fly-title { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sb-fly .subnav-link { font-size: 13px; padding: 8px 10px; }

@media (min-width: 721px) {
    /* Icon rail — icons only; the name shows on hover (.sb-fly). */
    :root.sb-collapsed .app-shell { grid-template-columns: 76px 1fr; }
    :root.sb-collapsed .sidebar { width: 76px; padding-inline: 12px; }
    :root.sb-collapsed .sb-collapse { --sb-w: 76px; }
    :root.sb-collapsed .sb-collapse svg { transform: rotate(180deg); }
    :root.sb-collapsed .side-nav { align-items: center; }
    :root.sb-collapsed .side-nav .nav-link { font-size: 0; gap: 0; justify-content: center; padding: 0; width: 44px; height: 44px; flex: none; }
    :root.sb-collapsed .side-nav .nav-link span { font-size: 18px; width: auto; }
    :root.sb-collapsed .side-nav .nav-link.active { background: rgba(57,135,229,.18); }
    :root.sb-collapsed .side-nav .nav-link.active::before { inset-inline-start: -12px; }
    :root.sb-collapsed .nav-parent { justify-content: center; }
    :root.sb-collapsed .nav-caret,
    :root.sb-collapsed .nav-group .subnav { display: none; }
    /* A wide logo can't shrink to 44px legibly — show its mark (left end) instead. */
    :root.sb-collapsed .sidebar .brand-logo { width: 40px; height: 44px; max-width: none; max-height: none; object-fit: cover; object-position: left center; }
    :root.sb-collapsed .sidebar .brand-fallback { display: none; }
    :root.sb-collapsed .sidebar .brand-mini {
        display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
        border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-size: 18px;
    }
    .side-nav .nav-link, .subnav-link { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .app-shell, .sidebar, .brand-logo, .sb-backdrop { transition: none !important; }
}

/* New-tenant quick action in the top bar */
.btn-new-tenant {
    background: var(--series-1); color: #fff; text-decoration: none; font-weight: 700;
    padding: 6px 16px; border-radius: 10px; font-size: 13px; white-space: nowrap;
}
.btn-new-tenant:hover { background: #256abf; color: #fff; }

/* Admin tables & forms */
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
    .page-head h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        font-family: sans-serif;
    }
.badge-role { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 9px; border-radius: 8px; font-size: 12px; margin-inline-end: 4px; display: inline-block; }
.badge-state { padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.state-on { background: rgba(12,163,12,.15); color: var(--good); }
.state-off { background: rgba(208,59,59,.15); color: var(--critical); }
.btn-sm { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); cursor: pointer; }
.btn-sm:hover { background: var(--hover-bg); color: var(--text-strong); }
.btn-danger { border-color: rgba(208,59,59,.4); color: var(--critical); background: rgba(208,59,59,.08); }

/* Unified action controls — identical height & vertical alignment for every action button, whether
   it's a bare <button>/<a> or wrapped in an inline <form> (delete/convert/pay). */
.btn-sm, .btn-new-tenant {
    box-sizing: border-box; min-height: 34px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    vertical-align: middle; line-height: 1.15;
}
.page-head form, .card-head form, .rs-table td form, .grid-toolbar form, .subtabs form { display: inline-flex !important; align-items: center; vertical-align: middle; margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
/* Let 1fr columns stay equal even when a cell holds a wide intrinsic control (e.g. date inputs). */
.form-grid > * { min-width: 0; }
.form-grid .form-label { margin-bottom: 6px; }
.form-grid .form-control { margin-bottom: 0; width: 100%; }
.form-grid .full { grid-column: 1 / -1; }
.logo-preview { max-height: 70px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface-2); margin-bottom: 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); padding: 8px 10px; border-radius: 8px; }
select.form-control { appearance: auto; }
.rs-table td.muted, td .muted { color: var(--muted); }

/* Dark modal (Bootstrap) */
.mk-modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; color: var(--text-primary); }
.mk-modal .modal-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.mk-modal .modal-header h5 { margin: 0; font-size: 16px; font-weight: 700; }
.mk-modal .modal-body { padding: 18px; }
.mk-close { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; margin-inline-start: auto; }
.mk-close:hover { color: var(--text-strong); }
.modal-backdrop.show { opacity: .6; }

/* Sub-tabs (e.g. العملاء: المناديب / العملاء) */
.subtabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.subtab { padding: 10px 18px; color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; }
.subtab:hover { color: var(--text-primary); }
.subtab.active { color: var(--text-strong); border-bottom-color: var(--series-1); }
/* Tabbed report pages (e.g. تقارير المخزون): tabs are buttons, panels load their content on first open. */
.rep-tabs { flex-wrap: wrap; position: sticky; top: 0; z-index: 5; background: var(--page); }
.rep-tabs .subtab { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; margin-bottom: -1px; }
.rep-tabs .subtab.active { color: var(--text-strong); border-bottom-color: var(--series-1); }
.rep-tabs .subtab:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.rep-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.rep-loading { color: var(--muted); text-align: center; padding: 36px 16px; }

/* Projects grid / cards */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.proj-card { display: block; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s; }
.proj-card:hover { border-color: var(--series-1); transform: translateY(-2px); }
.proj-hero { position: relative; height: 150px; background: var(--surface-2); }
.proj-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-hero-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 46px; color: var(--muted); background: var(--surface-2); }
.proj-type { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(13,13,13,.75); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.proj-body { padding: 14px; }
.proj-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.proj-code { color: var(--series-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.proj-loc { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.proj-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.ptab { margin-top: 4px; }
.delay-alert { color: var(--critical); cursor: help; margin-inline-start: 4px; font-size: 14px; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav .nav-link {
    display: flex; align-items: center; gap: 12px;
    color: var(--text-secondary); text-decoration: none;
    padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s;
}
.side-nav .nav-link span { width: 20px; text-align: center; }
.side-nav .nav-link:hover { background: var(--surface-2); color: var(--text-primary); }
.side-nav .nav-link.active { background: linear-gradient(90deg, rgba(57,135,229,.18), transparent); color: var(--text-strong); }
.side-nav .nav-link.active::before {
    content: ""; position: absolute; inset-inline-start: 0; width: 3px; height: 22px;
    background: var(--series-1); border-radius: 3px;
}
.side-nav .nav-link { position: relative; }

/* Collapsible nav groups (Projects tree, Settings) */
.nav-group { display: flex; flex-direction: column; }
.nav-parent { display: flex; align-items: center; }
.nav-parent > .nav-link { flex: 1; }
.nav-caret { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 23px; padding: 6px 10px; transition: transform .15s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group .subnav { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px; max-height: 320px; overflow-y: auto; }
.nav-group.open .subnav { display: flex; }
.subnav-link { display: block; color: var(--text-secondary); text-decoration: none; font-size: 12.5px; padding: 7px 14px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav-link:hover { background: var(--surface-2); color: var(--text-strong); }
.subnav-link.active { background: linear-gradient(90deg, rgba(57,135,229,.18), transparent); color: var(--text-strong); }
.subnav-empty { color: var(--muted); font-size: 12px; padding: 6px 14px; }
/* «قريبًا» tag on menu items whose page isn't built yet (ComingSoon placeholder). */
.nav-soon { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; line-height: 17px;
    font-weight: 700; color: var(--warning); background: rgba(250,178,25,.14); border: 1px solid rgba(250,178,25,.35); vertical-align: 1px; }

/* ---------- Main ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }

/* (App bar + page header: see «Role-oriented workspace navigation» below.) */

.content { padding: 22px 26px 32px; flex: 1 1 auto; }

/* ---------- Cards ---------- */
.card-tile {
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head .pill { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 8px; }

/* KPI row */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.kpi {
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--kpi, var(--series-1)); }
.kpi .kpi-label { color: var(--text-secondary); font-size: 13px; margin-bottom: 8px; }
.kpi .kpi-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.kpi .kpi-unit { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi .kpi-foot { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.delta-up { color: var(--good); font-weight: 700; }
.delta-down { color: var(--critical); font-weight: 700; }

.kpi.k-sales { --kpi: var(--aqua); }
.kpi.k-leads { --kpi: var(--good); }
.kpi.k-reserve { --kpi: var(--violet); }
.kpi.k-collect { --kpi: var(--gold); }
.kpi.k-tasks { --kpi: var(--series-1); }
.kpi.k-alerts { --kpi: var(--critical); }
.kpi.k-alerts .kpi-value { color: var(--critical); }

/* Grid rows */
.grid-row { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.row-3 { grid-template-columns: 1.1fr 1.2fr 1fr; }
.row-4 { grid-template-columns: repeat(4, 1fr); }

/* Charts */
.chart-wrap { position: relative; height: 240px; }
.donut-wrap { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; }
.donut-center { position: absolute; text-align: center; }
.donut-center .big { font-size: 30px; font-weight: 800; }
.donut-center .sub { font-size: 12px; color: var(--muted); }

.legend-list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
.legend-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-secondary); }
.legend-list .dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-list .val { margin-inline-start: auto; color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Table */
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th, .rs-table td { padding: 10px 8px; text-align: start; border-bottom: 1px solid var(--border); }
.rs-table th { color: var(--muted); font-weight: 600; }
.rs-table td { font-variant-numeric: tabular-nums; }

/* Client-side table pager + grid enhancer */
.pg-hidden, .grid-hide { display: none !important; }   /* rows paged off the current page */
.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.grid-search { flex: 1 1 200px; min-width: 160px; max-width: 380px; }
.grid-search .list-search { margin: 0; }
.grid-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.grid-idx { width: 44px; text-align: center; color: var(--muted); }
.rs-pager .rs-page { min-width: 34px; text-align: center; }
.rs-pager .rs-page.active { background: var(--series-1); color: #fff; border-color: transparent; font-weight: 700; }
.rs-pager .rs-page[disabled] { opacity: .45; cursor: default; }
.tag-up { color: var(--good); font-weight: 700; }

/* Progress bars */
.progress-item { margin-bottom: 16px; }
.progress-item .pi-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.progress-item .pi-head .pct { font-weight: 700; }
.bar { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--series-1); border-radius: 6px; }

/* Mini stat rows (customer service) */
.stat-rows { display: flex; flex-direction: column; gap: 12px; }
.stat-rows .row-item { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.stat-rows .row-item .ico { font-size: 18px; }
.stat-rows .row-item .num { margin-inline-start: auto; font-weight: 800; font-size: 18px; }

/* Alerts ticker */
.alerts-bar {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 18px; display: flex; align-items: center; gap: 18px; overflow-x: auto;
}
.alerts-bar .label { font-weight: 800; white-space: nowrap; color: var(--warning); }
.alerts-bar .item { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text-secondary); font-size: 13px; }
.alerts-bar .item .time { color: var(--muted); }
.alerts-bar .item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.alerts-bar .item.urgent .dot { background: var(--critical); }

/* ---------- Footer ---------- */
.app-footer {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 24px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 13px;
}
.app-footer .powered { display: inline-flex; align-items: center; gap: 8px; }
.app-footer .syncro-chip { background: #fff; border-radius: 6px; padding: 3px 4px; display: inline-flex; align-items: center; }
.app-footer .syncro-logo { height: 28px; width: auto; display: block; }
.app-footer .sep { opacity: .5; }
.app-footer .rights { color: var(--text-secondary); }

/* ---------- Auth ---------- */
.auth-shell { min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; padding: 20px; }
.auth-wrap .app-footer { border-top: none; margin-top: 8px; }
.auth-card { width: 100%; max-width: 400px; margin: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; padding: 34px; }
.auth-card .brand { justify-content: center; padding-bottom: 10px; }
.auth-card h2 { text-align: center; margin: 6px 0 4px; }
.auth-card .subtitle { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.form-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.form-control {
    width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
    border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; font-size: 14px;
}
.form-control:focus { outline: none; border-color: var(--series-1); }

/* Inline list-search header: a full-width search bar at the top of a list card. */
.list-search-bar { margin-bottom: 12px; }
.list-search { width: 100%; margin: 0; }
.list-search::placeholder { color: var(--placeholder); opacity: 1; }   /* bright when not focused */
.list-search:focus::placeholder { color: var(--muted); }         /* dim once focused */

/* Searchable <select> enhancement: a filter input over an options dropdown (task assignee picker). */
.ss-wrap { position: relative; }
.ss-native { display: none !important; }
.ss-menu {
    position: absolute; z-index: 60; top: 100%; inset-inline: 0; margin-top: 4px; max-height: 240px;
    overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-pop);
}
/* While open the menu is positioned to the viewport so it floats over scrolling ancestors
   (document line tables use overflow-x:auto, which would otherwise clip it). */
.ss-menu.ss-fixed { position: fixed; inset-inline: auto; margin-top: 0; }
.ss-opt { padding: 9px 12px; cursor: pointer; color: var(--text-primary); font-size: 14px; }
.ss-opt:hover, .ss-opt.ss-active { background: var(--overlay-hover); }
.ss-empty { padding: 9px 12px; color: var(--muted); font-size: 13px; }
/* The pinned «الكل» / clear item — always first, set apart from the real options. */
.ss-opt.ss-all { font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.ss-opt.ss-all.ss-active { color: var(--text-primary); }

/* (Filter forms: see «Shared filter bar» — .fb-* — used by every list / report page.) */
.btn-primary {
    width: 100%; background: var(--series-1); border: none; color: #fff; font-weight: 700;
    padding: 12px; border-radius: 10px; cursor: pointer; font-size: 15px;
}
.btn-primary:hover { background: #256abf; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-secondary); font-size: 13px; }
.validation-summary-errors, .field-validation-error { color: var(--critical); font-size: 13px; }
.status-message { background: rgba(12,163,12,.15); border: 1px solid var(--good); color: var(--good); padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .row-3, .row-4 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .app-shell { grid-template-columns: 1fr; }
    /* Phones: the side menu is an off-canvas drawer opened by the ☰ button (sidebar.js). */
    .sidebar {
        position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: 100vh; width: min(280px, 85vw);
        z-index: 1045; transform: translateX(100%); transition: transform .25s ease; box-shadow: none;
    }
    [dir="ltr"] .sidebar { transform: translateX(-100%); }
    :root.sb-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.45); }
    .sb-toggle { display: inline-flex; }
    .sb-collapse { display: none; }
    .sb-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(0,0,0,.5);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    :root.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }

    /* ---- Phones: one readable column, nothing wider than the screen ---- */
    .content { padding: 16px 12px 24px; }
    .main { overflow-x: clip; }
    /* KPI cards: two per row; layout grids (often set inline per page): stacked. */
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .kpi { padding: 12px; }
    .kpi-value { font-size: 20px; }
    .grid-row, .content [style*="grid-template-columns"]:not(.kpi-grid) { grid-template-columns: minmax(0, 1fr) !important; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    /* Page header: title on its own line, actions wrap under it. */
    .page-head { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
    .page-head > div:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
    .page-head h1 { font-size: 21px; }
    .card-tile { padding: 14px; min-width: 0; }
    .card-head { flex-wrap: wrap; gap: 8px; }
    /* Tables scroll inside their card (responsive.js wraps them); cells keep one line, so columns stay readable. */
    .table-scroll { margin-inline: -4px; padding-inline: 4px; }
    .rs-table th, .rs-table td { white-space: nowrap; padding: 9px 8px; }
    .rs-table td .btn-sm, .rs-table td .btn-new-tenant { padding: 4px 8px; }
    .grid-toolbar { gap: 8px; }
    .grid-search { flex: 1 1 100%; }
    /* Tabs scroll sideways instead of wrapping into several rows. */
    .subtabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .subtabs > * { flex: none; }
    /* Modals use the whole width. */
    #appModal .modal-dialog { margin: 8px; max-width: none; }
    #appModal .modal-body { padding: 14px; }
    .status-message { font-size: 12.5px; }
}

/* =====================================================================================================
   Role-oriented workspace navigation (Views/Workspace, Views/Shared/_TopNav, js/workspace-nav.js).
   Theme tokens only; color carries state (KPIs), not module identity.
   ===================================================================================================== */

/* The old full side menu is hidden by default (shown on demand — temporary during the migration). */
@media (min-width: 721px) {
    :root.sb-hidden .app-shell { grid-template-columns: 1fr; }   /* the hidden sidebar takes no grid cell */
    :root.sb-hidden .sidebar, :root.sb-hidden .sb-collapse { display: none; }
}

/* ---- app bar (sticky): start · search · end ---- */
.topbar.tb-bar {
    position: sticky; top: 0; z-index: 1030;
    display: grid; grid-template-columns: 1fr minmax(260px, 540px) 1fr; align-items: center; gap: 14px;
    height: 76px; padding: 0 22px; border-bottom: 1px solid var(--border);   /* room for the 60px tenant logo */
    background: var(--page);
    background: color-mix(in srgb, var(--page) 84%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.tb-start, .tb-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tb-start { justify-self: start; }
/* Tenant logo — the side menu's size (up to 60px high, its 220px inner width), or the tenant's name. */
.tb-brand { display: inline-flex; align-items: center; flex: none; height: 60px; margin-inline: 8px; text-decoration: none; color: var(--text-primary); }
.tb-brand .brand { padding: 0; min-height: 0; gap: 0; }
.tb-brand .brand-logo { max-height: 60px; max-width: 220px; object-fit: contain; }
.tb-brand .brand-fallback { font-size: 17px; white-space: nowrap; }
.tb-brand .brand-mini { display: none; }
.tb-end { justify-self: end; }

/* Ghost icon buttons (menu, home, favorites, bell, theme) */
.tb-bar .tb-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer; text-decoration: none; font-size: 0;
    background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    transition: background .15s, color .15s, border-color .15s;
}
.tb-bar .tb-icon:hover, .tb-bar .tb-icon[aria-expanded="true"], .tb-bar .tb-icon.active {
    background: var(--surface-1); border-color: var(--border); color: var(--text-strong);
}
.tb-bar .tb-home.active { color: var(--series-1); background: var(--accent-soft); border-color: transparent; }
.tb-bar .theme-toggle span { display: inline-flex; }
.tb-bar .theme-toggle .ico-moon, :root[data-theme="light"] .tb-bar .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .tb-bar .theme-toggle .ico-moon { display: inline-flex; }
.tb-bar .task-bell .bell-count {
    position: absolute; top: 3px; inset-inline-end: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--critical); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--page);
}
.tb-caret { color: var(--muted); flex: none; transition: transform .15s; }
[aria-expanded="true"] > .tb-caret { transform: rotate(180deg); }

/* Tenant switcher (host) */
.tb-tenant {
    display: inline-flex; align-items: center; gap: 9px; height: 42px; max-width: 260px; padding: 0 10px 0 6px; padding-inline: 5px 10px;
    border-radius: 12px; cursor: pointer; font: inherit; text-align: start;
    background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary);
    transition: border-color .15s, background .15s;
}
.tb-tenant:hover, .tb-tenant[aria-expanded="true"] { border-color: var(--accent-line); }
.tb-tenant-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--accent-soft); color: var(--series-1); }
.tb-tenant-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tb-tenant-text small { font-size: 10.5px; font-weight: 700; color: var(--series-1); }
.tb-tenant-text span { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Global search */
.tb-search {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 14px; cursor: pointer;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font: inherit; font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.tb-search:hover { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); color: var(--text-secondary); }
.tb-search span { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font-family: inherit; font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--surface-2); color: var(--muted); direction: ltr; white-space: nowrap; }

/* «＋ إجراء جديد» */
.tb-new {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 12px; cursor: pointer; margin-inline-end: 4px;
    font: inherit; font-size: 13px; font-weight: 700; color: #fff; border: 1px solid transparent;
    background: linear-gradient(135deg, var(--series-1), #2563c4);
    box-shadow: 0 6px 16px -6px rgba(57,135,229,.7);
    transition: filter .15s, box-shadow .15s, transform .15s;
}
.tb-new:hover, .tb-new[aria-expanded="true"] { filter: brightness(1.08); box-shadow: 0 8px 20px -6px rgba(57,135,229,.8); }

/* Account */
.tb-user {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0; padding-inline: 4px 10px; margin-inline-start: 4px;
    border-radius: 999px; cursor: pointer; font: inherit; color: var(--text-primary);
    background: var(--surface-1); border: 1px solid var(--border); transition: border-color .15s;
}
.tb-user:hover, .tb-user[aria-expanded="true"] { border-color: var(--accent-line); }
.tb-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--series-1), var(--violet)); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0;
}
.tb-avatar-lg { width: 40px; height: 40px; font-size: 15px; }
.tb-user-name { font-size: 13px; font-weight: 700; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menus */
.tb-menu { position: relative; }
.tb-pop {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 1050; min-width: 250px; max-height: 72vh; overflow-y: auto; padding: 6px;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop);
    animation: tbPopIn .14s ease-out;
}
.tb-pop-start { inset-inline-end: auto; inset-inline-start: 0; }
@keyframes tbPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tb-pop-head { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 10px 6px; }
.tb-pop[hidden] { display: none; }
.tb-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 420px; }
.tb-pop-grid .tb-pop-head { grid-column: 1 / -1; }
.tb-pop a, .tb-pop button[role="menuitem"] {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px; border: none; background: transparent;
    color: var(--text-primary); text-decoration: none; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer;
}
.tb-pop a span:not(.tb-pop-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pop a small { margin-inline-start: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.tb-pop-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-2); color: var(--text-secondary); transition: background .15s, color .15s; }
.tb-pop a:hover, .tb-pop a:focus-visible, .tb-pop button[role="menuitem"]:hover, .tb-pop button[role="menuitem"]:focus-visible { background: var(--hover-bg); outline: none; }
.tb-pop a:hover .tb-pop-ico, .tb-pop a:focus-visible .tb-pop-ico { background: var(--accent-soft); color: var(--series-1); }
.tb-pop .tb-pop-danger { color: var(--critical); }
.tb-pop .tb-pop-danger .tb-pop-ico { background: rgba(208,59,59,.12); color: var(--critical); }
.tb-pop .tb-pop-danger:hover { background: rgba(208,59,59,.10); }
.tb-pop form { margin: 0; }
.tb-pop-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.tb-pop-user { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.tb-pop-user > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tb-pop-user strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-pop-user small { color: var(--muted); font-size: 12px; }
.tb-pop .tb-pop-phone { display: none; }
.tb-pop-empty { display: block; padding: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* ---- page header: breadcrumb + title · date ---- */
.tb-page { display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 16px 26px 0; }
.tb-titles { display: flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; color: var(--muted); }
.tb-star { width: 30px; height: 30px; }
.crumbs a { color: var(--text-secondary); text-decoration: none; padding: 1px 4px; border-radius: 6px; }
.crumbs a:hover { color: var(--series-1); background: var(--accent-soft); }
.crumbs [aria-current] { color: var(--text-primary); font-weight: 700; unicode-bidi: plaintext; padding: 1px 4px; }
.crumb-sep { display: inline-flex; color: var(--muted); opacity: .55; }
[dir="ltr"] .crumb-sep svg { transform: scaleX(-1); }
.tb-date { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
    color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border); }
.tb-date svg { color: var(--series-1); }
.ws-hero-date { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.ws-hero-date svg { color: var(--series-1); }

@media (max-width: 1100px) {
    .topbar.tb-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tb-user-name, .tb-tenant-text small { display: none; }
    .tb-tenant { max-width: 180px; }
}
@media (max-width: 860px) {
    .topbar.tb-bar { padding: 0 14px; gap: 8px; height: 64px; }
    .tb-brand { height: 44px; }
    .tb-brand .brand-logo { max-height: 44px; max-width: 120px; }
    .tb-brand .brand-fallback { display: none; }
    .tb-search { width: 40px; height: 40px; padding: 0; justify-content: center; justify-self: end; }
    .tb-search span, .tb-search kbd, .tb-new span, .tb-tenant-text, .tb-tenant .tb-caret, .tb-user .tb-caret { display: none; }
    .tb-new { width: 40px; padding: 0; justify-content: center; }
    .tb-tenant { padding: 0 5px; }
    .tb-user { padding: 3px; }
    .tb-page { padding: 16px 16px 0; }
    .tb-pop-grid { grid-template-columns: 1fr; min-width: 250px; }
}
@media (max-width: 560px) {
    .tb-date { display: none; }
    .tb-end { gap: 2px; }
    .tb-bar .tb-icon { width: 36px; }
    .tb-end .tb-fav, .tb-end .theme-toggle { display: none; }
    .tb-pop .tb-pop-phone { display: flex; }
    /* No search button in the bar on phones (the workspace hero keeps its search box). */
    .tb-bar .tb-search { display: none; }
    .topbar.tb-bar { grid-template-columns: auto minmax(0, 1fr); }
    /* Menus open as a full-width sheet under the bar, so none runs off either edge. */
    .tb-pop, .tb-pop-start { position: fixed; top: 70px; inset-inline: 8px; min-width: 0; max-height: calc(100vh - 86px); }
    .tb-pop-grid { min-width: 0; }
}
/* Touch screens (any width) have no Ctrl K. */
@media (hover: none) and (pointer: coarse) {
    .ws-search kbd, .tb-search kbd, .pal-input kbd { display: none; }
}
/* Narrow phones (≈360px): a smaller logo and tighter spacing keep every top-bar button clear of its neighbours. */
@media (max-width: 400px) {
    .topbar.tb-bar { padding: 0 10px; gap: 6px; }
    .tb-start { gap: 2px; }
    .tb-brand { margin-inline: 4px; }
    .tb-brand .brand-logo { max-width: 92px; max-height: 38px; }
    .tb-bar .tb-icon { width: 34px; }
    .tb-new { width: 36px; }
}

/* ---- favorite star (cards + current page) ---- */
.ws-star { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--muted); padding: 0; transition: background .15s, color .15s, transform .15s; }
.ws-star:hover { background: var(--surface-2); color: var(--warning); }
.ws-star:active { transform: scale(.9); }
.ws-star.on { color: var(--warning); }
.ws-star.on svg { fill: currentColor; }

/* ---- workspace pages ---- */
.ws-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 26px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--border);
    background: radial-gradient(120% 160% at 100% 0%, var(--accent-soft), transparent 55%), var(--surface-1);
}
[dir="ltr"] .ws-hero { background: radial-gradient(120% 160% at 0% 0%, var(--accent-soft), transparent 55%), var(--surface-1); }
.ws-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.2px; }
.ws-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.ws-mod-head { display: flex; align-items: center; gap: 14px; }
.ws-hero .ws-hero-icon { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--series-1), #2563c4); color: #fff;
    box-shadow: 0 10px 22px -10px rgba(57,135,229,.8); }
.ws-search {
    display: flex; align-items: center; gap: 10px; flex: 0 1 460px; height: 48px; padding: 0 16px; cursor: pointer;
    background: var(--page); border: 1px solid var(--border); border-radius: 14px; color: var(--muted); font: inherit; font-size: 13.5px;
    transition: border-color .15s, box-shadow .15s;
}
.ws-search:hover { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.ws-search span { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-section { margin-bottom: 26px; }
.ws-h2 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary); margin: 0 0 12px; }
.ws-h2::after { content: ""; flex: 1; height: 1px; background: var(--border); margin-inline-start: 6px; }
.ws-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.ws-grid { display: grid; gap: 14px; }
.ws-modules { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ws-pages { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* Cards: tinted icon tile · lift + accent edge on hover · arrow slides in */
.ws-module, .ws-card-link {
    position: relative; isolation: isolate; overflow: hidden; height: 100%;
    text-decoration: none; color: var(--text-primary);
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ws-module::before, .ws-card-link::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .2s ease;
    background: radial-gradient(90% 70% at 100% 0%, var(--accent-soft), transparent 70%);
}
[dir="ltr"] .ws-module::before, [dir="ltr"] .ws-card-link::before { background: radial-gradient(90% 70% at 0% 0%, var(--accent-soft), transparent 70%); }
.ws-module:hover, .ws-card-link:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-card); color: var(--text-primary); }
.ws-module:hover::before, .ws-card-link:hover::before { opacity: 1; }
.ws-module:focus-visible, .ws-card-link:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.ws-module { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.ws-module-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.ws-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
    background: var(--accent-soft); color: var(--series-1); transition: background .18s, color .18s, box-shadow .18s; }
.ws-module-icon { width: 48px; height: 48px; border-radius: 14px; }
.ws-module:hover .ws-card-icon, .ws-card-link:hover .ws-card-icon { background: var(--series-1); color: #fff; box-shadow: 0 8px 18px -8px rgba(57,135,229,.8); }
.ws-go { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
    color: var(--series-1); background: var(--accent-soft); opacity: 0; transform: translateX(6px); transition: opacity .18s, transform .18s; }
[dir="ltr"] .ws-go { transform: translateX(-6px) scaleX(-1); }
.ws-module:hover .ws-go, .ws-card-link:hover .ws-go, .ws-module:focus-visible .ws-go, .ws-card-link:focus-visible .ws-go { opacity: 1; transform: none; }
[dir="ltr"] .ws-module:hover .ws-go, [dir="ltr"] .ws-card-link:hover .ws-go { transform: scaleX(-1); }
.ws-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-card-title { font-weight: 700; font-size: 15px; }
.ws-card-desc { color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.ws-pill { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); }

.ws-card { position: relative; }
.ws-card-link { display: flex; align-items: flex-start; gap: 14px; padding: 16px; padding-inline-end: 50px; }
.ws-card .ws-star { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; }
.ws-card .ws-go { position: absolute; bottom: 12px; inset-inline-end: 12px; }
.ws-kpi { align-self: flex-start; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); }
.ws-kpi-warn { color: var(--warning); border-color: rgba(250,178,25,.35); background: rgba(250,178,25,.10); }
.ws-kpi-danger { color: var(--critical); border-color: rgba(208,59,59,.35); background: rgba(208,59,59,.10); }
.ws-kpi-ok { color: var(--good); border-color: rgba(12,163,12,.30); background: rgba(12,163,12,.08); }
/* Day theme: the yellow/green state tokens are too light as text on white — darker shades, same meaning. */
:root[data-theme="light"] .ws-kpi-warn { color: #8a5a00; }
:root[data-theme="light"] .ws-kpi-ok { color: #08720a; }
:root[data-theme="light"] .ws-star.on { color: #b07d00; }
:root[data-theme="light"] .ws-module, :root[data-theme="light"] .ws-card-link, :root[data-theme="light"] .ws-panel,
:root[data-theme="light"] .ws-hero { box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.ws-soon .ws-card-link { opacity: .6; }
.ws-soon .ws-card-link:hover { transform: none; box-shadow: none; border-color: var(--border); }
.ws-soon .ws-card-link:hover::before { opacity: 0; }
.ws-soon .ws-card-link:hover .ws-card-icon { background: var(--accent-soft); color: var(--series-1); box-shadow: none; }

/* Favorites / recent panels */
.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.ws-panel { margin: 0; padding: 16px 16px 12px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); }
.ws-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ws-panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ws-panel-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
    background: var(--accent-soft); color: var(--series-1); }
.ws-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ws-list a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text-primary); text-decoration: none; font-size: 13.5px;
    transition: background .15s; }
.ws-list-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-2); color: var(--muted); transition: background .15s, color .15s; }
.ws-list a span:not(.ws-list-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.ws-list a small { margin-inline-start: auto; font-size: 11px; white-space: nowrap; padding: 1px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-2); }
.ws-list a:hover { background: var(--hover-bg); }
.ws-list a:hover .ws-list-ico { background: var(--accent-soft); color: var(--series-1); }
.ws-empty { color: var(--muted); font-size: 13px; margin: 4px 2px; line-height: 1.8; }

/* Quick actions: pill chips with an icon dot */
.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-action {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0; padding-inline: 5px 14px; border-radius: 999px;
    text-decoration: none; font-size: 13px; font-weight: 600;
    background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ws-action-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-soft); color: var(--series-1); }
.ws-action:hover { border-color: var(--accent-line); color: var(--text-strong); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ws-action-primary { background: linear-gradient(135deg, var(--series-1), #2563c4); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px rgba(57,135,229,.8); }
.ws-action-primary .ws-action-ico { background: rgba(255,255,255,.18); color: #fff; }
.ws-action-primary:hover { color: #fff; border-color: transparent; filter: brightness(1.08); }
@media (max-width: 900px) { .ws-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .ws-hero { padding: 18px; }
    .ws-search { flex: 1 1 100%; min-width: 0; height: 44px; }
    .ws-search kbd, .pal-input kbd { display: none; }
    .ws-modules, .ws-pages { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ws-module { padding: 14px; }
    .ws-card-link { flex-direction: column; gap: 10px; padding: 14px; padding-inline-end: 14px; }
    .ws-go { display: none; }
    /* Descriptions stay (as on desktop), a little smaller and at most three lines in the narrow cards. */
    .ws-card-desc { font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 380px) { .ws-modules, .ws-pages { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .ws-module, .ws-card-link, .ws-action, .ws-go, .tb-pop { transition: none; animation: none; }
    .ws-module:hover, .ws-card-link:hover, .ws-action:hover { transform: none; }
}

/* ---- command palette (Ctrl + K) ---- */
.pal { position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.pal[hidden] { display: none; }
.pal-box { width: min(640px, 100%); max-height: 75vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: tbPopIn .14s ease-out; }
.pal-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.pal-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: 15px; }
.pal-list { overflow-y: auto; padding: 6px; }
.pal-group { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 10px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: var(--text-primary); text-decoration: none; }
.pal-item.on { background: var(--hover-bg); }
.pal-item.on .pal-ico { background: var(--accent-soft); color: var(--series-1); }
.pal-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.pal-text { display: flex; flex-direction: column; min-width: 0; }
.pal-text span { font-size: 14px; unicode-bidi: plaintext; }
.pal-text small { color: var(--muted); font-size: 11.5px; unicode-bidi: plaintext; }
.pal-empty { color: var(--muted); font-size: 13px; padding: 14px 10px; }
:root.pal-open { overflow: hidden; }