@charset "UTF-8";

@font-face {
    font-family: 'Noto Kufi Arabic';
    src: url('/fonts/NotoKufiArabic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-family: 'Noto Kufi Arabic', Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    --font-ui: 'Noto Kufi Arabic', Arial, sans-serif;
    --action-accent: #2e3370;
    --overview-accent: #294c70;
    --overview-active: #3879b0;
    --overview-neutral: #64748b;
    --panel-radius: 4px;
    --action-radius: 4px;
    color: var(--text);
    background: var(--canvas);
    font-synthesis: none;
    --brand-purple: #2e3370;
    --brand-purple-hover: #1d214e;
    --brand-gold: #d8b52b;
    --primary: var(--brand-purple);
    --on-brand: #fff;
    --on-brand-muted: #e9e4f7;
    --shadow-card: none;
    --green: var(--primary);
    --text: hsl(240 6% 10%);
    --text-secondary: #71717a;
    --muted: hsl(240 4% 46%);
    --line: hsl(240 6% 90%);
    --surface: #fff;
    --popover: #fff;
    --sidebar-bg: #fafafa;
    --sidebar-text: #3f3f46;
    --selection: #f1f6fe;
    --success: #16a249;
    --warning: #db7706;
    --danger: #dc2828;
    --popup-close-background: #e66b59;
    --popup-close-hover: #d75b4b;
    --popup-close-focus: #d75b4b;
    --dialog-backdrop: rgb(16 37 29 / 0.64);
    --dialog-shadow: 0 20px 70px rgb(0 0 0 / 0.24);
    --surface-soft: hsl(240 5% 96%);
    --canvas: #fff;
    --card: var(--surface);
    --control-bg: var(--canvas);
    --control-text: var(--text);
    --control-border: var(--line);
    --control-border-hover: hsl(240 5% 65%);
    --control-placeholder: var(--muted);
    --control-focus: var(--primary);
    --control-focus-ring: transparent;
    --action-primary: var(--brand-purple);
    --action-primary-text: #fff;
    --grid-header: #f1f5f9;
    --grid-odd: #fafafa;
    --grid-hover: #f0eff8;
    --grid-selected: #e9e7f5;
    --action-primary-hover: var(--brand-purple-hover);
    --action-primary-focus: var(--brand-purple-hover);
    --action-primary-focus-ring: color-mix(in srgb, var(--primary), transparent 75%);
    --action-secondary-bg: var(--surface);
    --action-secondary-text: var(--primary);
    --workspace-chrome-bg: #fafafa;
    --workspace-header-bg: rgb(250 250 250 / 90%);
    --workspace-chrome-border: var(--line);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

body {
    margin: 0;
    min-width: 0;
    min-height: 100vh;
    background: var(--canvas);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Match the ERP reference's emerald dark appearance. */

html[data-theme='dark'] {
    color-scheme: dark;
    --overview-accent: #527fa8;
    --overview-active: #4389bd;
    --overview-neutral: #475569;
    --primary: #36d39f;
    --text: #f3f5f7;
    --text-secondary: #d5d8dd;
    --muted: #b0b6bf;
    --line: #363b44;
    --surface: #21242c;
    --popover: #252932;
    --sidebar-bg: #13161b;
    --workspace-chrome-bg: var(--sidebar-bg);
    --workspace-header-bg: var(--sidebar-bg);
    --sidebar-text: #b0b6bf;
    --selection: #31363f;
    --success: #3ecc72;
    --warning: #f6ae31;
    --danger: #d94545;
    --popup-close-background: #e66b59;
    --popup-close-hover: #d75b4b;
    --popup-close-focus: #ffb4ab;
    --surface-soft: hsl(220 12% 18%);
    --canvas: #13161b;
    --control-bg: var(--canvas);
    --control-border-hover: hsl(220 11% 40%);
    --control-focus: var(--primary);
    --action-primary: var(--primary);
    --action-primary-text: hsl(158 64% 10%);
    --action-primary-hover: hsl(160 64% 46%);
    --action-primary-focus: var(--action-primary-hover);
    --grid-header: hsl(220 13% 18%);
    --grid-odd: hsl(220 14% 13%);
    --grid-hover: hsl(220 12% 22%);
    --grid-selected: var(--selection);
    --shadow-card: 0 8px 28px #00000014;

    scrollbar-color: #62626a #18181b;
}

html[data-theme='dark'] * {
    scrollbar-color: #62626a #18181b;
}

/* Shared screen type scale; print keeps each component's original fallback. */
@media screen {
    :root {
        --ui-text-size: clamp(0.929rem, 0.9rem + 0.12vw, 1rem);
        --ui-title-size: clamp(1.286rem, 1.1rem + 0.65vw, 1.714rem);
        --ui-section-size: clamp(1.071rem, 1rem + 0.25vw, 1.214rem);
        --ui-metric-size: clamp(1.571rem, 1.4rem + 0.6vw, 1.929rem);
    }

    body {
        font-size: var(--ui-text-size);
        line-height: 1.65;
    }
}