/* Phone refinements. Loaded after app.css. Everything below 640px only; the desktop/tablet
   layout (>= 640px, where the sidebar is always visible) is unchanged. Colors, fonts and
   components keep the existing design. */

.portal-backdrop { display: none; }
.portal-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video, canvas, iframe { max-width: 100%; }

@media (max-width: 639.98px) {
    /* ---------- Top bar + off-canvas menu ---------- */
    .portal-topbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 50;
        display: flex; align-items: center; justify-content: space-between;
        height: calc(3.5rem + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 0.5rem 0 0.75rem;
        background: #000; border-bottom: 1px solid #1e293b;
    }
    .portal-topbar-brand { display: flex; align-items: center; gap: 0.5rem; color: #94a3b8; font-size: 0.875rem; text-decoration: none; }
    .portal-topbar-brand img { height: 2.5rem; width: auto; }
    .portal-menu-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px; padding: 0.5rem;
        color: #fff; background: transparent; border: 0; border-radius: 0.375rem;
    }
    .portal-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    #portal-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        height: 100%; height: 100dvh;
        z-index: 60;
        width: min(18rem, 86vw);
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }
    .portal-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(15, 23, 42, 0.55);
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    body.portal-menu-open .portal-backdrop { opacity: 1; pointer-events: auto; }
    body.portal-menu-open { overflow: hidden; }
    #portal-sidebar nav a { min-height: 44px; }

    /* Pages that drew their own phone header + menu button: the top bar replaces it. */
    #main-content header:has([data-sidebar-open]) { display: none !important; }

    /* ---------- Page content ---------- */
    #main-content {
        width: 100%; min-width: 0;
        padding-top: calc(3.5rem + env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
    }
    #main-content h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.15 !important; overflow-wrap: break-word; }
    #main-content h2 { overflow-wrap: break-word; }
    #main-content pre, #main-content code { white-space: pre-wrap; word-break: break-word; }

    /* Big page gutters (p-8/p-10) shrink to 16px so content gets the width. */
    #main-content .p-10, #main-content .p-8, #main-content .md\:p-10, #main-content .lg\:p-10 { padding: 1rem !important; }
    #main-content .px-10, #main-content .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Rows of buttons/filters wrap instead of running off the screen. */
    #main-content .flex:not(.flex-col):not(.flex-nowrap) { flex-wrap: wrap; }

    /* iOS zooms into any field with text smaller than 16px; keep fields at 16px. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
    select, textarea { font-size: 16px !important; max-width: 100%; }

    /* Bootstrap pages (EULA, privacy): footer button rows wrap. */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.75rem; }


    /* ---------- Touch targets (Apple/Google guidance: ~44px) ---------- */
    #main-content button:not(.portal-keep-size),
    #main-content input[type=submit], #main-content input[type=button],
    #main-content select,
    body:not(:has(#main-content)) button, body:not(:has(#main-content)) select,
    body:not(:has(#main-content)) input[type=submit] { min-height: 44px; }
    #main-content button:not(.portal-keep-size) { min-width: 44px; }
    /* Button-style links (padded) get the same height without changing their look. */
    #main-content a[class*="py-"]:not(.block):not(.flex):not(.inline-flex):not(.w-full) {
        display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    }
    #main-content a.block[class*="py-"], #main-content a.flex[class*="py-"],
    #main-content a.inline-flex[class*="py-"], #main-content a.w-full[class*="py-"] { min-height: 44px; }
    #main-content a.flex[class*="py-"], #main-content a.inline-flex[class*="py-"] { align-items: center; }
    input[type=checkbox], input[type=radio] { width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0; }
    /* Small text inputs read and tap better at the standard height. */
    #main-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]) { min-height: 44px; }

    /* ---------- Readable text: nothing smaller than 11px on a phone ---------- */
    .text-\[7px\], .text-\[8px\], .text-\[9px\], .text-\[10px\] { font-size: 11px !important; line-height: 1.35 !important; }

    /* ---------- Pop-up windows scroll instead of being cut off ---------- */
    .fixed.inset-0:not(.portal-backdrop) {
        overflow-y: auto !important; -webkit-overflow-scrolling: touch;
        align-items: flex-start !important;
        padding-top: calc(1rem + env(safe-area-inset-top)) !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    .fixed.inset-0:not(.portal-backdrop) > * { margin-top: auto; margin-bottom: auto; max-height: none; flex-shrink: 0; }
    /* Pop-up header rows (title + close button) stay on one line. */
    .fixed.inset-0 .flex.justify-between { flex-wrap: nowrap !important; }
    .fixed.inset-0 .flex.justify-between > :first-child { min-width: 0; }

    /* ---------- Hover-only controls are always visible on touch screens ---------- */
    #main-content .group-hover\:opacity-100 { opacity: 1 !important; }

    /* ---------- List tables become stacked cards ---------- */
    table.portal-stack, table.portal-stack tbody { display: block; width: 100%; }
    table.portal-stack thead { display: none; }
    table.portal-stack tr { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; }
    table.portal-stack tbody tr:last-child { border-bottom: 0; }
    #main-content table.portal-stack td {
        display: block; position: relative; border: 0 !important;
        padding: 0.3rem 0 0.3rem 38% !important;
        text-align: left !important; white-space: normal !important;
        min-height: 1.5rem; overflow-wrap: break-word;
    }
    table.portal-stack td::before {
        content: attr(data-label);
        position: absolute; left: 0; top: 0.35rem; width: 35%;
        font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
        color: #64748b; line-height: 1.3; white-space: normal;
    }
    /* First cell (usually the name) is the card title; cells without a header span the card. */
    #main-content table.portal-stack td:first-child,
    #main-content table.portal-stack td:not([data-label]),
    #main-content table.portal-stack td.portal-cell-wide { padding-left: 0 !important; }
    table.portal-stack td:first-child::before,
    table.portal-stack td:not([data-label])::before,
    table.portal-stack td.portal-cell-wide::before { display: none; }
    #main-content table.portal-stack td:first-child { padding-bottom: 0.5rem !important; }
    #main-content table.portal-stack tr { padding: 0.75rem 1rem !important; }
    table.portal-stack td > .flex, table.portal-stack td > div { justify-content: flex-start !important; }
    table.portal-stack td.portal-cell-wide { text-align: center !important; }
    /* A card list never needs the sideways scroll box. */
    .portal-table-scroll:has(> table.portal-stack) { overflow-x: visible; }
}