/* 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: 52px;
    --mobile-tap-min: 38px;
    --mobile-tap-sm: 32px;
}

/* 8. Base type: body 15px for density; form controls stay at 16px
   (prevents iOS auto-zoom). Arabic line-height never below 1.45. */
@media (max-width: 767.98px) {
    body {
        font-size: 14px;
        line-height: 1.45;
        /* 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: 0.75rem;
        padding-top: 0.75rem;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    /* Compact density: headings + muted text take less vertical space
       while staying comfortably readable (Arabic line-height >= 1.45). */
    .h1, h1 {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .h2, h2 {
        font-size: 1.05rem;
        line-height: 1.45;
    }

    .h4, h4 {
        font-size: 1rem;
        line-height: 1.45;
    }

    .h5, h5,
    .h6, h6 {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .small, small,
    .text-muted {
        line-height: 1.45;
    }

    .card-body {
        padding: 0.75rem 0.625rem;
    }

    .card-header {
        padding-top: 0.625rem !important;
        padding-bottom: 0.5rem !important;
    }

    .alert {
        padding: 0.5rem 0.625rem;
        font-size: 0.85rem;
    }

    /* Bootstrap utility density (mobile only): templates use p-4 / mb-4 /
       g-3 generously for desktop airiness — halve them on phones so
       twice the content fits. Desktop cascade is untouched. */
    .p-4 {
        padding: 0.75rem !important;
    }

    .px-4 {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }

    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .mb-3 {
        margin-bottom: 0.625rem !important;
    }

    .g-3 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.5rem;
    }

    .gap-2 {
        gap: 0.375rem !important;
    }

    /* Top navbar + breadcrumb take less vertical room on phones. */
    .navbar {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .app-breadcrumb-wrap {
        margin-bottom: 0.375rem !important;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    /* 2. Minimum 38px tap targets (primary actions keep 46px+ via their own
       rules) + thumb-friendly spacing. Form controls keep 16px type so
       iOS never triggers auto-zoom. */
    .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.375rem;
        font-size: 0.85rem;
        line-height: 1.45;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Secondary/small buttons drop to 32px; primary/sticky actions keep 44px+. */
    .btn-sm {
        min-height: var(--mobile-tap-sm);
        font-size: 0.78rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    /* btn-lg renders as a standard primary button on phones (was 48px+). */
    .btn-lg {
        min-height: var(--mobile-tap-min);
        font-size: 0.9rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

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

    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.375rem;
        padding-bottom: 0.375rem;
        font-size: 0.87rem;
    }

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

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        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.25rem 0.5rem;
        font-size: 0.85rem;
    }

    .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.125rem;
    }

    .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.5rem;
        padding-bottom: 0.5rem;
        line-height: 1.45;
        font-size: 0.87rem;
    }

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

    /* Plain links inside stacked cards get a full 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-sm);
    }

    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 compact 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: 1px;
        min-height: var(--mobile-nav-height);
        padding: 0.2rem 0.25rem;
        color: #6b7280;
        text-decoration: none;
        font-size: 0.62rem;
        line-height: 1.2;
        border: 0;
        background: transparent;
    }

    .mobile-bottom-nav__item svg {
        width: 18px;
        height: 18px;
        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.375rem;
        margin-bottom: 0.375rem;
    }

    .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.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        gap: 0.5rem;
    }

    .mobile-sticky-bar .btn {
        flex: 1 1 0;
        min-height: 46px;
        font-size: 0.9rem;
        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: 52px;
        height: 52px;
        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: 22px;
        height: 22px;
    }

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

    .mobile-card-list__item {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.625rem;
        padding: 0.5rem 0.625rem;
        min-height: var(--mobile-tap-sm);
        text-decoration: none;
        color: inherit;
        font-size: 0.87rem;
        line-height: 1.45;
    }

    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.5rem;
        z-index: 1020;
        gap: 0.375rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* 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;
    }

    /* Staff breadcrumb (button crumbs): single scrollable row on mobile,
       wrapping button group on desktop. */
    .app-breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .app-breadcrumb > div {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    .app-breadcrumb .btn,
    .app-breadcrumb .fw-bold {
        flex-shrink: 0;
    }

    .app-breadcrumb .breadcrumb-sep {
        flex-shrink: 0;
        color: #9ca3af;
    }

    .app-breadcrumb .fw-bold[aria-current='page'] {
        display: inline-block;
        max-width: 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: 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.625rem;
        padding: 0.5rem 0.625rem;
        font-size: 0.85rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        gap: 0.375rem;
        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: 0.5rem;
    }

    .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.5rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.625rem;
        padding: 0.5rem 0.625rem;
        min-height: 48px;
        font-size: 0.87rem;
        line-height: 1.45;
    }

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

    /* 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-sm);
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Destructive actions stay visually separated from the primary action. */
    .mobile-danger-zone {
        margin-top: 1rem;
        padding-top: 0.75rem;
        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-sm);
        min-height: var(--mobile-tap-sm);
        margin: -0.5rem -0.375rem;
    }

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

    .accordion-body {
        padding: 0.625rem 0.75rem;
        font-size: 0.87rem;
    }

    /* Dashboard quick-link cards: description collapses to one line on
       phones so 3-4 cards fit where 1-2 fit before. Full text stays
       visible on desktop. */
    .quick-link-card .card-body {
        padding: 0.75rem;
    }

    .quick-link-card h3 {
        font-size: 0.87rem;
        margin-bottom: 0.25rem;
    }

    .quick-link-card p {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.78rem;
        margin-bottom: 0.375rem;
    }

    /* Dashboard KPI cards: smaller icon disc + value so two KPIs fit
       in one viewport height. Inline 48px disc needs !important. */
    .card-body .rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .card-body .fs-4 {
        font-size: 1.15rem !important;
        line-height: 1.4;
    }

    /* Dashboard charts: 260px inline height dominates phones — 200px
       keeps the trend readable while saving a full card of scroll. */
    .chart-container {
        height: 200px !important;
    }

    /* 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;
    }
}

/* Staff button-breadcrumb separators (all breakpoints). The chevron points
 * forward: › in LTR, flipped to ‹ in RTL (same logical-flip pattern as
 * the mobile .dir-arrow rule, but global so desktop RTL is correct too). */
.app-breadcrumb .breadcrumb-sep {
    color: #9ca3af;
    font-size: 0.85rem;
    line-height: 1;
}

.app-breadcrumb .dir-arrow {
    display: inline-block;
}

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

/* 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;
    }
}