/* ================================
   _theme.css — Design System (8pt Grid + Themeable)
   ================================ */

/* Core tokens — Softer Greenish (darker) */
:root {
    /* Palette */
    --color-white: #F2F7F4; /* أبيض مُخضّر بدل #FFFFFF */
    --color-muted-green: #2d8040; /* أغمق قليلاً */
    --color-muted-yellow: #FFB84D;
    --color-ink: #1B3A5F;
    --color-muted-blue: #82AECF;
    /* Derived */
    --color-bg: #E6F1EC; /* خلفية عامة أخضر مبيّض */
    --color-surface: #E2ECE7; /* أسطح/بطاقات */
    --color-ink-weak: #47524B;
    --color-ink-soft: #5F6C64;
    --color-border: #C8DBD0;
    --color-focus: #2F2F2F1A;
    --color-success: #7FB38F;
    --color-danger: #C96B6B;
    --color-warning: var(--color-muted-yellow);
    --color-info: var(--color-muted-blue);
    /* Section washes (موازنة طفيفة) */
    --sage-50: #E8F1EC;
    --sage-100: #DEEBE4;
    --sage-150: #D2E3DA;
    --sand-50: #FFF1D6;
    --sand-75: #FDEABF;
    --inkwash-50: #EEF2F0;
    --inkwash-75: #E9EDEC;
    --bluewash-50: #E6F0F4;
    /* Typography */
    --font-sans: "Alexandria", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
    /* Type scale */
    --fs-12: clamp(11px, 0.72vw, 12px);
    --fs-14: clamp(12px, 0.85vw, 14px);
    --fs-16: clamp(14px, 1.0vw, 16px);
    --fs-18: clamp(16px, 1.1vw, 18px);
    --fs-20: clamp(18px, 1.25vw, 20px);
    --fs-24: clamp(20px, 1.6vw, 24px);
    --fs-28: clamp(22px, 2.0vw, 28px);
    --fs-32: clamp(24px, 2.4vw, 32px);
    /* 8pt spacing */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    --space-12: 64px;
    --space-16: 128px;
    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-3: 0 6px 20px rgba(0,0,0,0.08);
    /* Z-layers */
    --z-nav: 1000;
    --z-dropdown: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    /* Containers */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-med: 220ms ease;
    --transition-slow: 360ms ease;
}


/* ===== Base ===== */
html {
    font-size: 14px;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--font-sans);
    color: #1B3A5F;
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Type utilities */
.h1 {
    font-size: var(--fs-32);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FFB84D;
}

.h2 {
    font-size: var(--fs-28);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFB84D;
}

.h3 {
    font-size: var(--fs-24);
    font-weight: 700;
    color: #FFB84D;
}

.h4 {
    font-size: var(--fs-20);
    font-weight: 700;
    color: #FFB84D;
}

.lead {
    font-size: var(--fs-18);
    color: #2d8040;
}

.muted {
    color: #2d8040;
}

/* Spacing helpers (8pt) */
.p-0 {
    padding: var(--space-0)
}

.p-1 {
    padding: var(--space-1)
}

.p-2 {
    padding: var(--space-2)
}

.p-3 {
    padding: var(--space-3)
}

.p-4 {
    padding: var(--space-4)
}

.p-5 {
    padding: var(--space-5)
}

.p-6 {
    padding: var(--space-6)
}

.p-7 {
    padding: var(--space-7)
}

.p-8 {
    padding: var(--space-8)
}

.p-9 {
    padding: var(--space-9)
}

.p-10 {
    padding: var(--space-10)
}

.p-12 {
    padding: var(--space-12)
}

.p-16 {
    padding: var(--space-16)
}

.mt-2 {
    margin-top: var(--space-2)
}

.mb-2 {
    margin-bottom: var(--space-2)
}

.ms-2 {
    margin-inline-start: var(--space-2)
}

.me-2 {
    margin-inline-end: var(--space-2)
}

.gap-2 {
    gap: var(--space-2)
}

.gap-3 {
    gap: var(--space-3)
}

.gap-4 {
    gap: var(--space-4)
}

.gap-6 {
    gap: var(--space-6)
}

.gap-8 {
    gap: var(--space-8)
}

