/*
 * Responsive (portrait phone & tablet) fixes for the admin and student panels.
 * Loaded after theme.min.css. It only adds overrides; theme.min.css is untouched.
 * Table helpers (.rt-stack, data-label) are added by assets/js/responsive-fixes.js.
 */

/* ---------- Sidebar menu button ----------
 * theme.min.css keeps the sidebar off-canvas up to 1024px, but the header button
 * uses .d-lg-none (hidden from 992px), which left no way to open the menu on
 * 992-1024px screens such as an iPad Pro 12.9" in portrait. */
@media (max-width: 1024px) {
    .nxl-header .nxl-head-mobile-toggler.d-lg-none {
        display: inline-flex !important;
    }
}

/* ---------- Theme settings gear ----------
 * The floating handle covers page content on phones and tablets. */
@media (max-width: 1024px) {
    .theme-customizer .customizer-handle {
        display: none !important;
    }
}

/* ---------- Form fields ----------
 * iPhone Safari zooms into any field whose text is smaller than 16px. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    .form-control,
    .form-select,
    .select2-container .select2-selection__rendered,
    .select2-container .select2-search__field {
        font-size: 16px !important;
    }
}

/* ---------- Page header on phones ----------
 * The theme hides the header action buttons (Add ..., etc.) in an off-canvas panel
 * below 768px; show them inline instead and let the header wrap. */
