/* Shared screen adaptations. Paper layouts keep their original dimensions. */
@media screen {
    .mobile-step-picker { display: none; }
    .mobile-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; }
    .print-preview-scroll { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; }
    .main-wrapper, .content-area, .panel-card, .panel-body, .tab-content,
    .responsive-grid > *, .builder-table-col { min-width: 0; }
    .mobile-table-scroll:focus-visible, button:focus-visible, select:focus-visible {
        outline: 3px solid #0d9488; outline-offset: 3px;
    }
    .builder-alloc-card.is-touch-selected { outline: 3px solid #0d9488; background: #f0fdfa; }
    .builder-touch-status { padding: 8px; color: #0f766e; font-weight: 700; font-size: 13px; }
    #app-dialog-backdrop { z-index: 1000000; } /* Above the full-screen transfer canvas. */
    .transfer-canvas-actions { display: flex; gap: 8px; flex-shrink: 0; }
}

@media screen and (max-width: 1024px) {
    html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
    img, video, canvas { max-width: 100%; }
    .app-container, .content-area, .panel-card, .panel-body,
    .builder-layout-row, .builder-table-col, .subj-unified-panel { max-width: 100%; }
    .responsive-grid > *, .form-group, .header-left, .header-right { min-width: 0; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
        max-width: 100%; font-size: 16px !important;
    }
    /* الخط 16px (لمنع تكبير iOS) لا يتسع لارتفاع ثابت 44px مع الحشوة؛ الارتفاع يتبع المحتوى بحد أدنى 44px */
    select, select.form-control {
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.5 !important;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select {
        min-height: 44px;
    }
    button, .btn, .ds-btn, .nav-item, .wizard-button, .header-action {
        touch-action: manipulation;
    }
    .btn, .btn-sm, .ds-btn, .nav-item, .header-action,
    .modal-close-btn, .app-dialog-close, .wizard-button, .print-category-pill {
        min-height: 44px !important;
    }
    .modal-close-btn, .app-dialog-close { min-width: 44px; flex-shrink: 0; }
    .form-control, .form-group, .panel-header, .panel-header > *, .modal-header > * { min-width: 0; }
    .panel-header, .modal-header, .modal-footer { flex-shrink: 0; }
    .panel-title, .modal-header h3, .modal-header h5 { overflow-wrap: anywhere; }
    .top-header .header-right { overflow: visible !important; }
    .table-responsive, .table-container, .matrix-wrapper, .subj-matrix-wrapper,
    .standby-table-wrapper, .mobile-table-scroll {
        max-width: 100%; min-width: 0; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* قائمة تصفية الإسناد تفرض 12px بـ !important فتُفلت من قاعدة 16px أعلاه؛ دونها يكبّر iOS الصفحة عند اللمس */
    .alloc-filter-select { font-size: 16px !important; height: auto !important; }
    .table-responsive input, .mobile-table-scroll input { min-width: 70px; }
    .table-responsive button, .mobile-table-scroll button { min-height: 40px; }
    .slot-card button, .builder-slot-card button, .builder-remove-btn {
        width: 36px !important; height: 36px !important; min-width: 36px;
        font-size: 16px !important;
    }
    .slot-card, .builder-slot-card:not(.is-empty) { padding-top: 42px !important; min-height: 104px; }
    .builder-matrix-table { min-width: 760px; }
    .builder-bank-col { position: static; width: 100%; min-width: 0; max-width: none; }
    .builder-alloc-list { min-height: 0; max-height: 240px; }
    .builder-alloc-card { min-height: 68px; touch-action: pan-y; cursor: pointer; }
    .builder-unassign-zone { display: none; } /* Every placed card has a remove button. */
    .transfer-canvas-modal {
        height: var(--mobile-viewport-height, 100dvh);
        top: var(--mobile-viewport-top, 0px); bottom: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .transfer-canvas-body { min-height: 0; overflow: auto; padding: 10px; }
    .transfer-canvas-header, .transfer-canvas-filter-bar { padding: 8px 12px; gap: 8px; }
    .transfer-canvas-filter-item { min-width: 140px; }
    .transfer-legend-item { font-size: 11px; padding: 4px 6px; }
    .modal-backdrop, #app-dialog-backdrop, #quickAssignModal {
        box-sizing: border-box;
        top: var(--mobile-viewport-top, 0px) !important;
        bottom: auto !important;
        height: var(--mobile-viewport-height, 100dvh) !important;
        padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    }
    .modal-dialog, .app-dialog-card {
        width: 100%; max-width: min(680px, 100%) !important;
        max-height: 100% !important; margin: 0 auto !important;
        display: flex; flex-direction: column; min-height: 0;
    }
    .modal-content { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
    .modal-dialog > form, .modal-content > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
    .modal-body, .app-dialog-body {
        min-height: 0; overflow: auto; overscroll-behavior: contain;
        max-height: none !important; flex: 1 1 auto;
    }
    .app-dialog-header, .app-dialog-footer { flex-shrink: 0; }
    .modal-footer { flex-direction: row !important; flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 120px; width: auto !important; white-space: normal; }
    #quickAssignModal { position: fixed; inset-inline: 0; display: flex !important; align-items: center; z-index: 10000 !important; }
    body.mobile-dialog-open { overflow: hidden !important; }
    body.mobile-dialog-open .content-area { overflow: hidden !important; }
    .ds-guide-sidebar { display: block; position: static; max-height: 230px; overflow: auto; }
    .ds-guide-sidebar .ds-toc-heading { position: sticky; top: 0; background: white; z-index: 1; }
    .ds-toc-link { min-height: 44px; }
    .ds-guide-layout, .ds-guide-main { min-width: 0; }
    .print-toolbar { position: relative !important; flex-wrap: wrap; gap: 10px; }
    .print-toolbar > *, .toolbar-group, .toolbar-primary-group, .toolbar-utility-group { min-width: 0; flex-wrap: wrap; }
    .print-toolbar button, .print-toolbar a, .print-toolbar select { min-height: 44px; }
    .customizer-drawer { max-height: 100dvh; }
    .customizer-header, .customizer-footer { flex-shrink: 0; }
    .customizer-body { min-height: 0; overscroll-behavior: contain; }
    .customizer-close-btn { width: 44px; height: 44px; flex-shrink: 0; }
    .customizer-footer { flex-wrap: wrap; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
    .resv-teacher-select-wrapper, .tt-distribution-mode { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .resv-teacher-select-wrapper select, #ttDistributionModeSelect { min-width: 0; width: 100% !important; }
    .tt-segmented-control { width: 100%; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .tt-seg-btn { flex: 0 0 auto; min-height: 44px; }
    .tt-toolbar-row > *, #ttFilterContainer, #ttToolbarActions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    #ttFilterSelect { min-width: 0 !important; }
}

@media screen and (max-width: 760px) {
    body.wizard-app .main-wrapper {
        height: var(--mobile-viewport-height, 100dvh); min-height: 0;
    }
    body.wizard-app .top-header {
        flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 12px !important;
    }
    body.wizard-app .header-left { flex: 1 1 auto; min-width: 0; }
    body.wizard-app .header-right { width: auto !important; flex: 0 0 auto; flex-wrap: nowrap; }
    body.wizard-app .header-action { white-space: normal; text-align: center; padding: 6px 8px; }
    body.wizard-app .wizard-footer {
        min-height: 0; gap: 4px; padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px));
    }
    body.wizard-app .wizard-footer-actions { flex-wrap: wrap; gap: 6px; }
    body.wizard-app .wizard-button { min-width: 0; white-space: normal; padding: 8px; }
    body.wizard-app .wizard-feedback { max-height: 64px; overflow: auto; }
    body.wizard-app.tab-subjects-active .content-area { overflow-y: auto !important; }
    body.wizard-app #tab-subjects, body.wizard-app #tab-subjects .subj-unified-panel,
    body.wizard-app #tab-subjects .panel-body, body.wizard-app #subjectsMatrixContainer {
        height: auto !important; flex: 0 0 auto; overflow: visible;
    }
    body.wizard-app .subj-matrix-wrapper { max-height: 65dvh; height: auto; flex: none; }
    body.admin-no-sidebar .admin-top-nav { position: relative; top: auto; }
    body.admin-no-sidebar .top-header { position: relative; }
    .login-body, .change-body {
        min-height: 100dvh; height: auto !important; padding: 20px 12px !important; overflow-y: auto;
    }
    .login-card, .change-card { width: 100%; max-width: 440px; min-width: 0; margin: auto; }
    .ds-nav-inner { flex-wrap: wrap; gap: 10px; }
    .ds-navbar .ds-container { flex-wrap: wrap !important; padding-inline: 12px !important; gap: 8px !important; }
    .ds-navbar .ds-brand { min-width: 0; max-width: 100%; }
    .ds-navbar .ds-brand-title { font-size: 14px !important; }
    .ds-navbar .ds-nav-actions { margin-inline-start: auto; }
    .ds-nav-actions { flex-wrap: wrap; }
    .ds-btn, .ds-btn span { white-space: normal !important; word-break: normal !important; }
    .ds-nav-actions, .ds-guide-cta-btns { min-width: 0; max-width: 100%; }
    .ds-panel-content, .ds-panel-visual, .ds-feature-check-list span { min-width: 0; overflow-wrap: anywhere; }
    .ds-btn-login span { display: inline; }
    .ds-navbar .ds-btn-login span { font-size: 12px; }
    .ds-badge-pulse { white-space: normal; text-align: center; }
}

@media screen and (max-width: 600px) {
    .responsive-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .ds-features-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .ds-feature-card { min-width: 0; }
    .alloc-topbar-filters, .alloc-filter-group { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    .alloc-filter-select { min-width: 0; width: 100%; }
    .form-row { flex-direction: column; grid-template-columns: minmax(0, 1fr); }
    .form-row > * { width: 100%; min-width: 0; }
    .panel-body { padding: 12px !important; }
    body.wizard-app #tab-settings .panel-body { padding: 12px !important; }
    body.wizard-app .wizard-groups { display: flex; overscroll-behavior-x: contain; }
    body.wizard-app .wizard-progress { padding: 6px 12px; }
    .user-profile-name { max-width: 105px !important; }
    .user-profile-trigger { padding: 4px 8px !important; gap: 6px !important; }
    .school-badge-pill { max-width: 100% !important; }
    .modal-header, .modal-body, .modal-footer { padding: 12px !important; }
    .modal-header h3, .modal-header h5 { font-size: 15px !important; }
    .app-dialog-body { padding: 14px !important; }
    .app-dialog-icon-wrapper { width: 56px !important; height: 56px !important; margin-bottom: 12px !important; }
    .app-dialog-footer { padding: 12px !important; }
    .app-dialog-brand { min-width: 0; flex-wrap: wrap; }
    .app-dialog-header { padding: 10px 12px !important; }
    .app-dialog-message { overflow-wrap: anywhere; }
    #bulkSelectionBar { margin: 8px !important; padding: 12px !important; }
    #bulkSelectionBar > *, .actions-bar > * { min-width: 0; flex-wrap: wrap; }
    .transfer-canvas-filter-bar { max-height: 26dvh; overflow: auto; }
    .transfer-canvas-header { max-height: 24dvh; overflow: auto; }
    .transfer-canvas-actions .btn { flex: 1; justify-content: center; }
    .ds-guide-quick-pills { flex-wrap: nowrap; overflow: auto; justify-content: flex-start; }
    .ds-guide-pill { flex: 0 0 auto; min-height: 44px; }
    #app-toast-container { bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; }
    body.wizard-app #app-toast-container { bottom: 85px !important; }
}

/* الجوال: أصغر نص مقروء 11px — يرفع كل الوسوم والتسميات الدقيقة (10px) درجة واحدة */
@media screen and (max-width: 640px) {
    :root { --fs-2xs: 11px; }
    /* خارطة المناقلة على الهاتف: عرض أدنى وتمرير أفقي داخل الجسم فقط */
    .transfer-grid { min-width: 720px; grid-template-rows: 30px repeat(var(--tc-days, 5), 76px); }
    .transfer-canvas-filter-item { flex-direction: column; align-items: stretch; gap: 4px; }
}

@media screen and (max-height: 500px) and (max-width: 1024px) {
    body.wizard-app .main-wrapper { height: auto; min-height: 100dvh; overflow: visible; }
    body.wizard-app .content-area { overflow: visible; flex: none; }
    body.wizard-app .wizard-footer { position: sticky; bottom: 0; }
    .modal-header, .modal-footer, .app-dialog-header, .app-dialog-footer { padding-block: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog, .modal-backdrop, .app-dialog-card { transition: none !important; animation: none !important; }
}