/* Mobile Web — Admin Dashboard
   All rules scoped to ≤768px so desktop is unaffected. */

@media (max-width: 768px) {

    /* ── Global ─────────────────────────────────────────── */
    input, textarea, select {
        font-size: 16px !important;   /* prevent iOS auto-zoom */
    }

    .btn {
        min-height: 44px;             /* WCAG touch target */
    }

    .btn-sm {
        min-height: 38px;
    }

    /* ── Header & Nav ───────────────────────────────────── */
    .header {
        flex-wrap: wrap;
        padding: 12px 10px;
        gap: 8px;
    }

    .header h1 {
        font-size: 1.2rem;
        width: 100%;
    }

    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    #ultrawide-toggle-btn {
        display: none !important;
    }

    /* ── Container & Cards ──────────────────────────────── */
    .container {
        padding: 10px 8px;
    }

    .card {
        padding: 14px;
        margin-bottom: 14px;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Dashboard Grids ────────────────────────────────── */
    .grid-3 {
        grid-template-columns: 1fr !important;
    }

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

    /* Dashboard stat font overrides */
    #view-dashboard [style*="font-size: 2.5rem"] {
        font-size: 1.8rem !important;
    }

    #view-dashboard [style*="font-size: 1.8rem"] {
        font-size: 1.3rem !important;
    }

    #view-dashboard [style*="font-size: 1.4rem"] {
        font-size: 1.1rem !important;
    }

    /* Tables: horizontal scroll wrapper */
    .card:has(> .table),
    .card:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table th, .table td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    /* ── Sessions View ──────────────────────────────────── */
    #view-sessions .flex.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #view-sessions .flex.flex-between .flex.gap-1 {
        width: 100%;
        flex-wrap: wrap;
    }

    /* ── Characters View ────────────────────────────────── */
    #view-characters .flex.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #view-characters .flex.flex-between .flex.gap-1 {
        width: 100%;
        flex-wrap: wrap;
    }

    #view-characters .flex.gap-1 .btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

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

    /* ── Scenarios View ─────────────────────────────────── */
    #view-scenarios .flex.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #scenarios-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Live Session Header ────────────────────────────── */
    #view-live > .flex.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #view-live > .flex.flex-between > .flex.gap-1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #view-live > .flex.flex-between > .flex.gap-1 > .btn {
        flex: 1;
        min-width: 80px;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* ── Live Session Layout — Panel Switching ──────────── */
    .live-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        grid-template-areas: unset !important;
        height: auto !important;
        gap: 0 !important;
    }

    .live-main,
    .live-controls,
    .live-sidebar {
        display: none !important;
    }

    .live-main.mobile-active,
    .live-controls.mobile-active,
    .live-sidebar.mobile-active {
        display: flex !important;
    }

    /* ── Mobile Tab Bar ─────────────────────────────────── */
    .mobile-live-tabs {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg-dark);
        border-bottom: 2px solid var(--border);
        padding: 0;
    }

    .mobile-live-tab {
        flex: 1;
        min-height: 44px;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--text-secondary);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        padding: 10px 0;
    }

    .mobile-live-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

    /* ── Hidden on Mobile (photostory/gallery) ──────────── */
    #photostory-btn,
    #photo-album-btn,
    #photostory-controls {
        display: none !important;
    }

    .btn-visualize,
    .scene-thumbnails {
        display: none !important;
    }

    #photo-album-modal,
    #backfill-dialog {
        display: none !important;
    }

    /* ── Narration Rows ─────────────────────────────────── */
    .narration-row {
        flex-direction: column;
        gap: 8px;
        padding: 10px 0;
    }

    .narration-row-left {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .narration-row-img {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .narration-row-img-placeholder {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .narration-row-middle {
        width: 100%;
    }

    .narration-row-right {
        width: 100%;
    }

    .narration-box {
        min-height: 40vh;
        max-height: 60vh;
    }

    .btn-rewind {
        height: 36px;
        min-height: 36px;
        padding: 4px 12px;
        font-size: 0.8rem;
    }

    /* ── DM Controls ────────────────────────────────────── */
    .live-controls [style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .dm-instruction-box textarea {
        min-height: 80px;
    }

    /* Next Turn / Undo row */
    .live-controls [style*="text-align: center"][style*="display: flex"] {
        flex-wrap: wrap;
    }

    .live-controls [style*="text-align: center"][style*="display: flex"] .btn {
        flex: 1;
        min-height: 48px;
    }

    /* Turn advance / DM interference / timeout settings */
    .live-controls .flex.flex-between.flex-center {
        flex-wrap: wrap;
        gap: 8px;
    }

    .live-controls .flex.flex-between.flex-center .flex.flex-center {
        width: 100%;
    }

    /* DM Commands selects */
    .live-controls [style*="display: flex"][style*="gap: 8px"]:has(> select) {
        flex-direction: column;
    }

    .live-controls [style*="display: flex"][style*="gap: 8px"] select {
        width: 100% !important;
    }

    /* ── Turn Order ─────────────────────────────────────── */
    .turn-order-item {
        flex-wrap: wrap;
        gap: 6px;
        white-space: normal;
    }

    .turn-order-controls {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .turn-order-controls .btn {
        min-height: 36px;
        min-width: 36px;
    }

    /* ── Session Characters (sidebar) ───────────────────── */
    #session-characters .card,
    #session-characters > div {
        margin-bottom: 8px;
    }

    #session-characters select {
        width: 100% !important;
    }

    #session-characters .flex.gap-1 {
        flex-wrap: wrap;
    }

    /* ── Modals ──────────────────────────────────────────── */
    .modal {
        width: 96% !important;
        max-width: none !important;
        max-height: 95vh !important;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
    }

    .modal-footer .btn {
        flex: 1;
    }

    /* Multi-column modal grids → single column */
    .modal [style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
    }

    .modal [style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    .modal [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    .modal [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* Character sheet modal */
    .character-sheet-modal {
        max-height: 95vh !important;
    }

    .character-sheet-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Generated Characters / Discard Bucket / Recycle Bin modals */
    #generated-chars-modal > div,
    #discard-bucket-modal > div,
    #recycle-bin-modal > div {
        width: 96% !important;
        max-width: none !important;
    }

    #generated-chars-body,
    #discard-bucket-body {
        grid-template-columns: 1fr !important;
    }

    #recycle-bin-body {
        grid-template-columns: 1fr !important;
    }

    /* Attribute picker */
    #attribute-picker > div {
        width: 96% !important;
        max-height: 90vh !important;
    }

    /* World state header in live session */
    .live-main .card-header .flex.gap-1 {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── Character Filter Bar ──────────────────────────── */
    .char-filter-row {
        flex-direction: column;
    }

    .char-filter-group {
        min-width: 0;
        width: 100%;
    }

    .char-filter-search {
        min-width: 0;
    }

    .char-filter-group[style*="align-self: flex-end"] {
        align-self: stretch !important;
    }

    .char-filter-group[style*="align-self: flex-end"] .btn {
        width: 100%;
        justify-content: center;
    }
}