/* ============================================================
   tokens.css — DNAXpro design tokens (colors, spacing, radius, shadow,
   typography). Split out of the former monolithic site.css (Phase 1
   foundation). All new CSS must consume these variables — no new hex
   colors or magic spacing/radius/shadow numbers.

   Palette: DNAxPRO corporate identity — Black #030303, Graphite #111111,
   Gold #F6B40C, Blue #2F8EDB, White #FFFFFF, Gray #B9B9B9. Applied as a
   LIGHT working-page theme (white/`--bg` page surfaces) with the identity's
   black reserved for chrome (sidebar) and headings, gold reserved for
   accents/active-states/Pending — never as a page or card background.
   Dark-mode readiness: every color below is a plain custom property on
   :root, so a future `:root[data-theme="dark"] { --bg: ...; }` override
   block is a drop-in addition — not built yet (planned, not this pass).
   ============================================================ */

@import url('../fonts/fonts.css');   /* خطوط محلية (Cairo، Inter، Manrope): لا اعتماد على الإنترنت */

/* ============================================================
   Responsive breakpoint scale (Phase: Responsive Audit foundation).
   CSS custom properties can't be interpolated inside `@media` conditions,
   so this is a literal-value CONTRACT, not `var()`-based — every new/edited
   `@media` rule across the design-system files uses only these six values:

     480px  — phone
     640px  — large phone / small tablet portrait
     768px  — iPad portrait
     1024px — iPad landscape / sidebar collapses to off-canvas here
     1280px — small laptop
     1536px — laptop / QHD-ish

   Values already baked into legacy-pages.css (700/800/900/1100/1200 etc.)
   are left as-is — that file is append-only, never reorder/rewrite its
   rules (see CLAUDE.md).
   ============================================================ */

:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --primary: #030303;        /* Black — chrome, sidebar, primary buttons */
    --primary-dark: #111111;   /* pressed/hover state of primary (Graphite) */
    --primary-light: var(--info-bg);
    --secondary: #111111;      /* Graphite — sidebar hover wash, secondary chrome */
    --accent: #F6B40C;         /* Gold — active markers, dividers, group labels, Pending */
    --accent-hover: #D99F0A;
    --accent-rgb: 246,180,12;
    --grid-cell-border: var(--border);            /* حدّ خلية الشبكة المؤطَّرة في الحالة العادية */
    --grid-cell-border-focus: var(--accent-hover); /* حدّها عند التركيز/التحرير: يتغيّر اللون فقط، لا الأبعاد (فلا يتغيّر ارتفاع الصف) */
    --accent-bg: rgba(246,180,12,.16);  /* pale gold surface tint — selected rows/nodes, gold wash backgrounds */

    /* DataGrid / TreeList header — one gold identity shared by every
       DevExtreme grid/tree (see components.css). Smoke-gray ink for the
       column titles, sort/filter icons, dividers and bottom rule; ink is
       darker than --text2 so it clears the contrast bar against the bright
       gold. The face is a shallow top→foot gradient (accent → accent-hover)
       for depth, lifted by a hairline top highlight — restrained, not
       decorative. */
    --grid-header-bg: var(--accent);
    --grid-header-bg-foot: var(--accent-hover);
    --grid-header-ink: #3A3A3A;
    --grid-header-line: rgba(0,0,0,.16);
    --grid-header-highlight: rgba(255,255,255,.30);
    --grid-header-hover: rgba(0,0,0,.06);
    --grid-header-sorted: rgba(0,0,0,.05);
    --grid-header-shadow: 0 1px 0 rgba(0,0,0,.05), 0 3px 8px -4px rgba(0,0,0,.18);

    /* Unified data-row height for every grid/tree. Sized to the in-cell
       editor's rendered height (vendor input min-height 33px + our editor-
       cell padding + 1px slack) so a row keeps the SAME height whether a
       cell is focused/editing or idle — no shrink on blur. `height` on a
       table cell is a minimum, so wrapped multi-line content still grows. */
    --grid-row-h: 42px;

    /* Unified header-row height. Tall enough to hold a two-line wrapped
       column title (.68rem × 1.4 line-height × 2 + 7px block padding ≈
       45px) so 1-line and 2-line titles render at the SAME height instead
       of the header jumping per column. Still a minimum — a rare 3-line
       title grows its own header. */
    --grid-header-h: 46px;

    /* Unified cell spacing — ONE inline pad and ONE block pad for every
       content cell (header, data, editor) in DataGrid and TreeList, so a
       column reads at the same left edge whether its cell is idle or being
       edited, and DataGrid/TreeList match each other.
         idle cell text  : --grid-cell-px (12)
         editor cell text : --grid-editor-cell-px (5) + the editor input's
                            own 7px inset = 12  → identical x-position.
       Editor block pad is kept smaller so the ~33px editor still fits
       inside --grid-row-h without regrowing the row. */
    --grid-cell-px: 12px;
    --grid-cell-py: 6px;
    --grid-editor-cell-px: 5px;
    --grid-editor-cell-py: 4px;

    /* Boxed-cell grids (every cell its own bordered box — DNAX.Grid.baseOptions and the voucher line grids).
       Row = box + 2× block padding, so ONE number drives the row, the box, the focus frame and the editors.
       Was 52px rows / 36px boxes with 10.9px text; ERP norm for dense entry grids is 36–40px rows with 12–14px text. */
    --grid-boxed-row-h: 38px;
    --grid-boxed-cell-py: 3px;
    --grid-boxed-box-h: calc(var(--grid-boxed-row-h) - 2 * var(--grid-boxed-cell-py));
    --grid-fs: 13px;          /* grid cell text and in-cell editors */
    --grid-head-fs: 12px;     /* column titles */

    /* Form fields: the VALUE is the prominent thing, the label is quiet (Fiori / Dynamics hierarchy). */
    --field-label-fs: 12px;
    --field-label-fw: 500;
    --field-value-fs: 14px;

    /* ── Compatibility aliases (existing CSS references these directly) ── */
    --blue: var(--info);
    --blue-dark: #1D6FC0;
    --blue-light: var(--info-bg);
    --sidebar: var(--primary);
    --sidebar2: var(--secondary);

    /* ── Surfaces / borders ─────────────────────────────────── */
    --bg: #F8F9FA;
    --surface: #FFFFFF;
    --border: #E5E5E5;
    --border-2: #D0D0D0;

    /* ── Text ───────────────────────────────────────────────── */
    --text1: #030303;   /* primary text / headings */
    --text2: #5A5A5A;   /* secondary text */
    --text3: #6B6B6B;
    --muted: #B9B9B9;
    --muted-rgb: 185,185,185;

    /* ── Status ─────────────────────────────────────────────── */
    --success: #16A34A;
    --success-bg: #DCFCE7;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;
    --danger: #DC2626;
    --danger-bg: #FEE2E2;
    --info: #2F8EDB;
    --info-bg: #DDEDFB;
    --purple: #7C3AED;
    --purple-bg: #EDE9FE;
    --orange: #EA580C;
    --orange-bg: #FFEDD5;
    --indigo: #4F46E5;
    --indigo-bg: #E0E7FF;
    --pink: #DB2777;
    --pink-bg: #FCE7F3;

    /* ── Resource palette (scheduler/timeline color-coding: doctors,
       rooms, equipment — anything colored by "which one", not by status) ── */
    --resource-color-1: #2563EB;
    --resource-color-2: #059669;
    --resource-color-3: #D97706;
    --resource-color-4: #DC2626;
    --resource-color-5: #7C3AED;
    --resource-color-6: #0891B2;
    --resource-color-7: #DB2777;
    --resource-color-8: #65A30D;
    --resource-color-9: #4F46E5;
    --resource-color-10: #EA580C;
    --resource-color-none: #64748B;

    /* ── Layout ─────────────────────────────────────────────── */
    --sidebar-w: 260px;
    --topbar-h: 52px;

    /* ── Radius ─────────────────────────────────────────────── */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    /* ── Shadow ─────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(11,31,58,.05);
    --shadow-sm: 0 1px 4px rgba(11,31,58,.08);
    --shadow: 0 2px 8px rgba(11,31,58,.10);
    --shadow-md: 0 4px 16px rgba(11,31,58,.12);
    --shadow-lg: 0 8px 32px rgba(11,31,58,.16);

    /* ── Spacing scale (4px base) ───────────────────────────── */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 10px;
    --space-4: 14px;
    --space-5: 20px;
    --space-6: 28px;

    /* ── Typography scale ───────────────────────────────────── */
    --fs-xs: .75rem;
    --fs-sm: .825rem;
    --fs-base: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Legacy aliases kept so nothing silently breaks */
    --primary2: var(--primary);
    --primary3: var(--primary-light);
    --blue2: var(--blue-light);
    --text: var(--text1);
}