:root {
    /* Brand palette */
    --c-bg: #F4F5FA;
    --c-bg-soft: #ECEEF6;
    --c-surface: #FFFFFF;
    --c-surface-2: #FAFBFD;
    --c-border: #ECEEF3;
    --c-border-strong: #E1E4EC;

    --c-text: #1F2138;
    --c-text-soft: #4A5072;
    --c-text-muted: #8B91A8;
    --c-text-faint: #B9BFD3;

    --c-primary: #6B5BFF;
    --c-primary-soft: #EFEBFF;
    --c-primary-2: #8676FF;

    --c-sidebar: #161826;
    --c-sidebar-soft: #1E2030;
    --c-sidebar-hover: #262838;
    --c-sidebar-text: #C8CADB;
    --c-sidebar-text-muted: #6E7186;

    --c-green: #27C96E;
    --c-green-soft: #E2F8EC;
    --c-blue: #3A7BFF;
    --c-blue-soft: #E4EEFF;
    --c-amber: #FFB547;
    --c-amber-soft: #FFF4DE;
    --c-red: #FF5252;
    --c-red-soft: #FFE2E2;
    --c-orange: #FF7A45;
    --c-orange-soft: #FFE7DA;
    --c-teal: #22C7C7;
    --c-teal-soft: #DCF6F6;
    --c-pink: #FF7AB1;
    --c-pink-soft: #FFE3F0;
    --c-purple: #8B5CF6;
    --c-purple-soft: #EEE6FF;

    --shadow-card: 0 1px 2px rgba(20, 22, 38, 0.04), 0 2px 8px rgba(20, 22, 38, 0.04);
    --shadow-pop: 0 8px 30px rgba(20, 22, 38, 0.12);

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

    --font-ar: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-en: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;

    --sidebar-w: 250px;
    --sidebar-collapsed-w: 78px;
    --topbar-h: 78px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--c-text);
    background: var(--c-bg);
    font-family: var(--font-ar);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body.ltr { font-family: var(--font-en); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

.scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar::-webkit-scrollbar-thumb { background: #D8DCE8; border-radius: 99px; }
.scrollbar::-webkit-scrollbar-track { background: transparent; }

/* Generic chip / pill helpers used across the app */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0;
}
.pill.green { background: var(--c-green-soft); color: var(--c-green); }
.pill.red   { background: var(--c-red-soft);   color: var(--c-red); }
.pill.blue  { background: var(--c-blue-soft);  color: var(--c-blue); }
.pill.amber { background: var(--c-amber-soft); color: var(--c-amber); }

/* tiny utility */
.flex { display: flex; }
.flex-1 { flex: 1; }
.align-center { align-items: center; }
.justify-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }

.text-muted { color: var(--c-text-muted); }
.text-faint { color: var(--c-text-faint); }
.text-soft  { color: var(--c-text-soft); }

.up   { color: var(--c-green); }
.down { color: var(--c-red); }