.container-xl {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* Surfaces */
.surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card-soft {
    background: linear-gradient(180deg,#FFFFFF 0%,#FBFBFB 100%);
}

/* Focus ring */
:where(button,.btn,input,select,textarea,a,[tabindex]):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-ink);
    transition: box-shadow var(--transition-fast);
}

/* Links */
a {
    color: #FFB84D;
    text-decoration: none;
}

    a:hover {
        color: #FFB84D;
        text-decoration: underline;
    }

/* Buttons */
.btn {
    --btn-bg: var(--color-muted-green);
    --btn-color: #1C2A1D;
    --btn-bd: transparent;
    --btn-bg-hover: #96B59A;
    --btn-shadow: var(--shadow-2);
    --btn-radius: var(--radius-md);
    --btn-pad-y: var(--space-2);
    --btn-pad-x: var(--space-4);
    font-weight: 700;
    border-radius: var(--btn-radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid var(--btn-bd);
    box-shadow: var(--btn-shadow);
    transition: transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-med);
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-3);
    }

    .btn:active {
        transform: translateY(0);
        box-shadow: var(--shadow-1);
    }

.btn-primary {
    --btn-bg: #FFB84D;
    --btn-color: #1B3A5F;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: #E2CF76;
}

    .btn-primary:hover {
        background: #1B3A5F;
    }

    .btn-primary:disabled {
        opacity: .6;
    }

.btn-secondary {
    background: var(--color-muted-green);
    color: #1C2A1D;
   
}

.btn-ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-border);
}

    .btn-ghost:hover {
        background: #F5F6F6;
    }

