/* =====================================================
   Imperial University College - Learning Platform
   Responsive - Media Queries
   ===================================================== */

/* =====================================================
   Large Laptop (1400px and below)
   ===================================================== */

@media (max-width: 1400px) {
    .app-content {
        padding: var(--sp-6);
    }
}

/* =====================================================
   Laptop (1200px and below)
   ===================================================== */

@media (max-width: 1200px) {
    .welcome-hero {
        padding: var(--sp-6);
    }

    .welcome-hero__title {
        font-size: var(--fs-xl);
    }
}

/* =====================================================
   Tablet Landscape (1024px and below)
   ===================================================== */

@media (max-width: 1024px) {
    /* Layout: Sidebar becomes drawer */
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        width: var(--sidebar-width);
        transform: translateX(100%);
        transition: transform var(--t-slower);
        box-shadow: var(--sh-2xl);
    }

    [dir="rtl"] .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.is-open {
        transform: translateX(0) !important;
    }

    .topbar__menu-btn {
        display: inline-flex;
    }

    /* Topbar padding */
    .topbar {
        padding-inline: var(--sp-4);
    }

    /* Stats: 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================
   Tablet Portrait (768px and below)
   ===================================================== */

@media (max-width: 768px) {
    /* Page Header */
    .page-title {
        font-size: var(--fs-xl);
    }

    .page-subtitle {
        font-size: var(--fs-xs);
    }

    /* Data Card Header */
    .data-card__header {
        padding: var(--sp-4);
    }

    /* Filters Bar: Stack vertically */
    .filters-bar {
        padding: var(--sp-3) var(--sp-4);
        gap: var(--sp-2);
    }

    .filters-bar__search,
    .filters-bar__select {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Hide actions label on small screens */
    .topbar__action span:not(.topbar__action-badge) {
        display: none;
    }

    .topbar__action {
        padding: 0;
        width: 34px;
        justify-content: center;
    }

    .topbar__action--primary span:not(.topbar__action-badge) {
        display: inline;
    }

    .topbar__action--primary {
        padding: 0 var(--sp-3);
        width: auto;
    }

    /* Bulk Actions */
    .bulk-actions {
        padding: var(--sp-3) var(--sp-4);
    }

    /* Modal */
    .modal {
        max-height: 95vh;
        border-radius: var(--r-lg);
    }

    .modal__header,
    .modal__body,
    .modal__footer {
        padding-inline: var(--sp-4);
    }

    /* Sidebar user */
    .sidebar__user-name,
    .sidebar__user-role {
        font-size: 11px;
    }
}

/* =====================================================
   Mobile (640px and below)
   ===================================================== */

@media (max-width: 640px) {
    /* Layout: Reduce padding */
    .app-content {
        padding: var(--sp-4);
    }

    .topbar {
        padding-inline: var(--sp-3);
    }

    /* Page Header */
    .page-title {
        font-size: var(--fs-lg);
    }

    /* Welcome Hero */
    .welcome-hero {
        padding: var(--sp-5);
        border-radius: var(--r-lg);
    }

    .welcome-hero__title {
        font-size: var(--fs-lg);
    }

    /* Section Title */
    .section-title {
        gap: var(--sp-2);
    }

    .section-title__text {
        font-size: var(--fs-md);
    }

    /* Stats Grid: 1 column */
    .stats-grid,
    .mini-stats {
        grid-template-columns: 1fr;
    }

    /* Stat Card */
    .stat-card {
        padding: var(--sp-4);
    }

    .stat-card__value {
        font-size: var(--fs-xl);
    }

    /* Table: Horizontal scroll */
    .table-wrapper {
        border-radius: var(--r-md);
    }

    .table th,
    .table td {
        padding: var(--sp-3);
        white-space: nowrap;
    }

    /* Cards */
    .card__body {
        padding: var(--sp-4);
    }

    .card__header,
    .card__footer {
        padding: var(--sp-4);
    }

    /* Buttons: full width when block */
    .btn--lg {
        padding: 0 var(--sp-4);
        font-size: var(--fs-sm);
    }

    /* Data Card */
    .data-card {
        border-radius: var(--r-md);
    }

    .data-card__header {
        padding: var(--sp-3) var(--sp-4);
    }

    /* Modal */
    .modal-overlay {
        padding: var(--sp-3);
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal__header,
    .modal__body,
    .modal__footer {
        padding: var(--sp-4);
    }

    /* Toast */
    .toast-container {
        top: var(--sp-3);
        width: calc(100% - var(--sp-6));
        max-width: none;
    }

    /* Tabs */
    .tabs {
        gap: 0;
    }

    .tab {
        padding: var(--sp-3);
        font-size: var(--fs-xs);
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 11px;
    }

    /* Pagination */
    .pagination__item {
        min-width: 30px;
        height: 30px;
        padding: 0 var(--sp-2);
        font-size: var(--fs-xs);
    }
}

/* =====================================================
   Small Mobile (480px and below)
   ===================================================== */

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .topbar__breadcrumb {
        display: none;
    }

    .topbar__title {
        font-size: var(--fs-sm);
    }

    .welcome-hero__badges {
        gap: var(--sp-1);
    }

    .welcome-hero__badge {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* =====================================================
   Print
   ===================================================== */

@media print {
    .sidebar,
    .topbar,
    .sidebar-overlay,
    .filters-bar,
    .bulk-actions,
    .pagination,
    .topbar__action,
    .btn:not(.btn--print),
    .no-print {
        display: none !important;
    }

    .app-layout {
        display: block;
    }

    .app-content {
        padding: 0;
    }

    .data-card,
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: white;
        font-size: 12px;
    }
}

/* =====================================================
   Accessibility & Preference
   ===================================================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
    :root {
        --c-border: #999;
        --c-border-dark: #666;
        --c-text-secondary: #000;
        --c-text-tertiary: #333;
    }
}

/* Dark Mode (Future) */
@media (prefers-color-scheme: dark) {
    /* ستُضاف لاحقاً عند دعم dark mode */
}

/* Touch Devices */
@media (hover: none) {
    .course-card:hover {
        transform: none;
    }

    .attention-card:hover {
        transform: none;
    }

    .btn:hover:not(:disabled) {
        transform: none;
    }
}

/* Print-specific sizes */
@media print and (max-width: 640px) {
    .table {
        font-size: 10px;
    }
}