/* ============================================================================
   responsive.css  —  BU-289 mobile responsiveness baseline
   ----------------------------------------------------------------------------
   Loaded LAST in index.html so it overrides bootstrap + design-system + app +
   compose-workbench. Every rule lives inside a max-width media query, so the
   desktop layout (>= 992px) is completely untouched.

   Canonical breakpoints (Bootstrap 5 aligned):
     phone        <= 767.98px   (primary mobile target)
     small phone  <= 575.98px   (extra tightening)
     tablet       <= 991.98px   (light adjustments only)

   Contrast rule: the mobile table-cards (.table-mobile-cards) route bg/text/
   border through the semantic vibe tokens (--color-surface / --color-ink /
   --color-ink-muted / --color-line / --color-line-strong) so the cards repaint
   per vibe (navy under Harbor Night, cream under Sepia) and stay AA on every
   skin at phone width. Do NOT reintroduce hardcoded #ffffff/#6b7280 here — the
   token ramp is contrast-balanced per vibe. (BU-385, 2026-06-19)
   ============================================================================ */

/* ---- Universal media safety (all viewports): never let media force overflow ---- */
img, video, canvas, iframe, embed, object {
    max-width: 100%;
}

/* ===========================================================================
   TABLET + PHONE  (<= 991.98px)
   Any data table swipe-scrolls so a wide table never forces PAGE overflow.
   Lives in a broader query than the phone block so wide tables stay contained
   on tablets too (the 8-/10-column lists overflowed ~200px at 768px otherwise).
   Phone additionally upgrades the 6 list tables to labeled cards (.table-mobile-cards,
   defined later in the cascade so it wins at <=767.98px).
   =========================================================================== */