/* Badges */
.badge {
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.badge-success {
    background: var(--color-success);
    color: #10361E;
}

.badge-danger {
    background: var(--color-danger);
    color: #3B1212;
}

.badge-info {
    background: var(--color-info);
    color: #0F2940;
}

/* Navbar / Footer */
.navbar {
    background: linear-gradient(180deg,var(--color-muted-green) 0%,#97B39E 100%);
    box-shadow: var(--shadow-2);
}

.navbar-brand, .navbar-nav .nav-link {
    color: #0E2016;
    font-weight: 700;
}

    .navbar-nav .nav-link.active, .nav-pills .nav-link.active {
        color: #0E2016;
        background: rgba(255,255,255,.35);
        border-radius: var(--radius-sm);
    }

.footer {
    background: linear-gradient(180deg,#97B39E 0%, var(--color-muted-green) 100%);
    color: #0E2016;
    line-height: 60px;
}

/* Cards / Tables */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    font-weight: 800;
}

.table-hover tbody tr:hover {
    background: #FAFAFA;
}

.table thead th {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink-weak);

}

.table-compact td, .table-compact th {
    color: #2d8040;
    padding: 10px 12px;
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    background: #FFFFFF;
}

    .form-control:focus, .form-select:focus {
        border-color: #C7D6CB;
        box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #9DB7AA;
    }

.form-check-input:focus {
    box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #9DB7AA;
}

/* Alerts */
.alert {
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
}

.alert-warning {
    background: #FFF9DC;
    border-color: #F4E7A3;
    color: #2A291B;
}

.alert-success {
    background: #EDF6F0;
    border-color: #BFD8C6;
    color: #1B2B20;
}

.alert-danger {
    background: #FDEEEF;
    border-color: #E4B9BF;
    color: #3B161A;
}

.alert-info {
    background: #EDF3F8;
    border-color: #C3D3E2;
    color: #112433;
}

/* Tabs / Pills */
.nav-pills .nav-link {
    font-weight: 700;
    color: var(--color-ink);
}

    .nav-pills .nav-link.active {
        color: #0E2016;
        background: rgba(255,255,255,.35);
        border: 1px solid #D9E5DC;
    }

/* Breadcrumbs */
.breadcrumb {
    --crumb-color: var(--color-ink-soft);
    --crumb-sep: "/";
    color: var(--crumb-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: var(--crumb-sep);
}

/* Links muted */
.link-muted {
    color: var(--color-ink-soft);
}

    .link-muted:hover {
        color: var(--color-ink);
    }

/* Sections */
.section {
    margin-block: var(--space-10);
}

.section-title {
    font-size: var(--fs-24);
    font-weight: 800;
    margin-bottom: var(--space-4);
    border-inline-start: 6px solid var(--color-muted-yellow);
    padding-inline-start: var(--space-3);
}

.section--band {
    background: linear-gradient(180deg,var(--sage-100) 0%,#FFFFFF 100%);
}

.section--band-2 {
    background: linear-gradient(180deg,var(--inkwash-50) 0%,#FFFFFF 100%);
}

.section--sage {
    background: linear-gradient(180deg,var(--sage-100) 0%,#FFFFFF 100%);
}

.section--sage-strong {
    background: linear-gradient(180deg,var(--sage-150) 0%,var(--sage-50) 100%);
}

.section--sand {
    background: linear-gradient(180deg,var(--sand-50) 0%,#FFFFFF 100%);
}

.section--inkwash {
    background: linear-gradient(180deg,var(--inkwash-50) 0%,#FFFFFF 100%);
}

.section--bluewash {
    background: linear-gradient(180deg,var(--bluewash-50) 0%,#FFFFFF 100%);
}

.band-inner {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    padding: var(--space-8);
}

/* Empty state */
.empty {
    background: linear-gradient(180deg,#FFFFFF 0%,#FBFBFB 100%);
    border: 1px dashed #D7DBDD;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    color: var(--color-ink-soft);
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 10px;
    background: #2d8040;
    color: #1B3A5F;
    transition: transform 160ms ease;
}

    .chip .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-muted-blue);
    }

    .chip:hover {
        background: #FFB84D;
        color: #1B3A5F;
        transform: translateY(-2px) scale(1.01);
    }

/* Progress */
.progress, .progress-bar {
    border-radius: var(--radius-sm);
}

.progress-bar {
    background: var(--color-muted-green);
}

/* Helpers */
.grid-8 {
    display: grid;
    gap: var(--space-2);
}

.grid-16 {
    display: grid;
    gap: var(--space-4);
}

.grid-24 {
    display: grid;
    gap: var(--space-6);
}

.lift {
    transition: transform var(--transition-med), box-shadow var(--transition-med);
}

    .lift:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-3);
    }

.sticky-top {
    top: env(safe-area-inset-top);
}

/* Modals & Toasts */
.modal-content {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    border: 1px solid var(--color-border);
}

.toast {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

/* KPI card */
.kpi {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
}

    .kpi .value {
        font-size: var(--fs-28);
        font-weight: 800;
    }

    .kpi .label {
        color: var(--color-ink-soft);
    }

/* Accent bar */
.accent-bar {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--color-muted-yellow),var(--color-muted-green),var(--color-muted-blue));
}

/* Wave divider */
.shape-divider {
    position: relative;
    height: 36px;
    margin-top: -36px;
}

    .shape-divider svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .shape-divider path {
        fill: var(--sage-100);
    }

/* Hero overlay + reveal + first-paint stagger */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 70% at 50% 40%, rgba(0,0,0,.28), rgba(0,0,0,.50));
}

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition-med), transform var(--transition-med);
}

    .reveal.in {
        opacity: 1;
        transform: none;
    }

.hero-section .h1, .hero-section .lead, .hero-section .btn, .hero-section .trust-item {
    opacity: 0;
    transform: translateY(12px);
}

.hero-section.in .h1 {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 80ms;
}

.hero-section.in .lead {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 160ms;
}

.hero-section.in .btn.btn-primary {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 240ms;
    animation: ctaPulse 1200ms ease 1100ms 1 both;
}

.hero-section.in .btn.btn-secondary {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 300ms;
}

.hero-section.in .trust-item:nth-child(1) {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 380ms;
}

.hero-section.in .trust-item:nth-child(2) {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 460ms;
}

.hero-section.in .trust-item:nth-child(3) {
    opacity: 1;
    transform: none;
    transition: all 360ms ease 540ms;
}

