/* Site-wide tokens and base rules (external file — no @import) */
:root {
    color-scheme: light;
    --bg-body: #f4f7fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.9);
    --bg-subtle: #f1f5f9;
    --border-color: rgba(226, 232, 240, 0.9);
    --border-light: #e2e8f0;
    --border-lighter: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: rgba(37, 99, 235, 0.1);
    --accent-lighter: #eff6ff;
    --accent2: #7c3aed;
    --accent2-light: rgba(124, 58, 237, 0.1);
    --primary: var(--accent);
    --primary-light: var(--accent-light);
    --secondary: var(--accent2);
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    --success: #059669;
    --warning: #d97706;
    --danger: #e11d48;
    --info: #0284c7;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 24px -12px rgba(15, 23, 42, 0.18);
    --shadow-lg: 0 20px 40px -18px rgba(15, 23, 42, 0.22);
    --bs-primary: var(--accent);
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
}

html[dir="rtl"],
html[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="ltr"],
html[dir="ltr"] body {
    font-family: 'Inter', 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

body {
    background:
        radial-gradient(ellipse at 8% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 38%),
        radial-gradient(ellipse at 92% 8%, rgba(124, 58, 237, 0.05) 0%, transparent 36%),
        var(--bg-body);
    color: var(--text-primary);
}

.bg-light {
    background-color: var(--bg-body) !important;
}

.bg-primary,
.btn-primary {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
}

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

.border-primary {
    border-color: var(--accent) !important;
}

.btn-primary,
.btn-modern,
.btn-accent {
    box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.75);
}

.btn-primary:hover,
.btn-modern:hover,
.btn-accent:hover {
    filter: saturate(1.05) brightness(0.98);
}

.card,
.admin-card,
.prem-card,
.prem-card-elevated {
    background-color: var(--bg-card);
    border-color: var(--border-light);
}

.badge.bg-primary,
.bg-primary.bg-opacity-10 {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
}

i[class^="fa"],
i[class*=" fa-"],
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    font-style: normal;
    line-height: 1;
}

/* Responsive — mobile, tablet, desktop (no horizontal page scroll) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    overscroll-behavior-x: none;
    position: relative;
}

@media (max-width: 992px) {
    html,
    body {
        touch-action: pan-y;
    }
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

.admin-wrapper,
.admin-main,
.admin-content,
.site-footer.legacy-site-footer {
    max-width: 100%;
}

.admin-content .row > [class*="col-"] {
    min-width: 0;
}

.admin-card .sec-head {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-card .sec-head h2 {
    min-width: 0;
    flex: 1 1 auto;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overflow-x: auto;
}

.table-responsive > .table {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .admin-wrapper {
        overflow-x: hidden;
        overflow-x: clip;
        width: 100%;
        max-width: 100%;
        position: relative;
    }

    .admin-main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
        margin-inline: 0 !important;
    }

    .admin-content {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100%;
    }

    .admin-header {
        max-width: 100%;
        overflow-x: hidden;
    }

    .header-actions {
        max-width: 100%;
        min-width: 0;
    }

    /* القائمة المغلقة لا تُرسم خارج الشاشة (لا translate = لا سحب أفقي) */
    .admin-sidebar:not(.show) {
        display: none !important;
        transform: none !important;
    }

    .admin-sidebar.show {
        display: flex !important;
        visibility: visible !important;
        inset-inline-end: 0;
        inset-inline-start: auto;
        z-index: 1045;
    }

    html[dir="ltr"] .admin-sidebar.show {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }

    .sidebar-toggle-btn {
        display: inline-flex !important;
        visibility: visible !important;
        z-index: 1100;
        flex-shrink: 0;
    }

    .admin-header {
        z-index: 1090;
    }

    body.sidebar-open {
        overflow: hidden;
        touch-action: none;
    }

    body.sidebar-open .admin-main {
        touch-action: none;
    }
}

@media (max-width: 992px) {
    .admin-header {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .admin-header-title {
        font-size: 1.05rem;
        max-width: min(52vw, 240px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .lang-switch-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 576px) {
    .admin-content {
        padding: 1rem 0.75rem !important;
    }

    .admin-header {
        padding-inline: 0.75rem !important;
    }

    .stat-info .value {
        font-size: 1.35rem;
    }

    .table-admin thead th,
    .table-admin tbody td {
        padding: 0.65rem 0.75rem;
        font-size: 0.82rem;
    }

    .notifications-dropdown {
        width: min(340px, calc(100% - 1rem)) !important;
        max-width: calc(100% - 1rem);
    }
}

@media (max-width: 380px) {
    .admin-header-title {
        max-width: 42vw;
        font-size: 0.95rem;
    }

    .lang-switch-btn span:not(.lang-switch-flag) {
        display: none;
    }
}