/**
 * Dalvue HR - Design System
 * مصدر الحقيقة الواحد لتوكنز الألوان — يُحمّل عالمياً من base_tw.html
 */

:root {
    /* ═══════════════════════════════════════════════════════════════ */
    /* Brand tokens — teal enterprise + coral accent                     */
    /* ═══════════════════════════════════════════════════════════════ */
    --color-text: #0e3543;
    --color-page: #f6f8f8;
    --color-brand-primary: #0f4d5c;
    --color-brand-secondary: #a6c4c0;
    --color-brand-accent: #E37A5E;
    --color-brand-light: #3d6b74;
    --color-brand-dark: #0a3a45;
    --color-brand-muted: #e8f0ef;

    /* Legacy alias */
    --color-brand: var(--color-brand-primary);

    /* Surface */
    --color-surface: #ffffff;
    --color-surface-alt: #eef2f2;
    --color-table-header: rgb(30 76 91 / 6%);
    --color-table-shell-border: rgb(34 80 94 / 11%);
    /* Toolbar cards (header bar + body) — slightly stronger than flush table shell */
    --color-card-shell-border: rgb(30 76 91 / 16%);

    /* Border */
    --color-border: #d4e0de;
    --color-border-focus: #0f4d5c;

    /* Text */
    --color-text-strong: #0e3543;
    --color-text-base: #1a4a56;
    --color-text-muted: #5a7a82;
    --color-text-subtle: #8aa3a8;

    /* Status — separate semantic system, harmonized saturation/lightness */
    --color-status-success: #1D8A6A;
    --color-status-warning: #C47A2A;
    --color-status-danger: #C44A4A;
    --color-status-info: #2A7A9E;

    /* Legacy status aliases */
    --color-success: var(--color-status-success);
    --color-warning: var(--color-status-warning);
    --color-danger: var(--color-status-danger);
    --color-info: var(--color-status-info);

    /* ═══════════════════════════════════════════════════════════════ */
    /* Tailwind primary scale (teal)                                     */
    /* ═══════════════════════════════════════════════════════════════ */
    --primary-50: #eef6f7;
    --primary-100: #e8f0ef;
    --primary-200: #c5dbd8;
    --primary-300: #a6c4c0;
    --primary-400: #3d6b74;
    --primary-500: #156674;
    --primary-600: #0f4d5c;
    --primary-700: #0c414e;
    --primary-800: #0a3a45;
    --primary-900: #082e38;

    --primary-color: var(--primary-600);
    --primary-light: var(--primary-400);
    --primary-dark: var(--primary-800);
    --primary-gradient: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
    --primary-gradient-dark: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);

    /* Accent scale (coral) */
    --accent-50: #fdf3f0;
    --accent-100: #fbe8e2;
    --accent-200: #f5cfc4;
    --accent-300: #eeb5a5;
    --accent-400: #e9957f;
    --accent-500: #E37A5E;
    --accent-600: #c9654a;
    --accent-700: #a8503b;
    --accent-800: #873f2f;
    --accent-900: #6b3226;
    --accent-color: var(--accent-500);

    /* Sidebar */
    --sidebar-bg: var(--primary-800);
    --sidebar-bg-light: var(--primary-700);
    --sidebar-active: var(--primary-600);
    --sidebar-hover: rgba(15, 77, 92, 0.15);

    --header-gradient: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);

    /* Text legacy aliases */
    --text-primary: var(--color-text-strong);
    --text-secondary: var(--color-text-muted);
    --text-muted: var(--color-text-subtle);
    --text-primary-new: var(--color-text-strong);
    --text-secondary-new: var(--color-text-muted);

    /* Background legacy aliases */
    --bg-page: var(--color-page);
    --bg-light: var(--color-surface-alt);
    --bg-white: var(--color-surface);

    /* Border legacy aliases */
    --border-color: var(--color-border);
    --border-light: var(--color-surface-alt);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(14, 53, 67, 0.08);
    --shadow-md: 0 4px 12px rgba(14, 53, 67, 0.08);
    --shadow-lg: 0 10px 24px rgba(14, 53, 67, 0.1);
    --shadow-primary: 0 4px 14px rgba(15, 77, 92, 0.25);
    --shadow-card: var(--shadow-md);
    --shadow-float: var(--shadow-lg);

    /* Border Radius — conservative professional scale (see design.md) */
    --radius-sm: 0.25rem;   /* 4px — badges, checkboxes, tiny controls */
    --radius-md: 0.375rem;  /* 6px — inputs, buttons, standard controls */
    --radius-lg: 0.5rem;    /* 8px — cards, containers, dropdowns */
    --radius-xl: 0.75rem;   /* 12px — modals, large panels */
    --radius-full: 9999px;  /* avatars, pills, circular badges */

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 56px;

    --header-height: 52px;

    /* Status backgrounds (badges/alerts) */
    --status-success: var(--color-status-success);
    --status-success-bg: rgba(29, 138, 106, 0.1);
    --status-success-text: var(--color-status-success);

    --status-warning: var(--color-status-warning);
    --status-warning-bg: rgba(196, 122, 42, 0.1);
    --status-warning-text: var(--color-status-warning);

    --status-error: var(--color-status-danger);
    --status-error-bg: rgba(196, 74, 74, 0.1);
    --status-error-text: var(--color-status-danger);

    --status-info: var(--color-status-info);
    --status-info-bg: rgba(42, 122, 158, 0.1);
    --status-info-text: var(--color-status-info);

    /* Icon semantic pairings */
    --icon-blue: var(--color-status-info);
    --icon-blue-bg: var(--status-info-bg);

    --icon-amber: var(--color-status-warning);
    --icon-amber-bg: var(--status-warning-bg);

    --icon-green: var(--color-status-success);
    --icon-green-bg: var(--status-success-bg);

    --icon-red: var(--color-status-danger);
    --icon-red-bg: var(--status-error-bg);

    --icon-brand: var(--color-brand-primary);
    --icon-brand-bg: var(--color-brand-muted);
}

