/* Mobile-App-Like UX — shared layer (mobile-first, desktop unaffected).
 * Loaded from layouts/base.blade.php. Brand colors reuse existing --brand vars.
 * All rules are scoped to max-width: 767.98px unless marked global. */

:root {
    --mobile-nav-height: 64px;
    --mobile-tap-min: 44px;
}

/* 8. Base type: never below 16px on form controls (prevents iOS auto-zoom). */
@media (max-width: 767.98px) {
    body {
        font-size: 16px;
        line-height: 1.6;
        /* 9. Room for the fixed bottom nav + iPhone home indicator. */
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    main.container {
        padding-bottom: 1.5rem;
    }

    /* 2. Minimum 44x44px tap targets + thumb-friendly spacing. */
    .btn,
    .nav-link,
    .dropdown-item,
    .page-link,
    .form-control,
    .form-select,
    .form-check-input,
    input[type='checkbox'],
    input[type='radio'] {
        min-height: var(--mobile-tap-min);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .page-link {
        min-width: var(--mobile-tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    a.btn,
    button.btn {
        min-width: var(--mobile-tap-min);
    }

    .nav-link,
    .dropdown-item {
        display: flex;
        align-items: center;
        min-height: var(--mobile-tap-min);
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .form-check {
        min-height: var(--mobile-tap-min);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .form-check-input {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
    }

    /* Status pills + small inputs (attendance, exam results) stay thumb-sized. */
    .btn-group .btn,
    .btn-group-sm .btn {
        min-height: var(--mobile-tap-min);
        padding: 0.625rem 0.875rem;
        font-size: 1rem;
    }

    .form-control-sm,
    .form-select-sm {
        min-height: var(--mobile-tap-min);
        font-size: 1rem;
    }

    /* 3. Single-column forms on mobile, even if markup says col-md-*. */
    .row > [class*='col-'] {
        margin-bottom: 0.25rem;
    }

    .row > [class*='col-md-'],
    .row > [class*='col-lg-'],
    .row > [class*='col-xl-'],
    .row > [class*='col-xxl-'] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Opt-out: rows marked .keep-cols keep their explicit mobile widths
       (e.g. attendance session start/end side-by-side). Higher specificity
       than the single-column rule above, so it wins for marked rows only. */
    .row.keep-cols > .col-6 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* 2. Comfortable list rows. */
    .list-group-item {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        line-height: 1.6;
    }

    table.table-stack td {
        min-height: var(--mobile-tap-min);
    }

    /* Plain links inside stacked cards get a full 44px tap area. */
    table.table-stack td a:not(.btn),
    table.table-stack td a.badge {
        display: inline-flex;
        align-items: center;
        min-height: var(--mobile-tap-min);
    }

    table.table-stack td .btn-group,
    table.table-stack td .input-group {
        flex-wrap: wrap;
    }

    /* Exam results: the 3 status pills stay on one line (short Arabic
       labels fit once wrapping is off; the 44px tap height is kept,
       only horizontal padding shrinks). Scoped so the attendance
       grid keeps its current wrapping behavior. */
    table.table-stack td .btn-group.exam-status-group {
        flex-wrap: nowrap;
    }

    table.table-stack td .btn-group.exam-status-group .btn {
        flex: 0 0 auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }

    /* 1. Bottom navigation (staff + portal). Hidden on md+ via d-md-none. */
    .mobile-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -0.25rem 1rem rgba(31, 41, 55, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-bottom-nav__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--mobile-nav-height);
        padding: 0.375rem 0.25rem;
        color: #6b7280;
        text-decoration: none;
        font-size: 0.72rem;
        line-height: 1.2;
        border: 0;
        background: transparent;
    }

    .mobile-bottom-nav__item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Long labels (e.g. المواد الدراسية) must stay on one line — the active
       bold weight otherwise wraps them onto two lines and breaks the tab. */
    .mobile-bottom-nav__item > span {
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-bottom-nav__item.active {
        color: var(--brand);
        font-weight: 700;
    }

    .mobile-bottom-nav__item:active {
        background-color: #f3f4f6;
    }

    /* 1. Back bar: consistent position (inline-start = right in RTL). */
    .mobile-back-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .mobile-back-bar__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--mobile-tap-min);
        height: var(--mobile-tap-min);
        border-radius: 0.75rem;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #374151;
        text-decoration: none;
        flex-shrink: 0;
    }

    /* Flip directional arrows in RTL: the same "back" glyph points correctly. */
    [dir='rtl'] .mobile-back-bar__btn svg {
        transform: scaleX(-1);
    }

    /* Desktop back-link arrows (direction-aware via logical flip). */
    .dir-arrow {
        display: inline-block;
    }

    [dir='rtl'] .dir-arrow {
        transform: scaleX(-1);
    }

    /* 3+4. Sticky action bar: pinned submit in the thumb zone, above safe-area. */
    .mobile-sticky-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -0.25rem 1rem rgba(31, 41, 55, 0.1);
        padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        gap: 0.625rem;
    }

    .mobile-sticky-bar .btn {
        flex: 1 1 0;
        min-height: 50px;
        font-weight: 700;
    }

    /* When a screen renders a sticky bar it replaces the bottom nav. */
    body:has(.mobile-sticky-bar) {
        padding-bottom: 0;
    }

    body:has(.mobile-sticky-bar) .mobile-bottom-nav {
        display: none;
    }

    /* Fallback for browsers without :has() — layouts/base adds .has-mobile-sticky via JS. */
    body.has-mobile-sticky {
        padding-bottom: 0;
    }

    body.has-mobile-sticky .mobile-bottom-nav {
        display: none;
    }

    /* 4. Floating action button in the thumb zone (above bottom nav). */
    .mobile-fab {
        position: fixed;
        inset-inline-end: 1rem;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
        z-index: 1035;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        color: #fff;
        border: 0;
        box-shadow: 0 0.5rem 1.25rem rgba(79, 70, 229, 0.45);
        text-decoration: none;
    }

    .mobile-fab svg {
        width: 26px;
        height: 26px;
    }

    /* 5. Card list: stacked replacement for wide tables. */
    .mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .mobile-card-list__item {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.875rem;
        padding: 0.875rem 1rem;
        min-height: var(--mobile-tap-min);
        text-decoration: none;
        color: inherit;
    }

    a.mobile-card-list__item:active {
        background-color: #f9fafb;
    }

    /* Filter forms scroll away with the page on mobile (sticky removed:
       the stacked form is too tall and covered most of the viewport). */

    /* Dashboard daily actions stay pinned under the navbar while scrolling. */
    .mobile-sticky-top-actions {
        position: sticky;
        top: 0.75rem;
        z-index: 1020;
    }

    /* Help Center: opaque full-bleed backdrop so scrolled content never
       peeks through the sticky search (same pinned pattern as the
       dashboard actions, but pinned to the viewport top — the 0.75rem
       gap of the generic rule let content scroll visibly above it). */
    .mobile-sticky-top-actions.help-sticky-search {
        top: 0;
        background: #f6f7fb;
        padding-top: 0.75rem;
    }

    .mobile-sticky-top-actions.help-sticky-search .help-search {
        background: transparent;
        padding-block: 0 0.5rem;
    }

    /* Portal sibling tabs: horizontal scroll instead of crushing labels. */
    .portal-sibling-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .portal-sibling-tabs::-webkit-scrollbar {
        display: none;
    }

    .portal-sibling-tabs .btn-group {
        flex-wrap: nowrap;
    }

    /* 6. Bottom sheet: native-feel replacement for centered modals. */
    .modal-sheet .modal-dialog {
        margin: 0;
        max-width: 100%;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
    }

    .modal-sheet .modal-content {
        border: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: 92dvh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .modal-sheet .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    /* 7. Toast/snackbar near the thumb, above nav + sticky bar. */
    .mobile-toast-stack {
        position: fixed;
        inset-inline: 1rem;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 0.75rem);
        z-index: 1080;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    body:has(.mobile-sticky-bar) .mobile-toast-stack,
    body.has-mobile-sticky .mobile-toast-stack {
        bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-toast {
        background: #111827;
        color: #f9fafb;
        border-radius: 0.875rem;
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        min-height: var(--mobile-tap-min);
    }

    .mobile-toast--success {
        background: #065f46;
    }

    .mobile-toast--error {
        background: #991b1b;
    }

    /* 3. Wizard step indicator dots/bar. */
    .mobile-wizard-steps {
        display: flex;
        gap: 0.375rem;
        margin-bottom: 1rem;
    }

    .mobile-wizard-steps__seg {
        flex: 1 1 0;
        height: 6px;
        border-radius: 999px;
        background: #e5e7eb;
    }

    .mobile-wizard-steps__seg--done,
    .mobile-wizard-steps__seg--current {
        background: var(--brand);
    }

    /* 3. Wizard: phones show only the active panel; desktop stacks all. */
    .mobile-wizard[data-active-step='1'] [data-wizard-step]:not([data-wizard-step='1']),
    .mobile-wizard[data-active-step='2'] [data-wizard-step]:not([data-wizard-step='2']),
    .mobile-wizard[data-active-step='3'] [data-wizard-step]:not([data-wizard-step='3']),
    .mobile-wizard[data-active-step='4'] [data-wizard-step]:not([data-wizard-step='4']),
    .mobile-wizard[data-active-step='5'] [data-wizard-step]:not([data-wizard-step='5']) {
        display: none;
    }

    /* 5. Bulk-attendance rows: big touch toggles. */
    .mobile-check-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.875rem;
        padding: 0.75rem 0.875rem;
        min-height: 60px;
    }

    .mobile-check-row input[type='checkbox'],
    .mobile-check-row input[type='radio'] {
        width: 1.6rem;
        height: 1.6rem;
    }

    /* Payment cards: the paid toggle matches the amount input height
       (both --mobile-tap-min) so the row looks like one control. */
    .mobile-card-list__item .mobile-check-row {
        min-height: var(--mobile-tap-min);
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    /* Destructive actions stay visually separated from the primary action. */
    .mobile-danger-zone {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px dashed #fca5a5;
    }

    /* 2. Inline icon links (WhatsApp) get a full-size tap area without
       changing their visual size. */
    .whatsapp-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--mobile-tap-min);
        min-height: var(--mobile-tap-min);
        margin: -0.625rem -0.5rem;
    }

    /* Timetable accordion headers are full-width rows: keep them tall. */
    .accordion-button {
        min-height: var(--mobile-tap-min);
        font-size: 1rem;
    }

    /* Branding color swatches: visible box stays thumb-tappable. */
    input[type='color'].form-control-color {
        width: 3.5rem;
        height: var(--mobile-tap-min);
        padding: 0.25rem;
    }
}

/* Desktop: bottom nav / sticky bar / fab / toast-stack never appear. */
@media (min-width: 768px) {
    .mobile-bottom-nav,
    .mobile-sticky-bar,
    .mobile-fab,
    .mobile-back-bar,
    .mobile-toast-stack {
        display: none;
    }
}

/* Help Center reading surface (all breakpoints — this is a reading screen).
 * Screenshots referenced from Markdown live in public/assets/help/. */

/* Contextual help-link (؟): small inline glyph button that never grows
 * the heading line-box. */
.help-link {
    min-width: 1.5rem;
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.375rem;
    font-size: 0.8rem;
    line-height: 1;
    vertical-align: middle;
}

section[id^='cat-'] {
    scroll-margin-top: 1rem;
}

.help-article {
    max-width: 65ch;
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: 1.9;
    overflow-wrap: break-word;
    /* Wide tables scroll inside the reading column instead of pushing
       the page into a horizontal scroll. */
    overflow-x: auto;
}

.help-article h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 1.75rem 0 0.75rem;
}

.help-article h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 1.5rem 0 0.5rem;
}

.help-article p,
.help-article ul,
.help-article ol {
    margin-bottom: 1rem;
}

.help-article li + li {
    margin-top: 0.375rem;
}

.help-article img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    margin-block: 1rem;
}

.help-article pre {
    max-width: 100%;
    overflow-x: auto;
}

.help-article table {
    width: 100%;
    border-collapse: collapse;
}

.help-article th,
.help-article td {
    overflow-wrap: anywhere;
}

/* Click-to-play video facade: fills the 16:9 holder (ratio forces cover),
 * so the tap target is always far above the 44px minimum. */
.help-video__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border: 1px dashed #c7d2fe;
    border-radius: 0.75rem;
    background: #eef2ff;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
}

/* Category anchors double as the category view: keep the header clear of
 * the pinned help search when jumping on mobile (must stay after the
 * global 1rem rule above so the cascade applies it on small screens). */
@media (max-width: 767.98px) {
    section[id^='cat-'] {
        scroll-margin-top: 6rem;
    }
}