/* ═══════════════════════════════════════════════════════════════════════════
   MODERN UI — Atlass-spec airy light theme.

   Tenant-agnostic, loaded for every install. Design language inspired by the
   Atlass dashboard concept: soft light canvas, pure white cards with large
   rounded corners, near-zero shadow (cards just "float"), a single vivid blue
   primary, one selective orange accent for emphasis, pill-ish buttons,
   tinted active states (no gradients), generous whitespace, strong type
   hierarchy with bold large numbers and tiny uppercase micro-labels.

   This file ONLY restyles. It does NOT change positioning, sizing, or
   overflow behaviour of any Rise core elements. Nothing here adds
   min-height, position:fixed, overflow:hidden, sticky, or transform to a
   Rise-default class. That's deliberate — those are the kinds of changes
   that broke modals/forms/tables in earlier passes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Surface */
    --ui-bg-canvas:       #F4F7FB;
    --ui-bg-canvas-2:     #EDF0F7;
    --ui-bg-card:         #FFFFFF;
    --ui-bg-hover:        #F1F4F9;
    --ui-bg-active:       #E8ECF3;

    /* Text */
    --ui-text-primary:    #0F172A;
    --ui-text-body:       #1E293B;
    --ui-text-muted:      #64748B;
    --ui-text-faint:      #7C8AA0;  /* darkened from #94A3B8 for better contrast (WCAG) */
    --ui-text-on-primary: #FFFFFF;

    /* Brand — vivid blue */
    --ui-primary:         #2563EB;
    --ui-primary-hover:   #1D4ED8;
    --ui-primary-active:  #1E40AF;
    --ui-primary-tint:    rgba(37, 99, 235, 0.08);
    --ui-primary-tint-2:  rgba(37, 99, 235, 0.14);
    --ui-primary-soft:    #EFF4FF;

    /* Accent — selective orange pop (use sparingly) */
    --ui-accent:          #F59E0B;
    --ui-accent-tint:     rgba(245, 158, 11, 0.12);

    /* Semantic */
    --ui-success:         #10B981;
    --ui-success-tint:    rgba(16, 185, 129, 0.12);
    --ui-warning:         #F59E0B;
    --ui-warning-tint:    rgba(245, 158, 11, 0.12);
    --ui-danger:          #EF4444;
    --ui-danger-tint:     rgba(239, 68, 68, 0.10);
    --ui-info:            #06B6D4;
    --ui-info-tint:       rgba(6, 182, 212, 0.10);

    /* Borders */
    --ui-border:          #E8EAF1;
    --ui-border-soft:     #EFF1F6;
    --ui-border-strong:   #D6DAE3;

    /* Geometry — Atlass-spec radii */
    --ui-radius-xs:       6px;
    --ui-radius-sm:       8px;
    --ui-radius:          12px;
    --ui-radius-card:     16px;
    --ui-radius-lg:       20px;
    --ui-radius-pill:     100px;

    /* Shadows — barely visible, cards "float" rather than "elevate" */
    --ui-shadow-card:     0 1px 3px rgba(15, 23, 42, 0.04),
                          0 2px 6px rgba(15, 23, 42, 0.03);
    --ui-shadow-popover:  0 4px 16px rgba(15, 23, 42, 0.08),
                          0 1px 4px rgba(15, 23, 42, 0.04);
    --ui-shadow-modal:    0 24px 48px -12px rgba(15, 23, 42, 0.18),
                          0 0 0 1px rgba(15, 23, 42, 0.03);
    --ui-shadow-focus:    0 0 0 3px rgba(37, 99, 235, 0.18);

    /* Motion */
    --ui-ease:            cubic-bezier(0.2, 0, 0.2, 1);
    --ui-trans-fast:      all 0.12s var(--ui-ease);
    --ui-trans:           all 0.18s var(--ui-ease);

    /* Spacing scale — 4px base. Use these instead of magic paddings so the
       whole UI shares one rhythm. */
    --ui-space-1:         4px;
    --ui-space-2:         8px;
    --ui-space-3:         12px;
    --ui-space-4:         16px;
    --ui-space-5:         20px;
    --ui-space-6:         24px;
    --ui-space-8:         32px;
    --ui-space-10:        40px;
    --ui-space-12:        48px;

    /* Typography scale — explicit ladder (was scattered ad-hoc px). */
    --ui-font-xs:         12px;
    --ui-font-sm:         13px;
    --ui-font-base:       14px;
    --ui-font-md:         15px;
    --ui-font-lg:         17px;
    --ui-font-xl:         20px;
    --ui-font-2xl:        24px;
    --ui-font-3xl:        30px;

    /* Z-index scale — one source of truth to end the legacy z-index wars.
       Kept below Bootstrap's modal/backdrop (1050/1040) so overlays stack
       predictably above app chrome but under dialogs. */
    --ui-z-base:          1;
    --ui-z-dropdown:      1000;
    --ui-z-sticky:        1020;
    --ui-z-fixed:         1030;
    --ui-z-toast:         1090;
    --ui-z-tooltip:       1100;

    /* Bootstrap overrides */
    --bs-primary:         #2563EB;
    --bs-primary-rgb:     37, 99, 235;
    --bs-body-color:      #1E293B;
    --bs-body-bg:         #F4F7FB;
    --bs-link-color:      #2563EB;
    --bs-border-color:    #E8EAF1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — token-only. Redefining the --ui-* / --bs-* tokens flips every
   surface that consumes them (cards, sidebar, topbar, dropdowns, buttons,
   the empty-state, etc.) with zero selector overrides. Bootstrap 5.3's own
   data-bs-theme="dark" rules (shipped in the compiled CSS) cover its native
   components (forms, modals, tables, dropdowns). A short legacy block below
   catches the handful of Rise surfaces in app.all.css that hardcode white.

   Opt-in: layout emits data-bs-theme on <html> from a cookie; a topbar
   toggle flips it. Default stays light — nothing changes for existing users
   until they choose dark. This is the safe path the plan prescribed (the v2
   toggle broke because it manipulated the DOM; this only swaps CSS vars).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    /* Surface */
    --ui-bg-canvas:       #0B1220;
    --ui-bg-canvas-2:     #0E1728;
    --ui-bg-card:         #111C31;
    --ui-bg-hover:        #1A2740;
    --ui-bg-active:       #223251;

    /* Text */
    --ui-text-primary:    #E8EDF5;
    --ui-text-body:       #CBD5E1;
    --ui-text-muted:      #93A2BB;
    --ui-text-faint:      #6B7C99;
    --ui-text-on-primary: #FFFFFF;

    /* Brand — lift the blue a step so it reads on dark surfaces */
    --ui-primary:         #3B82F6;
    --ui-primary-hover:   #60A5FA;
    --ui-primary-active:  #2563EB;
    --ui-primary-tint:    rgba(59, 130, 246, 0.16);
    --ui-primary-tint-2:  rgba(59, 130, 246, 0.24);
    --ui-primary-soft:    #17233B;

    /* Accent */
    --ui-accent:          #FBBF24;
    --ui-accent-tint:     rgba(251, 191, 36, 0.16);

    /* Semantic — slightly brighter + stronger tints for dark contrast */
    --ui-success:         #34D399;
    --ui-success-tint:    rgba(52, 211, 153, 0.16);
    --ui-warning:         #FBBF24;
    --ui-warning-tint:    rgba(251, 191, 36, 0.16);
    --ui-danger:          #F87171;
    --ui-danger-tint:     rgba(248, 113, 113, 0.16);
    --ui-info:            #22D3EE;
    --ui-info-tint:       rgba(34, 211, 238, 0.16);

    /* Borders */
    --ui-border:          #24324C;
    --ui-border-soft:     #1B2740;
    --ui-border-strong:   #33456A;

    /* Shadows — deeper on dark so cards still separate from the canvas */
    --ui-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.32),
                          0 2px 8px rgba(0, 0, 0, 0.24);
    --ui-shadow-popover:  0 6px 20px rgba(0, 0, 0, 0.45),
                          0 1px 4px rgba(0, 0, 0, 0.35);
    --ui-shadow-modal:    0 24px 48px -12px rgba(0, 0, 0, 0.6),
                          0 0 0 1px rgba(255, 255, 255, 0.04);
    --ui-shadow-focus:    0 0 0 3px rgba(59, 130, 246, 0.35);

    /* Bootstrap bridge */
    --bs-primary:         #3B82F6;
    --bs-primary-rgb:     59, 130, 246;
    --bs-body-color:      #CBD5E1;
    --bs-body-bg:         #0B1220;
    --bs-link-color:      #60A5FA;
    --bs-border-color:    #24324C;
    color-scheme: dark;
}

/* Legacy Rise surfaces that hardcode white in app.all.css — map them onto the
   dark card token so no bright rectangles survive the theme flip. */
[data-bs-theme="dark"] .white-bg,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .dropdown-details.bg-white,
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table.dataTable,
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .kanban-col,
[data-bs-theme="dark"] .kanban-item,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--ui-bg-card) !important;
    color: var(--ui-text-body);
}
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table.dataTable {
    --bs-table-bg: var(--ui-bg-card);
    --bs-table-color: var(--ui-text-body);
    border-color: var(--ui-border);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--ui-bg-hover) !important;
    color: var(--ui-text-primary);
}
/* select2 (2014-era hardcoded whites) */
[data-bs-theme="dark"] .select2-container .select2-choice,
[data-bs-theme="dark"] .select2-drop,
[data-bs-theme="dark"] .select2-container--default .select2-selection,
[data-bs-theme="dark"] .select2-dropdown {
    background: var(--ui-bg-card) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-body) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background: var(--ui-primary) !important;
}
/* Inputs / editors that don't inherit Bootstrap's dark form styling */
[data-bs-theme="dark"] .note-editor .note-editing-area .note-editable,
[data-bs-theme="dark"] .note-toolbar,
[data-bs-theme="dark"] .CodeMirror {
    background: var(--ui-bg-canvas-2) !important;
    color: var(--ui-text-body) !important;
}
/* Images/logos that assume a light backdrop get a subtle plate rather than
   floating on near-black (opt-out with .no-dark-plate). */