@keyframes ctaPulse {
    0% {
        transform: scale(1);
        box-shadow: var(--shadow-3);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

    100% {
        transform: scale(1);
        box-shadow: var(--shadow-3);
    }
}

/* Footer scaffold fix & sticky footer */
footer.border-top.footer {
    background: linear-gradient(180deg,#97B39E 0%, #A3BFA2 100%) !important;
    color: #0E2016 !important;
    border-top: 0 !important;
    padding: 16px 0 !important;
    flex-shrink: 0;
}

    footer.border-top.footer a {
        color: #0E2016 !important;
        text-decoration: underline;
    }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main, main[role="main"] {
    flex: 1 0 auto;
}

/* Print */
@media print {
    .btn, .navbar, .footer, .toast, .modal {
        display: none !important;
    }

    .card, .surface {
        box-shadow: none !important;
    }
}

/* Card tint system */
:root {
    --card-bg: #F9FAFA; /* default card background */
    --card-bd: #E6E6E6; /* default card border */
}

/* Apply to all card-like blocks */
.surface,
.card,
.card-soft {
    background: var(--card-bg) !important;
    border-color: var(--card-bd) !important;
}

/* Section-based overrides */
.section--sage {
    --card-bg: #EEF3EF; /* soft sage */
    --card-bd: #D8E6DE;
}

.section--inkwash {
    --card-bg: #F2F3F3; /* warm gray */
    --card-bd: #E2E6E8;
}

.section--bluewash {
    --card-bg: #ECF2F7; /* soft blue */
    --card-bd: #D7E4F0;
}

.section--sand {
    --card-bg: #FFF6D9; /* soft sand (warm) */
    --card-bd: #F0E2AE;
}

/* ===== NAV:  ===== */
.topbar {
    background: #2d8040;
    box-shadow: var(--shadow-2);
    z-index: var(--z-nav);
    transition: background var(--transition-med), box-shadow var(--transition-med);
}

    .topbar.scrolled {
        background: #2d8040;
        box-shadow: 0 4px 18px rgba(0,0,0,.08);
    }

.brand {
    color: #1B3A5F;
    font-weight: 800;
    letter-spacing: -.2px;
}

    .brand .text-emph {
        text-decoration: underline;
        text-underline-offset: 2px;
    }


.nav-quick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.btn-icon {
    --size: 44px;
    width: var(--size);
    height: var(--size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #0E2016;
   
    background: rgba(14,32,22,.08);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn-icon--ring {
    
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 2px 8px rgba(0,0,0,.06);
    background: rgba(14,32,22,.10);
}

.btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
    background: rgba(14,32,22,.16);
}

.btn-icon svg {
    width: 22px;
    height: 22px;
    opacity: .95;
}


.btn-logout {
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.18);
    color: #1B3A5F;
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

    .btn-logout:hover {
        transform: translateY(-1px);
        background: #FFB84D;
        box-shadow: var(--shadow-3);
    }

/* Mobile icon strip ( */
.nav-quick--mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

    .nav-quick--mobile .btn-icon {
        scroll-snap-align: center;
        --size: 42px;
    }

@media (max-width: 991.98px) {
    .btn-icon {
        --size: 40px
    }
}

/* ===== FOOTER MINI:  ===== */
.footer-mini {
    background: #2d8040;
    color: #FFB84D;
    border-top: 1px solid #CADACF;
}

    .footer-mini .brand {
        color: #1B3A5F;
        font-weight: 800;
    }

    .footer-mini .social a {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.30);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline: 4px;
        background: #1B3A5F;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

        .footer-mini .social a:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-3);
            background: rgba(14,32,22,.18);
        }

    .footer-mini svg {
        width: 20px;
        height: 20px;
    }

/* ===========================================
   Polishing Pack — Controls, Cards, Tables, FX
   =========================================== */

/* ---------- Text fields / selects ---------- */
.form-control,
.form-select,
textarea.form-control {
    font-size: var(--fs-16);
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: border-color var(--transition-med), box-shadow var(--transition-med), transform var(--transition-fast);
}

    .form-control:hover,
    .form-select:hover,
    textarea.form-control:hover {
        border-color: #d6e1d9;
    }

    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus {
        border-color: #c2d7c8;
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px #9DB7AA33;
        transform: translateY(-1px);
    }

    .form-control[readonly],
    .form-control:disabled,
    .form-select:disabled {
        background: #f8f9f9;
        color: var(--color-ink-soft);
        opacity: .85;
        cursor: not-allowed;
    }

.is-valid.form-control,
.is-valid.form-select {
    border-color: #86c59b
}

.is-invalid.form-control,
.is-invalid.form-select {
    border-color: #e2a1a1
}

@keyframes shakeX {
    10%, 90% {
        transform: translateX(-1px)
    }

    20%, 80% {
        transform: translateX(2px)
    }

    30%, 50%, 70% {
        transform: translateX(-4px)
    }

    40%, 60% {
        transform: translateX(4px)
    }
}

.form-shake {
    animation: shakeX 360ms ease
}

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    isolation: isolate; /* لتمكين ripple */
    user-select: none;
}

    .btn .icon {
        inline-size: 1.1em;
        block-size: 1.1em;
    }

        .btn .icon:first-child {
            margin-inline-end: .5rem
        }

        .btn .icon:last-child {
            margin-inline-start: .5rem
        }

