/*
 * ARAA themes: one set of design tokens for the whole system (main app and
 * cashier screen). html[data-araa-mode] picks the light or dark base;
 * html[data-araa-theme] adds the identity of each theme on top.
 *
 * Themes: dark (Graphite), light (Graphite light), saudi, saudi-dark,
 * ramadan, national, contrast.
 */

/* Dark base (Graphite) */
:root,
html[data-araa-mode="dark"] {
    color-scheme: dark;
    --araa-bg: #0e1822;
    --araa-bg-soft: #111c27;
    --araa-surface: #141f2a;
    --araa-surface-raised: #182531;
    --araa-surface-muted: #1a2835;
    --araa-surface-hover: #1b2a38;
    --araa-border: rgba(148, 176, 199, 0.13);
    --araa-border-strong: rgba(148, 176, 199, 0.24);
    --araa-text: #eaf1f7;
    --araa-text-soft: #c2cfda;
    --araa-muted: #8797a6;
    --araa-accent: #4cc9ea;
    --araa-accent-strong: #29b4d8;
    --araa-accent-soft: rgba(76, 201, 234, 0.12);
    --araa-accent-ink: #042331;
    --araa-btn-bg: #4cc9ea;
    --araa-btn-ink: #042331;
    --araa-success: #3ad182;
    --araa-success-soft: rgba(58, 209, 130, 0.12);
    --araa-warning: #f2a54a;
    --araa-warning-soft: rgba(242, 165, 74, 0.13);
    --araa-danger: #ff6b76;
    --araa-danger-soft: rgba(255, 107, 118, 0.13);
    --araa-violet: #9aa6ff;
    --araa-violet-soft: rgba(154, 166, 255, 0.13);
    --araa-gold: #f2c46d;
    --araa-gold-soft: rgba(242, 196, 109, 0.14);
    /* Gold for small text; light modes darken it to keep 4.5:1 */
    --araa-gold-ink: var(--araa-gold);
    --araa-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    --araa-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.16);

    --araa-rail: #0b141c;
    --araa-rail-pattern: none;
    --araa-rail-border: rgba(148, 176, 199, 0.13);
    --araa-rail-text: #c2cfda;
    --araa-rail-text-strong: #eaf1f7;
    --araa-rail-muted: #8797a6;
    --araa-rail-hover: rgba(255, 255, 255, 0.035);
    --araa-rail-active-bg: #1b2a38;
    --araa-rail-active-text: #4cc9ea;
    --araa-rail-indicator: #4cc9ea;

    --araa-pattern: none;
    --araa-chart-palette: #4cc9ea, #7c8cff, #3ad182, #f2a54a, #ff6b76, #b98cff, #2fb5a9, #f7d070, #5aa9ff, #94a3b8;

    --araa-pos-multi: #4cc9ea;
    --araa-pos-multi-ink: #042331;
    --araa-pos-cash: #1fb36d;
    --araa-pos-card: #2f6fe4;
    --araa-pos-cancel: #e5484d;
    --araa-pos-plate: #f4f7fa;
    --araa-watermark: rgba(14, 24, 34, 0.9);

    --araa-radius: 12px;
    --araa-radius-sm: 10px;
    --araa-rail-width: 132px;
    --araa-topbar-height: 72px;
    --araa-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --araa-font-latin: "Segoe UI", "Cairo", Tahoma, Arial, sans-serif;
}

