/**
 * Responsive shell — global rules for every layout (app, guest, messenger, classroom, hub).
 * Load after app.css, before module CSS and mobile-responsive.css.
 */

:root {
    --bp-desktop: 901px;
    --bp-tablet: 900px;
    --bp-phone: 680px;
    --bp-phone-sm: 480px;
    --mobile-nav-offset: calc(78px + env(safe-area-inset-bottom, 0px));
}

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

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

img,
video,
iframe,
embed,
object,
svg,
canvas {
    max-width: 100%;
}

.leaflet-container {
    max-width: 100%;
}

/* ── Tablet (≤900px) ───────────────────────────────────────────── */
@media (max-width: 900px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .topbar h1,
    .topbar p,
    .section-head h2,
    .welcome-card h2 {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .page-heading,
    .page-heading > div {
        min-width: 0;
    }

    .topbar {
        flex-wrap: wrap;
        min-height: auto;
        row-gap: 8px;
    }

    .topbar-actions {
        flex-wrap: wrap;
    }

    .welcome-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .year-badge {
        width: 100%;
        justify-content: flex-start;
    }

    .settings-layout,
    .settings-layout.ticket-detail-layout {
        grid-template-columns: 1fr;
    }

    .settings-menu {
        position: static;
    }

    .bulk-toolbar,
    .advanced-search,
    .filter-bar,
    .toolbar-row,
    .header-actions,
    .form-actions,
    .action-row,
    .btn-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bulk-toolbar > *,
    .filter-bar > *,
    .toolbar-row > * {
        min-width: 0;
    }

    /* Messenger sheets manage their own size (full-bleed on mobile). */
    dialog:not(.msg-panel):not(.msg-lightbox):not(.msg-compress-dialog),
    .modal,
    [role="dialog"]:not(.msg-panel):not(.msg-lightbox):not(.msg-compress-dialog) {
        width: min(96vw, 640px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: auto;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-table,
    .table-wrap,
    .table-scroll,
    .table-responsive,
    [data-table-scroll],
    .acc-fe-table-scroll,
    .cm-bots-table-wrap,
    .cm-sms-table-wrap,
    .report-card-table-wrap,
    .data-table-wrap,
    .sports-table-wrap,
    .corr-table-wrap,
    .circ-assignee-table-wrap,
    .oex-report-table-wrap,
    .oex-subjects-table-wrap,
    .oex-participants-scroll,
    .acc-pc-table-scroll,
    .acc-pay-fund-table-wrap,
    .acc-wh-excel-table-wrap,
    .rep-rcard-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .page-content :is(.panel, .settings-card, .settings-tab, .quick-panel, .empty-state, .users-table-panel) {
        max-width: 100%;
        min-width: 0;
    }

    .page-content :is(.panel, .settings-card, .settings-tab, section, article, .lf-card-body, .lf-card, .users-table-panel):has(table.data-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }

    .page-content table.data-table,
    .page-content .data-table,
    .responsive-table > table,
    .table-wrap > table,
    .table-scroll > table,
    .table-responsive > table {
        width: 100%;
        max-width: none;
        table-layout: auto;
    }

    .page-content table.data-table th,
    .page-content table.data-table td,
    .responsive-table > table th,
    .responsive-table > table td {
        word-break: normal;
        overflow-wrap: normal;
    }

    .pretty-select,
    .pretty-select-trigger,
    input,
    select,
    textarea {
        max-width: 100%;
        min-width: 0;
    }
}

/* ── Phone (≤680px) ────────────────────────────────────────────── */
@media (max-width: 680px) {
    body.is-logged-in:has(.mobile-nav),
    body.is-learner:has(.mobile-nav) {
        padding-bottom: var(--mobile-nav-offset);
    }

    .guest-body {
        padding: 16px 12px max(16px, env(safe-area-inset-bottom));
    }

    .guest-shell,
    .install-card,
    .auth-card {
        width: 100%;
        max-width: 100%;
    }

    .form-grid,
    .form-grid fieldset,
    .form-grid.compact,
    .form-grid fieldset {
        grid-template-columns: 1fr !important;
    }

    .form-grid fieldset {
        padding: 14px;
    }

    .copy-years {
        grid-template-columns: 1fr;
    }

    .transfer-direction {
        transform: rotate(-90deg);
        padding: 0;
    }

    .organization-grid,
    .forms-grid,
    .stats-grid,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .primary-btn,
    .secondary-btn,
    .danger-btn,
    .danger-outline-btn {
        min-height: 44px;
    }

    .header-actions .primary-btn,
    .header-actions .secondary-btn,
    .section-head .primary-btn,
    .section-head .secondary-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .sticky-save,
    .form-actions.sticky-save,
    .sys-save-bar,
    [class*="sticky-save"],
    [class*="save-bar"] {
        bottom: var(--mobile-nav-offset);
        z-index: 20;
        padding-inline: 8px;
    }

    body:not(:has(.mobile-nav)) .sticky-save,
    body:not(:has(.mobile-nav)) .form-actions.sticky-save {
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .data-table {
        min-width: 640px;
        max-width: none;
        font-size: 12px;
    }

    .responsive-table,
    .table-wrap,
    .table-scroll,
    .table-responsive,
    [data-table-scroll],
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .pagination,
    .pager,
    .page-tabs,
    .tab-row,
    .chip-row,
    .filter-chips {
        flex-wrap: wrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .card-grid,
    .hub-grid,
    .module-grid,
    .tiles-grid,
    [class*="-cards"] {
        grid-template-columns: 1fr !important;
    }

    .two-col,
    .split-layout,
    .detail-layout {
        grid-template-columns: 1fr !important;
    }

    .impersonation-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .impersonation-bar form button {
        width: 100%;
    }

    .notification-dropdown,
    .inbox-dropdown,
    .global-search-panel {
        width: min(100vw - 20px, 420px);
        max-width: calc(100vw - 20px);
    }

    .system-announcement-dialog article {
        width: min(96vw, 520px);
        max-height: min(88vh, 720px);
        overflow: auto;
    }
}

/* ── Small phone (≤480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .copy-options {
        grid-template-columns: 1fr;
    }

    .section-head .app-action-btn span,
    .header-actions .app-action-btn span {
        display: none;
    }

    .section-head .app-action-btn,
    .header-actions .app-action-btn {
        min-width: 44px;
        padding-inline: 12px;
    }
}

/* ── Dashboard hub ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hub-body {
        overflow-x: clip;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .hub-shell,
    .hub-main,
    .hub-content {
        min-width: 0;
        max-width: 100%;
    }

    .hub-sc-grid {
        min-width: 0;
        width: 100%;
    }

    .hub-sc-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hub-desktop {
        display: none !important;
    }

    .hub-mobile {
        display: block !important;
    }

    .hub-topbar,
    .hub-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hub-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (min-width: 901px) {
    .hub-mobile {
        display: none !important;
    }
}

/* ── Messenger layout ────────────────────────────────────────────── */
@media (max-width: 980px) {
    .messenger-body {
        overflow-x: clip;
    }

    .msg-layout,
    .msg-shell {
        min-width: 0;
        max-width: 100vw;
    }

    .msg-sidebar {
        max-width: 100%;
    }

    .msg-composer,
    .msg-input-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .msg-composer textarea,
    .msg-composer input {
        min-width: 0;
        flex: 1 1 100%;
    }
}

@media (max-width: 680px) {
    .msg-mobile-nav {
        display: flex;
    }

    .msg-thread-header,
    .msg-chat-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Online classroom ────────────────────────────────────────────── */
@media (max-width: 960px) {
    .ocr-body {
        overflow-x: clip;
    }

    .ocr-layout,
    .ocr-stage,
    .ocr-sidebar {
        min-width: 0;
        max-width: 100%;
    }

    .ocr-toolbar,
    .ocr-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ocr-video-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Print / share public pages ──────────────────────────────────── */
@media (max-width: 680px) {
    .files-share-public,
    .external-pay-shell,
    .epay-shell {
        padding: 12px;
    }
}

/* ── Touch: disable hover-only tooltips ─────────────────────────── */
@media (hover: none) {
    [data-tooltip]:not(.tooltip-visible)::after,
    [data-tooltip]:not(.tooltip-visible)::before {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ── Prevent iOS zoom on focus (needs ≥16px on text fields) ─────── */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
    select,
    textarea,
    [contenteditable="true"],
    .pretty-select-search {
        font-size: 16px !important;
    }
}

/* ── Safe areas (notch / home indicator) ─────────────────────────── */
@supports (padding: max(0px)) {
    .topbar {
        padding-top: max(10px, env(safe-area-inset-top));
    }
}

/*
 * نوار پایین موبایل: safe-area فقط با bottom جبران می‌شود.
 * padding-bottom اضافه + height ثابت → آیکون‌ها بالا می‌پرند (باگ بعضی گوشی‌ها).
 */
@media (max-width: 680px) {
    .mobile-nav {
        display: flex;
        position: fixed;
        z-index: 35;
        right: 10px;
        left: 10px;
        bottom: max(9px, env(safe-area-inset-bottom, 0px));
        height: 72px;
        min-height: 72px;
        max-height: 72px;
        padding: 6px 8px 8px !important;
        box-sizing: border-box;
        align-items: center !important;
        justify-content: space-around;
        gap: 2px;
        overflow: visible;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .mobile-nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        height: 52px !important;
        min-height: 52px;
        max-height: 52px;
        margin: 0 !important;
        padding: 4px 4px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        align-self: center !important;
        transform: none !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mobile-nav-item i {
        flex: 0 0 auto;
        font-size: 17px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .mobile-nav-item strong {
        flex: 0 0 auto;
        font-size: 9px !important;
        line-height: 1.15 !important;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-nav-item.active i {
        transform: none !important;
    }

    /* پیام‌رسان: کمی بالاتر، ولی لیبل داخل نوار می‌ماند */
    .mobile-nav-item.mobile-nav-messenger {
        height: 52px !important;
        min-height: 52px;
        max-height: 52px;
        overflow: visible !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        padding: 0 2px 2px !important;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-nav-messenger-ring {
        position: absolute;
        top: -22px;
        left: 50%;
        width: 48px;
        height: 48px;
        margin-left: -24px;
        border-radius: 16px;
        flex-shrink: 0;
    }

    .mobile-nav-messenger-ring i {
        font-size: 22px !important;
    }

    .mobile-nav-messenger strong {
        position: relative;
        z-index: 1;
        margin-top: 0 !important;
    }

    .mobile-nav-messenger.active .mobile-nav-messenger-ring,
    .mobile-nav-messenger:hover .mobile-nav-messenger-ring {
        transform: scale(1.04);
    }
}