/* #############################################################################
   #                                                                           #
   #   MO-ERP — DESIGN SYSTEM — MASTER STYLESHEET                             #
   #                                                                           #
   #   This file now carries TWO independent, fully-switchable INTERFACES     #
   #   (item 13.3 of the Oct-2026 feedback batch), each of which supports     #
   #   its own light/dark Appearance on top:                                  #
   #                                                                           #
   #     1. CLASSIC   — the original design (default; [data-ui] absent or     #
   #                     anything other than "modern"). Section below.        #
   #     2. MODERN     — the new alternate design, selected via               #
   #                     html[data-ui="modern"]. Its own clearly-separated    #
   #                     section further down this file.                     #
   #                                                                           #
   #   Both interfaces are driven almost entirely by swapping the same set    #
   #   of CSS custom properties (--bg-*, --ol_mo_accent*, --radius-*, --shadow-*,   #
   #   --font-*) declared on :root / [data-theme="light"] (Classic) and on    #
   #   html[data-ui="modern"] / html[data-ui="modern"][data-theme="light"]    #
   #   (Modern) — every component below is written against those variables,  #
   #   so most of the app re-skins automatically. A small number of          #
   #   component-specific MODERN overrides (sidebar, header, cards) live in  #
   #   their own clearly-marked block at the end of this file for the        #
   #   flourishes variables alone can't express (pill-shaped nav, glass      #
   #   header blur, gradient accents). Every structural feature introduced   #
   #   in the Oct-2026 batch — the icon system, interactive select/dropdown  #
   #   chevrons, the RTL-aware scrollbar, unified tooltips, toasts — is      #
   #   written generically against classes/elements, NOT theme-specific      #
   #   selectors, so it carries over to BOTH interfaces with no duplication. #
   #                                                                           #
   #############################################################################
   ===================================================================== */

/* =====================================================================
   INTERFACE 1 / 2 — "CLASSIC" (the original, default design)
   Dark mode is default. Light mode overrides via [data-theme="light"].
   Signature: data (codes, prices, dates, tracking numbers) is always
   rendered in the monospace "manifest" face — a nod to the shipping /
   customs-manifest world this system runs on.
   ===================================================================== */

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

:root {
    /* --- Dark theme (default) --- */
    --ol_mo_bg-primary:    #0E0F11;
    --ol_mo_bg-secondary:  #16181B;
    --ol_mo_bg-tertiary:   #1E2124;
    --ol_mo_bg-hover:      #24272B;
    --ol_mo_border:        #2A2D31;
    --ol_mo_border-strong: #35393E;
    --ol_mo_text-primary:  #EDEEEF;
    --ol_mo_text-secondary:#9AA0A6;
    --ol_mo_text-muted:    #6B7076;
    --ol_mo_accent:        #34D399;
    --ol_mo_accent-strong: #10B981;
    --ol_mo_accent-tint:   rgba(52, 211, 153, 0.12);
    /* UI punch-list item 5: readable text color for anything painted
       with --ol_mo_accent as a background. Classic's accent is a bright mint
       green in both themes, so near-black reads clearly on it; Modern's
       accent is a saturated purple (darker in its light theme), where
       the same near-black text loses contrast, so Modern redefines this
       to white below instead of reusing Classic's value. */
    --ol_mo_accent-contrast-text: #06231A;
    --ol_mo_danger:        #F87171;
    --ol_mo_danger-tint:   rgba(248, 113, 113, 0.12);
    --ol_mo_warning:       #FBBF24;
    /* NOTE on dark-mode "shadows": a black blur reads as invisible when
       the backdrop (--ol_mo_bg-primary) is ALSO near-black — there isn't
       enough luminance difference for the eye to pick it up. Elevation
       in dark mode is therefore communicated with a visible, lighter
       RIM/border plus a soft top highlight (the classic "lifted edge"
       technique) rather than relying on the blur alone. The blur is
       kept (and widened) only to add depth once the rim already makes
       the edge readable. */
    /* Item 12 (Oct-2026 feedback): these used to carry a Y-axis offset
       (e.g. "0 10px 24px"), biasing the blur toward one side (down) of
       the element instead of surrounding it evenly. Every shadow below
       is now a centered glow — 0 X-offset, 0 Y-offset, blur-radius only
       — so elevation reads as "lifted all around", not "dropped below". */
    --ol_mo_shadow-sm:      0 0 3px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.09);
    --ol_mo_shadow-md:      0 0 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.11);
    --ol_mo_shadow-lg:      0 0 56px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.14);
    --ol_mo_radius-sm: 6px;
    --ol_mo_radius-md: 10px;
    --ol_mo_radius-lg: 16px;
    --ol_mo_sidebar-w: 218px;
    --ol_mo_sidebar-w-collapsed: 68px;
    --ol_mo_header-h: 64px;
    --ol_mo_navbar-h: 44px;
    --ol_mo_font-display: 'Manrope', sans-serif;
    --ol_mo_font-body: 'Inter', sans-serif;
    --ol_mo_font-mono: 'IBM Plex Mono', monospace;
    --ol_mo_ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ol_mo_duration: 0.4s;
    --ol_mo_duration-slow: 0.55s;
}

[data-theme="light"] {
    --ol_mo_bg-primary:    #F5F6F7;
    --ol_mo_bg-secondary:  #FFFFFF;
    --ol_mo_bg-tertiary:   #EEF0F1;
    --ol_mo_bg-hover:      #E6E8EA;
    --ol_mo_border:        #DFE2E5;
    --ol_mo_border-strong: #CBCFD3;
    --ol_mo_text-primary:  #16181B;
    --ol_mo_text-secondary:#5B6067;
    --ol_mo_text-muted:    #8A8F95;
    --ol_mo_accent:        #059669;
    --ol_mo_accent-strong: #047857;
    --ol_mo_accent-tint:   rgba(5, 150, 105, 0.10);
    --ol_mo_danger:        #DC2626;
    --ol_mo_danger-tint:   rgba(220, 38, 38, 0.08);
    --ol_mo_warning:       #D97706;
    --ol_mo_shadow-sm:      0 0 3px rgba(16,24,32,0.08);
    --ol_mo_shadow-md:      0 0 16px rgba(16,24,32,0.10);
    --ol_mo_shadow-lg:      0 0 36px rgba(16,24,32,0.14);
}
/* ============================ END "CLASSIC" ========================== */


/* =====================================================================
   INTERFACE 2 / 2 — "MODERN" (the new alternate design, item 13.3)
   Selected via html[data-ui="modern"]; fully independent of, and fully
   compatible with, the Appearance (light/dark) toggle — dark is this
   interface's own default, [data-ui="modern"][data-theme="light"]
   below is its light override, exactly mirroring how Classic works
   above. Design intent: a deep indigo/violet-tinted dark mode instead
   of Classic's neutral near-black, a warmer violet accent instead of
   Classic's green, a larger border-radius scale for a softer/rounder
   feel, and a touch more shadow depth — distinctly fresher than
   Classic, while staying simple and carrying every structural feature
   (icons, chevrons, RTL scrollbar, tooltips, toasts) unchanged, since
   those are written generically against classes, not against colors.
   ===================================================================== */
html[data-ui="modern"] {
    /* Item 13 (Oct-2026 feedback): the user found the original Modern
       palette's saturated purple/violet scheme unappealing and asked for
       something calmer, classier and more professional. Replaced with a
       cool slate-blue scheme instead — a neutral graphite background
       (rather than a tinted one) paired with a restrained, desaturated
       blue accent — while keeping every structural difference from
       Classic (larger radii, taller header/sidebar, its own shadow
       recipe) so Modern still reads as its own distinct interface. */
    /* --- Modern dark (default) --- */
    --ol_mo_bg-primary:    #0D1117;
    --ol_mo_bg-secondary:  #161B22;
    --ol_mo_bg-tertiary:   #1C2330;
    --ol_mo_bg-hover:      #242C3A;
    --ol_mo_border:        #2A3342;
    --ol_mo_border-strong: #3A4556;
    --ol_mo_text-primary:  #E6EAF0;
    --ol_mo_text-secondary:#94A3B8;
    --ol_mo_text-muted:    #64748B;
    --ol_mo_accent:        #3B82F6;
    --ol_mo_accent-strong: #2563EB;
    --ol_mo_accent-tint:   rgba(59, 130, 246, 0.14);
    --ol_mo_accent-contrast-text: #ffffff;
    --ol_mo_danger:        #FB7185;
    --ol_mo_danger-tint:   rgba(251, 113, 133, 0.14);
    --ol_mo_warning:       #FBBF24;
    --ol_mo_shadow-sm:      0 0 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(59,130,246,0.10);
    --ol_mo_shadow-md:      0 0 30px rgba(29,78,216,0.26), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(59,130,246,0.13);
    --ol_mo_shadow-lg:      0 0 64px rgba(29,78,216,0.32), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(59,130,246,0.16);
    --ol_mo_radius-sm: 10px;
    --ol_mo_radius-md: 16px;
    --ol_mo_radius-lg: 24px;
    --ol_mo_sidebar-w: 222px;
    --ol_mo_sidebar-w-collapsed: 68px;
    --ol_mo_header-h: 68px;
    --ol_mo_navbar-h: 46px;
    --ol_mo_font-display: 'Manrope', sans-serif;
    --ol_mo_font-body: 'Inter', sans-serif;
    --ol_mo_font-mono: 'IBM Plex Mono', monospace;
    --ol_mo_ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ol_mo_duration: 0.4s;
    --ol_mo_duration-slow: 0.55s;
}

html[data-ui="modern"][data-theme="light"] {
    /* --- Modern light --- */
    --ol_mo_bg-primary:    #F4F6F9;
    --ol_mo_bg-secondary:  #FFFFFF;
    --ol_mo_bg-tertiary:   #EAEEF3;
    --ol_mo_bg-hover:      #E1E7EF;
    --ol_mo_border:        #DDE3EA;
    --ol_mo_border-strong: #C6CFDA;
    --ol_mo_text-primary:  #111827;
    --ol_mo_text-secondary:#4B5768;
    --ol_mo_text-muted:    #8591A3;
    --ol_mo_accent:        #2563EB;
    --ol_mo_accent-strong: #1D4ED8;
    --ol_mo_accent-tint:   rgba(37, 99, 235, 0.10);
    --ol_mo_accent-contrast-text: #ffffff;
    --ol_mo_danger:        #E11D48;
    --ol_mo_danger-tint:   rgba(225, 29, 72, 0.08);
    --ol_mo_warning:       #D97706;
    --ol_mo_shadow-sm:      0 0 3px rgba(29,78,216,0.08);
    --ol_mo_shadow-md:      0 0 20px rgba(29,78,216,0.10);
    --ol_mo_shadow-lg:      0 0 44px rgba(29,78,216,0.14);
}
/* ============================= END "MODERN" VARIABLES ========================= */


/* --- Reset & base --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--ol_mo_bg-primary);
    color: var(--ol_mo_text-primary);
    font-family: var(--ol_mo_font-body);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s var(--ol_mo_ease), color 0.25s var(--ol_mo_ease);
}
h1, h2, h3, h4 { font-family: var(--ol_mo_font-display); font-weight: 700; margin: 0 0 0.5em; letter-spacing: -0.01em; }
a { color: var(--ol_mo_accent); text-decoration: none; }
/* Default size for every icon rendered via Icon::render()/icon() —
   without this, browsers fall back to a large intrinsic SVG size. */
svg.ol_mo_icon { width: 18px; height: 18px; flex-shrink: 0; }
.ol_mo_mono, code, .ol_mo_data-code, .ol_mo_data-amount, .ol_mo_data-date {
    font-family: var(--ol_mo_font-mono);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 2px solid var(--ol_mo_accent); outline-offset: 2px; }

/* --- RTL/LTR-aware scrollbar (item 13.2, flagged "HAAAM"): the page's
   `dir` attribute on <html> is an HTML-level hint, but the viewport
   scrollbar's physical side is actually decided by the CSS `direction`
   PROPERTY of the root box, which some engines do not auto-derive from
   the attribute for the main viewport scrollbar. Setting it explicitly
   here guarantees the scrollbar sits on the right for LTR (English) and
   flips to the left for RTL (Arabic), matching each language's own
   reading direction, everywhere in the app — not just inside individual
   scrollable panels. */