@media (max-width: 767.98px) {
    .nxl-container .nxl-content .page-header {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .nxl-container .nxl-content .page-header .page-header-left {
        flex-wrap: wrap;
        row-gap: 4px;
        min-width: 0;
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items {
        position: static;
        top: auto;
        width: auto;
        height: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        flex-direction: row;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    html.app-skin-dark .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items {
        background-color: transparent !important;
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items .page-header-right-items-wrapper {
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nxl-container .nxl-content .page-header .page-header-right-open-toggle,
    .nxl-container .nxl-content .page-header .page-header-right-close-toggle {
        display: none !important;
    }
}

/* ---------- List tables ----------
 * Up to 1024px cell text wraps so a table can fit the screen width.
 * responsive-fixes.js adds .rt-cards on phones, and on tablets when a table still
 * doesn't fit; each row is then shown as a card with "Column: value" lines. */
@media (max-width: 1024px) {
    .table-responsive .table.rt-stack tr td,
    .table-responsive .table.rt-stack tr th {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

.table-responsive .table.rt-cards thead {
    display: none;
}

.table-responsive .table.rt-cards,
.table-responsive .table.rt-cards tbody,
.table-responsive .table.rt-cards tbody tr,
.table-responsive .table.rt-cards tbody tr td {
    display: block;
    width: 100%;
}

.table-responsive .table.rt-cards tbody tr {
    width: auto;
    margin: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

html.app-skin-dark .table-responsive .table.rt-cards tbody tr {
    border-color: #1b2436;
}

.table-responsive .table.rt-cards tbody tr td {
    position: relative;
    min-height: 42px;
    padding: 10px 14px 10px calc(min(38%, 200px) + 14px);
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 0;
    border-bottom: 1px dashed #e5e7eb;
}

html.app-skin-dark .table-responsive .table.rt-cards tbody tr td {
    border-bottom-color: #1b2436;
}

.table-responsive .table.rt-cards tbody tr td:last-child {
    border-bottom: 0;
}

.table-responsive .table.rt-cards tbody tr td::before {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 14px;
    width: calc(min(38%, 200px) - 14px);
    font-weight: 600;
    color: #7587a7;
    white-space: normal;
    overflow-wrap: break-word;
}

.table-responsive .table.rt-cards tbody tr td.rt-full,
.table-responsive .table.rt-cards tbody tr td.rt-nolabel {
    padding-left: 14px;
}

.table-responsive .table.rt-cards tbody tr td.rt-full::before,
.table-responsive .table.rt-cards tbody tr td.rt-nolabel::before {
    content: none;
}

.table-responsive .table.rt-cards tbody tr td.rt-actions .hstack {
    justify-content: flex-start !important;
    flex-wrap: wrap;
}

/* Icon-only row buttons get a visible text label in the card layout (set by responsive-fixes.js). */
.table-responsive .table.rt-cards td.rt-actions .avatar-text[data-rt-label] {
    width: auto;
    max-width: none;
    padding: 0 12px;
    gap: 6px;
    border-radius: 20px;
}

.table-responsive .table.rt-cards td.rt-actions .avatar-text[data-rt-label]::after {
    content: attr(data-rt-label);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Tap targets on touch-size screens ---------- */
@media (max-width: 1024px) {
    .nxl-container .table .avatar-text.avatar-md {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    .nxl-container .table .hstack.gap-2 {
        gap: 10px !important;
    }

    .nxl-container .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    .nxl-container .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .auth-minimal-wrapper a.fs-11 {
        display: inline-block;
        padding: 10px 0;
    }

    /* Menu button: grow the tap area around the 20px icon without moving it. */
    .nxl-header .nxl-head-mobile-toggler {
        padding: 12px;
        margin: -12px;
    }

    /* Header profile picture (opens the Profile / Logout menu). */
    .nxl-header .nxl-h-item > a[data-bs-toggle="dropdown"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Small buttons in list rows, note rows, forms and headers. */
    .nxl-container .btn-sm {
        min-height: 36px;
        align-items: center;
        justify-content: center;
    }

    .course-picker .form-check-input {
        width: 22px;
        height: 22px;
    }

    .nxl-container .ql-toolbar.ql-snow .ql-picker {
        height: 36px;
    }

    .nxl-container .ql-toolbar.ql-snow .ql-picker-label {
        display: flex;
        align-items: center;
    }
}

/* ---------- Document and PDF viewers ---------- */
@media (max-width: 1024px) {
    /* Aadhaar preview frames are 1122px tall; keep them within the screen. */
    iframe#idProofPreviewCard {
        max-height: 75vh;
    }

    /* Protected PDF viewer: show the whole page (the dialog scrolls) and keep
     * Prev / Next pinned to the bottom of the screen. */
    .pdf-protected-viewer {
        height: auto !important;
        overflow-x: hidden;
    }

    .pdf-protected-viewer > .text-center {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 0 !important;
        padding: 10px 0;
        background-color: #fff;
        border-top: 1px solid #e5e7eb;
    }

    html.app-skin-dark .pdf-protected-viewer > .text-center {
        background-color: #0f172a;
        border-top-color: #1b2436;
    }

    .pdf-protected-viewer #watermark {
        font-size: 20px;
    }
}

/* PDF viewer: the theme makes every .btn a block-level flex box, which stacked
 * Prev / "Page x / y" / Next on separate lines at every screen size. */
.pdf-protected-viewer > .text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Bootstrap keeps large dialogs at 500px wide below 992px (and .modal-xl at 800px up to
 * 1199px); on portrait tablets use the screen width so two-column forms and PDFs fit. */
@media (max-width: 991.98px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .modal-dialog.modal-xl {
        max-width: calc(100% - 48px);
    }
}

/* Admin Notes preview: keep the 600px PDF frame within the screen. */
@media (max-width: 1024px) {
    iframe#viewNotePdf {
        max-height: 70vh;
    }
}

/* ---------- Course page note rows ---------- */
.note-row {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.note-row .note-row-info {
    flex: 1 1 220px;
    min-width: 0;
}

.note-row .note-row-info h6 {
    overflow-wrap: anywhere;
}

.note-row .note-row-actions {
    margin-left: auto;
}

/* ---------- Page-number bars ----------
 * Lists print every page number; let the bar wrap instead of overflowing (a centred
 * bar that overflows cuts the first pages off on the left). On phones
 * responsive-fixes.js also hides far-away page numbers behind "…". */
.nxl-container .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
}

.pagination .rt-page-gap {
    display: none;
}

@media (max-width: 767.98px) {
    .pagination .rt-page-hidden {
        display: none;
    }

    .pagination .rt-page-gap {
        display: list-item;
        list-style: none;
    }
}

/* ---------- Edit Admission course picker ----------
 * On touch screens let the list flow with the page instead of scrolling inside a 250px box. */
@media (max-width: 1024px) {
    .course-picker {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* The checkbox hung over each course box's left border (p-2 removed the space Bootstrap reserves for it). */
.course-picker .form-check.p-2 {
    padding-left: 2.25rem !important;
}

/* ---------- Course category tree in the card layout ----------
 * Indent sub-category cards by level instead of the name inside the card. */
.table-responsive .table.rt-cards tbody tr[data-depth="1"] { margin-left: 32px; }
.table-responsive .table.rt-cards tbody tr[data-depth="2"] { margin-left: 52px; }
.table-responsive .table.rt-cards tbody tr[data-depth="3"] { margin-left: 72px; }
.table-responsive .table.rt-cards tbody tr[data-depth="4"] { margin-left: 92px; }

.table-responsive .table.rt-cards tbody tr[data-depth]:not([data-depth="0"]) {
    border-left: 3px solid #3454d1;
}

.table-responsive .table.rt-cards tbody tr[data-depth] td > div[style*="padding-left"] {
    padding-left: 0 !important;
}

/* ---------- Site Pages editor ----------
 * Keep the formatting toolbar visible while typing and fit the editor to the screen. */
@media (max-width: 1024px) {
    .ql-toolbar.ql-snow {
        position: sticky;
        top: 80px;
        z-index: 5;
        background-color: #fff;
    }

    .ql-toolbar.ql-snow + #editor {
        height: 60vh !important;
    }

    /* quill.min.css loads after this file, so this needs the extra .nxl-container. */
    .nxl-container .ql-toolbar.ql-snow button {
        width: 36px;
        height: 36px;
    }
}

/* ---------- Gallery ----------
 * Bigger edit / delete buttons on touch-size screens. */
@media (max-width: 1024px) {
    .gallery-item .btn-sm {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ---------- File name lists in add / edit forms ----------
 * Long PDF names wrap instead of pushing the Remove button off-screen. */
.nxl-container .list-group-item.d-flex {
    gap: 0.5rem;
}

.nxl-container .list-group-item.d-flex > span,
.nxl-container .list-group-item.d-flex > a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.nxl-container .list-group-item.d-flex > .btn {
    flex-shrink: 0;
}

/* ---------- Result messages ----------
 * Shown at the bottom of the screen so they are seen wherever the page is scrolled. */
.alert.rt-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    margin: 0;
    box-shadow: 0 10px 25px rgba(40, 60, 80, 0.2);
}

@media (min-width: 768px) {
    .alert.rt-toast {
        left: auto;
        width: 380px;
    }
}

/* ---------- One-time-code boxes (student password reset) ----------
 * Six boxes with the theme's padding left no room for the digit on phones. */
#otp .otp-digit {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 52px;
    height: 52px;
    font-size: 20px !important;
    font-weight: 600;
}

@media (max-width: 400px) {
    #otp .otp-digit {
        margin: 4px !important;
    }
}

/* ---------- Note / course cards ----------
 * Show full titles on phones and tablets instead of cutting them off with "…". */
@media (max-width: 1024px) {
    .single-note-item .note-title.text-truncate {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}