/* ==========================================================================\n   UNITDIME v4.9 — GLOBAL RESPONSIVE SAFETY LAYER\n   Loaded last by every full-page shell. This file is intentionally defensive:\n   it prevents intrinsic-width overflow without changing desktop layouts.\n   ========================================================================== */

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
}

/* Flex/grid children otherwise keep their intrinsic width and can force the
   whole viewport wider than the phone. Keep interactive controls untouched. */
:where(main, section, article, aside, header, footer, nav, div, form, fieldset, figure) {
    min-width: 0;
}

:where(img, video, canvas) {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

svg:not([width]):not([height]) {
    max-width: 100%;
}

:where(input, select, textarea, button) {
    max-width: 100%;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-width: 0;
}

:where(p, li, dd, dt, label, small, span, strong, a) {
    overflow-wrap: break-word;
}

/* Local scrolling for content that is genuinely wider than the viewport. */
:where(pre, code, .code-block, .formula-block) {
    max-width: 100%;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dense question/solution text blocks must expose their own inline scroll
   instead of clipping the right edge when formulas or reaction chains exceed
   phone width. */
:where(
    .iqb-math-content,
    .iqb-solution-content,
    .review-question-text,
    .review-answer-option,
    .review-solution-content,
    .ktr-question-body,
    .ktr-option > div,
    .ktr-solution,
    .jee-question-text,
    .jee-options,
    .ktb-question-text,
    .iqb-question-text
) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

:where(
    .review-solution-card,
    .ktr-solution,
    .review-solution-content,
    .iqb-math-content,
    .iqb-solution-content
) {
    min-width: 0;
}

/* Some pages still render MathJax wrappers with legacy classnames or extra
   anonymous wrappers. Keep those locally scrollable too. */
:where(.MathJax, .MathJax_Display, .mjx-chtml, .mjx-math) {
    max-width: 100% !important;
    min-width: 0 !important;
}

.MathJax_Display {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* MathJax is the main source of review/solution overflow on phones. Display
   equations scroll locally. Long inline equations become bounded inline blocks
   rather than widening the whole page. */
mjx-container {
    max-width: 100% !important;
}

mjx-container[display="true"] {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

mjx-container:not([display="true"]) {
    max-width: 100% !important;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
    -webkit-overflow-scrolling: touch;
}

/* Common media/question containers. */
:where(
    .iqb-math-content,
    .ktr-question-body,
    .ktr-option,
    .ktr-option > *,
    .ktr-solution,
    .review-question-text,
    .review-answer-option,
    .review-solution,
    .jee-question-text,
    .jee-options,
    .ktb-question-text,
    .iqb-question-text,
    .iqb-solution-content
) {
    min-width: 0;
    max-width: 100%;
}

:where(
    .ktr-question-body,
    .ktr-solution,
    .review-question-text,
    .review-answer-option,
    .review-solution,
    .jee-question-text,
    .ktb-question-text,
    .iqb-question-text,
    .iqb-solution-content
) {
    overflow-wrap: anywhere;
}

/* All existing table wrappers should scroll locally. */
:where(
    [class*="table-wrap"],
    [class*="table-container"],
    .responsive-table,
    .table-responsive
) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Dialogs/modals must never exceed the viewport. */
:where(
    [role="dialog"],
    .modal,
    .dialog,
    .ktb-preview-dialog,
    .iqb-viewer-dialog,
    .iqb-solution-viewer-dialog
) {
    max-width: calc(100vw - 24px);
}

/* --------------------------------------------------------------------------
   TABLET / MOBILE — shared shells and common page structures
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .student-main,
    .teacher-main,
    .school-admin-main,
    .admin-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .student-page-content,
    .teacher-content,
    .school-admin-content,
    .admin-content {
        width: 100%;
        max-width: 100%;
    }

    :where(
        .student-page-content,
        .teacher-content,
        .school-admin-content,
        .admin-content,
        .ktr-page,
        .tr-page,
        .ktb-page,
        .iqb-page,
        .kr-page,
        .udp-page
    ) {
        min-width: 0;
    }

    :where(
        .student-page-content,
        .teacher-content,
        .school-admin-content,
        .admin-content
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Headers/actions wrap instead of forcing horizontal overflow. */
    :where(
        .ktr-topbar,
        .tr-header,
        .ktb-page-header,
        .iqb-page-header,
        .kr-hero,
        .academic-page-header,
        .sa-page-heading,
        .sa-detail-header,
        .control-hero,
        .users-page-header,
        .exam-page-header,
        .dashboard-main-header,
        .result-page-header
    ) {
        flex-wrap: wrap;
    }

    :where(
        .ktr-top-actions,
        .tr-actions,
        .ktb-header-actions,
        .iqb-page-actions,
        .academic-header-actions,
        .control-hero-actions,
        .sa-header-actions
    ) {
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* Large analytics/building layouts stack before they become cramped. */
    :where(
        .ktr-layout,
        .tr-analysis-layout,
        .ktb-builder-layout,
        .iqb-detail-layout,
        .iqb-import-layout,
        .kr-detail-grid,
        .academic-detail-grid,
        .control-two-column,
        .workspace-detail-grid,
        .import-layout
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Tables are allowed to scroll within themselves instead of widening body. */
    main table:not(.jee-keypad-grid) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
    body {
        font-size: 16px;
    }

    /* Keep form fields at >=16px to avoid iOS focus zoom. */
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 16px;
    }

    :where(
        .student-page-content,
        .teacher-content,
        .school-admin-content,
        .admin-content
    ) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Cards/panels should use the entire available phone width. */
    :where(
        .dashboard-panel,
        .dashboard-performance-panel,
        .dashboard-latest-mock-panel,
        .dashboard-syllabus-panel,
        .dashboard-consistency-panel,
        .ktr-main,
        .ktr-palette,
        .tr-card-section,
        .tr-comparison,
        .tr-score-main,
        .tr-hero-stat,
        .ktb-card,
        .ktb-settings-card,
        .ktb-paper-summary,
        .iqb-card,
        .kr-panel,
        .academic-panel,
        .sa-panel,
        .admin-section
    ) {
        max-width: 100%;
    }

    /* Student review: palette and answer cards fit without squeezing equations. */
    .ktr-page {
        width: 100%;
        max-width: 100%;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ktr-layout {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    .ktr-main,
    .ktr-palette {
        width: 100%;
    }

    .ktr-main {
        padding: 13px !important;
    }

    .ktr-palette {
        position: static !important;
        order: -1;
        padding: 13px !important;
    }

    .ktr-palette-grid {
        grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)) !important;
    }

    .ktr-option {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .ktr-answer-summary {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ktr-solution {
        padding: 12px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .review-solution-card {
        overflow: visible !important;
    }

    .review-solution-content {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Result/analysis cards: one readable column on a phone. */
    :where(
        .tr-score-hero,
        .tr-metrics,
        .tr-metrics.six,
        .tr-comparison-grid,
        .tr-insights > div,
        .tr-performance-cards,
        .tr-performance-cards.four,
        .tr-response-time-grid,
        .tr-speed-grid,
        .tr-difficulty-grid,
        .tr-subject-grid,
        .tr-visual-dashboard,
        .tr-marks-story-grid,
        .tr-section-snapshot-grid,
        .tr-explore > div,
        .tr-time-dashboard,
        .dashboard-intelligence-grid,
        .dashboard-progress-grid,
        .dashboard-performance-kpis,
        .dashboard-mock-grid,
        .dashboard-latest-mock-stats,
        .dashboard-syllabus-stats,
        .kr-stat-grid,
        .kr-stat-grid-six,
        .academic-stat-grid,
        .academic-year-stats,
        .academic-info-grid,
        .academic-form-grid,
        .sa-stat-grid,
        .sa-detail-stat-grid,
        .sa-info-grid,
        .sa-form-grid,
        .admin-grid,
        .admin-action-grid,
        .control-stat-grid,
        .control-mini-grid,
        .control-date-strip,
        .control-date-create,
        .control-date-row,
        .control-date-edit,
        .control-readiness-grid,
        .control-management-grid,
        .users-filters,
        .user-info-grid,
        .users-form-grid,
        .users-readonly-grid,
        .ia-form-grid,
        .ia-password-form,
        .ia-credential-grid,
        .exam-grid,
        .exam-form-grid,
        .exam-date-add,
        .exam-date-edit,
        .qd-metadata,
        .workspace-stat-grid,
        .workspace-form-grid,
        .security-form-grid,
        .import-rules-grid,
        .upi-visual-layout,
        .upi-form-grid.two,
        .upi-meta-strip,
        .upi-progress-stats,
        .upi-review-stats
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tr-time-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        text-align: left;
    }

    .tr-time-hero > b {
        text-align: left !important;
    }

    .tr-security-note,
    .tr-private-note,
    .tr-review-launch,
    .academic-view-bar,
    .academic-page-header,
    .control-hero,
    .sa-page-heading,
    .sa-detail-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .tr-tabs,
    .result-tabs-scroll,
    .tc-library-tabs,
    .iqb-scope-tabs,
    .ktb-bank-tabs {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Mock builder / question bank controls. */
    :where(
        .ktb-filter-form,
        .ktb-picker-filters,
        .ktb-picker-filters-rich,
        .ktb-question-grid,
        .ktb-question-grid-readable,
        .ktb-test-grid,
        .ktb-preset-grid,
        .ktb-delivery-stats,
        .ktb-delivery-grid,
        .ktb-question-card-actions,
        .iqb-filter-grid,
        .iqb-form-grid-2,
        .iqb-form-grid-3,
        .iqb-form-grid-4,
        .iqb-media-url-grid,
        .iqb-authoring-split,
        .iqb-import-side
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ktb-preview-modal {
        padding: 10px !important;
    }

    .ktb-preview-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: min(88vh, 760px) !important;
        border-radius: 14px !important;
    }

    /* Buttons stay tappable and wrap instead of causing horizontal overflow. */
    :where(
        .tr-actions,
        .ktr-top-actions,
        .academic-header-actions,
        .control-hero-actions,
        .sa-header-actions,
        .ktb-picker-header-actions,
        .iqb-workflow-actions
    ) > :where(a, button) {
        min-height: 42px;
    }

    /* Standalone JEE/Practice workspaces: on phones the right palette becomes a
       normal block below the question instead of creating a desktop squeeze. */
    .jee-app {
        width: 100%;
        max-width: 100%;
    }

    .jee-title-bar,
    .jee-language-strip,
    .ktest-section-row,
    .jee-bottom-controls {
        max-width: 100%;
    }

    .jee-question-scroll,
    .jee-question-content,
    .jee-question-block,
    .jee-options {
        min-width: 0;
        max-width: 100%;
    }

    .jee-question-media img,
    .jee-option-media img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 420px) {
    :where(
        .student-page-content,
        .teacher-content,
        .school-admin-content,
        .admin-content
    ) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ktr-page,
    .tr-page,
    .ktb-page,
    .iqb-page,
    .kr-page,
    .udp-page {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ktr-top-actions,
    .tr-actions {
        width: 100%;
    }

    .ktr-top-actions > *,
    .tr-actions > * {
        flex: 1 1 auto;
        text-align: center;
    }
}



@media (max-width: 680px) {
    /* On phones, long answer lines/reaction chains should scroll within the
       block instead of disappearing under clipped card edges. */
    :where(
        .iqb-math-content,
        .iqb-solution-content,
        .review-question-text,
        .review-answer-option,
        .review-solution-content,
        .ktr-question-body,
        .ktr-option > div,
        .ktr-solution,
        .jee-question-text,
        .jee-options,
        .ktb-question-text,
        .iqb-question-text
    ) {
        scrollbar-width: thin;
    }
}

/* Respect reduced motion everywhere, including drawer/analytics additions. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Late test-builder releases re-declare desktop filter minimums after their own
   media queries. Override those at tablet widths so 768px devices do not grow
   the document horizontally. */
@media (max-width: 900px) {
    .ktb-filter-form,
    .ktb-picker-filters,
    .ktb-picker-filters-rich {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ktb-builder-side {
        min-width: 0 !important;
    }
}

@media (max-width: 680px) {
    .ktb-filter-form,
    .ktb-picker-filters,
    .ktb-picker-filters-rich {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}