html[dir="ltr"] { direction: ltr; }
html[dir="rtl"] { direction: rtl; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =====================================================================
   Auth page (login)
   ===================================================================== */
.ol_mo_auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--ol_mo_bg-primary);
    background-image: radial-gradient(circle at 20% 20%, var(--ol_mo_accent-tint), transparent 40%);
}
.ol_mo_login-form {
    width: 340px; background: var(--ol_mo_bg-secondary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-lg);
    padding: 40px 32px; box-shadow: var(--ol_mo_shadow-lg);
    animation: ol_mo_fadeUp 0.5s var(--ol_mo_ease);
}
.ol_mo_login-form h1 {
    font-size: 22px; margin-bottom: 28px; display: flex; align-items: center; gap: 8px;
}
.ol_mo_login-form h1::before {
    content: ''; width: 10px; height: 10px; border-radius: 3px;
    background: var(--ol_mo_accent); box-shadow: 0 0 12px var(--ol_mo_accent);
}
.ol_mo_login-form label { display: block; font-size: 12px; color: var(--ol_mo_text-secondary); margin: 16px 0 6px; }
.ol_mo_login-form input {
    width: 100%; padding: 10px 12px; background: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm);
    color: var(--ol_mo_text-primary); font-size: 14px; transition: border-color 0.2s var(--ol_mo_ease);
}
.ol_mo_login-form input:focus { border-color: var(--ol_mo_accent); }
.ol_mo_login-form button {
    width: 100%; margin-top: 24px; padding: 11px; border: none;
    border-radius: var(--ol_mo_radius-sm); background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text);
    font-weight: 600; cursor: pointer; transition: background 0.2s var(--ol_mo_ease), transform 0.15s var(--ol_mo_ease);
}
.ol_mo_login-form button:hover { background: var(--ol_mo_accent-strong); transform: translateY(-1px); }
.ol_mo_alert { padding: 10px 12px; border-radius: var(--ol_mo_radius-sm); font-size: 13px; margin-top: 8px; }
.ol_mo_alert-error { background: var(--ol_mo_danger-tint); color: var(--ol_mo_danger); border: 1px solid var(--ol_mo_danger); }

@keyframes ol_mo_fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }

/* =====================================================================
   App shell: header + sidebar + navbar + main + footer
   ===================================================================== */
/* Oct-2026 feedback #2 (reiterated more than once — "HAAAM"/scrollbar
   rebuild): before this, the shell used `min-height: 100vh`, which means
   the GRID ITSELF never defines the scrolling box — once its content
   outgrows the viewport, the document (<html>/<body>) is left to scroll
   it, and which element the browser treats as "the" scrolling box in
   that situation is exactly the kind of ambiguous, browser/engine-
   dependent case where a `direction: rtl` rule on <html> can fail to
   flip the native scrollbar reliably in practice, even though it's
   textbook-correct CSS. Fix: .ol_mo_app-shell itself is now a fixed-height
   (100vh), explicitly `overflow-y: auto` scrolling box — the ONE and
   only scrolling element on every dashboard page, exactly like .mohamed_okasha_sidebar
   already correctly does for its own internal scroll. Its `direction`
   is inherited straight from `html[dir]` below, so its own native
   scrollbar is governed by a plain, unambiguous CSS rule on a real
   overflow:auto box, not by document-level scroll-propagation quirks.
   (.ol_mo_back-to-top's scroll listener was updated in app.js to match —
   it now watches/scrolls .ol_mo_app-shell instead of `window`.) */
.ol_mo_app-shell {
    display: grid;
    grid-template-columns: var(--ol_mo_sidebar-w) 1fr;
    grid-template-rows: var(--ol_mo_header-h) var(--ol_mo_navbar-h) 1fr auto;
    grid-template-areas:
        "sidebar header"
        "sidebar navbar"
        "sidebar main"
        "sidebar footer";
    height: 100vh;
    overflow-y: auto;
    transition: grid-template-columns var(--ol_mo_duration-slow) var(--ol_mo_ease);
}
.ol_mo_app-shell.ol_mo_collapsed { grid-template-columns: var(--ol_mo_sidebar-w-collapsed) 1fr; }

/* --- Header --- */
.ol_mo_main-header {
    grid-area: header;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; background: var(--ol_mo_bg-secondary); border-bottom: 1px solid var(--ol_mo_border);
    position: sticky; top: 0; z-index: 20;
}
.ol_mo_main-header .ol_mo_brand { font-family: var(--ol_mo_font-display); font-weight: 800; font-size: 16px; display:flex; align-items:center; gap:8px; }
.ol_mo_header-actions { display: flex; align-items: center; gap: 14px; }
.ol_mo_icon-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--ol_mo_radius-sm);
    color: var(--ol_mo_text-secondary); cursor: pointer; transition: all 0.2s var(--ol_mo_ease);
}
.ol_mo_icon-btn:hover { background: var(--ol_mo_bg-hover); color: var(--ol_mo_text-primary); border-color: var(--ol_mo_border); }
.ol_mo_icon-btn svg { width: 18px; height: 18px; }

/* --- Language switch pills --- */
.ol_mo_lang-switch { display: flex; background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm); padding: 2px; }
.ol_mo_lang-pill {
    padding: 5px 10px; border: none; background: transparent; border-radius: 5px;
    color: var(--ol_mo_text-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
    cursor: pointer; transition: all 0.18s var(--ol_mo_ease); font-family: var(--ol_mo_font-mono);
}
.ol_mo_lang-pill:hover { color: var(--ol_mo_text-primary); }
.ol_mo_lang-pill.ol_mo_active { background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); }

/* --- Sidebar --- */
.mohamed_okasha_sidebar {
    grid-area: sidebar;
    background: var(--ol_mo_bg-secondary); border-right: 1px solid var(--ol_mo_border);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.ol_mo_sidebar-header { height: var(--ol_mo_header-h); display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--ol_mo_border); }
.ol_mo_sidebar-nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ol_mo_sidebar-link {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-secondary);
    font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative;
    transition: background 0.18s var(--ol_mo_ease), color 0.18s var(--ol_mo_ease);
    white-space: nowrap; overflow: hidden;
}
.ol_mo_sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.ol_mo_sidebar-link:hover { background: var(--ol_mo_bg-hover); color: var(--ol_mo_text-primary); }
.ol_mo_sidebar-link.ol_mo_active { background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); }
.ol_mo_sidebar-link.ol_mo_active::before {
    content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    background: var(--ol_mo_accent); border-radius: 0 3px 3px 0;
}
.ol_mo_app-shell.ol_mo_collapsed .ol_mo_sidebar-link span,
.ol_mo_app-shell.ol_mo_collapsed .ol_mo_sidebar-header .ol_mo_brand-text { display: none; }
.ol_mo_app-shell.ol_mo_collapsed .mohamed_okasha_sidebar { width: var(--ol_mo_sidebar-w-collapsed); }

/* --- Secondary navbar --- */
.mohamed_okasha_sub-navbar {
    grid-area: navbar; display: flex; align-items: center; gap: 4px;
    padding: 0 24px; background: var(--ol_mo_bg-primary); border-bottom: 1px solid var(--ol_mo_border);
    overflow-x: auto;
}
.mohamed_okasha_sub-navbar a {
    padding: 10px 12px; font-size: 13px; color: var(--ol_mo_text-secondary);
    border-bottom: 2px solid transparent; transition: color 0.2s var(--ol_mo_ease), border-color 0.2s var(--ol_mo_ease);
}
.mohamed_okasha_sub-navbar a:hover, .mohamed_okasha_sub-navbar a.ol_mo_active { color: var(--ol_mo_text-primary); border-color: var(--ol_mo_accent); }

/* --- Main content --- */
.ol_mo_main-content { grid-area: main; padding: 28px; }
.ol_mo_page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mohamed_okasha_reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ol_mo_ease), transform 0.5s var(--ol_mo_ease); }
.mohamed_okasha_reveal.ol_mo_in-view { opacity: 1; transform: translateY(0); }

/* --- Cards, tables, buttons (shared components) --- */
.ol_mo_card {
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-md); box-shadow: var(--ol_mo_shadow-sm); padding: 20px;
    transition: transform var(--ol_mo_duration) var(--ol_mo_ease), box-shadow var(--ol_mo_duration) var(--ol_mo_ease), border-color var(--ol_mo_duration) var(--ol_mo_ease);
}
.ol_mo_card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ol_mo_shadow-lg);
    border-color: var(--ol_mo_border-strong);
}
.ol_mo_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 14px;
    border-radius: var(--ol_mo_radius-sm); border: 1px solid var(--ol_mo_border); line-height: 1.35;
    background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-primary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.18s var(--ol_mo_ease);
}
.ol_mo_btn:hover { border-color: var(--ol_mo_border-strong); background: var(--ol_mo_bg-hover); }
.ol_mo_btn-primary { background: var(--ol_mo_accent); border-color: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); font-weight: 600; }
.ol_mo_btn-primary:hover { background: var(--ol_mo_accent-strong); box-shadow: var(--ol_mo_shadow-sm); }

/* --- Header global search (item 9, Oct-2026 feedback): the box used to
   be purely decorative; it now opens a results dropdown fed by
   App\Modules\Search\SearchController, which is itself permission- and
   branch-scoped, so results never exceed what the viewer could already
   reach by browsing each module. --- */
.ol_mo_global-search-wrap { position: relative; width: 280px; }
.ol_mo_global-search-icon {
    position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ol_mo_text-muted); display: flex; pointer-events: none;
}
.ol_mo_global-search-icon .ol_mo_icon { width: 16px; height: 16px; }
.ol_mo_global-search-input {
    width: 100%; padding: 8px 10px 8px 34px; background: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-primary); font-size: 13px;
}
[dir="rtl"] .ol_mo_global-search-input { padding: 8px 34px 8px 10px; }
.ol_mo_global-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 400px; overflow-y: auto;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border-strong); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-lg); z-index: 60; display: none;
}
.ol_mo_global-search-results.ol_mo_open { display: block; }
.ol_mo_global-search-group-label {
    padding: 8px 12px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ol_mo_text-muted);
}
.ol_mo_global-search-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; text-decoration: none; color: inherit;
}
.ol_mo_global-search-item:hover, .ol_mo_global-search-item.ol_mo_active { background: var(--ol_mo_bg-hover); }
.ol_mo_global-search-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ol_mo_accent); flex-shrink: 0; }
.ol_mo_global-search-item-text { display: flex; flex-direction: column; min-width: 0; }
.ol_mo_global-search-item-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol_mo_global-search-item-sub { font-size: 11px; color: var(--ol_mo_text-muted); font-family: var(--ol_mo_font-mono); }
.ol_mo_global-search-empty, .ol_mo_global-search-hint { padding: 16px 12px; text-align: center; color: var(--ol_mo_text-muted); font-size: 12.5px; }

/* --- Table-row action icon buttons + tooltip (item 12, item 8's "eye
   icon" ask): ONE consistent icon-only button style used for every
   view/edit/delete/etc action across every module's table, replacing
   the previous inconsistent mix of icon-only and plain-text buttons.
   The tooltip is pure CSS (no JS positioning needed — these buttons
   never sit near a viewport edge the way the collapsed sidebar does),
   driven off a `data-tooltip` attribute; see icon_btn() in helpers.php
   for the PHP side that builds this consistently everywhere. */
.ol_mo_icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: var(--ol_mo_radius-sm);
    border: 1px solid var(--ol_mo_border); background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-secondary);
    cursor: pointer; transition: all 0.18s var(--ol_mo_ease); position: relative;
}
.ol_mo_icon-btn .ol_mo_icon { width: 16px; height: 16px; }
.ol_mo_icon-btn:hover { border-color: var(--ol_mo_accent); color: var(--ol_mo_accent); background: var(--ol_mo_accent-tint); }
.ol_mo_icon-btn-danger:hover { border-color: var(--ol_mo_danger); color: var(--ol_mo_danger); background: var(--ol_mo_danger-tint); }
/* UI punch-list item 7: icon column alignment. Without an explicit
   justify-content, this flex row just sat at its natural content width,
   so a row with 2 action buttons (e.g. a cancelled order, which hides
   edit/delete) lined its icons up differently than a row with 3 —
   ragged left edges down the whole actions column. Pinning it to the
   end of its cell keeps every row's icons flush to the same edge
   regardless of how many buttons that row happens to have. */
.ol_mo_row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; width: 100%; }
/* ROOT CAUSE of the "uneven table lines under the rows" bug (Oct-2026):
   every module puts this class directly ON the <td>. `display:flex` on a
   <td> pulls it OUT of table-cell layout — it stops sharing the row's
   height, so its own border-bottom was drawn at its own content height,
   a few px off from the other cells' borders (measured 10-46px drift on
   a live render). A <td> must stay display:table-cell; the buttons are
   laid out inline inside it instead of via flex. */
td.ol_mo_row-actions { display: table-cell; width: auto; text-align: end; white-space: nowrap; vertical-align: middle; }
td.ol_mo_row-actions > .ol_mo_icon-btn { display: inline-flex; vertical-align: middle; }
td.ol_mo_row-actions > .ol_mo_icon-btn + .ol_mo_icon-btn { margin-inline-start: 8px; }
/* text buttons inside table cells: compact, never taller than the icon buttons beside them */
.ol_mo_data-table .ol_mo_btn { padding: 4px 10px; font-size: 12.5px; min-height: 30px; box-sizing: border-box; }

/* tooltip bubble, shown above the button on hover/keyboard-focus */
/* Tooltips are now rendered by ui-controls.js (one floating, viewport-clamped
   bubble) — the old ::after bubble was clipped by the frame of the page. */