.btn-outline {
    --btn-bg: transparent;
    --btn-color: var(--color-ink);
    background: transparent;
    color: var(--btn-color);
    border-color: #cfd9d2;
}

    .btn-outline:hover {
        background: #f5f7f6
    }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .btn-ghost:hover {
        background: #f3f5f4
    }

.btn-sm {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-weight: 700
}

.btn-lg {
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    font-weight: 800
}

.btn[disabled],
.btn:disabled {
    opacity: .55;
    cursor: not-allowed
}

/* Loading state (data-loading أو .is-loading) */

.btn.is-loading,
.btn[data-loading="true"] {
    pointer-events: none;
    opacity: .9;
}

    .btn.is-loading::after,
    .btn[data-loading="true"]::after {
        content: "";
        position: absolute;
        inset-inline-end: 10px;
        inset-block: 50%;
        translate: 0 -50%;
        inline-size: 16px;
        block-size: 16px;
        border-radius: 50%;
        border: 2px solid #0000;
        border-inline-start-color: #0006;
        border-block-start-color: #0006;
        animation: spin .7s linear infinite;
    }

@keyframes spin {
    to {
        rotate: 360deg
    }
}

/* Ripple container (JS يضيف span.ripple) */
.btn, .chip, .card, .surface {
    overflow: hidden
}

.ripple-ink {
    position: absolute;
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
    background: #0002;
    animation: ripple .55s ease-out forwards;
    mix-blend-mode: multiply;
}

@keyframes ripple {
    from {
        opacity: .25;
        scale: .2
    }

    to {
        opacity: 0;
        scale: 3.2
    }
}

/* ---------- Cards ---------- */
.card, .surface, .card-soft {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}

    .card.hover, .surface.lift, .card-soft.lift {
        will-change: transform
    }

    .card.selectable {
        cursor: pointer
    }

        .card.selectable.is-selected {
            outline: 2px solid #f3f5f4;
        }

.tilt-hover {
    transform-style: preserve-3d;
}

    .tilt-hover .tilt-item {
        transform: translateZ(16px)
    }

/* ---------- Tables ---------- */
.table {
    --row-hover: #f7f9f8;
    border-color: var(--color-border);
    background: #fff;
}

    .table thead th {
        color: #1B3A5F;
        font-weight: 800;
        letter-spacing: .2px;
        background: linear-gradient(180deg,#fbfbfb 0,#f4f7f5 100%);
    }

    .table tbody tr {
        color: #2d8040;
        transition: background var(--transition-fast), transform var(--transition-fast)
    }

.table-hover tbody tr:hover {
    background: var(--row-hover)
}

.table-zebra tbody tr:nth-child(odd) {
    background: #fcfdfc;
}

.table-compact td, .table-compact th {
    padding: 10px 14px
}

.table-clickable tbody tr {
    cursor: pointer
}

    .table-clickable tbody tr:active {
        transform: scale(.997)
    }

/* Mobile stack table (optional) */
@media (max-width: 680px) {
    .table-stack thead {
        display: none
    }

    .table-stack tbody tr {
        display: grid;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px dashed var(--color-border)
    }

    .table-stack td {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px
    }

        .table-stack td::before {
            content: attr(data-label);
            color: var(--color-ink-soft);
            font-weight: 700
        }
}

/* ---------- Micro animations & utilities ---------- */
.reveal-up {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease
}

    .reveal-up.in {
        opacity: 1;
        transform: none
    }

.pop-in {
    animation: popIn .28s cubic-bezier(.2,.9,.35,1.2) both
}

@keyframes popIn {
    from {
        scale: .97;
        opacity: 0
    }

    to {
        scale: 1;
        opacity: 1
    }
}

.glow {
    box-shadow: 0 0 0 0 rgba(157,183,170,.0);
    transition: box-shadow var(--transition-med);
}

    .glow:hover {
        box-shadow: 0 6px 28px rgba(157,183,170,.28)
    }

.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,#eee,#f5f5f5 20%,#eee 40%);
    color: transparent
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        animation: shimmer 1.2s linear infinite;
        background: linear-gradient(90deg, #0000, #ffffff55, #0000);
        transform: translateX(-100%);
    }

@keyframes shimmer {
    to {
        transform: translateX(100%)
    }
}

/* ---------- Toast pop & modal slide ---------- */
.toast {
    animation: toastIn .24s ease both
}

@keyframes toastIn {
    from {
        translate: 0 8px;
        opacity: 0
    }

    to {
        translate: 0 0;
        opacity: 1
    }
}

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ===== Groups Details — Page scoped polish ===== */
.gd .card {
    border-radius: var(--radius-xl);
}

.gd .card-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg,#fbfbfb 0%,#f4f7f5 100%);
    border-bottom: 1px solid var(--color-border);
}

