/* ============================================================
   A&M Souq Task Tracker — Apple-inspired UI
   Light, soft, minimalist. RTL/LTR aware. Mobile-first.
   ============================================================ */

:root {
    --color-bg: #f5f5f7;
    --color-surface: #ffffff;
    --color-surface-2: #fbfbfd;
    --color-elevated: #ffffff;
    --color-text: #1d1d1f;
    --color-text-muted: #86868b;
    --color-text-subtle: #6e6e73;
    --color-border: #e5e5ea;
    --color-border-strong: #d2d2d7;

    --color-brand: #0071e3;
    --color-brand-hover: #0077ed;
    --color-brand-soft: #e8f1fd;

    --color-success: #34c759;
    --color-success-soft: #e6f7ec;
    --color-warning: #ff9500;
    --color-warning-soft: #fff3e0;
    --color-danger: #ff3b30;
    --color-danger-soft: #ffeceb;
    --color-info: #5856d6;
    --color-info-soft: #ecebfa;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --sidebar-w: 260px;
    --topbar-h: 64px;

    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                   "Helvetica Neue", "Segoe UI", "Inter", "Tajawal", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-2: #2c2c2e;
    --color-elevated: #2c2c2e;
    --color-text: #f5f5f7;
    --color-text-muted: #98989d;
    --color-text-subtle: #aeaeb2;
    --color-border: #38383a;
    --color-border-strong: #48484a;
    --color-brand-soft: rgba(0, 113, 227, 0.18);
    --color-success-soft: rgba(52, 199, 89, 0.18);
    --color-warning-soft: rgba(255, 149, 0, 0.18);
    --color-danger-soft: rgba(255, 59, 48, 0.18);
    --color-info-soft: rgba(88, 86, 214, 0.18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-system);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
[dir="rtl"] body { font-feature-settings: "ss01"; }
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
input, button, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
::selection { background: var(--color-brand-soft); color: var(--color-brand); }

/* Inline SVG icons (Lucide-style strokes) */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.18em;
    color: currentColor;
}
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 48px; height: 48px; }
.icon-text { display: inline-flex; align-items: center; gap: 6px; }
.icon-success { color: var(--color-success); }
.icon-danger  { color: var(--color-danger); }
.icon-warning { color: var(--color-warning); }
.icon-muted   { color: var(--color-text-muted); }

/* ============================================================
   LAYOUT
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    overflow: hidden;
    gap: var(--space-3);
}
.sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    margin-inline: calc(var(--space-1) * -1);
    padding-inline: var(--space-1);
    scrollbar-gutter: stable;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s;
}
.sidebar:hover .sidebar__nav::-webkit-scrollbar-thumb { background: var(--color-border-strong); }
.sidebar__nav:hover::-webkit-scrollbar-thumb { background: var(--color-text-muted) !important; }
.sidebar__nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover .sidebar__nav { scrollbar-color: var(--color-border-strong) transparent; }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.sidebar__brand-mark {
    width: 36px; height: 36px;
    background: var(--color-text);
    color: var(--color-surface);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    font-weight: 600;
    font-size: 14px;
}
.sidebar__brand-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
}
.sidebar__brand-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.sidebar__group { margin-bottom: var(--space-3); }
.sidebar__group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--space-3);
    margin-bottom: 4px;
    margin-top: 4px;
}

.sidebar__link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 9px var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    text-decoration: none;
    margin-bottom: 1px;
}
.sidebar__link:hover { background: var(--color-surface-2); text-decoration: none; }
.sidebar__link.is-active { background: var(--color-text); color: var(--color-surface); }
.sidebar__link.is-active .sidebar__link-icon { color: var(--color-surface); }
.sidebar__link-icon { width: 20px; height: 20px; color: var(--color-text-muted); flex-shrink: 0; }
.sidebar__link-badge {
    margin-inline-start: auto;
    background: var(--color-danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    min-width: 22px;
    text-align: center;
}
.sidebar__link.is-active .sidebar__link-badge { background: var(--color-surface); color: var(--color-text); }

.sidebar__user {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3, #5856d6);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }

.sidebar__user-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sidebar__user-role { font-size: 11px; color: var(--color-text-muted); }

/* MAIN CONTENT */
.main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.topbar {
    height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .topbar { background: rgba(28, 28, 30, 0.85); }

.topbar__title { font-size: 18px; font-weight: 600; }
.topbar__search {
    flex: 1;
    max-width: 480px;
    position: relative;
}
.topbar__search input {
    width: 100%;
    height: 38px;
    background: var(--color-surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-10);
    color: var(--color-text);
    transition: all 0.15s;
}
.topbar__search input:focus {
    outline: none;
    border-color: var(--color-brand);
    background: var(--color-surface);
}
.topbar__search-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    width: 18px; height: 18px;
    pointer-events: none;
}
.topbar__search-kbd {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    pointer-events: none;
}