/* Item 8 (Oct-2026 feedback) root cause: `overflow: hidden` here was only
   meant to clip the table's own square corners to its border-radius, but
   it also clips ANY absolutely-positioned content that pops outside the
   table's box — including the CSS-only tooltip (.ol_mo_icon-btn[data-tooltip]
   ::after) opening ABOVE a button in the table's first row, which is
   exactly why tooltips on table icons were being cut off/hidden. Logical
   (RTL-aware) corner-radius properties on just the 4 physical corner
   cells give the same rounded-corner look WITHOUT clipping overflow. */
.ol_mo_data-table { width: 100%; border-collapse: collapse; background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-md); }
.ol_mo_data-table thead tr:first-child th:first-child { border-start-start-radius: var(--ol_mo_radius-md); }
.ol_mo_data-table thead tr:first-child th:last-child { border-start-end-radius: var(--ol_mo_radius-md); }
.ol_mo_data-table tbody tr:last-child td:first-child { border-end-start-radius: var(--ol_mo_radius-md); }
.ol_mo_data-table tbody tr:last-child td:last-child { border-end-end-radius: var(--ol_mo_radius-md); }
.ol_mo_data-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ol_mo_text-muted); padding: 12px 16px; background: var(--ol_mo_bg-tertiary); border-bottom: 1px solid var(--ol_mo_border);
}
/* Item 14 (Oct-2026 feedback): the icon-buttons column's content (32px
   tall buttons in a flex row) is visually "heavier" than a plain text
   cell, and without an explicit vertical-align the default top-alignment
   made that column's content sit slightly differently than its row's
   text cells, reading as if its bottom border-line didn't line up with
   the rest of the row. Middle-aligning every cell keeps every column's
   content (and therefore every column's border-bottom) visually level. */
.ol_mo_data-table td { padding: 13px 16px; border-bottom: 1px solid var(--ol_mo_border); font-size: 13.5px; vertical-align: middle; }
.ol_mo_data-table tr:last-child td { border-bottom: none; }
.ol_mo_data-table tr:hover td { background: var(--ol_mo_bg-tertiary); }

/* UI punch-list item 16: search + pagination toolbar injected by
   table-enhance.js above every eligible .ol_mo_data-table. */
.ol_mo_table-enhance-wrap { width: 100%; }
/* Search box + per-page select + Search button form ONE visually grouped
   control row (packed together at the start edge, same 36px height),
   instead of being spread to opposite ends of the page. */
.ol_mo_table-toolbar {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.ol_mo_table-search {
    display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-sm); padding: 0 12px; flex: 0 1 300px; min-width: 160px;
    transition: border-color .18s var(--ol_mo_ease), box-shadow .18s var(--ol_mo_ease);
}
.ol_mo_table-search:hover { border-color: var(--ol_mo_border-strong); }
/* Clear focus state: accent border + soft glow ring + accent icon. */
.ol_mo_table-search:focus-within {
    border-color: var(--ol_mo_accent); box-shadow: 0 0 0 3px var(--ol_mo_accent-tint);
}
.ol_mo_table-search .ol_mo_icon { width: 16px; height: 16px; color: var(--ol_mo_text-muted); flex-shrink: 0; transition: color .18s var(--ol_mo_ease); }
.ol_mo_table-search:focus-within .ol_mo_icon { color: var(--ol_mo_accent); }
.ol_mo_table-search-input {
    border: none; background: transparent; outline: none; width: 100%;
    font-size: 13px; color: var(--ol_mo_text-primary); font-family: inherit;
}
.ol_mo_table-toolbar .ol_mo_ui-select { width: auto; min-width: 112px; }
.ol_mo_table-toolbar .ol_mo_ui-select-btn, .ol_mo_table-toolbar select { height: 36px; padding-block: 0; }
.ol_mo_table-search-btn { height: 36px; padding: 0 16px; }
.ol_mo_table-row-count { font-size: 12px; color: var(--ol_mo_text-muted); white-space: nowrap; }
/* Pager bar = the table's own footer: same frame, flush under the last
   row (the table's bottom corners are squared when one follows it), row
   count at the start edge and page buttons at the end edge. */
.ol_mo_table-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; flex-wrap: wrap;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-top: none;
    border-radius: 0 0 var(--ol_mo_radius-md) var(--ol_mo_radius-md);
}
.ol_mo_table-pager-pages { display: flex; align-items: center; gap: 4px; }
.ol_mo_data-table:has(+ .ol_mo_table-pagination) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ol_mo_data-table:has(+ .ol_mo_table-pagination) tbody tr:last-child td { border-bottom: none; }
.ol_mo_data-table:has(+ .ol_mo_table-pagination) tbody tr:last-child td:first-child,
.ol_mo_data-table:has(+ .ol_mo_table-pagination) tbody tr:last-child td:last-child { border-end-start-radius: 0; border-end-end-radius: 0; }
/* Prev/next arrows must point OUTWARD (prev toward the start edge, next toward the end edge) in every
   direction. The ‹ › characters are "bidi-mirrored": a browser silently flips them inside RTL text,
   which combined with a manual rotation made them cancel out (arrows pointed inward in Arabic).
   So: pin the glyph to LTR (never auto-mirrored) and rotate it 180deg in RTL, where the order of the
   buttons is reversed — a single, predictable flip. */
.ol_mo_table-pager-nav { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ol_mo_table-pager-nav { rotate: 180deg; }
.ol_mo_table-pager-btn {
    min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--ol_mo_border);
    background: var(--ol_mo_bg-secondary); color: var(--ol_mo_text-secondary); border-radius: var(--ol_mo_radius-sm);
    font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s var(--ol_mo_ease);
    /* .ol_mo_table-pager-btn is also used as a real <a href> by table_pager()
       (server-side pagination, item 16) alongside the JS-button version
       above (client-side pagination), so it needs link resets too. */
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    /* Root cause of "looks like a plain default browser button" on the
       modules still using the client-side JS pager (table-enhance.js
       builds real <button> elements): a <button> is a native form
       control, and every border/background/radius above was being
       painted UNDERNEATH the browser/OS's own native button chrome
       (very visible on Linux/GTK themes) because nothing had ever told
       the browser to stop drawing that native widget. <a>-based pager
       buttons never had this problem since links aren't form controls.
       font-family also needs an explicit reset — browsers default
       <button> to the OS UI font instead of inheriting the page's own. */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font-family: inherit; margin: 0;
}
.ol_mo_table-pager-btn:hover:not(:disabled):not(.ol_mo_disabled) {
    background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); border-color: var(--ol_mo_accent);
    transform: translateY(-1px);
}
.ol_mo_table-pager-btn.ol_mo_active {
    background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); border-color: var(--ol_mo_accent);
    box-shadow: var(--ol_mo_shadow-sm);
}
.ol_mo_table-pager-btn.ol_mo_table-pager-nav { font-size: 15px; }
.ol_mo_table-pager-btn:disabled, .ol_mo_table-pager-btn.ol_mo_disabled { opacity: .35; cursor: default; pointer-events: none; transform: none; }
.ol_mo_table-pager-pages span { color: var(--ol_mo_text-muted); font-size: 12.5px; padding: 0 2px; }

/* --- Status badges (reused across Orders, Projects, Shipping...) --- */
.ol_mo_badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: capitalize;
}
.ol_mo_badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ol_mo_badge-new       { background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); }
.ol_mo_badge-preparing,
.ol_mo_badge-pending_supplier { background: rgba(251,191,36,0.12); color: var(--ol_mo_warning); }
.ol_mo_badge-reserved  { background: rgba(59,130,246,0.12); color: #60A5FA; }
.ol_mo_badge-converted,
.ol_mo_badge-active,
.ol_mo_badge-completed { background: rgba(59,130,246,0.12); color: #60A5FA; }
.ol_mo_badge-cancelled { background: var(--ol_mo_danger-tint); color: var(--ol_mo_danger); }
.ol_mo_badge-in_transit { background: rgba(251,191,36,0.12); color: var(--ol_mo_warning); }
.ol_mo_badge-arrived,
.ol_mo_badge-cleared   { background: rgba(59,130,246,0.12); color: #60A5FA; }
.ol_mo_badge-delivered { background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); }

/* --- Generic form fields (used inside dynamic modals) --- */
.ol_mo_field-group { margin-bottom: 14px; }
.ol_mo_field-group label {
    display: block; font-size: 12px; color: var(--ol_mo_text-secondary); margin-bottom: 6px;
}
.ol_mo_field-group label .okasha_lines_required { color: var(--ol_mo_danger); margin-left: 3px; }
/* NOTE (root cause of the "duplicated/tiled arrow" select bug reported
   Oct-2026): this MUST stay `background-color`, never the `background`
   SHORTHAND. `.ol_mo_field-group select` has higher specificity than the bare
   `select { background-repeat: no-repeat; background-size: 11px 11px; }`
   chevron rule further down, so a shorthand `background: ...` here wins
   regardless of source order and silently resets background-repeat back
   to its default (`repeat`) and background-size back to `auto` — which
   is exactly what tiled the chevron SVG across the whole control inside
   every modal field. Same reasoning applies everywhere else in this file
   that paints a background on a <select> (.ol_mo_repeater-row select,
   .ol_mo_entity-profile-period-filter/.ol_mo_analytics-toolbar select) — always
   `background-color`, never bare `background`, on anything that can be
   a <select>. */
.ol_mo_field-group input, .ol_mo_field-group select, .ol_mo_field-group textarea {
    width: 100%; padding: 9px 11px; background-color: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm);
    color: var(--ol_mo_text-primary); font-size: 13.5px; font-family: var(--ol_mo_font-body);
    transition: border-color 0.2s var(--ol_mo_ease);
}
.ol_mo_field-group textarea { resize: vertical; min-height: 70px; }
.ol_mo_field-group input:focus, .ol_mo_field-group select:focus, .ol_mo_field-group textarea:focus { border-color: var(--ol_mo_accent); outline: none; }
.ol_mo_field-group.ol_mo_has-error input, .ol_mo_field-group.ol_mo_has-error select { border-color: var(--ol_mo_danger); }
.ol_mo_field-error { color: var(--ol_mo_danger); font-size: 11.5px; margin-top: 4px; }

/* UI punch-list item 13: password show/hide toggle */
.ol_mo_password-field-wrap { position: relative; }
.ol_mo_password-field-wrap input { padding-inline-end: 38px !important; }
.ol_mo_password-toggle-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    inset-inline-end: 8px; background: none; border: none; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ol_mo_text-muted); cursor: pointer; border-radius: 4px;
}
.ol_mo_password-toggle-btn:hover { color: var(--ol_mo_text-primary); background: var(--ol_mo_bg-secondary); }
.ol_mo_password-toggle-btn .ol_mo_icon { width: 17px; height: 17px; }

/* Item 10 (Oct-2026 feedback): inside the (now-wider) generic form
   modal, every field's label sits on the SAME line as its input rather
   than stacked above it — a label column + an input column. Scoped to
   #ol_mo_form-modal-fields only, so compact one-off modals elsewhere (which
   were never part of this complaint) keep their original stacked look.
   Falls back to the stacked layout below ~560px (narrow modal / small
   screen) where a label column would squeeze the input unreadably. */
#ol_mo_form-modal-fields .ol_mo_field-group {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
    align-items: center;
}
#ol_mo_form-modal-fields .ol_mo_field-group label { margin-bottom: 0; padding-top: 0; }
#ol_mo_form-modal-fields .ol_mo_field-group .ol_mo_field-error { grid-column: 2 / 3; margin-top: 0; }
/* Textarea/repeater/checkbox-dropdown fields are tall — top-align the
   label with the first line instead of vertically centering it. */
#ol_mo_form-modal-fields .ol_mo_field-group:has(textarea) label,
#ol_mo_form-modal-fields .ol_mo_field-group:has(.ol_mo_repeater-field) label,
#ol_mo_form-modal-fields .ol_mo_field-group:has(.ol_mo_checkbox-dropdown) label {
    align-self: start; padding-top: 9px;
}
#ol_mo_form-modal-fields .ol_mo_field-group-checkbox { grid-template-columns: minmax(0, 1fr); }
/* ROOT CAUSE of the "x / remove button sticks out of the modal" bug
   (order form, project form after picking an order, product form):
   (1) the grid's 2nd column was a bare `1fr`, which is minmax(AUTO, 1fr)
   — a grid item can never shrink below its min-content width, so a wide
   child (a row of 3-4 selects) pushed the column, and the row's last
   element (the remove button), past the modal's edge; (2) a repeater
   needs the full modal width, not the right-hand "input" column beside a
   170px label. Fixes: minmax(0,1fr) everywhere + repeaters stack their
   label ABOVE the rows (full width). */
#ol_mo_form-modal-fields .ol_mo_field-group.ol_mo_repeater-field { grid-template-columns: minmax(0, 1fr); }
#ol_mo_form-modal-fields .ol_mo_field-group.ol_mo_repeater-field label { align-self: auto; padding-top: 0; margin-bottom: 4px; }
#ol_mo_form-modal-fields .ol_mo_field-group.ol_mo_repeater-field .ol_mo_field-error { grid-column: 1; }
#ol_mo_form-modal-fields .ol_mo_field-group > * { min-width: 0; }
@media (max-width: 560px) {
    #ol_mo_form-modal-fields .ol_mo_field-group { grid-template-columns: 1fr; }
    #ol_mo_form-modal-fields .ol_mo_field-group label { margin-bottom: 6px; }
    #ol_mo_form-modal-fields .ol_mo_field-group .ol_mo_field-error { grid-column: 1; }
}