.gd .table-responsive {
    position: relative;
    max-height: 62vh;
}

.gd .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg,#fbfbfb 0%,#f4f7f5 100%);
    border-bottom: 1px solid var(--color-border);
}

.gd .table tbody tr:hover {
    background: var(--sage-50);
}

.gd .th-sort a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--color-ink);
}

    .gd .th-sort a:hover {
        text-decoration: none;
        color: var(--color-ink);
    }

.gd .sort-arrow {
    opacity: .55;
    font-size: .9em;
}

.gd .ellipsis {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd .pager-sm .pagination {
    margin-bottom: .25rem;
}

.gd .pager-sm .page-link {
    padding: .25rem .55rem;
    font-size: .85rem;
}

.gd .pager-caption {
    color: var(--color-ink-soft);
    font-size: .875rem;
}

/* Tiny top progress bar used by Details page */
#ajaxProgress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--color-muted-yellow), var(--color-muted-green));
    box-shadow: 0 0 0 1px #00000012, 0 6px 18px rgba(0,0,0,.08);
    width: 0%;
    opacity: 0;
    transition: width .35s ease, opacity .2s ease;
    z-index: var(--z-overlay);
    display: none;
}

#drillResults {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 280px;
    overflow: auto;
}

    #drillResults .list-group-item:hover {
        background: #fafafa;
    }


/* ===== HERO — صورة كاملة خلف النص بدون فراغات ===== */
.hero-section {
    --hero-h: 76vh; /* ارتفاع الهيرو */
    min-height: var(--hero-h);
    display: grid;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 0%; /* لا تترك فراغ أسفل الهيرو */
}

/* الخلفية (الصورة تغطي كامل المساحة) */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-section .hero-bg {
    width: 100%;
    height: 120%;
    object-fit: cover; /* تملأ كامل الهيرو بدون تمدد مشوّه */
    object-position: 72% 50%; /* حرك الكرة لليمين خلف العنوان (عدّلها 65–80%) */
    filter: saturate(.98) contrast(1.02);
}

/* تدرّج لطيف لزيادة مقروئية النص */
.hero-section .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(70% 70% at 28% 38%, rgba(0,0,0,.20), transparent 48%), linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
}

/* نص الهيرو فوق الصورة */
.hero-content {
    position: relative;
    z-index: 2;
}

/* أزل الموجة إن كانت تصنع فراغاً */
.shape-divider {
    display: none;
}

/* لا تجعل أول سيكشن بعد الهيرو يضيف مسافة من الأعلى */
.hero-section + .section {
    margin-top: 0;
}

/* استجابات بسيطة لتوسيط أفضل على الشاشات الأصغر */
@media (max-width: 1200px) {
    .hero-section {
        --hero-h: 70vh;
    }

        .hero-section .hero-bg {
            object-position: 66% 50%;
        }
}

@media (max-width: 992px) {
    .hero-section {
        --hero-h: 64vh;
    }

        .hero-section .hero-bg {
            object-position: 60% 50%;
        }
}