/* Light base (Graphite light) */
html[data-araa-mode="light"] {
    color-scheme: light;
    --araa-bg: #f2f5f8;
    --araa-bg-soft: #eaeff4;
    --araa-surface: #ffffff;
    --araa-surface-raised: #f8fafc;
    --araa-surface-muted: #f1f5f9;
    --araa-surface-hover: #eef7fb;
    --araa-border: rgba(15, 42, 61, 0.1);
    --araa-border-strong: rgba(15, 42, 61, 0.18);
    --araa-text: #102232;
    --araa-text-soft: #37495a;
    --araa-muted: #66788a;
    --araa-accent: #0b7c99;
    --araa-accent-strong: #08667e;
    --araa-accent-soft: rgba(10, 165, 201, 0.1);
    --araa-accent-ink: #ffffff;
    --araa-btn-bg: #077f9e;
    --araa-btn-ink: #ffffff;
    --araa-success: #15935a;
    --araa-success-soft: rgba(21, 147, 90, 0.1);
    --araa-warning: #c27a17;
    --araa-warning-soft: rgba(194, 122, 23, 0.11);
    --araa-danger: #d23f4c;
    --araa-danger-soft: rgba(210, 63, 76, 0.09);
    --araa-violet: #5a64d8;
    --araa-violet-soft: rgba(90, 100, 216, 0.1);
    --araa-gold: #a8801f;
    --araa-gold-soft: rgba(168, 128, 31, 0.12);
    --araa-gold-ink: #80621d;
    --araa-shadow: 0 18px 44px rgba(16, 42, 61, 0.13);
    --araa-shadow-soft: 0 1px 2px rgba(16, 42, 61, 0.05), 0 8px 22px rgba(16, 42, 61, 0.06);

    --araa-rail: #ffffff;
    --araa-rail-border: rgba(15, 42, 61, 0.1);
    --araa-rail-text: #37495a;
    --araa-rail-text-strong: #102232;
    --araa-rail-muted: #66788a;
    --araa-rail-hover: rgba(15, 42, 61, 0.04);
    --araa-rail-active-bg: #eef7fb;
    --araa-rail-active-text: #077f9e;
    --araa-rail-indicator: #0aa5c9;

    --araa-chart-palette: #0aa5c9, #5a64d8, #15935a, #c27a17, #d23f4c, #8b5cf6, #0f8f86, #b8930b, #2f7fd8, #64748b;

    --araa-pos-multi: #077f9e;
    --araa-pos-multi-ink: #ffffff;
    --araa-pos-cash: #15935a;
    --araa-pos-card: #1f5fd6;
    --araa-pos-cancel: #d23f4c;
    --araa-pos-plate: #ffffff;
    --araa-watermark: rgba(255, 255, 255, 0.86);
}