/* --- Interactive select chevron (item 3 of the Oct-2026 feedback batch):
   the header user-menu already has a rotating .ol_mo_dropdown-caret for its
   custom-built dropdown, but <select> elements (used throughout every
   form/modal, and in plain filter bars outside modals too) are NATIVE
   browser controls and can't host an injected SVG + JS rotation the
   same way. We get the same "interactive, RTL-aware chevron" feel with
   a pure-CSS swap: appearance:none removes the native arrow, a themed
   chevron is painted as a background-image on the correct side for the
   active text direction, and a second, upward-pointing chevron swaps in
   on :focus (the closest CSS-only signal we have for "open") — giving
   every select in the system, inside or outside a modal, the same
   closed/open chevron behavior as the header menu, with zero markup
   changes required per-field. This rule is intentionally GLOBAL (not
   scoped to .ol_mo_field-group) so it also covers plain filter/search
   selects elsewhere in the app. */
/* Item 6 (Oct-2026 feedback) rewritten entirely:
   1. The old rule set `select, [dir="ltr"] select { ...padding-right:32px }`
      — that bare, unconditioned `select` selector applied LTR's padding
      to EVERY select regardless of direction, and the later
      `[dir="rtl"] select` rule only added padding-left without ever
      clearing that leftover padding-right. Under RTL, a select ended up
      padded on BOTH sides at once, which is what read as "the arrow
      looks duplicated / like more than one arrow, covering the label" —
      there was only ever one arrow, but the extra uncleared padding
      shifted and cramped the visible text against it. Now LTR/RTL each
      set BOTH paddings explicitly, so nothing is left over from the
      other direction.
   2. The arrow now follows the exact same "outward at rest, down once
      open" convention as the header's .ol_mo_dropdown-caret: pointing to the
      end of the reading direction (right in LTR, left in RTL) while
      closed, and swapping to a down chevron on :focus (the closest
      CSS-only signal to "open" a native <select> offers). */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-repeat: no-repeat; background-size: 11px 11px;
    cursor: pointer;
}
[dir="ltr"] select { background-position: right 11px center; padding-right: 32px; padding-left: 11px; }
[dir="rtl"] select { background-position: left 11px center; padding-left: 32px; padding-right: 11px; }

/* dark theme chevrons (currentColor isn't usable inside url(), so the
   stroke color is hard-coded to match --ol_mo_text-secondary of each theme).
   Rest state points outward (end of reading direction); :focus always
   points down, overriding the rest-state image via !important so the
   direction rule above doesn't win on specificity. */
[dir="ltr"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
}
[dir="rtl"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'%3E%3C/polyline%3E%3C/svg%3E");
}
select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
/* light theme chevrons */
[data-theme="light"][dir="ltr"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235B6067' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"][dir="rtl"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235B6067' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"] select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* --- Repeater rows (multi-item forms: order/project items) --- */
.ol_mo_repeater-field { margin-bottom: 16px; }
.ol_mo_repeater-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ol_mo_repeater-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ol_mo_repeater-row > * { min-width: 0; }
/* Category cascade (main > sub > sub-sub): equal shrinkable columns. */
.ol_mo_cascade-row { display: flex; gap: 8px; min-width: 0; }
.ol_mo_cascade-row > * { flex: 1 1 0; min-width: 0; }
.ol_mo_repeater-row input, .ol_mo_repeater-row select {
    flex: 1; min-width: 0; padding: 7px 9px; background-color: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm);
    color: var(--ol_mo_text-primary); font-size: 12.5px; font-family: var(--ol_mo_font-body);
}
.ol_mo_repeater-row input:focus, .ol_mo_repeater-row select:focus { border-color: var(--ol_mo_accent); outline: none; }
.ol_mo_repeater-remove {
    flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ol_mo_border);
    background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-muted); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s var(--ol_mo_ease);
}
.ol_mo_repeater-remove:hover { background: var(--ol_mo_danger-tint); color: var(--ol_mo_danger); border-color: var(--ol_mo_danger); }

/* --- Generic dropdown (language switcher, profile menu, ...) --- */
.ol_mo_dropdown { position: relative; }
.ol_mo_dropdown-menu {
    /* UI punch-list item 1: dropdown contrast. This panel used to share
       --ol_mo_bg-secondary with .ol_mo_main-header behind it, so in light mode (both
       pure white) it had zero background-color separation from the bar
       it opens from — only a faint border + subtle shadow told them
       apart. --ol_mo_bg-tertiary + the stronger border fixes that in both
       themes without needing a whole new color. */
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px;
    background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border-strong); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-md); padding: 6px; z-index: 30;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--ol_mo_duration) var(--ol_mo_ease), transform var(--ol_mo_duration) var(--ol_mo_ease);
}
.ol_mo_dropdown.ol_mo_open .ol_mo_dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Item 2 (Oct-2026 feedback): at rest these items used --ol_mo_text-secondary
   (a deliberately dimmer tone), which under some combinations of theme +
   the menu's own --ol_mo_bg-tertiary background read as too close in
   lightness to be comfortably legible, only becoming clearly readable
   once hovered (when the color jumps to --ol_mo_text-primary). Using
   --ol_mo_text-primary from the start — same strong-contrast color the menu's
   OWN panel uses for everything else — fixes that at rest, not just on
   hover; hover still gets its own background highlight. `cursor: pointer`
   was already declared but is repeated explicitly on the anchor variant
   too (<a class="dropdown-item">), since `a` elements some browsers'
   UA stylesheets can override are otherwise left to default behavior. */
.ol_mo_dropdown-item {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
    padding: 8px 10px; border: none; background: none;
    color: var(--ol_mo_text-primary); font-size: 13px; border-radius: var(--ol_mo_radius-sm); cursor: pointer;
    transition: background 0.15s var(--ol_mo_ease), color 0.15s var(--ol_mo_ease);
}
a.ol_mo_dropdown-item { cursor: pointer; text-decoration: none; }
/* Logout entry: danger colour so it never reads as an ordinary menu action. */
.ol_mo_dropdown-item.ol_mo_dropdown-item-danger { color: var(--ol_mo_danger); }
.ol_mo_dropdown-item.ol_mo_dropdown-item-danger:hover { background: var(--ol_mo_danger-tint, var(--ol_mo_bg-hover)); color: var(--ol_mo_danger); }
.ol_mo_dropdown-item:hover { background: var(--ol_mo_bg-hover); color: var(--ol_mo_text-primary); }
.ol_mo_dropdown-item.ol_mo_active { color: var(--ol_mo_accent); font-weight: 600; }
.ol_mo_dropdown-divider { height: 1px; background: var(--ol_mo_border); margin: 6px 2px; }
.ol_mo_dropdown-section-label {
    padding: 8px 10px 3px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ol_mo_text-muted);
}
[dir="rtl"] .ol_mo_dropdown-menu { right: auto; left: 0; }
.ol_mo_dropdown-menu-wide { min-width: 360px; max-width: 420px; }
@media (max-width: 480px) { .ol_mo_dropdown-menu-wide { min-width: 280px; } }

/* --- Custom number input spin buttons (replace ugly native browser ones) --- */
.ol_mo_field-group { position: relative; }
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.ol_mo_number-spin-wrap { position: relative; display: flex; }
.ol_mo_number-spin-wrap input[type="number"] { padding-inline-end: 30px; width: 100%; }
.ol_mo_number-spin-btns {
    position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px;
    display: flex; flex-direction: column; width: 26px; border-radius: 0 var(--ol_mo_radius-sm) var(--ol_mo_radius-sm) 0;
    overflow: hidden;
}
[dir="rtl"] .ol_mo_number-spin-btns { border-radius: var(--ol_mo_radius-sm) 0 0 var(--ol_mo_radius-sm); }
.ol_mo_number-spin-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--ol_mo_bg-tertiary); border: none; border-inline-start: 1px solid var(--ol_mo_border);
    color: var(--ol_mo_text-muted); cursor: pointer; font-size: 9px; line-height: 1;
    transition: background 0.15s var(--ol_mo_ease), color 0.15s var(--ol_mo_ease);
}
.ol_mo_number-spin-btn:first-child { border-bottom: 1px solid var(--ol_mo_border); }
.ol_mo_number-spin-btn:hover { background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); }
.ol_mo_number-spin-btn:active { background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); }

/* --- Nested submenu inside a dropdown (e.g. Appearance -> Light/Dark) --- */
.ol_mo_submenu-arrow { width: 14px !important; height: 14px !important; transition: transform var(--ol_mo_duration) var(--ol_mo_ease); }
/* Item 4 (Oct-2026 feedback): this arrow used the same chevron-right icon
   as .ol_mo_dropdown-caret but, unlike it, never had a [dir]-aware base
   rotation — so it stayed pointing right even in RTL, instead of
   pointing outward (right in LTR / left in RTL) at rest and down once
   open, the exact convention .ol_mo_dropdown-caret already uses correctly. */
[dir="ltr"] .ol_mo_submenu-arrow { transform: rotate(0deg); }
[dir="rtl"] .ol_mo_submenu-arrow { transform: rotate(180deg); }
.ol_mo_submenu-trigger.ol_mo_open .ol_mo_submenu-arrow { transform: rotate(90deg) !important; color: var(--ol_mo_accent); }
.ol_mo_dropdown-submenu {
    max-height: 0; overflow: hidden; padding-left: 10px;
    transition: max-height var(--ol_mo_duration) var(--ol_mo_ease);
}
.ol_mo_dropdown-submenu.ol_mo_open { max-height: 160px; }
[dir="rtl"] .ol_mo_dropdown-submenu { padding-left: 0; padding-right: 10px; }

/* --- Profile menu specifics --- */
.ol_mo_avatar-circle {
    width: 32px; height: 32px; border-radius: 50%; background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
    font-family: var(--ol_mo_font-display); flex-shrink: 0;
}
.ol_mo_profile-header { padding: 6px 10px 10px; }
.ol_mo_profile-name { font-size: 13.5px; font-weight: 600; color: var(--ol_mo_text-primary); }
.ol_mo_profile-username { font-size: 11px; color: var(--ol_mo_text-muted); margin-top: 2px; }
.ol_mo_main-footer {
    grid-area: footer; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; font-size: 12px; color: var(--ol_mo_text-muted); border-top: 1px solid var(--ol_mo_border);
    /* Fixed to the bottom of the interface (Oct-2026 feedback #5): sticky
       inside the .ol_mo_app-shell scroll box = always visible, never pushed
       below the fold, with its own opaque surface so content scrolls under it. */
    position: sticky; bottom: 0; z-index: 15; background: var(--ol_mo_bg-secondary);
}
.ol_mo_main-footer button { background: none; border: none; color: var(--ol_mo_text-muted); cursor: pointer; text-decoration: underline; font-size: 12px; }

/* --- Modal --- */
.ol_mo_modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity var(--ol_mo_duration) var(--ol_mo_ease);
}
.ol_mo_modal-overlay.ol_mo_open { opacity: 1; pointer-events: auto; }
/* Item 5 (Oct-2026 feedback, reiterated from an earlier round): every
   modal's horizontal space increased further — the base size (used by
   small one-off modals: reset-password, extra-access, project single-
   field edits, etc.) and every named wider modal below (form-modal,
   view/quick-info-modal, permissions-modal, entity-profile history
   modal, footer info modal) all got a noticeably larger width. */
.ol_mo_modal-box {
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-lg);
    box-shadow: var(--ol_mo_shadow-lg); width: 480px; max-width: 94vw; padding: 28px; transform: scale(0.96); transition: transform var(--ol_mo_duration) var(--ol_mo_ease);
}
/* Item 10 (Oct-2026 feedback): form modals were cramped at 420px with
   every field stacked label-over-input. #form-modal (the generic
   dynamic-form engine in form-modal.js) gets a wider box so a
   label+input row has room to sit side by side instead — see the
   .ol_mo_field-group grid rule further down for the actual side-by-side
   layout, which is scoped to #form-modal so smaller one-off modals
   elsewhere keep their original compact stacked look. */
#ol_mo_form-modal-overlay .ol_mo_modal-box { width: 860px; max-width: 94vw; }
/* Safety net for every modal: nothing inside may ever stick out past the
   modal's own frame (the specific root causes are fixed at the source —
   see the repeater/grid notes below — this just guarantees it). */
.ol_mo_modal-box { box-sizing: border-box; overflow-x: clip; } /* clip (not hidden): doesn't turn overflow-y into a scroll box, so dropdown panels can still hang below */
.ol_mo_modal-box input, .ol_mo_modal-box select, .ol_mo_modal-box textarea { max-width: 100%; box-sizing: border-box; }
.ol_mo_modal-overlay.ol_mo_open .ol_mo_modal-box { transform: scale(1); }