/* Search results dropdown */
.topbar__search-results {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: 100%;
    min-width: 380px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 200;
    padding: 8px 0;
    display: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.topbar__search-results.is-open { display: block; animation: search-pop 0.15s ease; }
@keyframes search-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.search-group { padding: 4px 0; }
.search-group + .search-group { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 8px; }
.search-group__title {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px 4px;
}
.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}
.search-item:hover,
.search-item.is-focused {
    background: var(--color-surface-2);
    text-decoration: none;
}
.search-item__icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-surface-2);
    display: grid; place-items: center;
    font-size: 15px;
    flex-shrink: 0;
}
.search-item__icon.avatar {
    background: linear-gradient(135deg, #0071e3, #5856d6);
    color: white;
    font-weight: 600;
    font-size: 13px;
}
.search-item__body { flex: 1; min-width: 0; }
.search-item__title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-item__subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-item mark {
    background: var(--color-warning-soft);
    color: var(--color-text);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}
.search-empty,
.search-loading {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.search-empty__icon {
    font-size: 30px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.topbar__actions { display: flex; gap: var(--space-2); align-items: center; margin-inline-start: auto; }
.icon-btn {
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    transition: all 0.15s;
    position: relative;
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.icon-btn .dot {
    position: absolute;
    top: 8px; inset-inline-end: 8px;
    width: 8px; height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.content { padding: var(--space-6); flex: 1; }

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: 0; inset-inline-start: 0;
        z-index: 100;
        width: 280px;
        flex-basis: 280px;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-overlay {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .sidebar-overlay.is-open { opacity: 1; pointer-events: all; }
    .topbar__menu { display: grid !important; }
}
.topbar__menu { display: none; }

@media (max-width: 640px) {
    .content { padding: var(--space-4); }
    .topbar { padding: 0 var(--space-4); }
    .topbar__search { display: none; }
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.card.flat { box-shadow: none; }
.card.tinted { background: var(--color-surface-2); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}
.card-title { font-size: 17px; font-weight: 600; margin: 0; }
.card-subtitle { color: var(--color-text-muted); font-size: 13px; }

.grid { display: grid; gap: var(--space-4); }
.grid.cols-1 { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
    .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* Stat tile */
.stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all 0.15s;
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); cursor: pointer; }
.stat__label { font-size: 12px; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.stat__value { font-size: 32px; font-weight: 700; margin-top: var(--space-2); }
.stat__delta { font-size: 12px; margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 4px; }
.stat__delta.up { color: var(--color-success); }
.stat__delta.down { color: var(--color-danger); }

/* ============================================================
   GAUGE — circular KPI dial
   Usage:
     <div class="gauge" style="--pct: 75; --gauge-color: var(--color-success)">
        <svg class="gauge__svg" viewBox="0 0 120 120"><circle class="gauge__track" cx="60" cy="60" r="52"/><circle class="gauge__bar" cx="60" cy="60" r="52"/></svg>
        <div class="gauge__center"><div class="gauge__value">75%</div><div class="gauge__label">…</div></div>
     </div>
   ============================================================ */

.gauge-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gauge-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    transition: box-shadow 0.15s, transform 0.15s;
}
.gauge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.gauge-card__caption { text-align: center; }
.gauge-card__caption .gauge-card__sub {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-top: 2px;
}
.gauge-card__caption .gauge-card__title {
    font-weight: 600;
    font-size: 14px;
}

.gauge {
    --pct: 0;
    --gauge-size: 140px;
    --gauge-color: var(--color-brand);
    position: relative;
    width: var(--gauge-size);
    height: var(--gauge-size);
}
.gauge--sm { --gauge-size: 120px; }
.gauge--lg { --gauge-size: 180px; }

.gauge__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.gauge__track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 10;
}
.gauge__bar {
    fill: none;
    stroke: var(--gauge-color);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 326.726;
    stroke-dashoffset: calc(326.726 * (1 - var(--pct) / 100));
    transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.gauge__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.gauge__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--gauge-color);
}
.gauge__suffix {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.gauge__label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
    max-width: 80%;
    line-height: 1.3;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-5);
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
    background: var(--color-surface-2);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
}
.btn:hover { background: var(--color-border); text-decoration: none; }
.btn.btn-primary { background: var(--color-brand); color: white; }
.btn.btn-primary:hover { background: var(--color-brand-hover); }
.btn.btn-dark { background: var(--color-text); color: var(--color-surface); }
.btn.btn-dark:hover { background: #000; }
.btn.btn-ghost { background: transparent; }
.btn.btn-ghost:hover { background: var(--color-surface-2); }
.btn.btn-outline { background: transparent; border-color: var(--color-border-strong); }
.btn.btn-danger { background: var(--color-danger); color: white; }
.btn.btn-danger:hover { background: #d8362e; }
.btn.btn-success { background: var(--color-success); color: white; }
.btn.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn.btn-lg { padding: 14px var(--space-6); font-size: 15px; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; border: 1px solid var(--color-border-strong); }
.btn-group .btn:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); }
.btn-group .btn:last-child { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }
.btn-group .btn.is-active { background: var(--color-text); color: var(--color-surface); }

/* ============================================================
   FORMS
   ============================================================ */

.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
.form-help { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 4px; }

.input, .select, .textarea {
    width: 100%;
    padding: 10px var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all 0.15s;
    font-size: 14px;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.textarea { min-height: 80px; resize: vertical; }
.input[type="number"] { font-variant-numeric: tabular-nums; }

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}
.checkbox input { display: none; }
.checkbox__box {
    width: 22px; height: 22px;
    border: 2px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-surface);
    display: grid;
    place-items: center;
    transition: all 0.15s;
}
.checkbox input:checked + .checkbox__box {
    background: var(--color-success);
    border-color: var(--color-success);
}
.checkbox input:checked + .checkbox__box::after {
    content: '';
    width: 12px; height: 6px;
    border: 2px solid white;
    border-top: 0;
    border-inline-end: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox.lg .checkbox__box { width: 28px; height: 28px; border-radius: 8px; }
.checkbox.lg input:checked + .checkbox__box::after { width: 16px; height: 8px; }

/* ============================================================
   TASK ITEM
   ============================================================ */

.task-section {
    margin-bottom: var(--space-6);
}
.task-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-2);
}
.task-section__title { font-size: 15px; font-weight: 600; color: var(--color-text); }
.task-section__count {
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.task-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    transition: all 0.15s;
}
.task-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.task-item.is-done {
    background: var(--color-success-soft);
    border-color: rgba(52, 199, 89, 0.3);
}
.task-item.is-done .task-item__title { text-decoration: line-through; opacity: 0.6; }
.task-item.is-overdue { border-color: var(--color-danger); }

