/* ==========================================================================
   Responsive — نقاط التوقف: 576 / 768 / 992 / 1440 (v3)
   الهدف: لا تمرير أفقي للصفحة على الجوال، أهداف لمس ≥ 44px، والجداول
   العريضة تُمرَّر داخل حاويتها فقط.
   ========================================================================== */

/* ---- Tablet & mobile (< 992px): الشريط الجانبي درج منزلق ---- */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(100%);
        box-shadow: none;
        width: min(86vw, 320px);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility 0s linear var(--duration-normal);
    }
    .app-sidebar.show {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
        visibility: visible;
        transition: transform var(--transition-normal), visibility 0s;
    }
    .sidebar-close-btn { display: inline-flex; align-items: center; justify-content: center; }

    .app-main { margin-right: 0 !important; }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(15, 23, 42, 0.45);
        z-index: var(--z-overlay);
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }
    .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
    body.sidebar-open { overflow: hidden; }

    .app-navbar { padding: 0 var(--space-4); }
    .app-container { padding: var(--space-5) var(--space-4); }
    .app-footer { padding: var(--space-4); }

    .page-header { align-items: flex-start; margin-bottom: var(--space-5); }
    .page-actions { width: 100%; }
}

/* ---- Small tablets / large phones (< 768px) ---- */
@media (max-width: 767.98px) {
    .page-title { font-size: var(--text-lg); }
    .kpi-card { padding: var(--space-4); gap: var(--space-3); }
    .kpi-value { font-size: var(--text-xl); }
    .kpi-icon-box { width: 40px; height: 40px; font-size: 1.05rem; }
    .app-card-body, .card-body { padding: var(--space-4); }
    .app-card-header, .card-header { padding: var(--space-3) var(--space-4); }
    .table-custom thead th, .table thead th,
    .table-custom tbody td, .table tbody td { padding: var(--space-2) var(--space-3); }
    .fs-4 { font-size: var(--text-xl) !important; }
    .p-5 { padding: var(--space-6) !important; }
    .p-4 { padding: var(--space-4) !important; }
}

/* ---- Phones (< 576px) ---- */
@media (max-width: 575.98px) {
    .user-name, .active-year-pill .label-long { display: none; }
    .active-year-pill { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }

    .page-actions > .btn, .page-actions > a.btn, .page-actions > form, .page-actions > form > .btn {
        flex: 1 1 auto;
    }
    .page-actions .btn span { white-space: nowrap; }

    .app-card-header, .card-header { flex-direction: column; align-items: stretch; }
    .filter-grid { grid-template-columns: 1fr; }
    .table-actions { justify-content: flex-start; }
    .pagination-container { flex-direction: column; align-items: center; text-align: center; }
    .app-footer { justify-content: center; text-align: center; }

    /* بطاقتا مؤشر في الصف: الأيقونة فوق الرقم */
    .kpi-card { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
    .kpi-value { font-size: var(--text-xl); }

    /* شبكات Bootstrap ذات الأعمدة الثابتة داخل الفلاتر تصبح عمودًا واحدًا */
    form .row > [class*="col-md-"], form .row > [class*="col-lg-"] { width: 100%; }
    .w-auto { width: 100% !important; }
}

/* ---- Touch devices: أهداف لمس أكبر ---- */
@media (pointer: coarse) {
    .btn, .btn-sm { min-height: var(--touch-target); }
    .action-btn { width: var(--touch-target); height: var(--touch-target); }
    .form-check-input { width: 1.35em; height: 1.35em; }
    .form-control-sm, .form-select-sm { min-height: var(--touch-target); font-size: var(--text-base); }
    .dropdown-item { min-height: var(--touch-target); }
}

/* ---- Wide screens ---- */
@media (min-width: 1440px) {
    .app-container { padding: var(--space-8); }
}

/* ---- Print: إخفاء التنقل ---- */
@media print {
    .app-sidebar, .app-navbar, .app-footer, .sidebar-overlay, .no-print, .page-actions { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-container { padding: 0; max-width: none; }
    .app-card, .card { box-shadow: none; break-inside: avoid; }
}