/* =====================================================================
   Entity Profile Pages (item 8, Oct-2026 feedback)
   Shared layout used by every entity's dedicated profile page
   (Customers, Suppliers, Employees, Products, ...): a header with a
   photo-or-icon placeholder so the layout stays visually consistent
   whether or not that entity type actually has a photo, a core-data
   info grid, and a row of buttons that each open a LARGE modal with
   that entity's related history — history is deliberately never
   dumped inline on the page itself, only reachable behind a button,
   per the explicit privacy/organization requirement.
   ===================================================================== */
/* A "back" chevron that always points toward the start of reading
   direction (left in LTR, right in RTL) — used on profile pages' Back
   button, since a plain chevron-right icon would point the wrong way
   under Arabic. */
[dir="ltr"] .ol_mo_rtl-flip { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .ol_mo_rtl-flip { display: inline-block; }

.ol_mo_entity-profile-header {
    display: flex; gap: 22px; align-items: center; background: var(--ol_mo_bg-secondary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-lg); box-shadow: var(--ol_mo_shadow-sm);
    padding: 24px; margin-bottom: 20px; flex-wrap: wrap;
}
.ol_mo_entity-profile-avatar {
    width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); border: 2px solid var(--ol_mo_border);
}
.ol_mo_entity-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ol_mo_entity-profile-avatar .ol_mo_icon { width: 38px; height: 38px; }

/* UI punch-list item 8: product thumbnails. No image-upload exists for
   products yet, so each product gets a deterministic colored initial
   avatar (same id -> same color/letter every time) instead of a generic
   icon, so a products table/profile reads visually distinct row to row. */
.ol_mo_table-thumb {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff; margin-inline-end: 10px;
    vertical-align: middle;
}
.ol_mo_table-thumb-cell { display: flex; align-items: center; }
.ol_mo_entity-profile-avatar.ol_mo_product-thumb-lg { font-size: 30px; font-weight: 700; color: #fff; border: none; }
.ol_mo_entity-profile-heading h1 { font-size: 20px; margin-bottom: 4px; }
.ol_mo_entity-profile-heading .ol_mo_profile-sub { color: var(--ol_mo_text-secondary); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ol_mo_entity-profile-stats { display: flex; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
.ol_mo_entity-profile-stat {
    background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm);
    padding: 10px 16px; text-align: center; min-width: 88px;
}
.ol_mo_entity-profile-stat .ol_mo_num { font-size: 18px; font-weight: 700; font-family: var(--ol_mo_font-mono); color: var(--ol_mo_accent); }
.ol_mo_entity-profile-stat .ol_mo_label { font-size: 10.5px; color: var(--ol_mo_text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

.ol_mo_entity-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ol_mo_entity-profile-card {
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-sm); padding: 18px 20px;
}
.ol_mo_entity-profile-card h3 { font-size: 13px; color: var(--ol_mo_text-secondary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.ol_mo_entity-profile-card .ol_mo_info-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ol_mo_border); font-size: 13px; }
.ol_mo_entity-profile-card .ol_mo_info-row:last-child { border-bottom: none; }
.ol_mo_entity-profile-card .ol_mo_info-row span:first-child { color: var(--ol_mo_text-secondary); }
.ol_mo_entity-profile-card .ol_mo_info-row span:last-child { font-weight: 500; text-align: end; }

.ol_mo_entity-profile-history-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ol_mo_entity-profile-history-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-radius: var(--ol_mo_radius-sm); border: 1px solid var(--ol_mo_border); background: var(--ol_mo_bg-tertiary);
    color: var(--ol_mo_text-primary); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.18s var(--ol_mo_ease);
}
.ol_mo_entity-profile-history-btn:hover { border-color: var(--ol_mo_accent); color: var(--ol_mo_accent); background: var(--ol_mo_accent-tint); }
.ol_mo_entity-profile-history-btn .ol_mo_count-pill {
    background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); font-size: 11px; font-weight: 700;
    border-radius: 999px; padding: 1px 7px; font-family: var(--ol_mo_font-mono);
}

/* Large history modal (reuses .ol_mo_modal-overlay/.ol_mo_modal-box but wider + scrollable) */
.ol_mo_entity-profile-modal-box { width: 880px; max-width: 96vw; max-height: 82vh; display: flex; flex-direction: column; }
.ol_mo_entity-profile-modal-body { overflow-y: auto; flex: 1; margin-top: 10px; }
.ol_mo_entity-profile-period-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
/* UI punch-list item 9: period filter styling. These <select>/<input>
   elements aren't inside a .ol_mo_field-group, so they never picked up this
   app's themed input look and rendered as bare, unstyled browser
   controls — a jarring, out-of-place patch inside an otherwise fully
   themed toolbar. Same fix applies to the Analytics/Reports toolbar,
   which has the identical plain-control pattern. */
.ol_mo_entity-profile-period-filter select, .ol_mo_entity-profile-period-filter input,
.ol_mo_analytics-toolbar select, .ol_mo_analytics-toolbar input {
    width: auto; padding: 8px 11px; background-color: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm);
    color: var(--ol_mo_text-primary); font-size: 13px; font-family: var(--ol_mo_font-body);
    transition: border-color 0.2s var(--ol_mo_ease);
}
.ol_mo_entity-profile-period-filter select:focus, .ol_mo_entity-profile-period-filter input:focus,
.ol_mo_analytics-toolbar select:focus, .ol_mo_analytics-toolbar input:focus {
    border-color: var(--ol_mo_accent); outline: none;
}
.ol_mo_entity-profile-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ol_mo_entity-profile-history-table th {
    text-align: start; padding: 8px 10px; color: var(--ol_mo_text-muted); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--ol_mo_border); position: sticky; top: 0; background: var(--ol_mo_bg-secondary);
}
.ol_mo_entity-profile-history-table td { padding: 9px 10px; border-bottom: 1px solid var(--ol_mo_border); }
.ol_mo_entity-profile-empty-state { text-align: center; padding: 30px 10px; color: var(--ol_mo_text-muted); font-size: 13px; }

/* --- Back to top --- */
.ol_mo_back-to-top {
    position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); border: none; box-shadow: var(--ol_mo_shadow-md);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 0.25s var(--ol_mo_ease), transform 0.25s var(--ol_mo_ease);
    z-index: 40;
}
.ol_mo_back-to-top.ol_mo_visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* RTL support */
[dir="rtl"] .ol_mo_sidebar-link.ol_mo_active::before { left: auto; right: -12px; border-radius: 3px 0 0 3px; }
[dir="rtl"] .ol_mo_data-table th, [dir="rtl"] .ol_mo_data-table td { text-align: right; }
[dir="rtl"] .ol_mo_back-to-top { right: auto; left: 28px; }

/* --- Compact project item card --- */
.ol_mo_pi-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ol_mo_pi-title-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ol_mo_pi-title-line .ol_mo_pi-name { font-size: 14px; font-weight: 700; }
.ol_mo_pi-title-line .ol_mo_pi-breadcrumb { font-size: 11.5px; color: var(--ol_mo_text-muted); }
.ol_mo_pi-status-end { margin-inline-start: auto; }
.ol_mo_pi-supplier-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; }
.ol_mo_pi-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 10px; }
.ol_mo_pi-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.ol_mo_pi-field-label { font-size: 10.5px; color: var(--ol_mo_text-muted); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.ol_mo_pi-field-value-row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ol_mo_pi-field-value { font-size: 12.5px; font-weight: 600; font-family: var(--ol_mo_font-mono); white-space: nowrap; }
.ol_mo_pi-field-empty { color: var(--ol_mo_text-muted); font-weight: 400; }
.ol_mo_pi-field-btn { padding: 2px 6px; font-size: 10px; border-radius: 4px; flex-shrink: 0; }
.ol_mo_pi-computed { color: var(--ol_mo_accent); }

/* --- 3-column split for project item details, divided by a vertical rule --- */
.ol_mo_pi-3col {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-top: 12px; border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm); overflow: hidden;
}
.ol_mo_pi-col { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-inline-start: 1px solid var(--ol_mo_border); }
.ol_mo_pi-col:first-child { border-inline-start: none; }
.ol_mo_pi-col-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ol_mo_text-muted);
    font-weight: 700; margin-bottom: 2px;
}
/* UI punch-list item 11: locked project items collapse into a compact
   mini-card — a condensed facts strip plus a details toggle — instead of
   the full editable 3-column grid, which no longer applies once an item
   is locked (nothing in it can change). */
.ol_mo_pi-card-locked { opacity: 0.85; }
.ol_mo_pi-card-locked .ol_mo_pi-name { color: var(--ol_mo_text-secondary); }
.ol_mo_pi-locked-summary {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 8px; padding: 10px 12px; background: var(--ol_mo_bg-tertiary);
    border-radius: var(--ol_mo_radius-sm); font-size: 12px;
}
.ol_mo_pi-locked-fact { color: var(--ol_mo_text-secondary); white-space: nowrap; }
.ol_mo_pi-locked-fact strong { color: var(--ol_mo_text-primary); font-weight: 600; }
.ol_mo_pi-locked-fact-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ol_mo_accent); }
.ol_mo_pi-locked-fact-ok .ol_mo_icon { width: 13px; height: 13px; }
.ol_mo_pi-locked-toggle {
    margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11.5px;
}
.ol_mo_pi-locked-toggle .ol_mo_icon { width: 13px; height: 13px; transition: transform .15s var(--ol_mo_ease); }
.ol_mo_pi-locked-toggle.ol_mo_active .ol_mo_icon { transform: rotate(180deg); }
.ol_mo_pi-locked-details { display: none; }
.ol_mo_pi-locked-details.ol_mo_pi-locked-details-open { display: block; }

@media (max-width: 720px) {
    .ol_mo_pi-3col { grid-template-columns: 1fr; }
    .ol_mo_pi-col { border-inline-start: none; border-top: 1px solid var(--ol_mo_border); }
    .ol_mo_pi-col:first-child { border-top: none; }
}

/* =====================================================================
   Header: user identity (avatar photo or fallback icon + name)
   ===================================================================== */
/* ROOT CAUSE of the "blank pill" user menu in the header (Oct-2026): this
   is a bare <button> and .ol_mo_dropdown-trigger has no CSS of its own, so the
   browser painted its NATIVE light button background — the name is
   light-on-light, i.e. invisible. Same native-chrome family of bug as the
   pager buttons: every <button> we style must reset appearance/background/
   border/color/font explicitly. */
.ol_mo_user-trigger {
    display: flex; align-items: center; gap: 9px; border-radius: 999px;
    padding: 4px 4px 4px 10px !important; padding-inline: 4px 10px !important;
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 1px solid var(--ol_mo_border); color: var(--ol_mo_text-primary);
    font-family: inherit; cursor: pointer;
}
.ol_mo_user-trigger:hover { background: var(--ol_mo_bg-hover); }
.ol_mo_user-trigger .ol_mo_user-name { font-size: 13px; font-weight: 600; color: var(--ol_mo_text-primary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol_mo_avatar-circle { overflow: hidden; }
.ol_mo_avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ol_mo_avatar-circle svg.ol_mo_icon { width: 18px; height: 18px; }

/* Interactive caret next to the user's name: points outward at rest
   (right in LTR, left in RTL) and rotates to point down while the
   dropdown is open — direction-aware via [dir], state-aware via .ol_mo_open. */
.ol_mo_dropdown-caret {
    width: 13px !important; height: 13px !important; flex: none;
    color: var(--ol_mo_text-muted); transition: transform var(--ol_mo_duration) var(--ol_mo_ease);
}
[dir="ltr"] .ol_mo_dropdown-caret { transform: rotate(0deg); }
[dir="rtl"] .ol_mo_dropdown-caret { transform: rotate(180deg); }
.ol_mo_dropdown.ol_mo_open .ol_mo_dropdown-caret { transform: rotate(90deg) !important; color: var(--ol_mo_accent); }

/* Language code badge (En / Ar) shown before the language's own name */
.ol_mo_lang-code-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 5px; margin-inline-end: 8px;
    background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); border-radius: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}

/* =====================================================================
   Branch banner: name + inline edit pencil (stays on the same page,
   never exits branch mode or navigates away on its own)
   ===================================================================== */
.ol_mo_branch-banner-edit {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--ol_mo_accent); background: transparent; border: none; cursor: pointer;
    flex-shrink: 0;
}
.ol_mo_branch-banner-edit:hover { background: rgba(0,0,0,0.08); }
.ol_mo_branch-banner-edit svg { width: 13px; height: 13px; }

/* =====================================================================
   Sidebar tooltips (collapsed state only) — appended to <body>, fixed
   position computed in JS so they can never be clipped by the
   sidebar's own overflow, and never spill outside the viewport.
   ===================================================================== */
.ol_mo_sidebar-tooltip {
    position: fixed; z-index: 500; background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-primary);
    border: 1px solid var(--ol_mo_border-strong); border-radius: var(--ol_mo_radius-sm); padding: 6px 11px;
    font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--ol_mo_shadow-md);
    opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ol_mo_ease);
}
.ol_mo_sidebar-tooltip.ol_mo_visible { opacity: 1; }