.task-item__main { flex: 1; min-width: 0; }
.task-item__title { font-size: 14px; font-weight: 500; line-height: 1.4; }
.task-item__meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--color-text-muted);
}
.task-item__meta span { display: inline-flex; align-items: center; gap: 4px; }
.task-item__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}
.task-item__note {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text-subtle);
}

/* ============================================================
   BADGES & PILLS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text-subtle);
}
.badge.success { background: var(--color-success-soft); color: var(--color-success); }
.badge.warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge.info { background: var(--color-info-soft); color: var(--color-info); }
.badge.brand { background: var(--color-brand-soft); color: var(--color-brand); }
.badge.dot::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ============================================================
   TABLE
   ============================================================ */

.table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow-x: auto;
}
table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.table th, table.table td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-bottom: 1px solid var(--color-border);
}
table.table th {
    background: var(--color-surface-2);
    font-weight: 600;
    color: var(--color-text-subtle);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
table.table tbody tr:hover { background: var(--color-surface-2); }
table.table tbody tr:last-child td { border-bottom: 0; }

/* Excel-style grid */
.grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 1000px;
}
.grid-table th, .grid-table td {
    border: 1px solid var(--color-border);
    padding: 6px 8px;
    text-align: center;
    background: var(--color-surface);
    color: var(--color-text-subtle);
}
.grid-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    z-index: 2;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-strong);
}
.grid-table tbody td.task-name {
    text-align: start;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-weight: 500;
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 240px;
    max-width: 320px;
}
.grid-table tbody tr:hover td:not(.grid-section) { background: color-mix(in srgb, var(--color-surface-2) 60%, transparent); }
.grid-table tbody td.grid-section {
    text-align: start;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border);
    border-inline-start: 0;
    border-inline-end: 0;
}
.grid-table .cell-done {
    background: color-mix(in srgb, var(--color-success-soft) 65%, var(--color-surface));
    color: color-mix(in srgb, var(--color-success) 75%, var(--color-text-subtle));
}
.grid-table .cell-pending { background: var(--color-surface); }
.grid-table .cell-skip {
    background: color-mix(in srgb, var(--color-warning-soft) 65%, var(--color-surface));
    color: color-mix(in srgb, var(--color-warning) 75%, var(--color-text-subtle));
}
.grid-table .cell-overdue {
    background: color-mix(in srgb, var(--color-danger-soft) 65%, var(--color-surface));
    color: color-mix(in srgb, var(--color-danger) 80%, var(--color-text-subtle));
}