body {
    font-family: 'RB', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-text);
    background-color: var(--color-page);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-strong);
    font-weight: 700;
}

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-gradient-primary {
    background: var(--primary-gradient) !important;
}

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-primary { box-shadow: var(--shadow-primary) !important; }

.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
/* Legacy aliases — templates migrated; kept as CDN safety net only */
.rounded-2xl,
.rounded-3xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Light modal skeleton pulse (approval detail loading) */
@keyframes dalvue-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.dalvue-modal-skeleton {
    animation: dalvue-skeleton-pulse 2.2s ease-in-out infinite;
}

/* Modal shell — clip header/footer to rounded corners (CDN-safe fallback) */
.dalvue-modal-shell {
    overflow: hidden;
}

/* Desktop modals: offset from fixed sidebar to prevent overlap */
@media (min-width: 1024px) {
    body > .fixed.inset-0[id$="Modal"],
    body > .fixed.inset-0[id$="modal"] {
        padding-inline-start: var(--command-content-margin-closed, 132px);
    }
}

/* Card with toolbar header — CDN-safe border (pairs with Tailwind `border`) */
.border-card-shell {
    border-color: var(--color-card-shell-border) !important;
}

/* Table tokens — CDN-safe fallbacks when compiled Tailwind is off */
.bg-table-header {
    background-color: var(--color-table-header) !important;
}
.border-table-shell {
    border-color: var(--color-table-shell-border) !important;
}

.rounded-t-xl {
    border-top-left-radius: var(--radius-xl) !important;
    border-top-right-radius: var(--radius-xl) !important;
}

/* Filter-bar + input-with-icon tokens (design.md) — compiled-Tailwind safety net */
.min-w-\[240px\] {
    min-width: 240px;
}
.min-w-\[140px\] {
    min-width: 140px;
}
.ps-9 {
    padding-inline-start: 2.25rem;
}
.pe-9 {
    padding-inline-end: 2.25rem;
}
.end-3 {
    inset-inline-end: 0.75rem;
}
.start-3 {
    inset-inline-start: 0.75rem;
}

/*
 * Search icon lanes must win over Flowbite/global input padding shorthand
 * (runtime: padding was stuck at 8px 12px, overriding .ps-9 / .pe-9).
 * Icon inset: 1rem from the start edge — start-3 (0.75rem) sits too tight
 * against the border when .start-3 is missing from the Tailwind bundle.
 */
[data-dalvue-search] > input,
[data-dalvue-search] input[type="text"] {
    padding-inline-start: 2.75rem !important;
    padding-inline-end: 2.5rem !important;
}
[data-dalvue-search] > .absolute.inset-y-0:not([data-dalvue-search-clear]) {
    inset-inline-start: 1rem !important;
    inset-inline-end: auto !important;
}
[data-dalvue-search] [data-dalvue-search-clear] {
    inset-inline-end: 0.75rem !important;
    inset-inline-start: auto !important;
}

/* Kill native search clear — always use type="text" + data-dalvue-search-clear */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Edge/IE native password reveal — conflicts with our Lucide eye toggle */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

[data-dalvue-search-clear][hidden] {
    display: none !important;
}

/*
 * App header — explicit layout (not Tailwind hidden/sm:flex).
 * Flowbite loads after the Tailwind bundle and can keep .hidden as display:none
 * even when sm:flex is present. Match command_sidebar mobile breakpoint (639px).
 *
 * Row (RTL): [menu] [welcome flex-1] [actions]
 * Welcome stays in-row on mobile (truncate); only the user name/chevron hide.
 */
.app-header-menu-slot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.app-header-welcome {
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    min-width: 0;
}

.app-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.app-header-user-meta {
    display: block;
}

@media (max-width: 639px) {
    .app-header-user-meta {
        display: none !important;
    }
}

/* Saudi Riyal symbol — inherits currentColor, scales with font-size */
.sar-symbol {
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    background-color: currentColor;
    -webkit-mask: url("../images/currency/saudi-riyal.350a36e13825.svg") center / contain no-repeat;
    mask: url("../images/currency/saudi-riyal.350a36e13825.svg") center / contain no-repeat;
    vertical-align: -0.12em;
    flex-shrink: 0;
}

/* Setup readiness CTA — CSP-safe hover (replaces inline handlers) */
.dv-setup-cta { background: #0f4d5c; }
.dv-setup-cta:hover { background: #0a3a45; }