[data-bs-theme="dark"] .sidebar .sidebar-brand img.dashboard-image {
    filter: none;
}

/* ─── Body / typography ──────────────────────────────────────────────────── */
body {
    background: var(--ui-bg-canvas);
    color: var(--ui-text-body);
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont,
        'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    font-feature-settings: "ss01";
}
h1, h2, h3, h4, h5, h6 {
    color: var(--ui-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.text-muted { color: var(--ui-text-muted) !important; }
small, .small { color: var(--ui-text-muted); }
::selection { background: var(--ui-primary); color: white; }

/* Utility for the Atlass-style "DECEMBER 02 - 08" uppercase micro-label */
.ui-eyebrow, .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

/* Tabular numerals for any large-number contexts */
.ui-num, .ui-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─── Arabic / RTL typography ────────────────────────────────────────────────
   Arabic is a joined ("cursive") script: ANY letter-spacing degrades the
   letter connections, so the negative tracking the Latin theme uses on body
   and headings must be neutralised in RTL. Arabic glyphs are also taller
   (ascenders + diacritics) so they need more line-height to avoid a cramped,
   clipped look. Scoped to [dir="rtl"] / :lang(ar) so the Latin theme is
   untouched. This mirrors the rule the estimate-deck template already applies.
   ──────────────────────────────────────────────────────────────────────────── */
:lang(ar),
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .btn, [dir="rtl"] .form-control, [dir="rtl"] .form-select {
    letter-spacing: 0;
}
[dir="rtl"] body {
    line-height: 1.7;
    /* Plex Arabic renders ~5% smaller than Latin at equal px — nudge base up */
    font-size: calc(1rem + 0.5px);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    line-height: 1.45;
}
/* Uppercase micro-labels are a Latin-only device — Arabic has no case, and
   letter-spacing breaks it. Express the same hierarchy with weight instead. */
[dir="rtl"] .ui-eyebrow, [dir="rtl"] .eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 12px;
}

/* ─── Bidi isolation for inherently-LTR data inside RTL text ─────────────────
   Phone numbers, emails, URLs, IBANs, VAT/CR numbers and money amounts are
   logically left-to-right. Left in the RTL flow they get their digits and
   punctuation reordered ("+966 50…" → "…05 669+"). Force LTR on those inputs,
   and give views a `.ltr-data` utility to wrap such fragments in body text.
   ──────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: end;   /* logical: text hugs the visual "start" (right in RTL) */
}
.ltr-data {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}
/* Money amounts: keep the numeric part bidi-isolated and tabular so thousands
   separators never jump around adjacent Arabic text. */
.ui-amount {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

/* ─── Page wrapper ───────────────────────────────────────────────────────── */
.page-container, .page-wrapper {
    background: var(--ui-bg-canvas);
}

/* ─── Cards — Atlass: big radius, near-zero shadow, hairline border ──────── */
.card {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ui-border-soft);
    padding: 18px 22px;
    font-weight: 600;
    color: var(--ui-text-primary);
    font-size: 15px;
}
.card-body { padding: 22px; color: var(--ui-text-body); }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--ui-border-soft);
    padding: 14px 22px;
}

/* Dashboard widget cards — same look, subtle hover lift via shadow */
.card.dashboard-icon-widget {
    transition: var(--ui-trans);
}
.card.dashboard-icon-widget:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-popover);
}

/* ─── Buttons — solid colour, no gradient, rounded but not pill ──────────── */
.btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    transition: var(--ui-trans);
}
.btn:focus, .btn:focus-visible {
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}
.btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: white;
}
.btn-default, .btn-secondary {
    background: var(--ui-bg-card);
    border-color: var(--ui-border);
    color: var(--ui-text-body);
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--ui-bg-hover);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-primary);
}
.btn-success {
    background: var(--ui-success); border-color: var(--ui-success); color: white;
}
.btn-success:hover, .btn-success:focus { background: #059669; border-color: #059669; color: white; }
.btn-danger {
    background: var(--ui-danger); border-color: var(--ui-danger); color: white;
}
.btn-danger:hover, .btn-danger:focus { background: #DC2626; border-color: #DC2626; color: white; }
.btn-warning {
    background: var(--ui-warning); border-color: var(--ui-warning); color: white;
}
.btn-warning:hover, .btn-warning:focus { background: #D97706; border-color: #D97706; color: white; }
.btn-info {
    background: var(--ui-info); border-color: var(--ui-info); color: white;
}
.btn-info:hover, .btn-info:focus { background: #0891B2; border-color: #0891B2; color: white; }
.btn-link {
    color: var(--ui-primary);
    text-decoration: none;
    border: none;
}
.btn-link:hover { color: var(--ui-primary-hover); text-decoration: underline; }
.btn-outline-primary {
    color: var(--ui-primary); border-color: var(--ui-primary); background: transparent;
}
.btn-outline-primary:hover {
    background: var(--ui-primary); border-color: var(--ui-primary); color: white;
}

/* ─── Form controls — clean white, rounded, soft focus ring ──────────────── */
.form-control, .form-select,
input.form-control, select.form-control, textarea.form-control {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-body);
    font-family: inherit;
    transition: var(--ui-trans-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}
.form-control::placeholder { color: var(--ui-text-faint); }
label, .col-form-label {
    color: var(--ui-text-primary);
    font-weight: 500;
}
.form-text { color: var(--ui-text-muted); }
.form-check-input:checked {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}
.form-check-input:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow-focus);
}
.input-group-text {
    background: var(--ui-bg-hover);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
}

/* ─── Select2 — match form-control look ──────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--ui-bg-card) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-shadow-focus) !important;
}
.select2-dropdown {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    background: var(--ui-bg-card);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ui-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-tint-2);
    color: var(--ui-primary);
    border-radius: var(--ui-radius-xs);
}

/* ─── Modals — soft rounded with a quiet shadow.
   NB: no overflow:hidden on .modal-content (clips dropdowns inside).
   NB: no position override (Bootstrap's centred modal stays put). ────────── */
.modal-backdrop, .modal-backdrop.show {
    background: rgba(15, 23, 42, 0.50);
}
.modal-content {
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-modal);
    background: var(--ui-bg-card);
}
.modal-header {
    background: transparent;
    border-bottom: 1px solid var(--ui-border-soft);
    padding: 18px 22px;
}
.modal-title {
    color: var(--ui-text-primary);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.015em;
}
.modal-body { color: var(--ui-text-body); }
.modal-footer {
    background: transparent;
    border-top: 1px solid var(--ui-border-soft);
}
.btn-close {
    opacity: 0.6;
    transition: var(--ui-trans-fast);
}
.btn-close:hover { opacity: 1; }

/* ─── Tables — clean type, hover row, no sticky-position changes ─────────── */
.table { color: var(--ui-text-body); --bs-table-bg: transparent; }
.table thead th, table.dataTable thead th {
    background: transparent;
    color: var(--ui-text-muted) !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ui-border);
}
.table tbody td, table.dataTable tbody td {
    border-bottom: 1px solid var(--ui-border-soft);
    vertical-align: middle;
    color: var(--ui-text-body);
}
.table tbody tr:hover, table.dataTable tbody tr:hover {
    background: var(--ui-bg-hover);
}
.table-bordered { border-color: var(--ui-border); }

/* DataTables wrapper styling — no positioning changes */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: var(--ui-trans-fast);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-bg-card);
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    border-radius: var(--ui-radius-sm) !important;
    border-color: var(--ui-border);
    color: var(--ui-text-body);
    background: var(--ui-bg-card);
    margin: 0 2px;
    transition: var(--ui-trans-fast);
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
    border-color: var(--ui-border-strong);
}
.dataTables_wrapper .dataTables_paginate .pagination .active .page-link {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}
.dataTables_wrapper .dataTables_info { color: var(--ui-text-muted); }

/* ─── Nav tabs — clean underline ─────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--ui-border);
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ui-text-muted);
    font-weight: 500;
    background: transparent;
    border-radius: 0;
    transition: var(--ui-trans-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--ui-primary);
    background: transparent;
    border-bottom-color: var(--ui-primary-tint-2);
}
.nav-tabs .nav-link.active {
    color: var(--ui-primary);
    border-bottom: 2px solid var(--ui-primary);
    background: transparent;
    font-weight: 600;
}

/* Nav pills */
.nav-pills .nav-link {
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-muted);
    transition: var(--ui-trans-fast);
}
.nav-pills .nav-link:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
}
.nav-pills .nav-link.active {
    background: var(--ui-primary);
    color: white;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    border-radius: var(--ui-radius-pill);
    font-weight: 600;
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
}
.badge.bg-primary, .badge.badge-primary   { background: var(--ui-primary) !important; }
.badge.bg-success, .badge.badge-success   { background: var(--ui-success) !important; }
.badge.bg-warning, .badge.badge-warning   { background: var(--ui-warning) !important; color: white !important; }
.badge.bg-danger,  .badge.badge-danger    { background: var(--ui-danger) !important; }
.badge.bg-info,    .badge.badge-info      { background: var(--ui-info) !important; }
.badge.bg-secondary, .badge.bg-default {
    background: var(--ui-bg-hover) !important;
    color: var(--ui-text-body) !important;
    border: 1px solid var(--ui-border);
}