/* ============================================================
   AUTH
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f5f5f7 0%, #e5e5ea 100%);
    padding: var(--space-6);
}
.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.auth-card__logo {
    width: 56px; height: 56px;
    background: var(--color-text);
    color: var(--color-surface);
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 22px;
    margin: 0 auto var(--space-5);
}
.auth-card__title {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.auth-card__subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: var(--space-6);
}

/* ============================================================
   MODAL
   ============================================================ */

.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}
.modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal--lg { max-width: 880px; }
.modal--xl { max-width: 1080px; }

/* ============================================================
   ISSUE DETAIL (conversation, sub-tasks, attachments)
   ============================================================ */

.issue-detail__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
}
.issue-detail__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.issue-detail__section {
    margin-bottom: var(--space-5);
}
.issue-detail__section:last-child { margin-bottom: 0; }

.issue-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    font-size: 13px;
    color: var(--color-text);
}
.issue-meta__k { color: var(--color-text-muted); margin-inline-end: 4px; }
@media (max-width: 640px) { .issue-meta { grid-template-columns: 1fr; } }

/* Sub-tasks */
.issue-task-form {
    background: var(--color-surface-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
}
.issue-task-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.issue-task {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: background 0.15s ease;
}
.issue-task:hover { background: var(--color-surface-2); }
.issue-task__main { flex: 1; min-width: 0; }
.issue-task__title { font-weight: 500; }
.issue-task.is-done .issue-task__title {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.issue-task__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: 2px;
}
.issue-task input[type="checkbox"] {
    width: 18px; height: 18px;
    cursor: pointer;
    accent-color: var(--color-success);
    flex-shrink: 0;
}

/* Conversation thread */
.issue-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--space-3) var(--space-1);
    margin-bottom: var(--space-3);
}
.issue-comment {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.issue-comment__body { flex: 1; min-width: 0; }
.issue-comment__head {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    margin-bottom: 2px;
}
.issue-comment__text {
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.issue-comment__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Task conversation panel (inline thread inside .task-item) */
.task-thread {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.task-thread.hidden { display: none; }
.task-thread__list { display: flex; flex-direction: column; gap: var(--space-3); }
.task-thread__form textarea { width: 100%; }
.task-thread__form { margin-top: var(--space-3); }
.task-item__actions { position: relative; }

/* Attachments */
.issue-att {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: start;
}
.issue-att:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.issue-att--img { padding: 0; background: transparent; border: 0; }
.issue-att--img img {
    display: block;
    max-width: 160px;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.issue-att--file {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.issue-att__icon { font-size: 18px; }
.issue-att__name { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   ATTACHMENT PREVIEW OVERLAY (stacks above issue modal)
   ============================================================ */

.att-preview-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    animation: att-fade 0.18s ease;
}
@keyframes att-fade { from { opacity: 0; } to { opacity: 1; } }

.att-preview {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(960px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.att-preview__head {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--color-surface-2);
}
.att-preview__title {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.att-preview__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}
.att-preview__body {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    overflow: auto;
}
.att-preview__body.is-image { background: #0a0a0a; }
.att-preview__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-sm);
}
.att-preview__frame {
    width: 100%;
    height: 80vh;
    border: 0;
    background: var(--color-surface);
}
.att-preview__fallback {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    max-width: 420px;
}
.att-preview__icon { font-size: 56px; margin-bottom: var(--space-3); }
.att-preview__name {
    font-weight: 600;
    word-break: break-all;
    margin-bottom: var(--space-2);
}
.att-preview__hint { margin-top: var(--space-4); }

/* Composer */
.issue-composer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--color-surface);
}
.issue-composer .textarea { border: 0; box-shadow: none; resize: vertical; padding: var(--space-2); }
.issue-composer .textarea:focus { box-shadow: none; outline: none; }
.issue-composer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
}
.modal__header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal__title { font-size: 17px; font-weight: 600; }
.modal__body { padding: var(--space-5); }
.modal__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* ============================================================
   METRICS DASHBOARD
   ============================================================ */

/* Hero summary strip */
.metric-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.metric-hero__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 var(--space-3);
    border-inline-start: 1px solid var(--color-border);
}
.metric-hero__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.metric-hero__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.metric-hero__value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-feature-settings: "tnum";
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.metric-hero__sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}
.metric-hero__value--up   { color: var(--color-success); }
.metric-hero__value--down { color: var(--color-danger); }