@media (max-width: 991.98px) {
    .table,
    table.table,
    .table-modern,
    table.table-modern {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table thead th,
    .table-modern thead th {
        white-space: nowrap;
    }
}

/* ===========================================================================
   PHONE  (<= 767.98px)
   =========================================================================== */
@media (max-width: 767.98px) {

    /* ---- Page shell: kill any stray horizontal scroll, reclaim padding ---- */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    main.flex-grow-1,
    main {
        padding: 0.75rem !important;
    }
    main .container,
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Bootstrap p-4 / px-4 on content wrappers eats half a phone screen */
    .p-4 { padding: 0.85rem !important; }
    .px-4 { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
    .p-5 { padding: 1rem !important; }

    /* ---- Tables: default = swipe-scroll so NO table forces page overflow ----
       Works for every Bootstrap .table and .table-modern with zero markup.
       The table becomes its own horizontal scroll container; the page stays put.
       (List pages that opt into the labeled card layout add .table-mobile-cards,
        whose rules below come later in the cascade and win.) */
    .table,
    table.table,
    .table-modern,
    table.table-modern {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table thead th,
    .table-modern thead th,
    .table tbody td,
    .table-modern tbody td {
        white-space: nowrap;   /* keep columns intact; scroll instead of squish */
    }

    /* ---- Touch targets: action icons & icon-only buttons reach 44x44 ---- */
    .action-icon {
        min-width: 44px;
        min-height: 44px;
    }
    .action-icon + .action-icon { margin-left: 2px; }
    .btn-sm, .btn-icon, button.icon-only {
        min-height: 38px;
    }

    /* ---- Forms: every control goes full width, nothing fixed ---- */
    .form-control,
    .form-select,
    textarea.form-control,
    input.form-control,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Bootstrap col-sm-N is already full-width < 576px; this catches col-md-N
       used as input width hints on tablets-down without breaking real grids */
    .form-group > .col-md-6,
    .form-group > .col-md-4,
    .form-group > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ---- Toolbars / button rows: wrap instead of overflow ---- */
    .btn-toolbar,
    .d-flex.justify-content-between,
    .page-actions,
    .toolbar-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Fixed-width carousels (channel packs / applied packs) ---- */
    .pack-scroll-item,
    .applied-pack-scroll-item {
        width: 86vw !important;
        min-width: 86vw !important;
        max-width: 86vw !important;
    }

    /* ---- Bootstrap modals: fit the viewport (use dvh for mobile chrome) ---- */
    .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
    }
    .modal-body {
        max-height: calc(100dvh - 8rem);
        overflow-y: auto;
    }

    /* ---- Generic fixed-position dialog/panel shells used across the app ----
       (CreateNewModal, SearchPalette, drawers etc. carry their own scoped CSS;
        this is a defensive clamp so nothing overruns the viewport.) */
    [role="dialog"]:not(.modal-dialog),
    .dialog-shell,
    .drawer-panel {
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem);
    }

    /* ---- Cards / panels: drop desktop min-widths that force overflow ---- */
    .card { max-width: 100%; }

    /* =====================================================================
       BU-301 - ultra-dense list rows (replaces the verbose label-above-value
       stack that made one record fill the whole screen). Applies to the 6
       .table-mobile-cards lists at phone width. Each row is a compact card:
       a bold NAME on line 1 with the row actions pinned right, then ONE muted
       dot-separated META line below. The repeated uppercase per-field labels
       are gone; noisy / widget / sub-nav columns are dropped on mobile (they
       stay on the record detail page). Target ~6-10 records per screen instead
       of one. Desktop (>=992px) is untouched (this lives in the phone query).
       ===================================================================== */
    .table-mobile-cards,
    table.table-mobile-cards { display: block; overflow: visible; white-space: normal; border: 0; }
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards tbody { display: block; width: 100%; }

    /* row = card. Block flow: NAME is its own line, META flows inline on the
       line below, ACTIONS are absolutely pinned right. The right padding
       reserves the actions lane so name/meta never run under it. */
    .table-mobile-cards tr {
        display: block;
        position: relative;
        width: 100%;
        padding: 8px 58px 8px 13px;
        margin-bottom: 7px;
        border: 1px solid var(--color-line);
        border-radius: 10px;
        background: var(--color-surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    /* default cell reset: inline, no borders, no uppercase labels */
    .table-mobile-cards td {
        display: inline;
        width: auto;
        padding: 0 !important;   /* beat .table-modern td padding (higher specificity) */
        border: 0 !important;    /* and its cell border-bottom (the stray divider) */
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .table-mobile-cards td::before { content: ""; display: none; }
    /* kill Bootstrap .table-striped's inset box-shadow stripe on the card cells
       (it paints odd rows via box-shadow, not background-color, so it leaked a
       grey bar behind the name). The card's own shadow lives on the tr. */
    .table-mobile-cards tr > * {
        box-shadow: none !important;
        background-color: transparent !important;
        --bs-table-bg-type: transparent;
        --bs-table-accent-bg: transparent;
    }

    /* NAME (first cell): its own bold line, truncates with an ellipsis */
    .table-mobile-cards td:first-child {
        display: block;
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.3;
        color: var(--color-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table-mobile-cards td:first-child * { font-weight: 700; color: inherit; }

    /* META (every other cell): inline, on the line below the name, dot-separated */
    .table-mobile-cards td:not(:first-child):not([data-label="Actions"]):not([data-label=""]) {
        display: inline;
        font-size: 0.8rem;
        color: var(--color-ink-muted);
        line-height: 1.3;
    }
    .table-mobile-cards td:nth-child(n+3):not([data-label="Actions"]):not([data-label=""])::before {
        content: "\00b7";
        display: inline;
        margin: 0 6px;
        color: var(--color-line-strong);
    }
    .table-mobile-cards td:not(:first-child):not([data-label="Actions"]) * {
        white-space: normal;
        font-weight: 400;
    }
    /* neutralize the desktop neutral badge so Type reads as plain meta text */
    .table-mobile-cards td:not(:first-child) .badge-neutral {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        color: var(--color-ink-muted) !important;
        font-size: inherit !important;
    }
    .table-mobile-cards td:empty { display: none; }

    /* ACTIONS: pinned to the right, vertically centered over the card */
    .table-mobile-cards td[data-label="Actions"],
    .table-mobile-cards td[data-label=""] {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
    }
    .table-mobile-cards td[data-label="Actions"] .action-icon { min-width: 40px; min-height: 40px; }
    /* hide button text labels in the dense action lane (desktop keeps them) */
    .table-mobile-cards .mobile-hide-inline { display: none; }

    /* keep just the primary action on the row; secondary / destructive actions
       live on the record detail page (a couple actions behind the tap). */
    .table-mobile-cards td[data-label="Actions"] [title="Plan"],
    .table-mobile-cards td[data-label="Actions"] [title="Delete"],
    .table-mobile-cards td[data-label="Actions"] [title="Quick Edit"],
    .table-mobile-cards td[data-label="Actions"] [title="Close"] { display: none; }

    /* Curate the mobile meta line: drop noisy / widget / sub-nav columns on phone.
       They remain on the record detail page. Keeps each row to name + 2-3 fields. */
    .table-mobile-cards td[data-label="Timeline"],
    .table-mobile-cards td[data-label="Stages"],
    .table-mobile-cards td[data-label="Voices"],
    .table-mobile-cards td[data-label="Channels"],
    .table-mobile-cards td[data-label="Attributes"],
    .table-mobile-cards td[data-label="Protected"] { display: none !important; }
}

/* ===========================================================================
   SMALL PHONE  (<= 575.98px) — extra tightening
   =========================================================================== */
@media (max-width: 575.98px) {
    main.flex-grow-1, main { padding: 0.5rem !important; }
    main .container, .container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
}

/* ===========================================================================
   TABLET  (768px - 991.98px) — light touch only
   =========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    main .container, .container { max-width: 100%; }
    /* BU-289 e2e re-verify (2026-06-02): a swipe-scroll table's container can
       overshoot the viewport by a few px at the tablet band — the phone block's
       overflow-x guard stops below 768px, so the tablet band had no equivalent.
       Mirror that guard here so the tablet band is also overflow-free. The table
       keeps its own overflow-x:auto, so horizontal column scrolling inside the
       table still works. */
    html, body { overflow-x: hidden; max-width: 100%; }
}

/* ===========================================================================
   Shared list-page chrome (used by Partner/Engagement/Voice/Channel/... lists):
   the title row (h1 + "Add X" button) and the filter bar must wrap on phones
   instead of clipping the action button off the right edge.
   =========================================================================== */
@media (max-width: 767.98px) {
    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    /* stop the "+ Add X" button from shrinking + clipping its own label */
    .list-header .btn-add { flex-shrink: 0; }

    /* Entity detail/view headers (Partner/Engagement/Voice View, browse pages)
       use Bootstrap `d-flex justify-content-between align-items-center` for the
       title-block + actions row. On phones let it wrap so the actions drop below
       the title (+ chips) instead of clipping off the right edge. */
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 8px;
    }
    .list-header .btn-add { margin-left: 0; }
    .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-bar .search-pill { flex: 1 1 100%; }
    .filter-bar .filter-pill,
    .filter-bar select { flex: 1 1 auto; min-width: 0; }

    /* Detail/View pages (Partner/Engagement/Voice…) use inline
       `grid-template-columns:1fr 1fr` for their info + quick-stats panels.
       Collapse those to a single column on phones so labels and values stop
       clipping off the right edge. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}