/* ─── Alerts — left-tint stripe ──────────────────────────────────────────── */
.alert {
    border: none;
    border-inline-start: 3px solid var(--ui-primary);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-tint);
    color: var(--ui-text-primary);
    font-size: 14px;
}
.alert-success { background: var(--ui-success-tint); border-inline-start-color: var(--ui-success); color: #065F46; }
.alert-warning { background: var(--ui-warning-tint); border-inline-start-color: var(--ui-warning); color: #78350F; }
.alert-danger  { background: var(--ui-danger-tint);  border-inline-start-color: var(--ui-danger);  color: #7F1D1D; }
.alert-info    { background: var(--ui-info-tint);    border-inline-start-color: var(--ui-info);    color: #155E75; }

/* ─── Toast notifications (app-alert) ─────────────────────────────────────
   Rise's appAlert.success/error/warning/info renders a div.app-alert.alert.
   app.all.css overrides .app-alert.alert-success with a solid #485BBD blue
   (looks indigo, nothing like a success notification). Re-style here to
   use the tinted-card look with a colored left rail — matches the .alert
   block above and looks like a modern toast. */
.app-alert {
    border: 1px solid var(--ui-border-soft) !important;
    border-inline-start-width: 4px !important;
    border-radius: var(--ui-radius) !important;
    padding: 14px 44px 14px 18px !important;
    box-shadow: var(--ui-shadow-popover) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    background: var(--ui-bg-card) !important;
    color: var(--ui-text-body) !important;
    margin: 0;
}
.app-alert.alert-success {
    background: var(--ui-success-tint) !important;
    border-inline-start-color: var(--ui-success) !important;
    color: #065F46 !important;
}
.app-alert.alert-danger {
    background: var(--ui-danger-tint) !important;
    border-inline-start-color: var(--ui-danger) !important;
    color: #7F1D1D !important;
}
.app-alert.alert-warning {
    background: var(--ui-warning-tint) !important;
    border-inline-start-color: var(--ui-warning) !important;
    color: #78350F !important;
}
.app-alert.alert-info {
    background: var(--ui-info-tint) !important;
    border-inline-start-color: var(--ui-info) !important;
    color: #155E75 !important;
}
/* Override animate positioning — sit comfortably bottom-right with a gap */
.app-alert.animate {
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    min-width: 280px !important;
    max-width: 420px !important;
    z-index: 1080;             /* above modals and dropdowns */
}
[dir="rtl"] .app-alert.animate {
    right: auto !important;
    left: 24px !important;
}
/* The animation in app.js starts at right:-350px and slides to right:40px,
   then settles at right:15px. With our positioning fix above, that motion
   is preserved but the final resting place is cleaner. */
.app-alert-message {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    color: inherit;
}
/* Close button — small, dark on tinted backgrounds (default Bootstrap was white) */
.app-alert .btn-close,
.app-alert .btn-close.btn-close-white {
    filter: none !important;
    opacity: 0.55;
    background-size: 12px 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    background-color: transparent;
}
.app-alert .btn-close:hover {
    opacity: 1;
}
/* Progress bar (used when duration > 0) — slim, color-matched */
.app-alert .progress {
    height: 3px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0 0 var(--ui-radius) var(--ui-radius);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: auto;
}
.app-alert .progress-bar.bg-success { background: var(--ui-success) !important; }
.app-alert .progress-bar.bg-danger  { background: var(--ui-danger)  !important; }
.app-alert .progress-bar.bg-warning { background: var(--ui-warning) !important; }
.app-alert .progress-bar.bg-info    { background: var(--ui-info)    !important; }

/* ─── Dropdowns — soft shadow, tinted hover ──────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    background: var(--ui-bg-card);
}
.dropdown-item {
    color: var(--ui-text-body);
    transition: var(--ui-trans-fast);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--ui-primary);
    color: white;
}
.dropdown-divider { border-color: var(--ui-border-soft); }

/* ─── Sidebar — clean white, no border-shadow ────────────────────────────── */
.sidebar {
    background: var(--ui-bg-card) !important;
    border-right: 1px solid var(--ui-border-soft);
    box-shadow: none !important;
}
[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--ui-border-soft);
}
/* ── Sidebar brand (logo at top of left nav) ─────────────────────────────
   The classic CRM layout: tenant logo sits at the top of the sidebar, in
   its own header band that aligns with the topbar height. Topbar starts
   with the hamburger so the logo isn't duplicated. */
.sidebar .sidebar-brand {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 64px;                   /* match topbar height for clean alignment */
    padding: 0 16px;
    margin: 0;
    border-bottom: 1px solid var(--ui-border-soft);
    background: var(--ui-bg-card);
    text-decoration: none !important;
    transition: var(--ui-trans-fast);
}
.sidebar .sidebar-brand:hover {
    background: var(--ui-bg-hover);
}
.sidebar .sidebar-brand img.dashboard-image {
    max-height: 36px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* In compact (collapsed) sidebar state, the full logo is hidden and the
   mini favicon shows. app.all.css already toggles which one is visible
   via .brand-logo / .brand-logo-mini classes; we just preserve those. */
.sidebar .sidebar-brand.brand-logo-mini {
    display: none !important;       /* hidden by default — app.all.css toggles */
}
.compact-view-active .sidebar .sidebar-brand.brand-logo {
    display: none !important;
}
.compact-view-active .sidebar .sidebar-brand.brand-logo-mini {
    display: flex !important;
}
.compact-view-active .sidebar .sidebar-brand.brand-logo-mini img.dashboard-image {
    max-height: 28px;
}

/* The .sidebar-scroll has margin-top: 65px from app.all.css to clear the
   fixed navbar. With the logo now in the sidebar header (also 64px), the
   layout is naturally aligned — no override needed. */

/* ── Mobile sidebar-brand size fix ────────────────────────────────────────
   app.all.css inside @media (max-width: 990px) forces
       .sidebar .sidebar-brand { width: 70px !important; padding: 15px }
   That was written for a 70px collapsed rail — but on actual mobile the
   sidebar is either off-screen (default) or slid in at the full 250px.
   When it slides in, the user sees a microscopic 40px-wide logo at the
   top — that's what their screenshot showed. Override to full width when
   the sidebar is visible. Same MQ as the rule we're overriding so we don't
   touch desktop. */
@media (max-width: 990px) {
    /* On mobile the logo lives in the topbar (.topbar-mobile-brand) — both
       when the sidebar is open and when it's closed. We DON'T also want a
       duplicate logo at the top of the sidebar; per user feedback it just
       wastes vertical space and looks redundant.
       This rule covers both .brand-logo (full) and .brand-logo-mini (favicon)
       in every sidebar state. */
    body .sidebar .sidebar-brand,
    body.sidebar-toggled .sidebar .sidebar-brand,
    body .sidebar .sidebar-brand.brand-logo,
    body .sidebar .sidebar-brand.brand-logo-mini,
    body.sidebar-toggled .sidebar .sidebar-brand.brand-logo,
    body.sidebar-toggled .sidebar .sidebar-brand.brand-logo-mini {
        display: none !important;
    }

    /* The .sidebar-scroll has margin-top: 65px from app.all.css to clear
       the fixed navbar — that's still correct on mobile because the
       navbar is still 64px tall. So the menu items don't slide up under
       a missing header. */
}

/* ── Mobile-only sidebar user-profile block ─────────────────────────────
   Lives at the top of the sidebar on phones (where the logo used to be).
   Frees up the topbar for the search pill. Shows avatar + name + a
   sign-out shortcut; tapping the main area opens the user's profile. */
.sidebar-user-profile-wrap {
    display: none;
}
@media (max-width: 991px) {
    /* Single compact row: avatar + name + AR|EN pill + sign-out.
       Right padding leaves room for Rise's X-close button (which is
       position:fixed at top-right of the sidebar). Tight vertical padding
       keeps it close to the menu items below — no big gap. */
    .sidebar-user-profile-wrap,
    .sidebar-user-profile-wrap.d-flex {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 12px 56px 12px 16px;
        border-bottom: 1px solid var(--ui-border-soft);
        background: var(--ui-bg-card);
    }
    [dir="rtl"] .sidebar-user-profile-wrap {
        padding: 12px 16px 12px 56px;
    }
    .sidebar-user-profile-main {
        flex: 1;
        min-width: 0;
    }
    .sidebar-lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px;
        background: var(--ui-bg-hover);
        border-radius: 999px;
        flex-shrink: 0;
    }
    .sidebar-lang-link {
        color: var(--ui-text-muted);
        text-decoration: none !important;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        transition: var(--ui-trans-fast);
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .sidebar-lang-link[lang="ar"] {
        font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
        font-size: 12.5px;
    }
    .sidebar-lang-link.is-active {
        color: #fff;
        background: var(--ui-primary);
        cursor: default;
        pointer-events: none;
    }
    .sidebar-lang-link:hover:not(.is-active),
    .sidebar-lang-link:focus:not(.is-active) {
        color: var(--ui-text-primary);
    }
    .sidebar-lang-sep {
        color: var(--ui-border-strong);
        user-select: none;
        font-size: 10px;
    }

    /* On mobile the sidebar holds the profile-wrap at top, not the brand
       header. app.all.css's `.sidebar-scroll { margin-top: 65px }` was
       meant to clear the topbar — but the sidebar is its own overlay on
       mobile (the topbar isn't inside it). Drop the margin so menu items
       sit right under the profile row. */
    .sidebar .sidebar-scroll {
        margin-top: 0 !important;
    }

    /* X close button — Rise renders it as `float: right; margin: 18px 5px 0 0`
       which makes it claim its own row. Re-position as a compact absolute
       icon at the profile row's top-right corner with a soft filled background
       so it's clearly visible. */
    .sidebar .sidebar-toggle-btn.hide {
        position: absolute !important;
        top: 12px !important;
        inset-inline-end: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 8px !important;
        background: var(--ui-bg-hover) !important;
        color: var(--ui-text-body) !important;
        z-index: 10;
        transition: var(--ui-trans-fast);
        line-height: 1;
    }
    .sidebar .sidebar-toggle-btn.hide:hover,
    .sidebar .sidebar-toggle-btn.hide:focus {
        background: var(--ui-border) !important;
        color: var(--ui-text-primary) !important;
    }
    .sidebar .sidebar-toggle-btn.hide .icon,
    .sidebar .sidebar-toggle-btn.hide svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        stroke-width: 2;
    }

    /* Now that the X is absolute, we can remove the right-side padding
       reserve in the profile wrap — profile content can extend a bit
       further. Keep ~44px so it doesn't collide with the X. */
    .sidebar-user-profile-wrap,
    .sidebar-user-profile-wrap.d-flex {
        padding: 12px 50px 12px 16px !important;
    }
    [dir="rtl"] .sidebar-user-profile-wrap {
        padding: 12px 16px 12px 50px !important;
    }
}
.sidebar-user-profile-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
    padding: 2px 4px;
    border-radius: var(--ui-radius-sm);
    transition: background 0.15s ease;
}
.sidebar-user-profile-main:hover {
    background: var(--ui-bg-hover);
}
.sidebar-user-avatar {
    width: 34px;            /* compact for single-row layout */
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ui-bg-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.sidebar-user-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ui-text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-role {
    font-size: 11.5px;
    color: var(--ui-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;            /* slimmer for the single-row layout */
    height: 32px;
    border-radius: 50%;
    color: var(--ui-text-muted);
    text-decoration: none !important;
    transition: var(--ui-trans-fast);
    flex-shrink: 0;
}
.sidebar-user-signout:hover,
.sidebar-user-signout:focus {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}
.sidebar-user-signout .icon-16 {
    width: 16px;
    height: 16px;
}

/* ── Mobile-only brand logo in the topbar ────────────────────────────────
   On mobile the sidebar (and the sidebar-brand logo) is hidden behind the
   hamburger button — leaving the topbar with no brand identifier. We mirror
   the logo here so users always see who they're in. d-md-none in the
   markup keeps this hidden on tablet/desktop where the sidebar logo is
   already visible. */
.topbar-mobile-brand-li {
    display: flex !important;
    align-items: center;
}
.topbar-mobile-brand {
    display: flex !important;
    align-items: center;
    padding: 4px 8px !important;
    height: 100%;
}
.topbar-mobile-brand img {
    max-height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
/* ROOT-CAUSE OVERRIDE for the cut-off-logo bug
   ─────────────────────────────────────────────
   `.navbar-custom .nav-link` is a Rise rule that sizes every topbar icon
   to a fixed 44×44 square (intended for the bell, message, language, etc).
   Our mobile-brand `<a>` is ALSO a .nav-link, so it inherits that 44px
   width — and the 140px logo image inside overflows. In LTR the overflow
   hits the search/icons; in RTL it hits the viewport's left edge, which
   is what produced the "awih" cut-off (h chopped on the left).

   Selector `.navbar-custom .nav-link.topbar-mobile-brand` has higher
   specificity than the generic `.navbar-custom .nav-link` rule, so this
   block wins WITHOUT us touching the icon-sizing rule (which is correct
   for everything else in the topbar). */
.navbar-custom .nav-link.topbar-mobile-brand {
    width: auto !important;
    min-width: 0;
    height: 44px !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: 4px 10px !important;
    flex-shrink: 0;
}
.navbar-custom .nav-link.topbar-mobile-brand:hover,
.navbar-custom .nav-link.topbar-mobile-brand:focus {
    background: transparent !important;        /* don't tint the brand on hover */
}

@media (min-width: 768px) {
    .topbar-mobile-brand-li {
        display: none !important;
    }
}
.sidebar-menu li > a {
    color: var(--ui-text-body) !important;
    font-weight: 500;
    border-radius: var(--ui-radius-sm) !important;
    transition: var(--ui-trans-fast);
}
.sidebar-menu li > a:hover,
.sidebar-menu li > a:focus {
    background: var(--ui-bg-hover) !important;
    color: var(--ui-primary) !important;
}
/* Active state — soft tinted bg + blue text, no gradient, no accent strip */
.sidebar-menu li.active > a,
.sidebar-menu li.open > a {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
    font-weight: 600;
    box-shadow: none;
}
.sidebar-menu li.active > a .menu-text { color: var(--ui-primary) !important; }
.sidebar-menu i.icon,
.sidebar [data-feather] {
    stroke-width: 1.75;
}
.sidebar-menu li.active > a [data-feather],
.sidebar-menu li.active > a i.icon { color: var(--ui-primary); }
.sidebar-menu .badge {
    background: var(--ui-primary-tint-2) !important;
    color: var(--ui-primary) !important;
    margin-inline-start: auto;
}
/* Sub-menu */
.sidebar-menu li ul li > a {
    color: var(--ui-text-muted) !important;
    font-size: 13px;
}
.sidebar-menu li ul li.active > a {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}

/* Category headers (REPORTS / GENERAL etc.) — if the markup uses
   .menu-group-title or similar, give it the eyebrow treatment. */
.sidebar-menu .menu-group-title,
.sidebar-menu li.menu-header,
.sidebar .menu-header {
    color: var(--ui-text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Navbar (top bar) — clean white + hairline ──────────────────────────── */
.navbar-custom {
    background: var(--ui-bg-card) !important;
    border-bottom: 1px solid var(--ui-border-soft);
    box-shadow: none;
}
.navbar-custom .nav-link {
    color: var(--ui-text-muted);
    border-radius: var(--ui-radius-sm);
    transition: var(--ui-trans-fast);
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: var(--ui-primary);
    background: var(--ui-bg-hover);
}
.navbar-custom .dropdown-toggle::after { display: none; }
.navbar-custom #user-dropdown {
    color: var(--ui-text-body);
    font-weight: 500;
}
.navbar-custom #user-dropdown:hover { background: var(--ui-bg-hover); }

/* ─── Page title ─────────────────────────────────────────────────────────── */
.page-title {
    background: transparent;
    border-bottom: 1px solid var(--ui-border-soft);
}
.page-title h1 {
    color: var(--ui-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-title a { color: var(--ui-text-muted); }
.page-title a:hover { color: var(--ui-primary); }

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.pagination .page-link {
    border-color: var(--ui-border);
    color: var(--ui-text-body);
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-bg-card);
    margin: 0 2px;
}
.pagination .page-link:hover {
    background: var(--ui-bg-hover);
    border-color: var(--ui-border-strong);
    color: var(--ui-primary);
}
.pagination .page-item.active .page-link {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}

/* ─── Tooltips ───────────────────────────────────────────────────────────── */
.tooltip-inner {
    background: var(--ui-text-primary);
    color: white;
    border-radius: var(--ui-radius-sm);
    font-size: 12px;
}

/* ─── Sign-in ────────────────────────────────────────────────────────────── */
.signin-form {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-modal);
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
a { color: var(--ui-primary); text-decoration: none; transition: var(--ui-trans-fast); }
a:hover { color: var(--ui-primary-hover); text-decoration: underline; }
.breadcrumb { background: transparent; color: var(--ui-text-muted); }
.breadcrumb a { color: var(--ui-text-muted); }
.breadcrumb a:hover { color: var(--ui-primary); }

/* ─── Scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ui-text-muted); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── Settings sidebar accordion ─────────────────────────────────────────── */
#settings-left-menu-accordion {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-card);
}
#settings-left-menu-accordion .settings-anchor {
    color: var(--ui-text-primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
}
#settings-left-menu-accordion .list-group-item {
    border: none;
    color: var(--ui-text-muted);
    background: transparent;
    border-radius: var(--ui-radius-sm);
    transition: var(--ui-trans-fast);
}
#settings-left-menu-accordion .list-group-item:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
}
#settings-left-menu-accordion .list-group-item.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-weight: 600;
}

/* ─── List groups ────────────────────────────────────────────────────────── */
.list-group-item {
    background: var(--ui-bg-card);
    border-color: var(--ui-border-soft);
    color: var(--ui-text-body);
}
.list-group-item.active {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
}

/* ─── Code / pre ─────────────────────────────────────────────────────────── */
code {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
    padding: 2px 6px;
    border-radius: var(--ui-radius-xs);
    font-size: 0.92em;
}
pre {
    background: var(--ui-bg-canvas-2);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius);
    color: var(--ui-text-body);
}

/* ─── Datepicker ─────────────────────────────────────────────────────────── */
.datepicker {
    border-radius: var(--ui-radius);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-popover);
    background: var(--ui-bg-card);
}
.datepicker .day:hover, .datepicker .month:hover, .datepicker .year:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
}
.datepicker .day.active, .datepicker .month.active, .datepicker .year.active,
.datepicker .day.active:hover {
    background: var(--ui-primary) !important;
    color: white !important;
    border-radius: var(--ui-radius-sm);
}
.datepicker .day.today {
    color: var(--ui-primary) !important;
    background: var(--ui-primary-tint) !important;
}

