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

    /* 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: 30 !important; /* ensure it's above other header content */
        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;
    }

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

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

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

    .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* Buttons: increase tap targets and stack where appropriate */
    .btn {
        display: inline-block;
        padding: 0.6rem 0.9rem;
        min-width: 44px; /* recommended minimum touch size */
        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;
    }

    /* 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"] {
        -webkit-overflow-scrolling: touch;
        max-height: 55vh;
    }

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

    /* Reduce modal dialog widths for small screens */
    .editor-modal-dialog-sm,
    .editor-modal-dialog-md {
        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;
    }
}

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

/* 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">
*/