/* =====================================================================
   Theme (Appearance) trigger icon — a half-black/half-white "contrast"
   disc instead of a plain sun, so it reads as a mode-switcher at a glance.
   ===================================================================== */
.ol_mo_theme-trigger-icon { border-radius: 50%; }
.ol_mo_theme-trigger-icon circle { fill: none; }

/* =====================================================================
   Notifications dropdown "Show all" footer link
   ===================================================================== */
.ol_mo_dropdown-footer-link {
    display: block; text-align: center; padding: 9px 10px; font-size: 12px; font-weight: 600;
    color: var(--ol_mo_accent); border-top: 1px solid var(--ol_mo_border); margin-top: 4px; cursor: pointer;
    border-radius: 0 0 var(--ol_mo_radius-md) var(--ol_mo_radius-md);
}
.ol_mo_dropdown-footer-link:hover { background: var(--ol_mo_bg-hover); }

/* =====================================================================
   Profile page
   ===================================================================== */
.ol_mo_profile-avatar-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.ol_mo_profile-avatar-lg {
    width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    object-fit: cover; background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); overflow: hidden;
}
.ol_mo_profile-avatar-fallback svg { width: 44px; height: 44px; }
.ol_mo_profile-avatar-edit {
    position: absolute; bottom: -2px; inset-inline-end: -2px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid var(--ol_mo_bg-secondary); transition: background 0.2s var(--ol_mo_ease);
}
.ol_mo_profile-avatar-edit:hover { background: var(--ol_mo_accent-strong); }
.ol_mo_profile-avatar-edit svg { width: 14px; height: 14px; }
.ol_mo_alert-success { background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); border: 1px solid var(--ol_mo_accent); }

/* =====================================================================
   Settings page
   ===================================================================== */
.ol_mo_settings-section { margin-bottom: 22px; }
.ol_mo_settings-section h3 { font-size: 14px; margin-bottom: 4px; }
.ol_mo_settings-section .mohamed_okasha_section-hint { font-size: 12px; color: var(--ol_mo_text-muted); margin-bottom: 14px; }
.ol_mo_rate-input { width: 110px; padding: 6px 8px; background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-primary); font-family: var(--ol_mo_font-mono); font-size: 12.5px; }

/* =====================================================================
   Footer "company info" modal — 3 tabs, wide layout, label:value pairs
   on a single row each.
   ===================================================================== */
#ol_mo_info-modal-overlay .ol_mo_modal-box { width: 820px; max-width: 94vw; }
.ol_mo_info-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ol_mo_border); margin-bottom: 18px; }
.ol_mo_info-tab {
    padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ol_mo_text-secondary);
    background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 7px; transition: color 0.2s var(--ol_mo_ease), border-color 0.2s var(--ol_mo_ease);
}
.ol_mo_info-tab:hover { color: var(--ol_mo_text-primary); }
.ol_mo_info-tab.ol_mo_active { color: var(--ol_mo_accent); border-color: var(--ol_mo_accent); }
.ol_mo_info-panel { display: none; }
.ol_mo_info-panel.ol_mo_active { display: block; }
.ol_mo_info-row {
    display: flex; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--ol_mo_border);
    font-size: 13px;
}
.ol_mo_info-row:last-child { border-bottom: none; }
.ol_mo_info-row .ol_mo_info-label { flex: 0 0 170px; color: var(--ol_mo_text-muted); font-size: 12px; }
.ol_mo_info-row .ol_mo_info-value { flex: 1; color: var(--ol_mo_text-primary); }
.ol_mo_info-panel-note { font-size: 12.5px; color: var(--ol_mo_text-secondary); line-height: 1.7; margin-bottom: 12px; }
@media (max-width: 640px) {
    #ol_mo_info-modal-overlay .ol_mo_modal-box { width: 100%; }
    .ol_mo_info-row { flex-direction: column; gap: 2px; }
    .ol_mo_info-row .ol_mo_info-label { flex: none; }
}

/* --- Statement final-totals tiles (NOT .ol_mo_info-row — that class pins its
   label to flex: 0 0 170px, which becomes a 170px-TALL label instead of
   a 170px-wide one the moment the row is stacked into a column, which is
   exactly the "header far from the value" bug reported in the Oct-2026
   round-2 feedback on the statement/invoice totals block). Dedicated,
   self-contained classes instead of reusing an unrelated component. --- */
.ol_mo_stmt-totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.ol_mo_stmt-total-tile { display: flex; flex-direction: column; gap: 5px; }
.ol_mo_stmt-total-tile .ol_mo_stmt-total-label { font-size: 12px; color: var(--ol_mo_text-muted); line-height: 1.3; }
.ol_mo_stmt-total-tile .ol_mo_stmt-total-value { font-family: var(--ol_mo_font-mono); font-size: 16px; font-weight: 700; color: var(--ol_mo_text-primary); }
.ol_mo_stmt-total-tile.ol_mo_grand { grid-column: 1 / -1; padding-top: 14px; margin-top: 4px; border-top: 2px solid var(--ol_mo_border); }
.ol_mo_stmt-total-tile.ol_mo_grand .ol_mo_stmt-total-label { font-size: 13px; font-weight: 700; color: var(--ol_mo_text-secondary); }
.ol_mo_stmt-total-tile.ol_mo_grand .ol_mo_stmt-total-value { font-size: 22px; font-weight: 800; }

/* Oct-2026 feedback #3: additive tiles (.ol_mo_is-add — purchases, margin,
   office expenses: things that ADD to what the customer owes) vs
   subtractive tiles (.ol_mo_is-sub — customer payments, deposits: things that
   REDUCE it) now carry their own left accent bar (logical, so it flips
   correctly in RTL) plus a small +/- sign badge in front of the label,
   instead of being told apart only by a lone "-" buried in the value
   text. .ol_mo_is-sub reuses the existing --ol_mo_accent (already this codebase's
   "reduces balance due = good" color, same one the grand total uses). */
.ol_mo_stmt-total-tile.ol_mo_is-add,
.ol_mo_stmt-total-tile.ol_mo_is-sub {
    padding-inline-start: 12px; border-inline-start: 3px solid transparent;
}
.ol_mo_stmt-total-tile.ol_mo_is-add { border-inline-start-color: var(--ol_mo_border-strong, var(--ol_mo_border)); }
.ol_mo_stmt-total-tile.ol_mo_is-sub { border-inline-start-color: var(--ol_mo_accent); }
.ol_mo_stmt-total-tile .ol_mo_stmt-total-label { display: flex; align-items: center; gap: 7px; }
.ol_mo_stmt-total-tile.ol_mo_is-add .ol_mo_stmt-total-label::before,
.ol_mo_stmt-total-tile.ol_mo_is-sub .ol_mo_stmt-total-label::before {
    flex: none; width: 15px; height: 15px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; line-height: 1;
}
.ol_mo_stmt-total-tile.ol_mo_is-add .ol_mo_stmt-total-label::before {
    content: '+'; background: var(--ol_mo_bg-hover); color: var(--ol_mo_text-secondary); border: 1px solid var(--ol_mo_border);
}
.ol_mo_stmt-total-tile.ol_mo_is-sub .ol_mo_stmt-total-label::before {
    content: '\2212'; background: var(--ol_mo_accent-tint); color: var(--ol_mo_accent); border: 1px solid var(--ol_mo_accent);
}

/* =====================================================================
   Toast notifications + custom confirm dialog (replace native
   alert()/confirm() so everything matches the design system and
   respects dark/light mode + RTL/LTR automatically).
   ===================================================================== */
.ol_mo_toast-host {
    position: fixed; top: 20px; inset-inline-end: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 32px);
}
.ol_mo_toast {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-lg); font-size: 13px; color: var(--ol_mo_text-primary);
    opacity: 0; transform: translateX(var(--ol_mo_toast-offset, 24px)); transition: opacity 0.25s var(--ol_mo_ease), transform 0.25s var(--ol_mo_ease);
    border-inline-start: 3px solid var(--ol_mo_border-strong);
}
[dir="rtl"] .ol_mo_toast { --ol_mo_toast-offset: -24px; }
.ol_mo_toast.ol_mo_show { opacity: 1; transform: translateX(0); }
.ol_mo_toast-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ol_mo_toast-msg { flex: 1; line-height: 1.5; }
.ol_mo_toast-close {
    flex: none; background: none; border: none; color: var(--ol_mo_text-muted); cursor: pointer;
    font-size: 17px; line-height: 1; padding: 0 0 0 4px;
}
.ol_mo_toast-close:hover { color: var(--ol_mo_text-primary); }
.ol_mo_toast-success { border-inline-start-color: var(--ol_mo_accent); }
.ol_mo_toast-success .ol_mo_toast-icon { color: var(--ol_mo_accent); }
.ol_mo_toast-error { border-inline-start-color: var(--ol_mo_danger); }
.ol_mo_toast-error .ol_mo_toast-icon { color: var(--ol_mo_danger); }
.ol_mo_toast-warning { border-inline-start-color: var(--ol_mo_warning); }
.ol_mo_toast-warning .ol_mo_toast-icon { color: var(--ol_mo_warning); }
.ol_mo_toast-info { border-inline-start-color: var(--ol_mo_accent); }
.ol_mo_toast-info .ol_mo_toast-icon { color: var(--ol_mo_text-secondary); }

.mohamed_okasha_confirm-box { width: 360px; text-align: center; padding: 28px 24px 22px; }
.ol_mo_confirm-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    background: color-mix(in srgb, var(--ol_mo_warning) 16%, transparent);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.ol_mo_confirm-icon-wrap .ol_mo_icon { width: 26px; height: 26px; color: var(--ol_mo_warning); }
.ol_mo_confirm-message { font-size: 14px; color: var(--ol_mo_text-primary); line-height: 1.6; margin-bottom: 22px; }
.ol_mo_confirm-actions { display: flex; gap: 10px; }
.ol_mo_confirm-actions .ol_mo_btn { flex: 1; }
.ol_mo_btn-danger { background: var(--ol_mo_danger) !important; color: #fff !important; }
.ol_mo_btn-danger:hover { filter: brightness(0.92); }

/* --- Checkbox dropdown (professional closed-by-default multi-select,
   e.g. picking which project items go into a shipment) --- */
.ol_mo_checkbox-dropdown { position: relative; }
.ol_mo_checkbox-dropdown-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 9px 11px; background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-primary); font-size: 13px;
    font-family: var(--ol_mo_font-body); cursor: pointer; text-align: start;
    transition: border-color 0.15s var(--ol_mo_ease);
}
.ol_mo_checkbox-dropdown-trigger:hover { border-color: var(--ol_mo_border-strong); }
.ol_mo_checkbox-dropdown-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.ol_mo_checkbox-dropdown.ol_mo_open .ol_mo_checkbox-dropdown-trigger { border-color: var(--ol_mo_accent); }
.ol_mo_checkbox-dropdown-chevron { color: var(--ol_mo_text-muted); transition: transform var(--ol_mo_duration) var(--ol_mo_ease); font-size: 11px; }
.ol_mo_checkbox-dropdown.ol_mo_open .ol_mo_checkbox-dropdown-chevron { transform: rotate(180deg); color: var(--ol_mo_accent); }
.ol_mo_checkbox-dropdown-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-md); padding: 6px; max-height: 220px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.2s var(--ol_mo_ease), transform 0.2s var(--ol_mo_ease);
}
.ol_mo_checkbox-dropdown.ol_mo_open .ol_mo_checkbox-dropdown-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ol_mo_checkbox-dropdown-row {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--ol_mo_radius-sm);
    font-size: 13px; color: var(--ol_mo_text-primary); cursor: pointer; transition: background 0.15s var(--ol_mo_ease);
}
.ol_mo_checkbox-dropdown-row:hover { background: var(--ol_mo_bg-hover); }
.ol_mo_checkbox-dropdown-row input[type="checkbox"] { accent-color: var(--ol_mo_accent); width: 15px; height: 15px; flex: none; }
.ol_mo_checkbox-dropdown-empty { padding: 10px 9px; font-size: 12.5px; color: var(--ol_mo_text-muted); text-align: center; }

/* --- Per-user permission toggle (Inherit / Grant / Revoke 3-way switch) --- */
.ol_mo_permission-toggle-group { display: flex; border: 1px solid var(--ol_mo_border); border-radius: var(--ol_mo_radius-sm); overflow: hidden; flex: none; }
.ol_mo_permission-toggle-btn {
    padding: 5px 10px; font-size: 11px; font-weight: 600; border: none; cursor: pointer;
    background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-muted); border-inline-start: 1px solid var(--ol_mo_border);
    transition: background 0.15s var(--ol_mo_ease), color 0.15s var(--ol_mo_ease);
}
.ol_mo_permission-toggle-btn:first-child { border-inline-start: none; }
.ol_mo_permission-toggle-btn:hover { background: var(--ol_mo_bg-hover); }
.ol_mo_permission-toggle-btn.ol_mo_active.ol_mo_state-inherit { background: var(--ol_mo_bg-hover); color: var(--ol_mo_text-primary); }
.ol_mo_permission-toggle-btn.ol_mo_active.ol_mo_state-grant { background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); }
.ol_mo_permission-toggle-btn.ol_mo_active.ol_mo_state-revoke { background: var(--ol_mo_danger); color: #fff; }

/* --- Checkbox form field (e.g. "Branch Manager?") --- */
.ol_mo_field-group-checkbox { margin-top: 2px; }
.ol_mo_checkbox-field-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--ol_mo_text-primary); }
.ol_mo_checkbox-field-row input[type="checkbox"] { accent-color: var(--ol_mo_accent); width: 16px; height: 16px; flex: none; }

