/* app-mobile.css
 * Mobile responsive overrides for Emailinator (phones: iPhone, Samsung, other Android)
 * This file contains targeted rules for small viewports and touch devices.
 * Place this file after app.css in the layout so these rules override desktop styles.
 */

/* Base: apply only to small devices (phones) */
@media only screen and (max-width: 640px) {
    /* Use safe-area for iOS notch and make sure body has padding for notches */
    html, body {
        font-size: 16px; /* base for scalable text on phones */
        -webkit-text-size-adjust: 100%;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0.06);
    }

    /* Containers: ensure outer wrappers don't force horizontal scroll on phones */
    .emailinator-container,
    .content-overlay,
    .container-main {
        box-sizing: border-box !important; /* include padding inside width */
        max-width: 100% !important;        /* never exceed viewport width */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;     /* prevent accidental horizontal scroll */
    }

    /* If content-overlay uses large fixed padding inline, reduce it on phones so it won't add to width */
    .content-overlay {
        padding: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Make badges and service chips wrap and break long tokens to multiple lines */
    .container-main .badge,
    .emailinator-container .badge,
    .content-overlay .badge,
    .header .badge,
    .service-list .badge,
    .service-badges .badge {
        display: inline-block !important;
        white-space: normal !important;      /* allow wrapping */
        overflow-wrap: anywhere !important;  /* break long words/emails */
        word-break: break-word !important;
        max-width: 100% !important;
        margin-right: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Header */
    .header {
        border-radius: 0.5rem;
        padding: 0.75rem 0.75rem;
    }

    .header h1 {
        font-size: 1.25rem;
        line-height: 1.2;
        margin: 0;
    }
    /* Stack header contents so title, emergency button, and services are each on their own row */
    .header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .header h1 {
        font-size: 1.25rem;
        line-height: 1.2;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
    }

    .header h1 svg {
        flex-shrink: 0;
        margin-right: 0.25rem;
    }

    /* Increase space between the title and the Emergency Shutoff button */
    .header .main-title {
        margin-bottom: 0.5rem !important;
    }

    /* Ensure the descriptive paragraph (and services line) is visible and on its own row */
    /* Force each immediate child of .header onto its own row on small screens */
    .header > * {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important; /* allow children to shrink and wrap */
        margin: 0 !important;
    }

    /* Allow descriptive text and small text to wrap instead of truncating */
    .header p,
    .header small,
    .header .service-line {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
        white-space: normal !important;
        text-overflow: initial !important;
    }

    /* Center header text on mobile for better visual balance */
    .header p,
    .header span,
    .header small {
        text-align: center !important;
    }

    /* Reduce sizes for main description and refresh note on phones */
    .header .main-description {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    .header .services .services-refresh-row .services-refresh,
    .services-refresh {
        font-size: 0.75rem !important; /* slightly smaller on phones */
        line-height: 1.15 !important;
        opacity: 0.9 !important;
    }

    /* Style the emergency shutoff to occupy its own row and sit to the right */
    .header .shutoff-btn,
    .header .shutoff-btn-active {
        /* keep the button touchable and right-aligned while remaining on its own row */
        align-self: flex-end !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        padding: 0.35rem 0.7rem !important;
    }

    /* Ensure service badges wrap nicely beneath the services label */
    /* Put the "Services:" label on its own row and list badges beneath it stacked */
    .header .services {
        display: block !important;
        width: 100% !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
        font-weight: 600;
    }

    .header .service-list,
    .header .service-badges {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .header .service-list .badge,
    .header .service-badges .badge,
    .header .badge {
        display: inline-block !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        width: auto !important;
        align-self: flex-start !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Compact the Services label + badges area to avoid a large empty column */
    /* Place this after the generic .header rules so it overrides the full-width stacking */
    .header .services {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    /* Keep the label compact and allow the badge list to take remaining space */
    .header .services .service-label,
    .header .services > label,
    .header .services > .service-label {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding-right: 0.35rem !important;
        color: inherit !important;
    }

    .header .service-list,
    .header .service-badges {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        align-items: center !important;
    }

    /* Reduce badge padding/size in this row so they don't appear as large blocks */
    .header .service-list .badge,
    .header .service-badges .badge {
        padding: 0.2rem 0.45rem !important;
        font-size: 0.78rem !important;
    }

    /* Stronger overrides specifically for ServiceStatusWidget markup */
    .header .d-flex.align-items-center.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* allow badges to wrap instead of creating empty space */
        gap: 0.35rem !important;
        align-items: center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .header .d-flex.align-items-center.gap-2 > small {
        flex: 0 0 auto !important; /* keep "Services:" label compact */
        margin: 0 !important;
        padding-right: 0.25rem !important;
        white-space: nowrap !important;
    }

    .header .service-status-badge {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.18rem 0.4rem !important;
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    /* Hamburger / collapsible menu behaviour for mobile header */
    .hamburger-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Increase touch target while letting the image size determine icon width */
        padding: 0.4rem 0.6rem !important;
        font-size: 1.05rem !important;
        border-radius: 0.5rem !important;
        min-width: 44px !important;
        width: auto !important;
        max-width: 56px !important; /* constrain maximum width to avoid overflow */
        text-align: center !important;
        z-index: 20000 !important; /* ensure it's above other header content and overlays */
        background-color: rgba(255,255,255,0.04) !important; /* subtle button bg */
    }

    /* Ensure the services row wraps and does not create horizontal overflow */
    .services-container {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        margin-top: 1rem !important; /* restore spacing above the hamburger/services row that .header > * { margin:0 } removes */
    }

    /* Ensure menu container and hamburger button are vertically centered
       relative to the services block. Some browsers calculate flex baseline
       differently when children are multi-line; force center alignment. */
    .services-container .menu-container {
        align-self: center !important; /* center in cross axis of parent row */
        display: flex !important;
        align-items: center !important; /* center children (hamburger) vertically */
        justify-content: center !important;
    }

    /* Make the hamburger itself centered within its own container and
       prevent extra vertical offset from padding or line-height differences. */
    .menu-container .hamburger-btn {
        align-self: center !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    /* Mobile: ensure the services badges and the refresh line stack vertically
       so the refresh text always appears below the badges on small screens. */
    .header .services {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    .header .services .services-top {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
    }

    .header .services .service-badges {
        justify-content: center !important;
        width: 100% !important;
    }

    .header .services .services-refresh-row {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
    }

    /* Collapsed menu hides links; open shows stacked vertical list */
    .menu.collapsed {
        display: none !important;
    }

    .menu.open {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-top: 0.35rem !important;
        position: relative !important;
        z-index: 20010 !important; /* ensure menu appears above overlays/drawer */
    }

    /* Make menu items full-width and touch-friendly when expanded */
    .menu.open a,
    .menu.open form,
    .menu.open .btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding-left: 0.5rem !important;
    }

    /* Ensure button labels and inline images are centered inside hamburger */
    .hamburger-btn img,
    .hamburger-btn {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure the image doesn't capture pointer events (let the button handle clicks) */
    .hamburger-btn img {
        pointer-events: none !important;
    }

    /* Keep desktop behavior for menu when not collapsed (larger screens) */
    .menu {
        max-width: 100% !important;
    }

    /* If there is still tight space, allow horizontal scrolling for badges only */
    .header .d-flex.align-items-center.gap-2 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Cards */
    .card {
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        overflow: hidden !important; /* prevent any child from bleeding outside the card boundary */
    }

    .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        flex-wrap: wrap !important;   /* allow the header row to wrap when space is tight */
        overflow: hidden !important;
    }

    /* Allow text inside card headers to wrap instead of overflowing */
    .card-header h5,
    .card-header h6 {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        min-width: 0 !important;
    }

    /* Bootstrap badges default to white-space: nowrap which overflows on mobile */
    .card-header .badge {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }

    /* Left content div in card headers should be allowed to shrink */
    .card-header > div:first-child {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow: hidden !important;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* Buttons: increase tap targets and stack where appropriate */
    .btn {
        display: inline-block;
        padding: 0.6rem 0.9rem;
        min-width: 36px !important; /* reduce min-width on phones to avoid oversized buttons */
        min-height: 44px;
        font-size: 1rem;
        border-radius: 0.75rem;
    }

    .btn.btn-sm {
        min-width: 40px !important;
        padding: 0.45rem 0.6rem;
    }

    /* Stack button groups and toolbars into a single column for better mobile layout */
    .btn-group,
    .btn-toolbar {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }

    /* Make individual buttons take a full row and improve tap targets */
    .btn-group .btn,
    .btn-toolbar .btn,
    .d-flex .btn,
    .d-inline-flex .btn {
        width: 100% !important;
        display: block;
        text-align: left;
        margin-bottom: 0.35rem;
    }

    /* Mode toggle buttons (Automated / Manual / Admin / Operations): use a 2-column grid so
       buttons always appear two-per-row instead of all on one overflowing row.
       display: grid !important overrides Bootstrap's display: flex !important on .d-flex. */
    .mode-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .mode-toggle .mode-toggle-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        font-size: 0.875rem !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        padding: 0.45rem 0.35rem !important;
        line-height: 1.25 !important;
    }

    /* Keep the ? help icon on its own compact line below the button label */
    .mode-toggle .mode-toggle-btn .mode-help-icon {
        margin: 0.2rem 0 0 0 !important;
        align-self: center !important;
    }

    /* Make primary actions full width when stacked */
    .btn-block,
    .btn.w-100 {
        width: 100% !important;
    }

    /* Forms and inputs */
    .form-control,
    .form-select {
        font-size: 1rem;
        padding: 0.5rem 0.6rem;
        border-radius: 0.5rem;
    }

    .form-label {
        font-size: 0.95rem;
    }

    /* Table responsiveness: stack rows or enable horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table thead {
        display: none; /* use list-like layout for table rows */
    }

    .table tbody tr {
        display: block;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 0.5rem;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        background: #fff;
    }

    /* Make table cells wrap and break long text instead of overflowing */
    .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0.5rem;
        border-bottom: none;
        flex-wrap: wrap; /* allow cell contents to wrap */
        min-width: 0 !important; /* allow flex children to shrink */
        white-space: normal !important; /* allow wrapping */
        overflow-wrap: anywhere !important; /* break long tokens */
        word-break: break-word !important;
    }

    .table tbody td::before {
        /* Optional: show header label using data-label attr if present in markup */
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        margin-right: 0.5rem;
        /* Reduce basis so label column doesn't force overflow on small screens */
        flex: 0 0 36%;
        max-width: 44%;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure any inline children inside a td can shrink and wrap */
    .table tbody td > * {
        min-width: 0 !important;
    }

    /* Keep the responsive wrapper touch-friendly and allow horizontal scroll when necessary */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        width: 100%;
    }

    /* Lists and scrollable dealer lists */
    .scrollable-list,
    div[style*="overflow-y: auto"]:not(.email-preview-modal) {
        -webkit-overflow-scrolling: touch;
        max-height: 55vh;
    }

    .scrollable-list .form-check,
    div[style*="overflow-y: auto"]:not(.email-preview-modal) .form-check {
        padding: 0.5rem 0.4rem;
    }

    /* Reduce modal dialog widths for small screens */
    .editor-modal-dialog-sm,
    .editor-modal-dialog-md,
    .editor-modal-dialog-lg {
        width: 95vw !important;
        max-width: 95vw;
    }

    .editor-modal-content .modal-body {
        padding: 0.75rem !important;
    }

    /* WYSIWYG toolbar tighter spacing */
    .btn-toolbar .btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Badges adjust */
    .badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.45rem;
    }

    /* Blazor error UI - keep dismiss reachable */
    #blazor-error-ui {
        font-size: 0.95rem;
        padding: 0.6rem 0.75rem;
    }

    /* Spinner small adjustments */
    .spinner-border-sm {
        width: 1.1rem;
        height: 1.1rem;
        border-width: 0.18em;
    }

    /* Utilities for mobile spacing */
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 0.75rem !important; }
    .pt-mobile-1 { padding-top: 0.5rem !important; }

    /* Emergency shutoff button should remain prominent but touchable */
    .shutoff-btn {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font-weight: 700;
        border-radius: 0.6rem;
    }

    /* Improve text wrapping for headings and longer cells */
    .text-truncate-allow-wrap {
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Fix specific utility container that breaks mobile layout (e.g. filter / button groups)
       Target only inside card headers to avoid wide-reaching changes. Make each child occupy
       its own row and allow wrapping. */
    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0,
    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0 *,
    /* Broader matches: many headers use different utility class orders */
    .card-header > .d-flex,
    .card-header .d-flex.align-items-center.gap-2,
    .card-header .d-flex.justify-content-between.align-items-center.gap-2,
    .card-header .d-flex.gap-2 {
        box-sizing: border-box;
    }

    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    /* Apply to the broader selectors as well */
    .card-header > .d-flex,
    .card-header .d-flex.align-items-center.gap-2,
    .card-header .d-flex.justify-content-between.align-items-center.gap-2,
    .card-header .d-flex.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    /* Make each immediate child take a full row so items don't sit side-by-side */
    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0 > *,
    .card-header > .d-flex > *,
    .card-header .d-flex.align-items-center.gap-2 > *,
    .card-header .d-flex.justify-content-between.align-items-center.gap-2 > * {
        width: 100% !important;
        min-width: 0 !important; /* allow truncation instead of forcing overflow */
        display: block !important;
        margin: 0 !important;
    }

    /* Ensure positioned controls inside header shrink to available width */
    .card-header .position-relative {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure header titles and small text appear above buttons (their own rows) */
    .card-header h5,
    .card-header small {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.35rem 0 !important;
    }

    /* Explicit ordering so headings and small text appear before control buttons */
    .card-header h5 { order: 1 !important; }
    .card-header small { order: 2 !important; }
    .card-header .d-flex, /* controls container */
    .card-header .btn-group,
    .card-header .btn-toolbar { order: 3 !important; }

    /* More specific override for card header utility combination that appears in markup
       Ensure the header itself stacks vertically and all control groups are full-width. */
    .card-header.d-flex.justify-content-between.align-items-center.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    /* Force control container and its interactive children into stacked full-width rows */
    .card-header.d-flex.justify-content-between.align-items-center.gap-2 > .d-flex.gap-2,
    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0 {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        order: 3 !important;
    }

    .card-header.d-flex.justify-content-between.align-items-center.gap-2 > .d-flex.gap-2 > *,
    .card-header .d-flex.gap-2.align-items-center.flex-shrink-0 > * {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Override inline widths/positioned controls that force overflow (common in this markup) */
    .card-header .position-relative,
    .card-header .position-relative * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make form controls and small buttons fill available width in header controls */
    .card-header .form-select,
    .card-header input[type="text"],
    .card-header .btn,
    .card-header button {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    /* Allow the "Show:" small label and its numeric buttons to sit inline and wrap when space permits.
       If they don't fit they will naturally wrap to multiple rows. This targets the common pattern
       where a <small>Show:</small> is followed by a .d-flex container with the buttons. */
    .card-header small + .d-flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: auto !important;
    }

    .card-header small + .d-flex > * {
        width: auto !important; /* allow inline sizing */
        flex: 0 0 auto !important;
        min-width: 2.2rem !important; /* compact button size */
        padding: 0.28rem 0.5rem !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Reduce label spacing so buttons can fit on the same row */
    .card-header small {
        margin-right: 0.4rem !important;
        white-space: nowrap;
    }

    /* Make the new semantic queue controls compact and inline when space permits.
       Keep strong !important specificity to override broader mobile stacking rules above. */
    .card-header .queue-filters {
        /* allow filters container to shrink to content */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: auto !important;
    }

    .card-header .queue-filters small {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding-right: 0.35rem !important;
        white-space: nowrap !important;
    }

    .card-header .queue-filters .queue-show-buttons {
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* keep on one line when possible */
        align-items: center !important;
        gap: 0.25rem !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Compact sizing for the numeric show buttons so the container stays skinny */
    .card-header .queue-filters .queue-show-buttons > * {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 1.8rem !important; /* small round-ish tap target */
        padding: 0.18rem 0.4rem !important;
        font-size: 0.75rem !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* If there isn't enough space, allow the buttons to wrap to multiple rows gracefully */
    .card-header .queue-filters .queue-show-buttons.wrapped {
        flex-wrap: wrap !important;
    }

    /* Email preview modal: full-screen on mobile.
       Three-layer height cascade handles all modern mobile browsers:
         100vh                   — universal fallback
         -webkit-fill-available  — iOS Safari (pre-15.4) legacy
         100dvh                  — preferred: adjusts as browser chrome shows/hides
       max-height: none removes the inline max-height: calc(100vh - 40px) that
       otherwise caps the dialog at content height on browsers without dvh support.
       The iframe is absolutely positioned to fill the modal-body so the email
       scrolls within it regardless of what the onload JS sets for height. */
    .email-preview-modal {
        align-items: stretch !important;   /* fill the full backdrop height */
        padding: 0 !important;             /* remove the 20px top/bottom gap */
        overflow: hidden !important;       /* outer backdrop must NOT scroll */
        max-height: none !important;       /* prevent div[style*=overflow-y:auto] rule from capping at 55vh */
        height: 100vh !important;          /* universal fallback: ensure full viewport height */
        height: 100dvh !important;         /* preferred: adjusts for mobile browser chrome */
    }

    .email-preview-modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;          /* universal fallback */
        height: -webkit-fill-available !important; /* iOS Safari legacy */
        height: 100dvh !important;         /* preferred: adjusts for browser chrome */
        display: flex !important;
        flex-direction: column !important;
    }

    .email-preview-modal .modal-content {
        height: 100vh !important;          /* universal fallback */
        height: -webkit-fill-available !important;
        height: 100dvh !important;         /* preferred */
        max-height: none !important;       /* remove inline max-height constraint */
        border-radius: 0 !important;
        overflow: hidden !important;       /* clip; iframe scrolls internally */
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .email-preview-modal .modal-body {
        flex: 1 1 auto !important;
        overflow: hidden !important;       /* iframe fills and scrolls internally */
        min-height: 0 !important;
        padding: 0 !important;
        position: relative !important;    /* containing block for absolute iframe */
    }

    .email-preview-modal .modal-body iframe {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;          /* overrides the JS onload inline height */
        border: none !important;
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Device-specific tweaks for high-density small screens (modern iPhones and high-end Android) */
@media only screen and (max-width: 480px) and (device-pixel-ratio: 2),
       only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .header h1 { font-size: 1.15rem; }
    .card-header h5 { font-size: 1rem; }
}

/* Extra-small phones (older or compact devices) */
@media only screen and (max-width: 360px) {
    .btn { font-size: 0.95rem; padding: 0.5rem 0.75rem; }
    .header h1 { font-size: 1rem; }
}

/* Android-specific generic adjustments (Samsung, others) */
@supports (-webkit-hyphenate-character: "auto") {
    /* Mostly affects Android WebView rendering differences */
    .form-control, .form-select { line-height: 1.4; }
}

/* iOS-specific helper: remove input inner shadows for consistent look */
@supports (-webkit-overflow-scrolling: touch) {
    input, textarea, select { -webkit-appearance: none; }
}

/* Mobile queue drawer: show as a horizontal tab bar below the main content.
   The drawer was previously hidden here because a "View Queue" tab was the mobile path;
   that tab is no longer present, so we restore the drawer with a phone-friendly layout. */
@media only screen and (max-width: 640px) {
    /* Stack the page shell vertically so the drawer bar appears below the content */
    .page-shell {
        flex-direction: column !important;
    }

    /* Remove desktop min-heights that cause excessive scroll on small screens */
    .page-main {
        min-height: unset !important;
        /* leave room at the bottom for the fixed Queue/History tab bar */
        padding-bottom: 60px !important;
    }

    /* Stack page-main above the queue drawer */
    .page-shell {
        flex-direction: column !important;
    }

    /* Closed drawer: fix Queue/History tab bar to the bottom of the viewport.
       The drawer only contains the handle strip when closed (panel body is not rendered),
       so fixed positioning produces a clean bottom tab bar. */
    .queue-drawer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        min-height: unset !important;
        overflow: visible !important;
        margin-right: 0 !important;
        z-index: 1000 !important;
        order: unset !important;
        background: transparent !important;
    }

    /* Horizontal handle strip running the full width of the bottom bar */
    .drawer-handle-strip {
        width: 100% !important;
        min-width: unset !important;
        flex-direction: row !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    .drawer-handle-tab {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        flex: 1 !important;
        border-radius: 0 !important;
        padding: 10px !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* When drawer is open: full-viewport fixed overlay (tab bar becomes top strip) */
    .queue-drawer.open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2000 !important;
        width: 100% !important;
        height: 100dvh !important;
        flex-direction: column !important;
        overflow-y: hidden !important;
        order: unset !important;
        background: white !important;
    }

    .queue-drawer.open .drawer-handle-strip {
        flex-shrink: 0 !important;
    }

    .queue-drawer.open .drawer-handle-tab {
        border-radius: 0 !important;
    }

    /* Panel body fills remaining height inside the overlay */
    .queue-drawer.open .drawer-panel-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Reset panel body min-height (desktop sets 800px) */
    .drawer-panel-body {
        min-height: unset !important;
    }
}

/* Helpful comment: include this file after app.css in your _Host.cshtml or index.html:
<link rel="stylesheet" href="/_content/precision.web.emailinator/app.css">
<link rel="stylesheet" href="/_content/precision.web.emailinator/app-mobile.css">
*/