/* ─── Progress bars ──────────────────────────────────────────────────────── */
.progress {
    height: 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border-soft);
}
.progress-bar {
    background: var(--ui-primary);
    border-radius: var(--ui-radius-pill);
}

/* ─── Accordion ──────────────────────────────────────────────────────────── */
.accordion-button {
    background: var(--ui-bg-card);
    color: var(--ui-text-primary);
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: var(--ui-shadow-focus);
    border-color: var(--ui-primary);
}
.accordion-item {
    border-color: var(--ui-border-soft);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-card);
}

/* ─── Toasts (Bootstrap) ─────────────────────────────────────────────────── */
.toast {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    color: var(--ui-text-body);
}
.toast-header {
    background: transparent;
    border-bottom: 1px solid var(--ui-border-soft);
    color: var(--ui-text-primary);
    font-weight: 600;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.spinner-border { color: var(--ui-primary); }
hr { border-color: var(--ui-border-soft); opacity: 1; }
[data-feather] { stroke-width: 1.75; vertical-align: -2px; }
.avatar, .avatar-xs, .avatar-sm, .avatar-md { border-radius: 50%; }

/* ─── Kanban ─────────────────────────────────────────────────────────────── */
.kanban-item {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-card);
}
.kanban-col-title {
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 11px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY PATTERNS — opt-in classes for views that want the Atlass-style
   KPI cards / empty states / etc. Adding these classes to existing markup
   is non-destructive — Rise's own classes still render fine without them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* KPI / stat card pattern */
.ui-stat-card {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    padding: 22px 24px;
    box-shadow: var(--ui-shadow-card);
}
.ui-stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    margin-bottom: 10px;
}
.ui-stat-card .stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--ui-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ui-stat-card .stat-delta {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--ui-radius-pill);
}
.ui-stat-card .stat-delta.up   { color: var(--ui-success); background: var(--ui-success-tint); }
.ui-stat-card .stat-delta.down { color: var(--ui-danger);  background: var(--ui-danger-tint); }