/* #############################################################################
   #                                                                           #
   #   "MODERN" INTERFACE — COMPONENT FLOURISHES (item 13.3)                  #
   #                                                                           #
   #   Everything above this block is theme-agnostic (classes, not colors),   #
   #   and the variable swap earlier in this file already re-skins the        #
   #   entire app once html[data-ui="modern"] is set. These rules add the     #
   #   handful of structural touches that variables alone can't express —     #
   #   a glass-blurred sticky header, a pill-shaped active sidebar link       #
   #   instead of Classic's left accent bar, a gradient brand mark, and a     #
   #   soft gradient top edge on cards — so Modern reads as a deliberately    #
   #   different, fresher interface rather than just "Classic with new       #
   #   colors". Every class touched here (.ol_mo_main-header, .ol_mo_sidebar-link,       #
   #   .ol_mo_card, ...) is the SAME class Classic uses, so nothing in markup,     #
   #   JS, icons, chevrons, the RTL scrollbar, or tooltips needs to change    #
   #   to support this interface — only its own look.                        #
   #                                                                           #
   #############################################################################
   ===================================================================== */

html[data-ui="modern"] .ol_mo_main-header {
    background: color-mix(in srgb, var(--ol_mo_bg-secondary) 80%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--ol_mo_border);
}

html[data-ui="modern"] .ol_mo_main-header .ol_mo_brand {
    background: linear-gradient(135deg, var(--ol_mo_accent) 0%, var(--ol_mo_accent-strong) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

html[data-ui="modern"] .mohamed_okasha_sidebar {
    background: var(--ol_mo_bg-secondary);
    border-inline-end: 1px solid var(--ol_mo_border);
}

/* Pill-shaped active state (replaces Classic's thin left accent bar) */
html[data-ui="modern"] .ol_mo_sidebar-link { border-radius: var(--ol_mo_radius-md); margin-inline: 2px; }
html[data-ui="modern"] .ol_mo_sidebar-link.ol_mo_active {
    background: linear-gradient(135deg, var(--ol_mo_accent) 0%, var(--ol_mo_accent-strong) 100%);
    color: #ffffff; box-shadow: var(--ol_mo_shadow-sm);
}
html[data-ui="modern"] .ol_mo_sidebar-link.ol_mo_active::before { display: none; }

html[data-ui="modern"] .ol_mo_card,
html[data-ui="modern"] .ol_mo_entity-profile-card,
html[data-ui="modern"] .ol_mo_entity-profile-header {
    position: relative; overflow: hidden;
}
html[data-ui="modern"] .ol_mo_card::before,
html[data-ui="modern"] .ol_mo_entity-profile-card::before,
html[data-ui="modern"] .ol_mo_entity-profile-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ol_mo_accent) 0%, var(--ol_mo_accent-strong) 50%, var(--ol_mo_accent) 100%);
    opacity: 0.85;
}

html[data-ui="modern"] .ol_mo_btn-primary {
    background: linear-gradient(135deg, var(--ol_mo_accent) 0%, var(--ol_mo_accent-strong) 100%);
    border-color: transparent; color: #ffffff;
}
html[data-ui="modern"] .ol_mo_btn-primary:hover { filter: brightness(1.08); box-shadow: var(--ol_mo_shadow-md); }

html[data-ui="modern"] .ol_mo_avatar-circle,
html[data-ui="modern"] .ol_mo_entity-profile-avatar {
    background: linear-gradient(135deg, var(--ol_mo_accent-tint) 0%, rgba(37,99,235,0.14) 100%);
}

html[data-ui="modern"] .ol_mo_badge { border-radius: 8px; }

/* Data-table header gets a subtle tint instead of Classic's flat tertiary fill */
html[data-ui="modern"] .ol_mo_data-table th {
    background: linear-gradient(180deg, var(--ol_mo_bg-tertiary) 0%, var(--ol_mo_bg-secondary) 100%);
}
/* ========================= END "MODERN" FLOURISHES ========================= */

/* #############################################################################
   #   CHARTS, ANALYTICS & REPORTS (items A/B/D, Oct-2026 feedback)           #
   #                                                                           #
   #   Shared styling for:                                                    #
   #     - the hand-rolled SVG charts rendered by charts.js (dashboard,       #
   #       Analytics module) — `.mo-chart-*`                                  #
   #     - the Analytics module's own layout — `.analytics-*`                 #
   #     - the Reports module's report-picker cards and generic report        #
   #       table layout — `.report-*`                                         #
   #   All of it rides the same CSS custom properties Classic/Modern already  #
   #   define, so both interfaces and both themes pick it up for free.        #
   #############################################################################
   ===================================================================== */

/* --- Charts (charts.js) --- */
.ol_mo_mo-chart-card { position: relative; }
.ol_mo_mo-chart-svg { width: 100%; height: auto; display: block; }
.ol_mo_mo-chart-axis-line, .ol_mo_mo-chart-grid-line { stroke: var(--ol_mo_border); stroke-width: 1; }
.ol_mo_mo-chart-axis-label { font-size: 10.5px; fill: var(--ol_mo_text-muted); font-family: inherit; }
.ol_mo_mo-chart-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 140px; color: var(--ol_mo_text-muted); font-size: 13px;
}
.ol_mo_mo-chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ol_mo_text-secondary); }
.ol_mo_mo-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ol_mo_mo-chart-legend-item i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ol_mo_mo-chart-donut { max-width: 190px; margin: 0 auto; display: block; }

/* --- Reports module charts (item 10 of the UI punch list) --- */
.ol_mo_report-charts-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px; margin-bottom: 20px;
}
.ol_mo_report-charts-row .ol_mo_card h3 { margin-bottom: 14px; font-size: 14px; }

/* --- Dashboard analytics row --- */
.ol_mo_dashboard-charts-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px; margin-top: 22px;
}
.ol_mo_dashboard-charts-grid .ol_mo_card h3 { margin-bottom: 14px; }

/* --- Analytics module --- */
.ol_mo_analytics-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 18px;
}
.ol_mo_analytics-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}
.ol_mo_analytics-grid .ol_mo_card.ol_mo_span-2 { grid-column: span 2; }
@media (max-width: 760px) { .ol_mo_analytics-grid .ol_mo_card.ol_mo_span-2 { grid-column: span 1; } }
.ol_mo_analytics-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.ol_mo_analytics-kpi {
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-md); padding: 14px 16px;
}
.ol_mo_analytics-kpi .ol_mo_num { font-size: 24px; font-weight: 700; color: var(--ol_mo_text-primary); line-height: 1.2; }
.ol_mo_analytics-kpi .ol_mo_label { font-size: 12px; color: var(--ol_mo_text-muted); margin-top: 4px; }
.ol_mo_analytics-entity-banner {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-sm); margin-bottom: 18px; font-size: 13px;
}

/* --- Reports module --- */
.ol_mo_reports-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.ol_mo_report-pick-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--ol_mo_bg-secondary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-md); padding: 18px;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.ol_mo_report-pick-card:hover { border-color: var(--ol_mo_accent); transform: translateY(-2px); }
.ol_mo_report-pick-card .ol_mo_icon { width: 26px; height: 26px; color: var(--ol_mo_accent); }
.ol_mo_report-pick-card h4 { font-size: 14.5px; margin: 0; }
.ol_mo_report-pick-card p { font-size: 12.5px; color: var(--ol_mo_text-muted); margin: 0; }
.ol_mo_report-table-wrap { overflow-x: auto; }
.ol_mo_report-totals-row td { font-weight: 700; border-top: 2px solid var(--ol_mo_border); }

/* #############################################################################
   #   PRINTING SYSTEM (item C, Oct-2026 feedback)                            #
   #                                                                           #
   #   A system-wide print stylesheet rather than a one-off per page: any     #
   #   page can offer a "Print" button (see icon_btn('print', ...) usage on   #
   #   Statements and every entity profile page) that simply calls           #
   #   window.print() — the browser's native print/PDF flow — and these      #
   #   @media print rules strip the app chrome (sidebar, header, nav,        #
   #   buttons, modals, tooltips, toasts) and force readable light-on-white  #
   #   colors regardless of the active theme, so a page printed from dark    #
   #   mode or the Modern interface never wastes ink or looks broken on      #
   #   paper. Each page's own content (tables, profile cards, statement      #
   #   totals) already uses semantic, generic classes, so nothing extra is   #
   #   needed per-module for a reasonably clean result; `.ol_mo_print-only` /      #
   #   `.ol_mo_no-print` are available for any page that wants finer control.      #
   #############################################################################
   ===================================================================== */
.ol_mo_no-print { }
.ol_mo_print-only { display: none; }

