/* ================================================================
   IDENTITY / identity.css — «برونز اليرموك» brand layer
   ----------------------------------------------------------------
   Sits ON TOP of the token foundation (variables/colors) and the
   structural CSS (header/layout/components). Loaded AFTER site.min.css.
   Palette is sampled from FINAL_LOGO: gold→bronze ramp over warm
   paper, with a deep ink header carrying the mark.
   ================================================================ */

:root {
    /* Header surface (ink) — overridden per-theme below */
    --header-bg:         linear-gradient(180deg, #211B14 0%, #171310 100%);
    --header-fg:         #F3E9D6;
    --header-fg-muted:   #B7A88E;
    --header-accent:     #D6A249;
    --header-hairline:   linear-gradient(90deg, transparent, #9C6F2E 18%, #D6A249 50%, #9C6F2E 82%, transparent);

    /* Brand surfaces */
    --paper-grain: radial-gradient(circle at 18% 12%, rgba(156,111,46,0.05), transparent 42%),
                   radial-gradient(circle at 88% 8%, rgba(214,162,73,0.045), transparent 46%);
    --bronze-fill: linear-gradient(180deg, #B6953E 0%, #9C6F2E 100%);
    --gold-fill:   linear-gradient(135deg, #E4B968 0%, #D6A249 45%, #B6953E 100%);
}

/* ================================================================
   1 · PAGE CANVAS — warm paper with a faint grain
   ================================================================ */
body {
    background-color: var(--color-bg-page);
    background-image: var(--paper-grain);
    background-attachment: fixed;
    color: var(--color-text-primary);
}

::selection {
    background: rgba(156,111,46,0.22);
    color: var(--brand-ink);
}

/* Slim, brand-tinted scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--brand-gold-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-gold-500), var(--brand-bronze-700));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--brand-bronze-700); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   2 · HEADER — deep ink bar carrying the gold mark
   ================================================================ */
.header {
    background: var(--header-bg);
    box-shadow: 0 2px 18px rgba(15,12,9,0.28);
    border-bottom: 1px solid rgba(156,111,46,0.35);
}
/* gold hairline that catches the eye under the bar */
.header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--header-hairline);
    pointer-events: none;
}

.header-brand-name { color: var(--header-fg); letter-spacing: .2px; }
.header-brand:hover .header-brand-name { color: var(--header-accent); }

/* mark sits on a soft gold disc so it reads on ink */
.header .header-logo {
    background: rgba(214,162,73,0.12);
    box-shadow: inset 0 0 0 1px rgba(214,162,73,0.35);
}

.header .erp-nav-toggle,
.header .erp-nav-link { color: var(--header-fg-muted); }
.header .erp-nav-toggle:hover,
.header .erp-nav-link:hover,
.header .erp-nav-item.open > .erp-nav-toggle {
    color: var(--header-accent);
    background: rgba(214,162,73,0.12);
}
.header .erp-nav-item.active > .erp-nav-toggle,
.header .erp-nav-item.active > .erp-nav-link {
    color: var(--header-accent);
    background: rgba(214,162,73,0.16);
}
.header .erp-nav > .erp-nav-item > .erp-nav-toggle::after { color: var(--header-fg-muted); }

/* header controls */
.header .language-toggle,
.header .theme-toggle,
.header .mobile-menu-btn {
    border-color: rgba(214,162,73,0.3);
    color: var(--header-fg-muted);
    background: rgba(255,255,255,0.02);
}
.header .language-toggle:hover,
.header .theme-toggle:hover,
.header .mobile-menu-btn:hover {
    border-color: var(--header-accent);
    color: var(--header-accent);
    background: rgba(214,162,73,0.12);
}
.header .language-toggle i,
.header .theme-toggle i,
.header .mobile-menu-btn svg { color: var(--header-fg-muted); }

/* user block */
.header .user-info { border-left-color: rgba(214,162,73,0.25); }
.header .user-name { color: var(--header-fg); }
.header .user-role { color: var(--header-fg-muted); }
.header .user-avatar {
    background: var(--gold-fill);
    color: #241C10;
    box-shadow: 0 0 0 2px rgba(214,162,73,0.35);
}

/* dropdown panels stay on paper — give them a bronze top edge */
.header .erp-nav-dropdown,
.user-dropdown-menu,
.language-dropdown-menu {
    border-top: 2px solid var(--brand-bronze-700);
}

/* mobile drawer inherits ink while open */
.header-nav.mobile-open { background: #171310; border-bottom-color: rgba(156,111,46,0.35); }
.header-nav.mobile-open .erp-nav-toggle,
.header-nav.mobile-open .erp-nav-link { color: var(--header-fg-muted); }
.header-nav.mobile-open .erp-nav-toggle:hover { color: var(--header-accent); }

/* ================================================================
   3 · PAGE HEADER / TITLE — bronze rule with a gold marker
   ================================================================ */
.page-header {
    border-bottom: 2px solid var(--color-border-default);
    position: relative;
    padding-bottom: var(--spacing-4);
}
.page-header::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; bottom: -2px;
    width: 72px; height: 2px;
    background: var(--gold-fill);
}
.page-title { color: var(--color-text-primary); font-weight: var(--font-weight-black); }
.page-title::first-letter { color: var(--brand-bronze-700); }

/* ================================================================
   4 · CARDS — paper heft + bronze reveal on hover
   ================================================================ */
.gs-card,
.card {
    box-shadow: 0 1px 0 rgba(28,24,20,0.04), var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.gs-card::before,
.card::before {
    content: "";
    position: absolute;
    inset-inline: 0; top: 0;
    height: 3px;
    background: var(--gold-fill);
    z-index: 1;
    opacity: 0;
    transform: scaleX(.3);
    transform-origin: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.gs-card:hover::before,
.card:hover::before { opacity: 1; transform: scaleX(1); }
.gs-card-header,
.card-header {
    background: linear-gradient(180deg, rgba(156,111,46,0.06), transparent);
    border-bottom-color: var(--color-border-subtle);
}

/* ================================================================
   5 · BUTTONS — bronze primary
   ================================================================ */
.btn-primary,
.gs-btn-primary {
    background: var(--bronze-fill);
    border: 1px solid var(--brand-bronze-900);
    color: #FFF7E8;
    box-shadow: 0 1px 2px rgba(28,24,20,0.18);
    transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary:hover,
.gs-btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(156,111,46,0.32);
}

/* ================================================================
   6 · TOOLBARS / TABLES / FORMS — bronze accents
   ================================================================ */
.toolbar { background: var(--color-bg-surface); border-color: var(--color-border-default); }

.table thead th,
.gs-table thead th {
    background: linear-gradient(180deg, rgba(156,111,46,0.07), rgba(156,111,46,0.03));
    color: var(--brand-bronze-900);
    border-bottom: 2px solid var(--brand-bronze-700);
}

/* ================================================================
   7 · DEVEXTREME — retint via the theme's own CSS variables
   ----------------------------------------------------------------
   dx.light defines its palette as --dx-* custom properties on :root.
   Overriding them here (identity.css loads last) recolors buttons,
   links, focus rings, editors and grids in one shot — no fragile
   widget selectors.
   ================================================================ */
:root {
    --dx-color-primary: var(--brand-bronze-700);
    --dx-color-link: var(--brand-bronze-700);
    --dx-color-text: var(--color-text-primary);
    --dx-color-icon: var(--color-text-secondary);
    --dx-color-border: var(--color-border-default);
    --dx-color-separator: var(--color-border-subtle);
    --dx-component-color-bg: var(--color-bg-surface);
    --dx-color-main-bg: var(--color-bg-surface);
    --dx-color-success: var(--color-success);
    --dx-color-warning: var(--color-warning);
    --dx-color-danger: var(--color-danger);
    --dx-border-radius: var(--radius-lg);
    --dx-datagrid-row-alternation-bg: rgba(156,111,46,0.04);
    --dx-texteditor-color-text: var(--color-text-primary);
    --dx-texteditor-color-label: var(--color-text-muted);
    --dx-color-spin-icon: var(--color-text-secondary);
}

.dx-widget { font-family: var(--font-family-base); }

/* filled (contained) buttons: bronze fill + warm hover */
.dx-button-mode-contained {
    background: var(--bronze-fill);
    border-color: var(--brand-bronze-900);
    color: #FFF7E8;
}
.dx-button-mode-contained.dx-state-hover {
    background: var(--brand-gold-600);
    border-color: var(--brand-bronze-900);
    color: #FFFDF8;
}
.dx-button-mode-contained.dx-state-focused {
    box-shadow: 0 0 0 3px rgba(156,111,46,0.28);
}
.dx-button-mode-outlined { border-color: var(--brand-bronze-700); color: var(--brand-bronze-700); }
.dx-button-mode-outlined.dx-state-hover { background: rgba(156,111,46,0.08); color: var(--brand-bronze-900); }
.dx-button-mode-text.dx-state-hover { background: rgba(156,111,46,0.08); }

/* editors: bronze focus ring */
.dx-texteditor.dx-state-focused .dx-texteditor-input-container,
.dx-texteditor.dx-state-focused {
    box-shadow: 0 0 0 1px var(--brand-bronze-700), 0 0 0 4px rgba(156,111,46,0.16);
    border-radius: var(--radius-md);
}

/* datagrid: warm header rule + bronze selection */
.dx-datagrid-headers .dx-text { color: var(--brand-bronze-900); font-weight: var(--font-weight-bold); }
.dx-datagrid .dx-datagrid-headers .dx-datagrid-content {
    background: linear-gradient(180deg, rgba(156,111,46,0.08), rgba(156,111,46,0.03));
}
.dx-datagrid .dx-data-row.dx-state-hover > td { background: rgba(214,162,73,0.12); }
.dx-datagrid .dx-selection > td { background: rgba(156,111,46,0.16) !important; }

/* tabs / popup */
.dx-tab.dx-tab-selected .dx-tab-text { color: var(--brand-bronze-700); font-weight: var(--font-weight-bold); }
.dx-overlay-wrapper .dx-popup { border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); }
.dx-popup-title { background: linear-gradient(180deg, rgba(156,111,46,0.08), transparent); }

/* ================================================================
   8 · DARK THEME — keep ink header, deepen it slightly
   ================================================================ */
[data-theme="dark"] {
    --header-bg: linear-gradient(180deg, #100D0A 0%, #080604 100%);
    --header-fg: #EDE4D3;
    --header-fg-muted: #9C8F78;
    --paper-grain: radial-gradient(circle at 18% 12%, rgba(214,162,73,0.05), transparent 42%),
                   radial-gradient(circle at 88% 8%, rgba(156,111,46,0.05), transparent 46%);
}
[data-theme="dark"] body { background-color: var(--color-bg-page); }
[data-theme="dark"] .gs-card { box-shadow: 0 1px 0 rgba(0,0,0,0.4), var(--gs-shadow-md); }

/* ================================================================
   9 · MOTION — respect reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .gs-card::before,
    .header .header-logo,
    .btn-primary, .gs-btn-primary { transition: none; }
    html { scroll-behavior: auto; }
}