/* Empty state pattern */
.ui-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--ui-text-muted);
}
.ui-empty-state-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    border-radius: var(--ui-radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-empty-state-icon [data-feather] { width: 28px; height: 28px; stroke-width: 1.5; }
.ui-empty-state h3 {
    color: var(--ui-text-primary);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}
.ui-empty-state p { font-size: 14px; line-height: 1.6; max-width: 360px; margin: 0 auto; }

/* Selective orange accent — opt-in class for highlighting one row/item */
.ui-accent { color: var(--ui-accent) !important; }
.ui-accent-bg { background: var(--ui-accent) !important; color: white; }
.ui-accent-tint { background: var(--ui-accent-tint) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASS 2 — top bar / FAB / settings sidebar / progress bars / slide-over
   modals / button text color. Addresses specific user feedback items.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOP BAR — PR-A: 3-column flex (left · pill · right), refined hover,
       profile chip with caret, pinned notification badge, RTL via logical
       properties. ─────────────────────────────────────────────────────────── */

/* Navbar shell — more horizontal breathing room (24px vs old 18px). */
.navbar-custom {
    height: 64px;
    padding-inline: 24px;
    padding-block: 0;
}
.navbar-custom .container-fluid {
    padding: 0;
    height: 100%;
}
.navbar-custom .navbar-collapse {
    height: 100%;
    align-items: center;
    justify-content: space-between;     /* push topbar-left and topbar-right
                                           to the screen edges. On desktop the
                                           search-pill (flex: 1 1 auto) fills
                                           the gap; on mobile responsive.css
                                           hides the pill, so this rule
                                           replaces what the pill used to do. */
}

/* The two flex children of the navbar: left ul + right div. The centered
   search-pill wrapper sits between them and absorbs the remaining space. */
.navbar-custom .topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.navbar-custom .topbar-right {
    flex-shrink: 0;
    margin-inline-start: auto;          /* belt-and-suspenders: even without
                                           justify-content above, push the
                                           profile cluster to the trailing
                                           edge. RTL-aware via logical prop. */
}
.navbar-custom .topbar-right .navbar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

/* Icon buttons — round 44px circles with comfortable 22px stroke-2 icons */
.navbar-custom .nav-link,
.navbar-custom .sidebar-toggle-btn {
    color: var(--ui-text-muted);
    border-radius: 50%;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;             /* spacing handled by parent `gap` */
    transition: var(--ui-trans-fast);
    position: relative;    /* anchors absolutely-positioned notification badge */
    border: none;
    background: transparent;
}
.navbar-custom .nav-link [data-feather],
.navbar-custom .nav-link .icon,
.navbar-custom .sidebar-toggle-btn [data-feather],
.navbar-custom .sidebar-toggle-btn .icon {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
}

/* Hover state — change WEIGHT (bg) only, not MEANING (colour stays muted).
   Primary-tint background is reserved for the open / .show state. */
.navbar-custom .nav-link:hover,
.navbar-custom .sidebar-toggle-btn:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-text-primary);
}
.navbar-custom .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-primary-glow, rgba(37, 99, 235, 0.18));
}
/* Open-dropdown / active state — primary tint + primary colour */
.navbar-custom .nav-link.show,
.navbar-custom .nav-link.active,
.navbar-custom .nav-link[aria-expanded="true"] {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

/* Hide Bootstrap's default dropdown caret on nav-links — we add our own
   to the profile chip explicitly. */
.navbar-custom .dropdown-toggle::after { display: none; }

/* Inter-group gap — visual separation before the profile chip cluster */
.navbar-custom .topbar-right .navbar-nav > li:last-child {
    margin-inline-start: 8px;
}

/* ── Brand logo — removed from topbar. Logo lives in the sidebar header
   now (see .sidebar-brand block). Selectors kept here only to neutralize
   any stale topbar-brand markup that might be cached in a tenant template. */
.navbar-custom .topbar-brand-li {
    display: none !important;
}

/* ── Centered native search — type directly, autocomplete inline ───────── */
.navbar-custom .navbar-search-pill-wrapper {
    flex: 1 1 auto;
    display: none;
    justify-content: center;
    align-items: center;
    padding-inline: 16px;
    min-width: 0;
}
@media (min-width: 768px) {
    .navbar-custom .navbar-search-pill-wrapper { display: flex; }
}
.navbar-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 480px;
    height: 40px;
    padding-inline: 14px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-canvas);
    border: 1px solid var(--ui-border);
    transition: var(--ui-trans-fast);
    position: relative;     /* anchors Awesomplete dropdown */
}
.navbar-search-box:hover {
    background: var(--ui-bg-hover);
    border-color: var(--ui-border-strong);
}
.navbar-search-box:focus-within {
    background: var(--ui-bg-card);
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-glow, rgba(37, 99, 235, 0.18));
}
.navbar-search-box-icon {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
    flex-shrink: 0;
    color: var(--ui-text-muted);
}
/* Type selector — minimal, looks like a label, click reveals options */
.navbar-search-box .navbar-search-type {
    border: none !important;
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 22px 4px 6px;
    height: 28px;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    text-transform: capitalize;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 12px !important;
    transition: var(--ui-trans-fast);
}
[dir="rtl"] .navbar-search-box .navbar-search-type {
    background-position: left 4px center !important;
    padding: 4px 6px 4px 22px;
}
.navbar-search-box .navbar-search-type:hover {
    background-color: var(--ui-bg-hover) !important;
    color: var(--ui-text-primary) !important;
}
.navbar-search-box .navbar-search-type:focus {
    outline: none;
    background-color: var(--ui-bg-hover) !important;
    color: var(--ui-primary) !important;
}
/* Subtle separator between the type select and the input */
.navbar-search-box .navbar-search-type::after {
    content: '';
}
.navbar-search-box .navbar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ui-text-body);
    padding: 0;
    height: 100%;
    box-shadow: none !important;
}
.navbar-search-box .navbar-search-input::placeholder {
    color: var(--ui-text-faint);
}
.navbar-search-box .navbar-search-input:focus {
    box-shadow: none !important;
}
/* Searching state — subtle loading indicator */
.navbar-search-box .navbar-search-input.searching {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><circle cx='12' cy='12' r='10' stroke-dasharray='40' stroke-dashoffset='20'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/></circle></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 14px;
    padding-inline-end: 22px;
}
[dir="rtl"] .navbar-search-box .navbar-search-input.searching {
    background-position: left 4px center;
    padding-inline-end: 0;
    padding-inline-start: 22px;
}
.navbar-search-shortcut {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, monospace;
    line-height: 1.2;
}
.navbar-search-box:focus-within .navbar-search-shortcut {
    display: none;          /* hide kbd hint while typing */
}

/* ── Topbar language toggle — pipe-separated "عربي | EN" switch ──────────
   Replaces the globe-icon dropdown when only Arabic + English are active.
   Both labels are visible and clickable; the current one is muted, the
   alternate one is body-color (calls attention to "click me to switch"). */
/* Desktop topbar lang switcher — pill style matching the mobile sidebar's
   AR|EN toggle for visual consistency. Active = filled blue pill with
   white text, inactive = muted text. */
.topbar-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    height: 32px;
    background: var(--ui-bg-hover);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.topbar-lang-toggle .topbar-lang-link {
    color: var(--ui-text-muted);
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 999px;
    transition: var(--ui-trans-fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.topbar-lang-toggle .topbar-lang-link:hover:not(.is-active),
.topbar-lang-toggle .topbar-lang-link:focus:not(.is-active) {
    color: var(--ui-text-primary);
    outline: none;
}
.topbar-lang-toggle .topbar-lang-link.is-active {
    color: #fff;
    background: var(--ui-primary);
    cursor: default;
    pointer-events: none;       /* clicking the active one is a no-op */
}
.topbar-lang-toggle .topbar-lang-sep {
    color: var(--ui-border-strong);
    font-weight: 400;
    user-select: none;
    font-size: 10px;
    display: none;              /* with pill backgrounds we don't need a separator */
}
/* Arabic label always renders Arabic font, irrespective of page direction. */
.topbar-lang-toggle .topbar-lang-link[lang="ar"] {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
    font-size: 12.5px;
}

/* ── Awesomplete dropdown — results panel below the search box ──────────── */
/* Awesomplete wraps the <input> in a <div class="awesomplete">, which then
   becomes the flex child of .navbar-search-box. Without flex: 1, the wrapper
   sizes itself to the input's intrinsic width and the "/" shortcut sits in
   the middle of the pill instead of at the right edge. */
.navbar-search-box .awesomplete {
    position: relative;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center;
}
.navbar-search-box .awesomplete > input {
    width: 100% !important;
}
.navbar-search-box .awesomplete > ul {
    position: absolute;
    top: 52px !important;        /* below the search box (40px box + 12px gap) */
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100% !important;
    max-width: 480px;
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}
.navbar-search-box .awesomplete > ul::before {
    display: none;        /* hide Awesomplete's default pointer arrow */
}
.navbar-search-box .awesomplete > ul > li {
    padding: 9px 12px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-body);
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--ui-trans-fast);
}
.navbar-search-box .awesomplete > ul > li:hover,
.navbar-search-box .awesomplete > ul > li[aria-selected="true"] {
    background: var(--ui-bg-hover);
    color: var(--ui-primary);
}
.navbar-search-box .awesomplete > ul > li mark {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* ── Notification badge — pinned in CSS using inset-inline-end for RTL ─── */
.navbar-custom .notification-badge-container {
    pointer-events: none;
}
.navbar-custom .notification-badge-container:not(:empty) {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ui-bg-card);
}
.navbar-custom .notification-badge-container:empty {
    display: none;
}