@media (max-width: 720px) {
    .metric-hero { padding: var(--space-3); gap: var(--space-2); }
    .metric-hero__cell { padding: 0 var(--space-2); }
    .metric-hero__value { font-size: 22px; }
}

/* Trend overview chart card */
.trend-card { padding-bottom: var(--space-3); }
.trend-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-5);
    align-items: stretch;
}
.trend-card__plot {
    min-width: 0;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
}
.trend-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
}
[dir="rtl"] .trend-chart { /* keep LTR for axis readability */ direction: ltr; }
.trend-card__legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-self: start;
}
.legend-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}
.legend-row:hover { background: var(--color-surface-2); }
.legend-row__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--color-surface);
}
.legend-row__name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.legend-row__val {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-feature-settings: "tnum";
    font-size: 13px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.legend-row__val strong { color: var(--color-text); font-weight: 700; }

@media (max-width: 900px) {
    .trend-card__body { grid-template-columns: 1fr; }
    .trend-card__legend { flex-direction: row; flex-wrap: wrap; }
    .legend-row { flex: 1 1 220px; }
}

/* KPI grid */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}
.metric-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    min-height: 224px;
    overflow: hidden;
}
.metric-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(0, 113, 227, 0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.metric-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}
.metric-card:hover::before { opacity: 1; }
.metric-card--empty .metric-card__value { color: var(--color-text-muted); }

.metric-card__head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    position: relative;
    z-index: 1;
}
.metric-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    color: var(--color-text-subtle);
}
.metric-card__name { flex: 1; min-width: 0; }
.metric-card__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metric-card__body {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}
.metric-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.metric-card__gauge { flex-shrink: 0; line-height: 0; }
.metric-card__value {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-feature-settings: "tnum";
}
.metric-card__delta {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    flex-wrap: wrap;
    min-height: 18px;
}

.delta {
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-feature-settings: "tnum";
}
.delta--up   { color: var(--color-success); }
.delta--down { color: var(--color-danger); }
.delta--flat { color: var(--color-text-muted); }

