/**
 * Design System Base Styles
 * Uses Tailwind theme values for consistent UI.
 */

:root {
    --primary: #0053db;
    --primary-dim: #0048c1;
    --primary-container: #dbe1ff;
    --on-primary-container: #0048bf;
    --background: #f7f9fb;
    --surface: #ffffff;
    --surface-container: #e8eff3;
    --surface-container-low: #f0f4f7;
    --surface-container-high: #e1e9ee;
    --on-surface: #2a3439;
    --on-surface-variant: #566166;
    --outline-variant: rgba(169, 180, 185, 0.2);
    --error: #9f403d;
}

[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--on-surface);
    /* Prevent horizontal scroll everywhere */
    overflow-x: hidden;
    max-width: 100vw;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-variant);
}

/* ─── Sidebar ──────────────────────────────────────────────── */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.2s;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    font-weight: 500;
    /* Prevent Arabic long words from breaking layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link:hover {
    background-color: var(--surface-container);
    color: var(--on-surface);
}

.sidebar-link.active {
    background-color: var(--surface);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 600;
    border-inline-end: 3px solid var(--primary);
}

/*
 * RTL Sidebar Fix:
 * In RTL mode Tailwind's -translate-x-full pushes the sidebar
 * the wrong way (off screen to the left instead of to the right).
 * We override with translateX(100%) to push it off the right edge.
 */
[dir="rtl"] #main-sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
}

[dir="rtl"] #main-sidebar.sidebar-open {
    transform: translateX(0) !important;
}

/* ─── Cards ─────────────────────────────────────────────────── */

.card-bento {
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid var(--outline-variant);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-bento:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Logical spacing utilities ──────────────────────────────── */
.ms-64 { margin-inline-start: 16rem; }
.ps-8 { padding-inline-start: 2rem; }
.start-0 { inset-inline-start: 0; }

/* ─── RTL Utilities ──────────────────────────────────────────── */

[dir="rtl"] .prose-en {
    direction: ltr;
    text-align: left;
}

/* Flip directional arrows in RTL */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* ─── Responsive table wrapper ───────────────────────────────── */

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

/* ─── Hide scrollbar utility ──────────────────────────────────── */

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Custom Scrollbar ────────────────────────────────────────── */

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.1); }

/* ─── Mobile responsive overrides ────────────────────────────── */

@media (max-width: 1023px) {
    /* Main content - sidebar is overlaid on mobile, not pushed */
    main.flex-1 {
        margin-inline-start: 0 !important;
    }

    /* Scale back aggressive padding */
    .lg\:p-12 { padding: 1.25rem; }
    .lg\:px-12 { padding-inline: 1.25rem; }

    /* Scale down large hero headings */
    .lg\:text-6xl { font-size: 2rem !important; line-height: 1.15 !important; }
    .lg\:text-5xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
}

@media (max-width: 640px) {
    /* Login card was fixed at 450px — go fluid on mobile */
    .login-card {
        width: calc(100vw - 2rem) !important;
        padding: 2rem !important;
        border-radius: 1.5rem !important;
    }

    /* Prevent stat/action row in dashboard header from overflowing */
    .dashboard-header-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Scale hero text for very small screens */
    h3.text-6xl,
    h3.text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    h1.text-5xl,
    h1.text-4xl {
        font-size: 1.5rem !important;
    }
}