/* ── Profile chip — pill with avatar + name + chevron caret ─────────────── */
.navbar-custom #user-dropdown {
    border-radius: var(--ui-radius-pill) !important;
    padding-inline: 4px 14px !important;
    padding-block: 4px !important;
    width: auto !important;
    height: 48px !important;
    color: var(--ui-text-primary) !important;
    font-weight: 500;
    font-size: 14px;
    gap: 10px;
    display: inline-flex !important;
    align-items: center;
}
.navbar-custom #user-dropdown:hover {
    background: var(--ui-bg-hover) !important;
}
.navbar-custom #user-dropdown.show,
.navbar-custom #user-dropdown[aria-expanded="true"] {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}
.navbar-custom #user-dropdown .avatar-xs,
.navbar-custom #user-dropdown .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    box-shadow: 0 0 0 2px var(--ui-primary-soft);
    flex-shrink: 0;
    overflow: hidden;
}
.navbar-custom #user-dropdown .avatar img,
.navbar-custom #user-dropdown .avatar-xs img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.navbar-custom .user-name {
    margin: 0 !important;
    line-height: 1.2;
    color: inherit;
    font-weight: 500;
    white-space: nowrap;
}
/* Chevron caret — rotates 180° when dropdown opens */
.navbar-custom #user-dropdown .caret {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
    color: var(--ui-text-faint);
    transition: transform 0.2s var(--ui-ease);
    flex-shrink: 0;
}
.navbar-custom #user-dropdown.show .caret,
.navbar-custom #user-dropdown[aria-expanded="true"] .caret {
    transform: rotate(180deg);
    color: var(--ui-primary);
}

/* ── Dropdown panels — detached from bar, soft shadow ───────────────────── */
.navbar-custom .dropdown-menu {
    margin-top: 8px !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    background: var(--ui-bg-card);
    padding: 6px;
}

/* ─── 2. FLOATING ACTION BUTTONS — unified refined styling ───────────────── */
/* Lower z-index than Bootstrap's modal-backdrop (z:1050) so the FAB doesn't
   sit on top of slide-over modals or other overlays. */
.hawih-chat-fab,
.rise-chat-wrapper {
    z-index: 1040 !important;
}
.hawih-chat-panel {
    z-index: 1045 !important;     /* still above FAB but below modal */
}

/* Rise's own chat FAB (init-chat-icon) — clean white pill, soft shadow */
.init-chat-icon,
.rise-chat-wrapper > .init-chat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--ui-bg-card) !important;
    color: var(--ui-text-primary) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10),
                0 2px 6px rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: var(--ui-trans) !important;
}
.init-chat-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14),
                0 4px 10px rgba(15, 23, 42, 0.08) !important;
    color: var(--ui-primary) !important;
    border-color: var(--ui-primary-tint-2) !important;
}
.init-chat-icon i,
.init-chat-icon [data-feather],
.init-chat-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.85;
}
/* AI chat FAB — primary blue, slightly elevated */
.hawih-chat-fab {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--ui-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32),
                0 2px 6px rgba(37, 99, 235, 0.16) !important;
    transition: var(--ui-trans) !important;
}
.hawih-chat-fab:hover {
    background: var(--ui-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.42),
                0 4px 10px rgba(37, 99, 235, 0.20) !important;
}
.hawih-chat-fab.is-open {
    background: var(--ui-primary-active) !important;
}
.hawih-chat-fab svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}
/* Stack the two FABs cleanly when both present */
.rise-chat-wrapper {
    right: 20px !important;
    bottom: 20px !important;
}
[dir="rtl"] .rise-chat-wrapper {
    right: auto !important;
    left: 20px !important;
}
.hawih-chat-fab {
    right: 20px !important;
    bottom: 84px !important;
}
[dir="rtl"] .hawih-chat-fab {
    right: auto !important;
    left: 20px !important;
}

/* ─── 3. SETTINGS SIDEBAR — bigger text, breathing room, soft active ─────── */
#settings-left-menu-accordion {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-card);
    padding: 10px;
    box-shadow: var(--ui-shadow-card);
    margin-bottom: 16px;
}
#settings-left-menu-accordion .settings-anchor {
    color: var(--ui-text-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11.5px;
    padding: 14px 14px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Text hugs the start side (right in RTL, left in LTR); the chevron
       ::after gets pushed to the end by margin-inline-start: auto below.
       Was `space-between` which mis-laid-out because float:right on the
       chevron is ignored inside a flex container, producing the
       text-looks-centered visual the user reported. */
    justify-content: flex-start;
    text-align: start;
}
/* Force the disclosure chevron to the END side regardless of float
   declarations in app.all.css. Without this it sticks at the "left"
   in both RTL and LTR because of the flex flow. */
#settings-left-menu-accordion .settings-anchor::after,
#settings-left-menu-accordion .settings-anchor:not(.hide-collapse)::after,
#settings-left-menu-accordion .settings-anchor:not(.collapsed):not(.hide-collapse)::after {
    margin-inline-start: auto !important;
    float: none !important;
    margin-top: 0 !important;
}
/* Section divider above subsequent sections — quiet hairline */
#settings-left-menu-accordion .settings-anchor:not(:first-of-type) {
    margin-top: 6px;
    border-top: 1px solid var(--ui-border-soft);
    padding-top: 16px;
}
#settings-left-menu-accordion .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#settings-left-menu-accordion .list-group-item {
    border: none !important;
    color: var(--ui-text-muted);
    background: transparent;
    border-radius: var(--ui-radius-sm);
    padding: 10px 14px !important;
    margin: 1px 0;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: var(--ui-trans-fast);
}
#settings-left-menu-accordion .list-group-item:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-text-primary);
}
#settings-left-menu-accordion .list-group-item.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-weight: 600;
    border-left: 3px solid var(--ui-primary);
    padding-left: 11px !important;
    box-shadow: none;
}
[dir="rtl"] #settings-left-menu-accordion .list-group-item.active {
    border-left: none;
    border-right: 3px solid var(--ui-primary);
    padding-left: 14px !important;
    padding-right: 11px !important;
}

/* ─── 4. PROGRESS BARS — modern pill style, gradient fill ────────────────── */
.progress {
    height: 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-hover);
    overflow: hidden;
    box-shadow: none;
    border: none;
}
.progress-bar {
    background: var(--ui-primary);
    border-radius: var(--ui-radius-pill);
    transition: width 0.6s var(--ui-ease);
    box-shadow: none;
    color: white;
    font-size: 11px;
    font-weight: 600;
}
.progress-bar.bg-success { background: var(--ui-success) !important; }
.progress-bar.bg-danger  { background: var(--ui-danger) !important; }
.progress-bar.bg-warning { background: var(--ui-warning) !important; }
.progress-bar.bg-info    { background: var(--ui-info) !important; }
.progress-bar.bg-primary { background: var(--ui-primary) !important; }
.progress-bar.bg-orange  { background: var(--ui-accent) !important; }

/* Rise's "Progression XX%" — used on Projects Overview widget.
   Redesigned to the reference option-3 style: thin filled pill bar with
   the percentage label moved ABOVE the bar (left-aligned, RTL right). */