/* Circular metric gauge (KPI card variant) */
.metric-gauge { display: block; }
.metric-gauge circle { transition: stroke-dasharray 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.metric-gauge--empty { opacity: 0.55; }

.sparkline {
    width: 100%;
    height: 56px;
    display: block;
    margin-top: auto;
    overflow: visible;
}
.sparkline--empty {
    background: linear-gradient(90deg, transparent, var(--color-surface-2), transparent);
    border-radius: var(--radius-sm);
    opacity: 0.5;
    height: 56px;
}
[dir="rtl"] .sparkline:not(.sparkline--empty) { transform: scaleX(-1); }

/* Per-branch breakdown */
.branch-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0;
}
.branch-row { display: flex; flex-direction: column; gap: var(--space-3); }
.branch-row__label {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.branch-row__icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-subtle);
}
.branch-row__layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
}
.branch-row__donut {
    display: flex;
    align-items: center;
    justify-content: center;
}
.branch-row__bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.branch-bar {
    display: grid;
    grid-template-columns: 180px 1fr 130px;
    gap: var(--space-3);
    align-items: center;
    font-size: 13px;
}
.branch-bar__name {
    color: var(--color-text);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.branch-bar__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.branch-bar__track {
    background: var(--color-surface-2);
    height: 18px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-border);
}
.branch-bar__fill {
    height: 100%;
    background: var(--color-brand);
    border-radius: var(--radius-pill);
    min-width: 4px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.branch-bar__value {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    justify-content: flex-end;
    text-align: end;
    font-feature-settings: "tnum";
}
.branch-bar__num { font-weight: 700; }

/* Donut chart */
.donut { display: block; }
.donut__seg { transition: opacity 0.15s ease; transform-origin: center; }
.donut__seg:hover { opacity: 0.85; }
.donut--empty { opacity: 0.4; }

@media (max-width: 900px) {
    .branch-row__layout { grid-template-columns: 1fr; gap: var(--space-3); }
    .branch-row__donut { justify-content: flex-start; }
}
@media (max-width: 720px) {
    .branch-bar { grid-template-columns: 1fr; gap: 4px; }
    .branch-bar__value { justify-content: flex-start; }
}

/* ============================================================
   TOASTS
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    pointer-events: none;
}
.toast {
    background: var(--color-text);
    color: var(--color-surface);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    animation: toast-in 0.25s ease;
}
.toast.success { background: var(--color-success); }
.toast.danger  { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.min-w-0 { min-width: 0; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-small { font-size: 12px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 22px; }
.text-2xl { font-size: 28px; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.w-full { width: 100%; }
.hidden { display: none; }

.divider { height: 1px; background: var(--color-border); margin: var(--space-4) 0; }

.skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-border) 50%, var(--color-surface-2) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s linear infinite;
    border-radius: var(--radius-sm);
}
@keyframes skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Top loading bar — appears during AJAX nav */
.nav-loader {
    position: fixed;
    top: 0; inset-inline-start: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-brand), var(--color-info), var(--color-brand));
    background-size: 200% 100%;
    z-index: 1001;
    pointer-events: none;
    transition: opacity 0.25s ease;
    opacity: 0;
    border-end-end-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.5);
}
.nav-loader.is-loading {
    opacity: 1;
    animation: nav-loader-bar 1.2s ease-in-out infinite;
}
@keyframes nav-loader-bar {
    0%   { width: 0%; }
    50%  { width: 70%; }
    100% { width: 95%; }
}
.content.is-swapping {
    opacity: 0.55;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.content.is-swapping::after {
    content: '';
    position: fixed;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    z-index: 1002;
}
@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Progress bar */
.progress {
    height: 5px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress--slim { height: 4px; }
.progress--thick { height: 8px; }
.progress__bar {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease-out;
}
.progress__bar.warning { background: var(--color-warning); }
.progress__bar.danger { background: var(--color-danger); }

/* ============================================================
   TILE — Apple-style category card
   Replaces the heavy 4px colored side-bar pattern. Identity is
   conveyed by a small colored dot next to the title; the card
   surface stays clean. Set --tile-accent inline (CSS var) for
   the per-tile hue (branch/department/template colour).
   ============================================================ */
.tile {
    --tile-accent: var(--color-brand);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.tile:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.tile__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tile-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-accent) 18%, transparent);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .tile__dot { box-shadow: 0 0 0 3px var(--color-surface-2); }
}
.tile__title {
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tile--row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Empty state */
.empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
}
.empty__icon { font-size: 48px; margin-bottom: var(--space-3); opacity: 0.4; }
.empty__title { font-size: 16px; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }
.empty__hint { font-size: 13px; }

/* Drill-down section header */
.drill-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.drill-back {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-text);
    background: var(--color-surface);
    transition: all 0.15s;
}
.drill-back:hover { background: var(--color-surface-2); }
[dir="rtl"] .drill-back svg { transform: scaleX(-1); }