@media print {
    @page { margin: 14mm 12mm; }

    html, body { background: #ffffff !important; }
    body { font-size: 12px; color: #111 !important; }

    /* Strip all app chrome — only the page's own content should print */
    .mohamed_okasha_sidebar, .ol_mo_main-header, .mohamed_okasha_sub-navbar, .ol_mo_main-footer, .ol_mo_back-to-top,
    .ol_mo_toast-host, .ol_mo_modal-overlay, .ol_mo_global-search-results,
    .ol_mo_row-actions, .ol_mo_page-header .ol_mo_btn, .ol_mo_entity-profile-history-row,
    .ol_mo_analytics-toolbar, .ol_mo_reports-grid, .ol_mo_no-print, [data-action],
    .ol_mo_table-toolbar, .ol_mo_table-pagination,
    button:not(.ol_mo_print-keep) {
        display: none !important;
    }

    /* A printed table must always show every row, regardless of the
       current search filter or pagination page on screen. */
    .ol_mo_data-table tbody tr { display: table-row !important; }

    /* .ol_mo_app-shell is a fixed-height (100vh), overflow-y:auto scroll box on
       screen (see the "App shell" comment above) — printing must undo
       both, or only one viewport-height's worth of content would ever
       reach the printer. */
    .ol_mo_app-shell { display: block !important; height: auto !important; overflow: visible !important; }
    .ol_mo_main-content { padding: 0 !important; grid-area: unset !important; }

    /* Force every surface to plain white/black ink, whatever theme/interface is active */
    .ol_mo_card, .ol_mo_entity-profile-card, .ol_mo_entity-profile-header, .ol_mo_data-table,
    table, .ol_mo_profile-card {
        background: #ffffff !important; color: #111 !important;
        border: 1px solid #ccc !important; box-shadow: none !important;
    }
    .ol_mo_data-table th { background: #f2f2f2 !important; color: #111 !important; }
    .ol_mo_data-table td, .ol_mo_data-table th { border-color: #ddd !important; }
    a { color: #111 !important; text-decoration: none !important; }
    .ol_mo_badge { border: 1px solid #999 !important; background: #fff !important; color: #111 !important; }

    .ol_mo_print-only { display: block !important; }

    table, .ol_mo_entity-profile-card, .ol_mo_card { page-break-inside: avoid; }
}
/* ============================= END PRINTING SYSTEM ========================= */


/* =====================================================================
   UI CONTROLS (Oct-2026 feedback round 8) — themed select / date picker /
   tooltip, driven by public/assets/js/ui-controls.js. The native element
   stays in the DOM (hidden) as the single source of truth.
   ===================================================================== */
.ol_mo_ui-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; margin: 0; }

.ol_mo_ui-select, .ol_mo_ui-date { position: relative; display: inline-block; vertical-align: middle; min-width: 120px; }
.ol_mo_field-group .ol_mo_ui-select, .ol_mo_field-group .ol_mo_ui-date,
.ol_mo_repeater-row .ol_mo_ui-select, .ol_mo_repeater-row .ol_mo_ui-date { display: block; width: 100%; }
.ol_mo_repeater-row .ol_mo_ui-select { flex: 1; min-width: 0; }

.ol_mo_ui-select-btn, .ol_mo_ui-date-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 11px; background-color: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-primary); font-size: 13.5px; font-family: var(--ol_mo_font-body);
    text-align: start; cursor: pointer; appearance: none; -webkit-appearance: none;
    transition: border-color .2s var(--ol_mo_ease), background-color .2s var(--ol_mo_ease);
}
.ol_mo_ui-select-btn:hover, .ol_mo_ui-date-btn:hover { border-color: var(--ol_mo_border-strong, var(--ol_mo_border)); }
.ol_mo_ui-select-btn:focus-visible, .ol_mo_ui-date-btn:focus-visible,
.ol_mo_ui-select.ol_mo_ui-open .ol_mo_ui-select-btn, .ol_mo_ui-date.ol_mo_ui-open .ol_mo_ui-date-btn { border-color: var(--ol_mo_accent); outline: none; }
.ol_mo_ui-select-btn:disabled, .ol_mo_ui-date-btn:disabled { opacity: .55; cursor: not-allowed; }
.ol_mo_ui-select-label, .ol_mo_ui-date-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol_mo_is-placeholder { color: var(--ol_mo_text-muted); }
.ol_mo_field-group.ol_mo_has-error .ol_mo_ui-select-btn, .ol_mo_field-group.ol_mo_has-error .ol_mo_ui-date-btn { border-color: var(--ol_mo_danger); }
.ol_mo_repeater-row .ol_mo_ui-select-btn, .ol_mo_repeater-row .ol_mo_ui-date-btn { padding: 7px 9px; font-size: 12.5px; }
.ol_mo_entity-profile-period-filter .ol_mo_ui-select-btn, .ol_mo_analytics-toolbar .ol_mo_ui-select-btn,
.ol_mo_entity-profile-period-filter .ol_mo_ui-date-btn, .ol_mo_analytics-toolbar .ol_mo_ui-date-btn { padding: 8px 11px; font-size: 13px; }

/* Chevron: OUTWARD at rest (right in LTR, left in RTL), DOWN while open —
   the same convention as the header's .ol_mo_dropdown-caret. */
.ol_mo_ui-chev { width: 13px; height: 13px; flex: none; color: var(--ol_mo_text-muted); transition: transform var(--ol_mo_duration) var(--ol_mo_ease), color var(--ol_mo_duration) var(--ol_mo_ease); }
[dir="ltr"] .ol_mo_ui-chev { transform: rotate(0deg); }
[dir="rtl"] .ol_mo_ui-chev { transform: rotate(180deg); }
.ol_mo_ui-select.ol_mo_ui-open > .ol_mo_ui-select-btn .ol_mo_ui-chev { transform: rotate(90deg) !important; color: var(--ol_mo_accent); }
.ol_mo_ui-cal-icon { width: 16px; height: 16px; flex: none; color: var(--ol_mo_text-muted); }
.ol_mo_ui-date.ol_mo_ui-open .ol_mo_ui-cal-icon { color: var(--ol_mo_accent); }

/* --- Select list panel --- */
.ol_mo_ui-select-panel, .ol_mo_ui-date-panel {
    position: fixed; z-index: 400; left: 0; top: 0; background: var(--ol_mo_bg-secondary);
    border: 1px solid var(--ol_mo_border-strong, var(--ol_mo_border)); border-radius: var(--ol_mo_radius-md);
    box-shadow: var(--ol_mo_shadow-lg); opacity: 0; transform: translateY(-4px) scale(.985);
    transition: opacity .14s var(--ol_mo_ease), transform .14s var(--ol_mo_ease);
}
.ol_mo_ui-select-panel[data-place="top"], .ol_mo_ui-date-panel[data-place="top"] { transform: translateY(4px) scale(.985); }
.ol_mo_ui-select-panel.ol_mo_open, .ol_mo_ui-date-panel.ol_mo_open { opacity: 1; transform: none; }
.ol_mo_ui-select-panel { display: flex; flex-direction: column; max-height: 300px; overflow: hidden; padding: 5px; }
.ol_mo_ui-select-list { overflow-y: auto; min-height: 0; flex: 1; }
.ol_mo_ui-select-search {
    width: 100%; margin: 0 0 5px; padding: 8px 10px; background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border);
    border-radius: var(--ol_mo_radius-sm); color: var(--ol_mo_text-primary); font-size: 13px; font-family: var(--ol_mo_font-body);
}
.ol_mo_ui-select-search:focus { border-color: var(--ol_mo_accent); outline: none; }
.ol_mo_ui-select-group { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ol_mo_text-muted); }
.ol_mo_ui-select-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
    border-radius: 6px; font-size: 13.5px; color: var(--ol_mo_text-primary); cursor: pointer;
}
.ol_mo_ui-select-item.ol_mo_active { background: var(--ol_mo_bg-hover); }
.ol_mo_ui-select-item.mohamed_okasha_selected { color: var(--ol_mo_accent); font-weight: 600; background: var(--ol_mo_accent-tint); }
.ol_mo_ui-select-item.mohamed_okasha_selected::after { content: '\2713'; font-size: 12px; }
.ol_mo_ui-select-item.ol_mo_disabled { opacity: .4; cursor: not-allowed; }

/* --- Calendar panel --- */
.ol_mo_ui-date-panel { width: 288px; padding: 12px; }
.ol_mo_ui-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.ol_mo_ui-cal-title {
    flex: 1; padding: 7px 8px; background: transparent; border: none; border-radius: 6px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: var(--ol_mo_text-primary); font-family: var(--ol_mo_font-display);
}
.ol_mo_ui-cal-title:hover { background: var(--ol_mo_bg-hover); }
.ol_mo_ui-cal-nav {
    width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
    background: transparent; border: 1px solid var(--ol_mo_border); border-radius: 8px; cursor: pointer; color: var(--ol_mo_text-secondary);
}
.ol_mo_ui-cal-nav:hover { background: var(--ol_mo_accent-tint); border-color: var(--ol_mo_accent); }
.ol_mo_ui-cal-nav:hover .ol_mo_ui-chev { color: var(--ol_mo_accent); }
[dir="ltr"] .ol_mo_ui-cal-nav.ol_mo_prev .ol_mo_ui-chev { transform: rotate(180deg); }
[dir="rtl"] .ol_mo_ui-cal-nav.ol_mo_prev .ol_mo_ui-chev { transform: rotate(0deg); }
.ol_mo_ui-cal-week, .ol_mo_ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ol_mo_ui-cal-week span { text-align: center; padding: 4px 0 6px; font-size: 11px; color: var(--ol_mo_text-muted); font-weight: 600; }
.okasha_lines_ui-cal-day, .ol_mo_ui-cal-cell {
    height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    font-size: 13px; color: var(--ol_mo_text-primary); font-family: var(--ol_mo_font-body); appearance: none; -webkit-appearance: none;
}
.okasha_lines_ui-cal-day.ol_mo_other { color: var(--ol_mo_text-muted); opacity: .55; }
.okasha_lines_ui-cal-day:hover:not(:disabled), .ol_mo_ui-cal-cell:hover { background: var(--ol_mo_bg-hover); }
.okasha_lines_ui-cal-day.ol_mo_today, .ol_mo_ui-cal-cell.ol_mo_today { border-color: var(--ol_mo_accent); }
.okasha_lines_ui-cal-day.mohamed_okasha_selected, .ol_mo_ui-cal-cell.mohamed_okasha_selected { background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); border-color: var(--ol_mo_accent); font-weight: 700; }
.okasha_lines_ui-cal-day:disabled { opacity: .25; cursor: not-allowed; }
.ol_mo_ui-cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ol_mo_ui-cal-months .ol_mo_ui-cal-cell { height: 42px; }
.ol_mo_ui-cal-time { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ol_mo_border); font-size: 12.5px; color: var(--ol_mo_text-secondary); }
.ol_mo_ui-cal-time span { flex: 1; }
.ol_mo_ui-cal-time input {
    width: 52px; padding: 6px 8px; text-align: center; background: var(--ol_mo_bg-tertiary); border: 1px solid var(--ol_mo_border);
    border-radius: 6px; color: var(--ol_mo_text-primary); font-family: var(--ol_mo_font-mono); font-size: 13px;
}
.ol_mo_ui-cal-time input:focus { border-color: var(--ol_mo_accent); outline: none; }
.ol_mo_ui-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ol_mo_border); }
.ol_mo_ui-cal-link { background: none; border: none; padding: 4px 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ol_mo_accent); font-family: var(--ol_mo_font-body); border-radius: 6px; }
.ol_mo_ui-cal-link:hover { background: var(--ol_mo_accent-tint); }
.ol_mo_ui-cal-ok { padding: 6px 14px; background: var(--ol_mo_accent); color: var(--ol_mo_accent-contrast-text); border: none; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; font-family: var(--ol_mo_font-body); }

/* --- Tooltip: one floating bubble, always inside the viewport --- */
.ol_mo_ui-tooltip {
    position: fixed; left: 0; top: 0; z-index: 700; max-width: min(280px, calc(100vw - 16px)); pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .14s var(--ol_mo_ease);
}
.ol_mo_ui-tooltip.ol_mo_measure { visibility: hidden; opacity: 0; }
.ol_mo_ui-tooltip.ol_mo_show { opacity: 1; visibility: visible; }
.ol_mo_ui-tooltip-text {
    display: block; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 500; line-height: 1.45;
    background: var(--ol_mo_bg-tertiary); color: var(--ol_mo_text-primary); border: 1px solid var(--ol_mo_border-strong, var(--ol_mo_border));
    box-shadow: var(--ol_mo_shadow-md); overflow-wrap: anywhere;
}
.ol_mo_ui-tooltip-arrow {
    position: absolute; left: var(--ol_mo_arrow-x, 50%); width: 8px; height: 8px; background: var(--ol_mo_bg-tertiary);
    border: 1px solid var(--ol_mo_border-strong, var(--ol_mo_border)); transform: translateX(-50%) rotate(45deg);
}
.ol_mo_ui-tooltip[data-place="top"] .ol_mo_ui-tooltip-arrow { bottom: -5px; border-top: none; border-left: none; }
.ol_mo_ui-tooltip[data-place="bottom"] .ol_mo_ui-tooltip-arrow { top: -5px; border-bottom: none; border-right: none; }

@media print { .ol_mo_ui-select-panel, .ol_mo_ui-date-panel, .ol_mo_ui-tooltip { display: none !important; } }


/* =====================================================================
   Round 9 additions
   ===================================================================== */

/* --- Scrollbars: thin, themed (track transparent, thumb follows the
   active theme's muted-text colour, accent on hover). Applies to the
   page scroller (.ol_mo_app-shell), the sidebar, every modal body, panels and
   textareas. Chromium/Safari use the ::-webkit-scrollbar block; Firefox
   (no ::-webkit-scrollbar) gets the standard properties via @supports. */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ol_mo_text-muted) 38%, transparent);
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ol_mo_accent); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ol_mo_text-muted) 45%, transparent) transparent; }
}

/* --- Multi-select rendered as a compact dropdown (ui-controls.js) --- */
.ol_mo_ui-select-item .ol_mo_ui-check {
    width: 15px; height: 15px; flex: none; border: 1px solid var(--ol_mo_border-strong); border-radius: 4px;
    background: var(--ol_mo_bg-tertiary); position: relative; transition: all .15s var(--ol_mo_ease);
}
.ol_mo_ui-select-item.mohamed_okasha_selected .ol_mo_ui-check { background: var(--ol_mo_accent); border-color: var(--ol_mo_accent); }
.ol_mo_ui-select-item.mohamed_okasha_selected .ol_mo_ui-check::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid var(--ol_mo_accent-contrast-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ol_mo_ui-select-item:has(.ol_mo_ui-check) { gap: 10px; justify-content: flex-start; }
.ol_mo_ui-select-item:has(.ol_mo_ui-check).mohamed_okasha_selected { background: transparent; color: var(--ol_mo_text-primary); font-weight: 500; }
.ol_mo_ui-select-item:has(.ol_mo_ui-check).mohamed_okasha_selected::after { content: none; }
.ol_mo_ui-select-item:has(.ol_mo_ui-check).ol_mo_active { background: var(--ol_mo_bg-hover); }

/* --- Invoice profile: the document sits on a white "paper" sheet inside the app shell --- */
.ol_mo_invoice-sheet {
    max-width: 900px; margin: 0 auto; background: #fff; color: #1f2430;
    border-radius: var(--ol_mo_radius-md); padding: 36px 40px; box-shadow: var(--ol_mo_shadow-md);
}
@media (max-width: 700px) { .ol_mo_invoice-sheet { padding: 20px 16px; } }

/* --- Login page: language switch under the form --- */
.ol_mo_login-lang { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--ol_mo_text-muted); }
.ol_mo_login-lang a { color: var(--ol_mo_text-secondary); text-decoration: none; padding: 0 6px; }
.ol_mo_login-lang a:hover, .ol_mo_login-lang a.ol_mo_active { color: var(--ol_mo_accent); }

/* ---- Owner layer (Round 11) ---- */
.ol_mo_badge-protected { background: var(--warning-tint, rgba(245,158,11,.15)); color: var(--ol_mo_warning, #f59e0b); margin-inline-start: 4px; }
.ol_mo_owner-login-badge { text-align: center; margin: -6px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ol_mo_accent); }

/* Owner control panel: titled sections (each with its own area) + per-item modals */
.ol_mo_owner-intro { color: var(--ol_mo_text-secondary); margin-bottom: 16px; font-size: 13px; }
.ol_mo_owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.ol_mo_owner-section { margin-bottom: 0; }
.ol_mo_owner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ol_mo_modal-box.ol_mo_owner-modal-box { width: 640px; max-height: 90vh; overflow-y: auto; }
.ol_mo_owner-bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .ol_mo_owner-bilingual { grid-template-columns: 1fr; } }