.progress-outline {
    background: transparent !important;
    border: none !important;
    padding: 24px 0 0 !important;
    margin-top: 14px !important;
    position: relative;
    border-radius: 0;
}
.progress-outline .progress {
    height: 8px !important;
    background: var(--ui-bg-hover) !important;
    border-radius: var(--ui-radius-pill) !important;
    overflow: visible !important;
    position: relative;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.progress-outline .progress .progress-bar {
    background: var(--ui-primary) !important;
    border-radius: var(--ui-radius-pill) !important;
    transition: width 0.6s var(--ui-ease) !important;
    position: relative;
    overflow: visible !important;
    height: 8px !important;
    box-shadow: none !important;
}
/* Move the centered "Progression XX%" label out of the bar to ABOVE it.
   Rise's HTML puts the label inside .progress-bar as a position-absolute
   span with d-flex / justify-content-center / w-100 classes. */
.progress-outline .progress .progress-bar .position-absolute,
.progress-outline .progress .progress-bar > span {
    color: var(--ui-text-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    top: -22px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
    background: transparent !important;
    display: block !important;
    justify-content: flex-start !important;
    mix-blend-mode: normal !important;
    z-index: 1 !important;
    pointer-events: none;
    white-space: nowrap;
}
[dir="rtl"] .progress-outline .progress .progress-bar .position-absolute,
[dir="rtl"] .progress-outline .progress .progress-bar > span {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
    justify-content: flex-end !important;
}
/* When at 100% — success-green bar; label stays above */
.progress-outline .progress .progress-bar[aria-valuenow="100"] {
    background: var(--ui-success) !important;
}

/* ─── 5. BUTTON TEXT COLOR — solid-color buttons always render text WHITE ── */
/* This fixes the "Convert to client" button that was rendering dark text on
   blue background. Rise's icon classes carry their own colour (`.icon` is
   `color: #7b8190`), which leaks through unless we force inheritance. */
.btn-primary, .btn-primary *,
.btn-primary > .icon, .btn-primary > i, .btn-primary [data-feather],
.btn-success, .btn-success *,
.btn-success > .icon, .btn-success > i, .btn-success [data-feather],
.btn-danger, .btn-danger *,
.btn-danger > .icon, .btn-danger > i, .btn-danger [data-feather],
.btn-warning, .btn-warning *,
.btn-warning > .icon, .btn-warning > i, .btn-warning [data-feather],
.btn-info, .btn-info *,
.btn-info > .icon, .btn-info > i, .btn-info [data-feather] {
    color: white !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    color: white !important;
}
/* But outline variants keep accent color text */
.btn-outline-primary { color: var(--ui-primary) !important; }
.btn-outline-primary > * { color: inherit !important; }
.btn-outline-primary:hover, .btn-outline-primary:hover > * { color: white !important; }

/* ─── 6. SLIDE-OVER MODALS — form modals slide in from the right edge ────── */
/* Maximum specificity via #ajaxModal (the global modal Rise reuses for every
   form/content popup). The confirmation modal (#confirmationModal) uses a
   plain .modal-dialog WITHOUT .modal-lg, so it stays centered. */
#ajaxModal.modal,
.modal {
    /* Modal viewport host — full-screen container that holds the dialog. */
    padding: 0 !important;
}
#ajaxModal.modal .modal-dialog,
.modal .modal-dialog.modal-lg,
.modal .modal-dialog.modal-extra-large,
.modal .modal-dialog.modal-xl {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 620px !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(110%) !important;
    transition: transform 0.32s cubic-bezier(0.2, 0, 0.2, 1) !important;
    pointer-events: auto !important;
}
#ajaxModal.modal.show .modal-dialog,
#ajaxModal.modal.fade.show .modal-dialog,
.modal.show .modal-dialog.modal-lg,
.modal.show .modal-dialog.modal-extra-large,
.modal.show .modal-dialog.modal-xl,
.modal.fade.show .modal-dialog.modal-lg,
.modal.fade.show .modal-dialog.modal-extra-large,
.modal.fade.show .modal-dialog.modal-xl {
    transform: translateX(0) !important;
}
/* RTL — slide from left edge */
[dir="rtl"] #ajaxModal.modal .modal-dialog,
[dir="rtl"] .modal .modal-dialog.modal-lg,
[dir="rtl"] .modal .modal-dialog.modal-extra-large,
[dir="rtl"] .modal .modal-dialog.modal-xl {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-110%) !important;
}
[dir="rtl"] #ajaxModal.modal.show .modal-dialog,
[dir="rtl"] #ajaxModal.modal.fade.show .modal-dialog,
[dir="rtl"] .modal.show .modal-dialog.modal-lg,
[dir="rtl"] .modal.fade.show .modal-dialog.modal-lg {
    transform: translateX(0) !important;
}
/* The confirmation modal must stay centered as a small popup — explicit
   override in case any of the above rules cascade unintentionally. */
#confirmationModal .modal-dialog {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 1.75rem auto !important;
    transform: none !important;
    height: auto !important;
    max-width: 500px !important;
    width: auto !important;
}
#confirmationModal.modal.fade .modal-dialog {
    transform: translate(0, -50px) !important;
    transition: transform 0.3s ease-out !important;
}
#confirmationModal.modal.fade.show .modal-dialog {
    transform: none !important;
}
/* Slide-over content shape */
#ajaxModal .modal-content,
.modal .modal-dialog.modal-lg .modal-content,
.modal .modal-dialog.modal-extra-large .modal-content,
.modal .modal-dialog.modal-xl .modal-content {
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid var(--ui-border) !important;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.16) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--ui-bg-card) !important;
}
[dir="rtl"] #ajaxModal .modal-content,
[dir="rtl"] .modal .modal-dialog.modal-lg .modal-content {
    border-left: none !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 24px 0 60px rgba(15, 23, 42, 0.16) !important;
}
/* Confirmation modal content keeps a rounded card look */
#confirmationModal .modal-content {
    height: auto !important;
    border-radius: var(--ui-radius-card) !important;
    border: 1px solid var(--ui-border-soft) !important;
    box-shadow: var(--ui-shadow-modal) !important;
}
/* Header / body / footer padding for the side panel */
#ajaxModal .modal-header,
.modal-dialog.modal-lg .modal-header {
    padding: 20px 24px !important;
    flex-shrink: 0;
}
#ajaxModal .modal-title,
.modal-dialog.modal-lg .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
}
#ajaxModal .modal-body,
.modal-dialog.modal-lg .modal-body,
#ajaxModal #ajaxModalContent,
.modal-dialog.modal-lg #ajaxModalContent {
    overflow-y: auto !important;
    flex: 1 !important;
    padding: 20px 24px !important;
}
#ajaxModal .modal-footer,
.modal-dialog.modal-lg .modal-footer {
    padding: 16px 24px !important;
    flex-shrink: 0;
}
/* Backdrop scrim */
.modal-backdrop,
.modal-backdrop.show {
    background: rgba(15, 23, 42, 0.50) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   v7 — Logo lives in the sidebar header again
   Reversed the v6/PR-A/PR-Aa direction: the user prefers classic CRM
   layout (logo on top of left nav, not in the topbar). The topbar now
   starts with the hamburger button. See .sidebar-brand block above for
   the actual styling, and topbar.php for the removed topbar-brand-li.
   ════════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════════
   v8 — Native-app mobile UX (topbar + bottom-nav)
   ═════════════════════════════════════════════════════════════════════════

   Goal: make the site feel like a native iOS app on phones/tablets.
   - New topbar: 2 rows (notification · logo · burger | search bar wide)
   - New bottom-nav: 5 buttons (Home · Estimate · AI · Add Task · Projects)
   - iOS-style backdrop blur on topbar
   - Bottom-nav auto-hides on scroll-down, reappears on scroll-up
   - The legacy .navbar-custom and .legacy-mobile-bottom-menu are hidden
     on mobile so they don't double up with the new components.

   All scoped to ≤lg (max-width: 991px). Desktop layout untouched.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Hide the legacy chrome on mobile — the new mobile_navigation partial
       supplies the topbar + bottom-nav. */
    .navbar-custom,
    #default-navbar {
        display: none !important;
    }
    .legacy-mobile-bottom-menu,
    nav.mobile-bottom-menu {
        display: none !important;
    }

    /* Adjust the page container to clear the new mobile topbar (≈108px
       with two rows) and leave room for the bottom-nav (≈72px). */
    body {
        padding-top: 108px;
    }
    .page-content,
    #page-content,
    .scrollable-page {
        padding-bottom: 88px;
    }
}

/* ── New mobile topbar ───────────────────────────────────────────────── */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 991px) {
    .mobile-topbar { display: block; }
}
.mobile-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 14px;
    gap: 10px;
}
.mobile-topbar-action {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ui-text-body);
    text-decoration: none !important;
    transition: var(--ui-trans-fast);
    background: transparent;
    position: relative;
    flex-shrink: 0;
}
.mobile-topbar-action:hover,
.mobile-topbar-action:focus {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ui-text-primary);
}
.mobile-topbar-action .icon-20 {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.mobile-topbar-bell-badge:not(:empty) {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 16px;
    height: 16px;
    background: var(--ui-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.mobile-topbar-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none !important;
    min-width: 0;
}
.mobile-topbar-logo img {
    max-height: 28px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Page-actions slot in the topbar. Populated at runtime by Rise's
   convertTabButtonsToDropdownOnMobileView() with a dropdown containing
   page-specific buttons (Add Estimate / Add Project / etc.). When empty
   (e.g. on Dashboard) the slot collapses to zero width. */
.mobile-topbar-functions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.mobile-topbar-functions:empty {
    display: none;
}
.mobile-topbar-functions > .dropdown {
    margin: 0;
}
.mobile-topbar-functions > .dropdown > .dropdown-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ui-text-body);
    background: transparent;
    cursor: pointer;
    border: none;
    transition: var(--ui-trans-fast);
}
.mobile-topbar-functions > .dropdown > .dropdown-toggle:hover,
.mobile-topbar-functions > .dropdown > .dropdown-toggle:focus {
    background: rgba(15, 23, 42, 0.06);
}
.mobile-topbar-functions > .dropdown > .dropdown-toggle::after {
    display: none;       /* hide bootstrap's caret triangle */
}
.mobile-topbar-functions > .dropdown > .dropdown-toggle .icon {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2;
}
.mobile-topbar-functions .mobile-function-button-dropdown {
    min-width: 220px;
    z-index: 1040;
}
.mobile-topbar-search-row {
    padding: 0 14px 10px;
}
.mobile-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    transition: var(--ui-trans-fast);
}
.mobile-search-box:focus-within {
    background: rgba(15, 23, 42, 0.08);
    box-shadow: 0 0 0 2px var(--ui-primary-glow, rgba(37, 99, 235, 0.16));
}
.mobile-search-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}
.mobile-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--ui-text-body);
    font-family: inherit;
}
.mobile-search-input::placeholder {
    color: var(--ui-text-muted);
}