/* Saudi day: green, sand and navy with quiet gold, on a calm warm white */
html[data-araa-theme="saudi"] {
    --araa-bg: #f6f3ec;
    --araa-bg-soft: #efe7d8;
    --araa-surface: #ffffff;
    --araa-surface-raised: #fbf8f2;
    --araa-surface-muted: #f5eee2;
    --araa-surface-hover: #eef5f0;
    --araa-border: rgba(11, 31, 58, 0.1);
    --araa-border-strong: rgba(11, 31, 58, 0.18);
    --araa-text: #0b1f3a;
    --araa-text-soft: #2f425b;
    --araa-muted: #6a7889;
    --araa-accent: #006c35;
    --araa-accent-strong: #00552a;
    --araa-accent-soft: rgba(0, 108, 53, 0.09);
    --araa-accent-ink: #ffffff;
    --araa-btn-bg: #006c35;
    --araa-btn-ink: #ffffff;
    --araa-success: #2e8b57;
    --araa-success-soft: rgba(46, 139, 87, 0.11);
    --araa-warning: #b7791f;
    --araa-warning-soft: rgba(183, 121, 31, 0.12);
    --araa-danger: #c0392b;
    --araa-danger-soft: rgba(192, 57, 43, 0.09);
    --araa-violet: #2563a6;
    --araa-violet-soft: rgba(37, 99, 166, 0.1);
    --araa-gold: #b08a35;
    --araa-gold-soft: rgba(200, 162, 74, 0.16);
    --araa-shadow: 0 18px 44px rgba(11, 31, 58, 0.12);
    --araa-shadow-soft: 0 1px 2px rgba(11, 31, 58, 0.05), 0 8px 22px rgba(11, 31, 58, 0.06);

    --araa-rail: #0b1f3a;
    --araa-rail-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-opacity='0.13' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-rail-border: rgba(255, 255, 255, 0.08);
    --araa-rail-text: #dce4ee;
    --araa-rail-text-strong: #ffffff;
    --araa-rail-muted: #a3b2c4;
    --araa-rail-hover: rgba(255, 255, 255, 0.06);
    --araa-rail-active-bg: rgba(200, 162, 74, 0.14);
    --araa-rail-active-text: #f2d48a;
    --araa-rail-indicator: #c8a24a;

    --araa-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23006C35' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-chart-palette: #006c35, #c8a24a, #0b1f3a, #2e8b57, #8c6d2c, #4f7cac, #b85c38, #6b8f71, #9c8a5a, #5b6b7f;

    --araa-pos-multi: #0b1f3a;
    --araa-pos-multi-ink: #ffffff;
    --araa-pos-cash: #006c35;
    --araa-pos-card: #1f5fa8;
    --araa-pos-cancel: #c0392b;
    --araa-watermark: rgba(255, 255, 255, 0.88);

    --araa-font: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --araa-font-latin: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Saudi night: deep navy with Saudi green and gold */
html[data-araa-theme="saudi-dark"] {
    --araa-bg: #071426;
    --araa-bg-soft: #0a1a30;
    --araa-surface: #0d1e36;
    --araa-surface-raised: #112540;
    --araa-surface-muted: #132a48;
    --araa-surface-hover: #15304f;
    --araa-border: rgba(190, 210, 235, 0.12);
    --araa-border-strong: rgba(190, 210, 235, 0.22);
    --araa-text: #eef3f8;
    --araa-text-soft: #c6d2e0;
    --araa-muted: #8c9bb0;
    --araa-accent: #2bb673;
    --araa-accent-strong: #1e9a5e;
    --araa-accent-soft: rgba(43, 182, 115, 0.13);
    --araa-accent-ink: #03200f;
    --araa-btn-bg: #2bb673;
    --araa-btn-ink: #03200f;
    --araa-success: #3ad182;
    --araa-warning: #e8b04b;
    --araa-violet: #8fb3ff;
    --araa-gold: #d4af5a;
    --araa-gold-soft: rgba(212, 175, 90, 0.15);

    --araa-rail: #050f1e;
    --araa-rail-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-rail-border: rgba(190, 210, 235, 0.1);
    --araa-rail-text: #c6d2e0;
    --araa-rail-text-strong: #ffffff;
    --araa-rail-muted: #8c9bb0;
    --araa-rail-hover: rgba(255, 255, 255, 0.04);
    --araa-rail-active-bg: rgba(43, 182, 115, 0.12);
    --araa-rail-active-text: #2bb673;
    --araa-rail-indicator: #d4af5a;

    --araa-chart-palette: #2bb673, #d4af5a, #5aa9ff, #9aa6ff, #ff8a65, #4dd0c8, #f2d48a, #b39ddb, #7fb3d5, #94a3b8;

    --araa-pos-multi: #d4af5a;
    --araa-pos-multi-ink: #1d1505;
    --araa-watermark: rgba(7, 20, 38, 0.9);

    --araa-font: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --araa-font-latin: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Ramadan: deep indigo night, lantern gold */
html[data-araa-theme="ramadan"] {
    --araa-bg: #0e0f26;
    --araa-bg-soft: #121433;
    --araa-surface: #16183a;
    --araa-surface-raised: #1b1e46;
    --araa-surface-muted: #1e2150;
    --araa-surface-hover: #23275a;
    --araa-border: rgba(214, 200, 255, 0.12);
    --araa-border-strong: rgba(214, 200, 255, 0.22);
    --araa-text: #f5f1e6;
    --araa-text-soft: #d8d1c0;
    --araa-muted: #a39cb5;
    --araa-accent: #e2b857;
    --araa-accent-strong: #c99a35;
    --araa-accent-soft: rgba(226, 184, 87, 0.13);
    --araa-accent-ink: #1e1505;
    --araa-btn-bg: #e2b857;
    --araa-btn-ink: #1e1505;
    --araa-success: #4fd1a5;
    --araa-success-soft: rgba(79, 209, 165, 0.12);
    --araa-warning: #f0a35e;
    --araa-danger: #ff7a85;
    --araa-violet: #b49cff;
    --araa-violet-soft: rgba(180, 156, 255, 0.13);
    --araa-gold: #e2b857;
    --araa-gold-soft: rgba(226, 184, 87, 0.15);

    --araa-rail: #0a0b1e;
    --araa-rail-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E2B857' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-rail-border: rgba(214, 200, 255, 0.1);
    --araa-rail-text: #d8d1c0;
    --araa-rail-text-strong: #ffffff;
    --araa-rail-muted: #a39cb5;
    --araa-rail-hover: rgba(255, 255, 255, 0.04);
    --araa-rail-active-bg: rgba(226, 184, 87, 0.13);
    --araa-rail-active-text: #e2b857;
    --araa-rail-indicator: #e2b857;

    --araa-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E2B857' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-chart-palette: #e2b857, #b49cff, #4fd1a5, #f28c8c, #7fb8ff, #f5d58a, #9ed9c9, #d4a5ff, #ffb38a, #a39cb5;

    --araa-watermark: rgba(14, 15, 38, 0.9);

    --araa-font: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --araa-font-latin: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* National Day: Saudi green rail, crisp white surfaces */
html[data-araa-theme="national"] {
    --araa-bg: #f2f7f4;
    --araa-bg-soft: #e6f0ea;
    --araa-surface: #ffffff;
    --araa-surface-raised: #f8fbf9;
    --araa-surface-muted: #eaf3ee;
    --araa-surface-hover: #e3f1e8;
    --araa-border: rgba(0, 60, 30, 0.1);
    --araa-border-strong: rgba(0, 60, 30, 0.18);
    --araa-text: #0d2a1b;
    --araa-text-soft: #2c4a3a;
    --araa-muted: #5f7a6c;
    --araa-accent: #006c35;
    --araa-accent-strong: #00552a;
    --araa-accent-soft: rgba(0, 108, 53, 0.1);
    --araa-accent-ink: #ffffff;
    --araa-btn-bg: #006c35;
    --araa-btn-ink: #ffffff;
    --araa-success: #2e8b57;
    --araa-success-soft: rgba(46, 139, 87, 0.11);
    --araa-warning: #b7791f;
    --araa-danger: #c0392b;
    --araa-violet: #2563a6;
    --araa-gold: #a8842f;
    --araa-gold-soft: rgba(200, 162, 74, 0.16);
    --araa-shadow: 0 18px 44px rgba(0, 60, 30, 0.12);

    --araa-rail: #006c35;
    --araa-rail-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-rail-border: rgba(255, 255, 255, 0.12);
    --araa-rail-text: #e8f5ee;
    --araa-rail-text-strong: #ffffff;
    --araa-rail-muted: #c6e6d3;
    --araa-rail-hover: rgba(255, 255, 255, 0.08);
    --araa-rail-active-bg: rgba(255, 255, 255, 0.16);
    --araa-rail-active-text: #ffffff;
    --araa-rail-indicator: #f2d48a;

    --araa-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23006C35' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
    --araa-chart-palette: #006c35, #2e8b57, #c8a24a, #0b1f3a, #6b8f71, #4f7cac, #8c6d2c, #9fc5ae, #b85c38, #5b6b7f;

    --araa-pos-multi: #0b1f3a;
    --araa-pos-multi-ink: #ffffff;
    --araa-pos-cash: #006c35;
    --araa-pos-card: #1f5fa8;
    --araa-pos-cancel: #c0392b;

    --araa-font: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --araa-font-latin: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* High contrast: black, white and signal yellow for low vision and bright shops */
html[data-araa-theme="contrast"] {
    --araa-bg: #000000;
    --araa-bg-soft: #0a0a0a;
    --araa-surface: #0b0b0b;
    --araa-surface-raised: #141414;
    --araa-surface-muted: #1a1a1a;
    --araa-surface-hover: #242424;
    --araa-border: rgba(255, 255, 255, 0.42);
    --araa-border-strong: rgba(255, 255, 255, 0.78);
    --araa-text: #ffffff;
    --araa-text-soft: #f2f2f2;
    --araa-muted: #d6d6d6;
    --araa-accent: #ffd60a;
    --araa-accent-strong: #ffc300;
    --araa-accent-soft: rgba(255, 214, 10, 0.18);
    --araa-accent-ink: #000000;
    --araa-btn-bg: #ffd60a;
    --araa-btn-ink: #000000;
    --araa-success: #4ade80;
    --araa-success-soft: rgba(74, 222, 128, 0.16);
    --araa-warning: #ffb020;
    --araa-warning-soft: rgba(255, 176, 32, 0.16);
    --araa-danger: #ff6b6b;
    --araa-danger-soft: rgba(255, 107, 107, 0.16);
    --araa-violet: #a5b4fc;
    --araa-gold: #ffd60a;
    --araa-gold-soft: rgba(255, 214, 10, 0.18);
    --araa-shadow: none;
    --araa-shadow-soft: none;

    --araa-rail: #000000;
    --araa-rail-border: rgba(255, 255, 255, 0.6);
    --araa-rail-text: #ffffff;
    --araa-rail-text-strong: #ffffff;
    --araa-rail-muted: #e0e0e0;
    --araa-rail-hover: rgba(255, 255, 255, 0.1);
    --araa-rail-active-bg: rgba(255, 214, 10, 0.2);
    --araa-rail-active-text: #ffd60a;
    --araa-rail-indicator: #ffd60a;

    --araa-chart-palette: #ffd60a, #4ade80, #60a5fa, #f472b6, #fb923c, #a78bfa, #22d3ee, #f87171, #ffffff, #d6d6d6;

    --araa-pos-multi: #ffd60a;
    --araa-pos-multi-ink: #000000;
    --araa-pos-plate: #ffffff;
    --araa-watermark: rgba(0, 0, 0, 0.92);
}

html[data-araa-theme="contrast"] :focus-visible {
    outline: 3px solid #ffd60a !important;
    outline-offset: 2px;
}

/* Theme picker menu (shared by the main topbar and the cashier header) */
@media screen {
    .araa-theme-menu {
        width: 248px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1080;
        padding: 6px;
        border: 1px solid var(--araa-border-strong);
        border-radius: 14px;
        background: var(--araa-surface-raised);
        box-shadow: var(--araa-shadow);
        color: var(--araa-text);
        font-family: var(--araa-font);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        visibility: hidden;
        transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
    }

    .araa-theme-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    .araa-theme-menu__title {
        padding: 8px 10px 9px;
        border-bottom: 1px solid var(--araa-border);
        margin-bottom: 4px;
        color: var(--araa-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .araa-theme-menu__item {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: var(--araa-text-soft);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        text-align: start;
        cursor: pointer;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    .araa-theme-menu__item:hover,
    .araa-theme-menu__item:focus-visible {
        background: var(--araa-accent-soft);
        color: var(--araa-text);
        outline: none;
    }

    .araa-theme-menu__item.is-active {
        border-color: color-mix(in srgb, var(--araa-accent) 40%, transparent);
        background: var(--araa-accent-soft);
        color: var(--araa-text);
    }

    .araa-theme-menu__swatch {
        display: inline-flex;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid var(--araa-border-strong);
        border-radius: 7px;
    }

    .araa-theme-menu__swatch i {
        width: 12px;
        height: 22px;
        display: block;
    }

    .araa-theme-menu__name {
        flex: 1;
    }

    .araa-theme-menu__check {
        color: var(--araa-accent);
        font-size: 12px;
        opacity: 0;
    }

    .araa-theme-menu__item.is-active .araa-theme-menu__check {
        opacity: 1;
    }

    .araa-theme-menu__title--sub {
        margin-top: 6px;
        border-top: 1px solid var(--araa-border);
    }

    .araa-theme-menu__layout {
        width: 38px;
        height: 24px;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--araa-border-strong);
        border-radius: 7px;
        color: var(--araa-accent);
        font-size: 13px;
    }
}

/* Page progress bar: shown while the next page loads (main app and cashier) */
@media screen {
    .araa-page-progress {
        width: 0;
        height: 3px;
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        z-index: 2000;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(90deg, var(--araa-accent), var(--araa-gold));
        box-shadow: 0 0 10px color-mix(in srgb, var(--araa-accent) 60%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: width 1.6s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 200ms ease;
    }

    .araa-page-progress.is-loading {
        width: 82%;
        opacity: 1;
    }
}
/* Floating UI that araa-operations.js adds to <body> must never print: invoices are printed from
   these same pages, and outside @media screen the theme menu would show as plain text. */
@media print {
    .araa-theme-menu,
    .araa-page-progress,
    .araa-nav-flyout,
    .araa-nav-mega,
    .araa-command {
        display: none !important;
    }
}

/* ARAA theme: the original ARAA look, matching css/araa.css on the stock light interface.
   Teal #10b1b4 for the header, buttons and table heads; white side menu with gray links and
   the blue (#004eeb) active item; gray-100 page; Cairo font. */
html[data-araa-theme="araa"] {
    --araa-font: 'Cairo', Tahoma, Arial, sans-serif;
    --araa-bg: #eef2f6;
    --araa-bg-soft: #f8fafc;
    --araa-surface: #ffffff;
    --araa-surface-raised: #ffffff;
    --araa-surface-muted: #f8fafc;
    --araa-border: #e3e8ef;
    --araa-border-strong: #cdd5df;
    --araa-text: #000000;
    --araa-text-soft: #111111;
    --araa-muted: #3a3f45;
    --araa-accent: #10b1b4;
    --araa-accent-strong: #0e9a9d;
    --araa-accent-soft: rgba(16, 177, 180, 0.12);
    --araa-accent-ink: #ffffff;
    --araa-btn-bg: #10b1b4;
    --araa-btn-ink: #ffffff;
    --araa-gold: #10b1b4;
    --araa-gold-soft: rgba(16, 177, 180, 0.12);
    --araa-gold-ink: #0b7f82;
    --araa-rail: #ffffff;
    --araa-rail-pattern: none;
    --araa-rail-border: #e3e8ef;
    --araa-rail-text: #000000;
    --araa-rail-text-strong: #000000;
    --araa-rail-muted: #111111;
    --araa-rail-hover: #eef2f6;
    --araa-rail-active-bg: #e3e8ef;
    --araa-rail-active-text: #004eeb;
    --araa-rail-indicator: #10b1b4;
    --araa-chart-palette: #10b1b4, #004eeb, #5fd3d6, #f2a54a, #ef5b6b;
    --araa-pos-multi: #10b1b4;
    --araa-pos-multi-ink: #ffffff;
    --araa-pattern: none;
    --araa-watermark: none;
    --araa-shadow: 0 12px 30px rgba(18, 25, 38, 0.08);
    --araa-shadow-soft: 0 4px 14px rgba(18, 25, 38, 0.06);
}

@media screen {
    /* Teal header bar with white content, as in the original header. */
    html[data-araa-theme="araa"] .araa-topbar {
        --araa-bg: #10b1b4;
        --araa-bg-soft: rgba(255, 255, 255, 0.14);
        --araa-surface: rgba(255, 255, 255, 0.14);
        --araa-surface-raised: rgba(255, 255, 255, 0.18);
        --araa-surface-muted: rgba(255, 255, 255, 0.12);
        --araa-border: rgba(255, 255, 255, 0.22);
        --araa-border-strong: rgba(255, 255, 255, 0.32);
        --araa-text: #ffffff;
        --araa-text-soft: rgba(255, 255, 255, 0.92);
        --araa-muted: rgba(255, 255, 255, 0.8);
        --araa-accent: #ffffff;
        --araa-accent-soft: rgba(255, 255, 255, 0.18);
        --araa-gold: #ffffff;
        --araa-gold-ink: #ffffff;
        border-bottom-color: transparent !important;
    }

    /* Dropdowns opened from the header keep the normal light colours. */
    html[data-araa-theme="araa"] .araa-topbar .araa-notifications__panel,
    html[data-araa-theme="araa"] .araa-topbar .araa-user-menu__panel {
        --araa-bg: #eef2f6;
        --araa-bg-soft: #f8fafc;
        --araa-surface: #ffffff;
        --araa-surface-raised: #ffffff;
        --araa-surface-muted: #f8fafc;
        --araa-border: #e3e8ef;
        --araa-border-strong: #cdd5df;
        --araa-text: #000000;
        --araa-text-soft: #111111;
        --araa-muted: #3a3f45;
        --araa-accent: #10b1b4;
        --araa-accent-soft: rgba(16, 177, 180, 0.12);
        --araa-gold: #10b1b4;
        --araa-gold-ink: #0b7f82;
    }

    /* Teal logo strip at the top of the white side menu. */
    html[data-araa-theme="araa"] .araa-sidebar .araa-brand {
        background: #10b1b4;
        border-bottom-color: transparent;
    }

    html[data-araa-theme="araa"] .araa-sidebar .araa-brand__copy strong,
    html[data-araa-theme="araa"] .araa-sidebar .araa-brand__copy small {
        color: #ffffff !important;
    }

    /* Table heads: teal background with the dark text, as css/araa.css did. */
    html[data-araa-theme="araa"] .araa-app-shell table > thead > tr > th {
        background: #10b1b4 !important;
        border-bottom-color: #0e9a9d !important;
        color: #000000 !important;
    }

    /* Cashier screen: araa-pos.css is switched off for this theme, so the original screen shows as it
       was. Only the pieces added since then need a word: the original navy of "سند صرف" (it was an
       inline style) and the Hijri chip, which the original header did not have. */
    html[data-araa-theme="araa"] body.araa-pos-shell #add_due {
        background-color: #201d77ed !important;
        border-color: #201d77ed !important;
        color: #ffffff !important;
    }

    html[data-araa-theme="araa"] body.araa-pos-shell .araa-pos-hijri {
        display: none !important;
    }

    /* Login brand panel in the ARAA teal. */
    html[data-araa-theme="araa"] .araa-login__brand {
        --araa-rail: #10b1b4;
        --araa-rail-text: #ffffff;
        --araa-rail-text-strong: #ffffff;
        --araa-rail-muted: rgba(255, 255, 255, 0.85);
        --araa-rail-indicator: #ffffff;
    }

    /* Top menu layout: the menu bar itself is the teal bar, and the header below it is light. */
    @media (min-width: 1024px) {
        html[data-araa-theme="araa"][data-araa-nav="top"] .araa-sidebar {
            --araa-rail: #10b1b4;
            --araa-rail-border: rgba(255, 255, 255, 0.2);
            --araa-rail-text: #ffffff;
            --araa-rail-text-strong: #ffffff;
            --araa-rail-muted: rgba(255, 255, 255, 0.9);
            --araa-rail-hover: rgba(255, 255, 255, 0.14);
            --araa-rail-active-bg: rgba(255, 255, 255, 0.22);
            --araa-rail-active-text: #ffffff;
            --araa-rail-indicator: #ffffff;
        }

        html[data-araa-theme="araa"][data-araa-nav="top"] .araa-topbar {
            --araa-bg: #ffffff;
            --araa-bg-soft: #f8fafc;
            --araa-surface: #ffffff;
            --araa-surface-raised: #ffffff;
            --araa-surface-muted: #f8fafc;
            --araa-border: #e3e8ef;
            --araa-border-strong: #cdd5df;
            --araa-text: #000000;
            --araa-text-soft: #111111;
            --araa-muted: #3a3f45;
            --araa-accent: #10b1b4;
            --araa-accent-soft: rgba(16, 177, 180, 0.12);
            --araa-gold: #10b1b4;
            --araa-gold-ink: #0b7f82;
            border-bottom-color: #e3e8ef !important;
        }
    }
}

/* Strong, dark text in every light theme: body text black, secondary text (table cells, menu links)
   near-black, small hints dark gray. Dark themes keep their light text. */
html[data-araa-mode="light"] {
    --araa-text: #000000;
    --araa-text-soft: #111111;
    --araa-muted: #3a3f45;
}

/* Bolder text across the program: layouts/partials/css.blade.php sets body to 600 !important;
   the app and the cashier screen use 700 (the class makes these rules win). Bold text stays bold. */
body.araa-app-shell,
body.araa-pos-shell {
    font-weight: 700 !important;
}

body.araa-app-shell .araa-sidebar .araa-nav-link {
    font-weight: 700 !important;
}

/* Placeholders (inputs and select2) were the last pale text: darker, still lighter than real values. */
html[data-araa-mode="light"] ::placeholder {
    color: #5b6168 !important;
    opacity: 1;
}

html[data-araa-mode="light"] .select2-container .select2-selection__placeholder {
    color: #5b6168 !important;
}