/* ============================================================
   GLOBAL STYLES — دار التحفيظ Design System
   ============================================================ */

/* === Global RTL + Font === */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    background-color: #F5F5F5;
    overflow-x: hidden;
}

/* === Sidebar nav links active state === */
.mud-nav-link.nav-active,
.mud-nav-link.active {
    background: rgba(255, 165, 0, 0.15) !important;
    color: #FFA500 !important;
    border-right: 3px solid #FFA500;
}

.mud-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: .92rem !important;
    transition: all .2s ease;
}

.mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.mud-nav-group-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: .92rem !important;
}

/* === KPI Cards === */
.kpi-card {
    border-radius: 16px !important;
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

.kpi-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* === Data Tables === */
.mud-table-head .mud-table-cell {
    font-weight: 700 !important;
    background: #f8f9fa !important;
    color: #3C3A44 !important;
    font-size: .85rem;
}

.mud-table-row:hover td {
    background: #fff8ee !important;
}

/* === Page Header === */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-weight: 800 !important;
    color: #2b2a33 !important;
}

/* === Status Badges === */
.badge-active   { background: #d4edda; color: #155724; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.badge-inactive { background: #f8d7da; color: #721c24; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.badge-pending  { background: #fff3cd; color: #856404; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.badge-approved { background: #d4edda; color: #155724; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }

/* === Loading Spinner === */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* === Drawer RTL fix === */
.mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* === MudBlazor RTL overrides === */
.mud-appbar .mud-icon-button:first-child { margin-left: 8px; margin-right: -8px; }
.mud-input-label { font-family: 'Cairo', sans-serif !important; }
.mud-input { font-family: 'Cairo', sans-serif !important; }
.mud-button-label { font-family: 'Cairo', sans-serif !important; }

/* === Dialog === */
.mud-dialog-title {
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
}

/* === Chart container === */
.chart-card {
    border-radius: 16px !important;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }


/* ============================================================
   RESPONSIVE DESIGN SYSTEM
   Breakpoints (matches MudBlazor / Material Design):
     xs  → < 600px    (mobile phones)
     sm  → 600–959px  (tablets / large phones)
     md  → 960–1279px (small desktops / landscape tablets)
     lg  → ≥ 1280px   (desktops)
   ============================================================ */

/* ── Page Content Wrapper ──────────────────────────────────── */
/* Desktop  : 32px padding (≈ MudBlazor pa-4)                  */
/* Tablet   : 20px padding                                      */
/* Mobile   : 12px padding                                      */
.page-content-wrapper {
    padding: 32px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 959px) {
    .page-content-wrapper { padding: 20px 16px; }
}

@media (max-width: 599px) {
    .page-content-wrapper { padding: 12px 10px; }
}

/* ── Page Header ─────────────────────────────────────────────
   On mobile: title on top, action button below (full-width)   */
@media (max-width: 599px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 1rem;
    }

    .page-header > *:last-child {
        width: 100%;
    }

    /* Buttons inside page-header go full-width on mobile */
    .page-header .mud-button-root {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Slightly smaller title on mobile */
    .page-title { font-size: 1.15rem !important; line-height: 1.3 !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .page-title { font-size: 1.25rem !important; }
}

/* ── MudTable: horizontal scroll on small screens ───────────  */
/* MudBlazor already shows DataLabel cards on xs/sm,          */
/* but wide tables still need containment.                    */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Dialogs ─────────────────────────────────────────────────
   Dialogs fill more of the screen on mobile.                  */
@media (max-width: 599px) {
    /* MudDialog outer panel */
    .mud-dialog {
        margin: 6px !important;
        max-height: 96vh !important;
        border-radius: 12px !important;
    }

    /* Scrollable dialog body */
    .mud-dialog-content {
        padding: 12px 10px !important;
        overflow-y: auto;
        max-height: calc(96vh - 130px);
        -webkit-overflow-scrolling: touch;
    }

    /* Dialog title compact */
    .mud-dialog-title { padding: 12px 10px 8px !important; font-size: 1rem !important; }

    /* Dialog actions */
    .mud-dialog-actions { padding: 8px 10px !important; flex-wrap: wrap; gap: 8px; }
    .mud-dialog-actions .mud-button-root { flex: 1 1 auto; min-width: 100px; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .mud-dialog-content {
        max-height: calc(90vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── KPI Cards: compact padding on mobile ────────────────────  */
@media (max-width: 599px) {
    .kpi-card .mud-card-content { padding: 12px !important; }
    .kpi-icon-wrap {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        flex-shrink: 0;
    }
    /* Disable lift-hover on touch devices */
    .kpi-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }
}

/* ── MudCard: reduce padding on mobile ───────────────────────  */
@media (max-width: 599px) {
    .mud-card-content    { padding: 12px !important; }
    .mud-card-header     { padding: 12px 12px 8px !important; }
    .mud-card-actions    { padding: 8px 12px !important; }
}

/* ── MudAppBar: compact on mobile ───────────────────────────── */
@media (max-width: 599px) {
    /* Keep logo text from overflowing */
    .mud-appbar .mud-typography-h6 { font-size: 1rem !important; }

    /* Notification / user chips: hide username text on very small screens */
    .mud-chip.d-none { display: none !important; }
}

/* ── Filter Cards: gap between items ─────────────────────────  */
@media (max-width: 599px) {
    /* MudGrid already stacks xs="12" items, just ensure no side bleed */
    .mud-grid { margin: 0 !important; }
    .mud-grid-item { padding: 4px !important; }
}

/* ── Charts: always fill parent, never overflow ──────────────  */
.mud-chart svg,
.mud-chart canvas { max-width: 100% !important; }

/* ── Timeline page: compact on mobile ───────────────────────── */
@media (max-width: 599px) {
    .mud-timeline-item-content {
        padding: 4px 8px !important;
    }
    .mud-timeline-item-dot {
        margin: 0 4px !important;
    }
}

/* ── MudTable toolbar wraps on mobile ───────────────────────── */
@media (max-width: 599px) {
    .mud-toolbar { flex-wrap: wrap; gap: 6px; min-height: auto !important; padding: 8px !important; }
}

/* ── MudTabs: scrollable on mobile ──────────────────────────── */
.mud-tabs-tabbar { overflow-x: auto !important; flex-wrap: nowrap !important; }
.mud-tab-panel   { overflow-x: hidden; }

/* ── Prevent any element from overflowing horizontally ───────  */
.mud-paper,
.mud-card,
.mud-table-root { max-width: 100%; overflow-x: hidden; }

/* But let the table container itself scroll */
.mud-table-container { overflow-x: auto !important; }

/* ── Statistics / Info row cards ─────────────────────────────  */
@media (max-width: 599px) {
    /* Smaller stat numbers */
    .mud-typography-h5 { font-size: 1.2rem !important; }
    .mud-typography-h4 { font-size: 1.4rem !important; }
}

/* ── MudSelect / MudDatePicker full-width on mobile ──────────  */
@media (max-width: 599px) {
    .mud-input-control { width: 100% !important; }
}

/* ── Attendance sheet rows: compact on mobile ────────────────  */
@media (max-width: 599px) {
    .attendance-row { flex-direction: column; align-items: flex-start !important; gap: 6px; }
}

/* ── Touch device: disable hover-only animations ─────────────  */
@media (hover: none) {
    .kpi-card:hover      { transform: none !important; }
    .card-custom:hover   { transform: none !important; }
    .mud-table-row:hover td { background: transparent !important; }
}

/* ── MudDrawer: ensure body doesn't scroll behind overlay on mobile ── */
@media (max-width: 959px) {
    body.drawer-open { overflow: hidden; }
}

/* ── Page-level max-width guard ─────────────────────────────── */
/* Ensures no child element bleeds past viewport width          */
.page-content-wrapper > * { max-width: 100%; }

/* ── RTL-aware gap utilities ─────────────────────────────────  */
/* MudBlazor uses gap-N classes; ensure they work in RTL        */
.d-flex { flex-wrap: wrap; }
.d-flex.flex-nowrap { flex-wrap: nowrap !important; }

/* ── Divider spacing on mobile ───────────────────────────────  */
@media (max-width: 599px) {
    .mud-divider { margin: 6px 0 !important; }
}

/* ── MudIconButton minimum tap target (48px) on mobile ───────  */
@media (max-width: 599px) {
    .mud-icon-button {
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

/* ── Form section divider labels (e.g., "البيانات الأساسية") ──  */
.form-section-label {
    font-weight: 700;
    color: #3C3A44;
    font-size: .85rem;
    letter-spacing: .04rem;
    text-transform: uppercase;
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Responsive utility classes ──────────────────────────────  */
/* .hide-xs : hidden on mobile phones only */
@media (max-width: 599px)  { .hide-xs { display: none !important; } }
/* .hide-sm : hidden on tablet and below */
@media (max-width: 959px)  { .hide-sm { display: none !important; } }
/* .show-xs : visible only on mobile phones */
@media (min-width: 600px)  { .show-xs { display: none !important; } }
/* .show-sm : visible only on tablet and below */
@media (min-width: 960px)  { .show-sm { display: none !important; } }

/* ── Full-width buttons on mobile ────────────────────────────  */
@media (max-width: 599px) {
    .btn-full-xs { width: 100% !important; }
}

/* ===== 🆕 (2026-09-22) المساعد الذكي ===== */
.dt-assistant-fab {
    position: fixed !important;
    bottom: 24px;
    left: 24px;
    z-index: 1290;
    box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}
.dt-assistant-panel {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1350;   /* فوق الـ Drawer (1302) وتحت الـ Dialog (1400) */
    transform: translateY(20px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}
.dt-assistant-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.dt-assistant-head {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #3C3A44, #2b2a33);
    color: #fff;
}
.dt-assistant-title { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.dt-assistant-sub   { font-size: .72rem; opacity: .75; }
.dt-assistant-body {
    flex: 1; overflow-y: auto; padding: 12px;
    background: #f4f4f7;
    display: flex; flex-direction: column; gap: 8px;
}
.dt-assistant-foot {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-top: 1px solid #e5e5ea; background: #fff;
}
.dt-assistant-foot .mud-input-control { margin: 0 !important; }
.dt-msg { display: flex; }
.dt-msg.user { justify-content: flex-start; }
.dt-msg.assistant { justify-content: flex-end; }
.dt-bubble {
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: .88rem;
    line-height: 1.65;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.dt-msg.user .dt-bubble { background: #3C3A44; color: #fff; border-top-right-radius: 4px; }
.dt-msg.assistant .dt-bubble { background: #fff; color: #222; border-top-left-radius: 4px; }
.dt-bubble ul, .dt-bubble ol { margin: 2px 0 4px; padding-right: 18px; padding-left: 0; }
.dt-bubble li { margin: 1px 0; }
.dt-bubble code { background: #eee; border-radius: 4px; padding: 0 4px; font-size: .82rem; }
.dt-gap { height: 6px; }
.dt-suggestions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dt-suggestions .mud-chip { cursor: pointer; }
.dt-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dt-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.dt-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #9a9aa5;
    animation: dt-blink 1.2s infinite ease-in-out;
}
.dt-typing span:nth-child(2) { animation-delay: .2s; }
.dt-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dt-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 600px) {
    .dt-assistant-panel { bottom: 0; left: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .dt-assistant-fab { bottom: 16px; left: 16px; }
}
@media print { .dt-assistant-fab, .dt-assistant-panel { display: none !important; } }

/* 🆕 (2026-10-14) مؤشر تبويب MudBlazor 6 ينعكس خطأً في RTL — نخفيه ونميّز التبويب النشط بالخلفية */
.mud-tab-active-strong { background: #fff3e0 !important; font-weight: 700; }
/* MudBlazor 6.11 لا يدعم ActiveTabClass: التبويب النشط يُلوَّن بالـ CSS مباشرة (الشريط المنزلق مخفي في RTL). */
.tabs-strong .mud-tab.mud-tab-active { background: #fff3e0 !important; font-weight: 700; color: #e65100; box-shadow: inset 0 -3px 0 #ff9800; }