/* ── New mobile bottom-nav (5 buttons) ──────────────────────────────── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1029;
    height: 72px;
    padding: 6px 8px 14px;       /* extra bottom for iOS home-indicator */
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, opacity 0.25s ease;
    justify-content: space-around;
    align-items: center;
}
@media (max-width: 991px) {
    .mobile-bottom-nav { display: flex; }
}
.mobile-bottom-nav.is-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.mb-nav-item {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--ui-text-muted);
    text-decoration: none !important;
    font-size: 10.5px;
    font-weight: 500;
    transition: color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
}
.mb-nav-item:hover,
.mb-nav-item:focus,
.mb-nav-item.active {
    color: var(--ui-primary);
}
.mb-nav-item .icon-20 {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}
.mb-nav-label {
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-nav-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* Center "AI chat" button — bigger blue circle, slightly raised. */
.mb-nav-center {
    position: relative;
    margin-top: -18px;       /* lift it above the bar */
}
.mb-nav-center-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #1F1FFF 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(31, 31, 255, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.mb-nav-center:hover .mb-nav-center-bubble,
.mb-nav-center:focus .mb-nav-center-bubble {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(31, 31, 255, 0.5);
    filter: brightness(1.05);
}
.mb-nav-center .mb-nav-label {
    display: none;   /* center button is icon-only by design */
}

/* When the chat panel is open, lift it to clear the new bottom-nav.
   (Old rule at hawih_chat.css used bottom:85px for the legacy nav; the
   new nav is 72px tall, so 80px gives ~8px breathing space.) */
@media (max-width: 991px) {
    .hawih-chat-panel,
    .hawih-chat-panel.is-open {
        bottom: 80px !important;
        height: calc(100dvh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   v9 — Universal search + unified page actions
   ═════════════════════════════════════════════════════════════════════════
   See assets/js/hawih_page_actions.js for behavior. Two things:
   1. .hawih-page-actions-inline — the moved title-button-group buttons
      now sit inside .filter-section-left next to "+ Add new filter".
   2. .hawih-search-results-dropdown — the live multi-entity search
      results panel below the topbar search input (mobile + desktop).
   ════════════════════════════════════════════════════════════════════════ */

/* Moved title-button-group buttons live inside the filter section. They
   should sit on the same row as "+ Add new filter" — compact, even when
   there are 3-4 actions. Smaller padding + smaller font + nowrap so a
   typical list page (Projects: Manage labels / Import projects / Add
   project) all fits on one row at desktop and wraps to two at most on
   phones. */
.hawih-page-actions-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-inline-end: 8px;
}
.hawih-page-actions-inline > .btn,
.hawih-page-actions-inline > a.btn {
    margin: 0;
    padding: 6px 12px !important;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hawih-page-actions-inline > .btn .icon-16,
.hawih-page-actions-inline > a.btn .icon-16 {
    width: 14px;
    height: 14px;
}
/* The Add-X button (always last in the moved group) is the primary action —
   make it filled-blue so the user can spot it instantly. Rise marks it with
   a plus-circle icon, but the simplest tell is "the last sibling". */
.hawih-page-actions-inline > .btn:last-child,
.hawih-page-actions-inline > a.btn:last-child {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
}
.hawih-page-actions-inline > .btn:last-child:hover,
.hawih-page-actions-inline > a.btn:last-child:hover {
    background: var(--ui-primary-strong, #1d4ed8) !important;
    color: #fff !important;
}
.hawih-page-actions-inline > .btn:last-child .icon-16 {
    color: #fff;
}

/* Hide the original .page-title button row when it's been emptied —
   prevents an awkward blank padded box where buttons used to be. */
.page-title .title-button-group:empty {
    display: none;
}

/* Universal search results dropdown ───────────────────────────────────── */
.hawih-search-context {
    position: relative;
}
.hawih-search-results-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-top: 8px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-popover);
    padding: 6px;
    z-index: 1050;
    display: none;
}
.hawih-search-results-dropdown.is-open {
    display: block;
}
.hawih-search-section {
    padding: 6px 0;
}
.hawih-search-section + .hawih-search-section {
    border-top: 1px solid var(--ui-border-soft);
}
.hawih-search-section-header {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ui-text-muted);
    padding: 6px 12px 4px;
}
.hawih-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-body);
    text-decoration: none !important;
    font-size: 13.5px;
    transition: background 0.12s ease;
    cursor: pointer;
}
.hawih-search-result:hover,
.hawih-search-result:focus {
    background: var(--ui-bg-hover);
    color: var(--ui-text-primary);
}
.hawih-search-result-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ui-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hawih-search-result-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
.hawih-search-result-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hawih-search-empty {
    padding: 14px;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: 13px;
}

/* The mobile-search-input dropdown needs to escape the topbar header so
   it can actually overlay the page content. */
.mobile-topbar-search-row .hawih-search-results-dropdown {
    inset-inline-start: 14px;
    inset-inline-end: 14px;
}

/* ─── Empty state (opt-in component) ─────────────────────────────────────────
   Reusable zero-state for lists / tables / kanban / widgets. Rendered via the
   includes/empty_state view partial. Arabic-first copy lives at call sites;
   this only provides the frame. Icon is a Feather glyph (48px, muted). Purely
   additive — nothing renders it unless a view opts in. */
.ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ui-space-10) var(--ui-space-6);
    color: var(--ui-text-muted);
    min-height: 220px;
}
.ui-empty-state.is-compact {
    padding: var(--ui-space-6) var(--ui-space-4);
    min-height: 140px;
}
.ui-empty-state .ui-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--ui-space-4);
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}
.ui-empty-state .ui-empty-icon svg,
.ui-empty-state .ui-empty-icon .icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.75;
}
.ui-empty-state .ui-empty-title {
    font-size: var(--ui-font-lg);
    font-weight: 600;
    color: var(--ui-text-primary);
    margin: 0 0 var(--ui-space-2);
}
.ui-empty-state .ui-empty-text {
    font-size: var(--ui-font-base);
    color: var(--ui-text-muted);
    max-width: 380px;
    line-height: 1.6;
    margin: 0 0 var(--ui-space-5);
}
.ui-empty-state .ui-empty-actions {
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── Dark-mode topbar toggle ────────────────────────────────────────────── */
.topbar-theme-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    transition: var(--ui-trans-fast);
}
.topbar-theme-toggle:hover { color: var(--ui-primary); }
/* Show the icon that represents the mode you'll switch TO. */
.topbar-theme-toggle .topbar-theme-icon-light { display: none; }
.topbar-theme-toggle .topbar-theme-icon-dark  { display: inline-flex; }
[data-bs-theme="dark"] .topbar-theme-toggle .topbar-theme-icon-dark  { display: none; }
[data-bs-theme="dark"] .topbar-theme-toggle .topbar-theme-icon-light { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT POLISH (Phase 3) — additive enhancements over the base styling
   above. Logical properties throughout so everything mirrors in RTL. Anything
   that could shift layout is opt-in via a class, never a blanket override of a
   Rise default (the v2-regression guardrail).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tenant accent — available as a variable for accent bars etc. Defaults to the
   brand primary; a tenant colour can override it. Dark-aware because it points
   at --ui-primary which is already redefined for dark. */
:root { --tenant-accent: var(--ui-primary); }

/* ─── Tables: comfortable rows + numeric alignment ───────────────────────── */
.table tbody td, table.dataTable tbody td { min-height: 44px; }
.table tbody tr, table.dataTable tbody tr { transition: background-color 0.12s var(--ui-ease); }
/* First column reads as the row's identity */
table.dataTable tbody td:first-child { font-weight: 500; color: var(--ui-text-primary); }
/* Numeric / money columns: logical end-alignment + tabular figures */
td.ui-num, th.ui-num, td.text-end, .table .amount, table.dataTable td.amount {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* Opt-in sticky header — only inside a scroll container, so it can't move page
   chrome. Add .table-sticky-head to a .table-responsive wrapper's table. */
.table-responsive .table-sticky-head thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--ui-z-sticky);
    background: var(--ui-bg-card);
}

/* ─── Status pill (opt-in .ui-status + variant) ──────────────────────────── */
.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.ui-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.ui-status.is-success { color: var(--ui-success); background: var(--ui-success-tint); }
.ui-status.is-warning { color: var(--ui-warning); background: var(--ui-warning-tint); }
.ui-status.is-danger  { color: var(--ui-danger);  background: var(--ui-danger-tint); }
.ui-status.is-info    { color: var(--ui-info);    background: var(--ui-info-tint); }
.ui-status.is-muted   { color: var(--ui-text-muted); background: var(--ui-bg-active); }

/* ─── Slide-over modal (opt-in .modal-slideover) ─────────────────────────────
   A right-anchored (inline-end) panel for create/edit flows that keeps the
   list visible behind it. Mirrors to the inline-start in RTL automatically.
   Desktop only; on phones Bootstrap's full-width mobile modal already wins. */
@media (min-width: 768px) {
    .modal.modal-slideover .modal-dialog {
        margin: 0;
        margin-inline-start: auto;
        max-width: 460px;
        height: 100%;
        min-height: 100vh;
    }
    .modal.modal-slideover .modal-content {
        height: 100vh;
        border-radius: 0;
        border-inline-start: 1px solid var(--ui-border);
    }
    .modal.modal-slideover.fade .modal-dialog {
        transform: translateX(30px);
        transition: transform 0.22s var(--ui-ease);
    }
    [dir="rtl"] .modal.modal-slideover.fade .modal-dialog { transform: translateX(-30px); }
    .modal.modal-slideover.show .modal-dialog { transform: none; }
}

/* ─── Sidebar: active-item accent bar (logical inline-start) ──────────────── */
.sidebar-menu li > a { position: relative; }
.sidebar-menu li.active > a::before,
.sidebar-menu li.open.active > a::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 6px;
    width: 3px;
    border-radius: 0 var(--ui-radius-xs) var(--ui-radius-xs) 0;
    background: var(--tenant-accent);
}
[dir="rtl"] .sidebar-menu li.active > a::before,
[dir="rtl"] .sidebar-menu li.open.active > a::before {
    border-radius: var(--ui-radius-xs) 0 0 var(--ui-radius-xs);
}

/* ─── Segmented language toggle polish ───────────────────────────────────── */
.topbar-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-active);
}
.topbar-lang-toggle .topbar-lang-link {
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    color: var(--ui-text-muted);
    text-decoration: none;
    transition: var(--ui-trans-fast);
}
.topbar-lang-toggle .topbar-lang-link.is-active {
    background: var(--ui-bg-card);
    color: var(--ui-primary);
    box-shadow: var(--ui-shadow-card);
}
.topbar-lang-toggle .topbar-lang-sep { display: none; } /* segmented look, no pipe */

/* ─── Kanban polish ──────────────────────────────────────────────────────── */
.kanban-col { border-radius: var(--ui-radius-card); }
.kanban-col .kanban-title-container,
.kanban-col .kanban-col-title {
    font-weight: 600;
    color: var(--ui-text-primary);
}
.kanban-item, .kanban-item.card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-card);
    transition: var(--ui-trans-fast);
}
.kanban-item:hover, .kanban-item.card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-popover);
}
/* Count pill next to a column title (opt-in .ui-count) */
.ui-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-active);
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Overdue date chip */
.ui-chip-overdue {
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* ─── Accessibility: skip link ───────────────────────────────────────────────
   First focusable element; visually hidden until focused, then slides into the
   top-inline-start corner. Logical positioning so it mirrors in RTL. */
.ui-skip-link {
    position: fixed;
    inset-block-start: -60px;
    inset-inline-start: 12px;
    z-index: var(--ui-z-tooltip);
    padding: 10px 18px;
    background: var(--ui-primary);
    color: #fff;
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--ui-shadow-popover);
    transition: inset-block-start 0.18s var(--ui-ease);
}
.ui-skip-link:focus {
    inset-block-start: 12px;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* Don't show a persistent focus outline when JS moves focus to main content */
#main-content:focus { outline: none; }