/* ══════════════════════════════════════════════════════════════════════
   DISTRIBUTION LISTS PAGE — Frontier theme
   ─────────────────────────────────────────────────────────────────────
   Builds on .fr-page baseline + .fr-modal. The recipients table uses
   `dbc.Table(striped=True)` which adds Bootstrap's `.table-striped`
   class — we neutralize Bootstrap's zebra variable so our zebra wins,
   and shrink the in-row switches + Remove button to fit tighter cells.
   ══════════════════════════════════════════════════════════════════════ */

/* Neutralize Bootstrap's table-striped variable so it doesn't fight
   our .fr-page tbody:nth-of-type(even) zebra rule. */
.fr-distribution-lists-page .table-striped > tbody > tr,
.fr-distribution-lists-page .table-striped > tbody > tr:nth-of-type(odd),
.fr-distribution-lists-page .table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-striped-bg: transparent;
    --bs-table-bg-type: transparent;
}

/* Per-row switches (Review Emails, Publish Emails) — keep them compact.
   Inherit the .fr-page flex/baseline fix; just remove the label that
   the table doesn't render (these are headerless switches) and center
   in the cell. */
.fr-distribution-lists-page table .form-switch,
.fr-distribution-lists-page .table .form-switch {
    justify-content: flex-start;
    min-height: 22px;
}

/* Remove button (icon-only outline-danger) in table rows — match the
   icon-action sizing used elsewhere. */
.fr-distribution-lists-page table .btn-outline-danger,
.fr-distribution-lists-page .table .btn-outline-danger {
    padding: 5px 10px !important;
    font-size: 12.5px !important;
    line-height: 1;
    min-width: 32px;
}
.fr-distribution-lists-page table .btn-outline-danger .fas { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   END DISTRIBUTION LISTS PAGE
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   SUPPORT INBOX PAGE — Frontier theme
   ─────────────────────────────────────────────────────────────────────
   Builds on .fr-page + .fr-modal. New bits:
   - Status filter (inline dbc.RadioItems) styled as a pill row
   - Quote-box for the ticket description (Frontier ivory + amber rule)
   - Modal sub-headings (Description, Context, Triage) as tracked caps
   - Textarea sizing for resolution notes
   - Table-striped neutralization (same as Distribution Lists)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Status filter — inline RadioItems styled as a pill row ─────────── */
/* RadioItems(inline=True) renders each option as a .form-check.form-check-inline
   containing an <input type="radio"> and a <label>. We hide the input
   and turn the label into a pill chip; :has(:checked) gives us the
   selected state. */
.fr-pill-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0 !important;
}
.fr-pill-radio .form-check {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: inline-flex;
}
.fr-pill-radio .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    margin: 0;
}
.fr-pill-radio .form-check-label {
    cursor: pointer;
    user-select: none;
    padding: 6px 14px;
    font-family: var(--fr-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--fr-ink-2);
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 999px;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    line-height: 1.3;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.fr-pill-radio .form-check:hover .form-check-label {
    border-color: var(--fr-ink-3);
    color: var(--fr-ink);
}
.fr-pill-radio .form-check:has(.form-check-input:checked) .form-check-label {
    background: var(--fr-accent-soft);
    border-color: var(--fr-accent);
    color: var(--fr-accent-strong);
}

/* ── Counts chips on the right side of the filter row ───────────────── */
#support-inbox-counts {
    font-size: 12.5px;
    color: var(--fr-ink-3);
}
#support-inbox-counts .badge {
    margin-right: 4px;
}

/* ── Neutralize Bootstrap table-striped so our zebra wins ───────────── */
.fr-support-inbox-page .table-striped > tbody > tr,
.fr-support-inbox-page .table-striped > tbody > tr:nth-of-type(odd),
.fr-support-inbox-page .table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-striped-bg: transparent;
    --bs-table-bg-type: transparent;
}

/* ── Modal sub-headings (Description, Context, Triage) ──────────────── */
.fr-modal .modal-body .fr-modal-subheading {
    font-family: var(--fr-font-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--fr-ink-3) !important;
    font-weight: 500 !important;
    margin: 0 0 8px !important;
}
.fr-modal .modal-body hr {
    border: 0;
    border-top: 1px solid var(--fr-hairline);
    opacity: 1;
    margin: 22px 0;
}

/* ── The ticket-description quote box ───────────────────────────────── */
.fr-support-inbox-quote {
    padding: 14px 18px;
    margin-bottom: 18px;
    background: var(--fr-bg);
    border: 1px solid var(--fr-hairline);
    border-left: 3px solid var(--fr-accent);
    border-radius: var(--fr-r-md);
    font-family: var(--fr-font-sans);
    color: var(--fr-ink);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Textarea in modals — make sure it has comfortable padding and the
   focus halo lands. The .fr-modal form-control rules already handle
   colors; just add textarea-specific sizing. */
.fr-modal .modal-body textarea.form-control {
    min-height: 80px;
    padding: 10px 12px !important;
    line-height: 1.5;
    resize: vertical;
}

/* ══════════════════════════════════════════════════════════════════════
   END SUPPORT INBOX PAGE
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   COMPETITORS PAGE — Frontier theme
   ─────────────────────────────────────────────────────────────────────
   Builds on .fr-page + .fr-modal + .fr-pill-radio. New bits:
   - Neutralize dbc.Table(bordered=True, size="sm") so the table inherits
     the zebra/hairline treatment instead of Bootstrap's cell grid
   - Style the pencil notes button (color="link") as a quiet icon control
   - Sortable column headers (cursor: pointer) hover affordance
   ══════════════════════════════════════════════════════════════════════ */

/* Neutralize .table-bordered so we get hairline rows instead of a cell
   grid, and undo .table-sm's tight padding to match the zebra rhythm. */
.fr-competitors-page .table-bordered,
.fr-competitors-page .table-bordered > :not(caption) > * > * {
    border-color: transparent !important;
}
.fr-competitors-page .table-sm > :not(caption) > * > * {
    padding: 12px !important;
}

/* Sortable column headers — subtle hover hint */
.fr-competitors-page table thead th {
    transition: color 120ms ease;
}
.fr-competitors-page table thead th:hover {
    color: var(--fr-ink) !important;
}

/* Pencil notes button — color="link" renders .btn-link. Make it a quiet
   icon-only control with an amber hover. */
.fr-competitors-page .btn-link {
    color: var(--fr-ink-3) !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: var(--fr-r-sm) !important;
    transition: background-color 120ms ease, color 120ms ease;
}
.fr-competitors-page .btn-link:hover,
.fr-competitors-page .btn-link:focus {
    color: var(--fr-accent) !important;
    background-color: var(--fr-accent-soft) !important;
}

/* The per-row Switch should be centered inside its narrow Active column */
.fr-competitors-page table .form-switch,
.fr-competitors-page .table .form-switch {
    justify-content: center;
    min-height: 22px;
}

/* dcc.Loading default Bootstrap spinner — color it amber to match the
   rest of the spinners on the app. */
.fr-competitors-page ._dash-loading-callback,
.fr-competitors-page ._dash-loading {
    color: var(--fr-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   END COMPETITORS PAGE
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   SUPPORT FAB + SEND FEEDBACK MODAL
   ─────────────────────────────────────────────────────────────────────
   Floating chat-bubble button on every authenticated page. Kept a
   deliberate blue fill so it stands out against the warm ivory canvas,
   then wraps it in an amber border so it still feels like part of the
   Frontier palette — same idiom as the Publish Rates button in the
   navbar.

   The modal itself is portal'd, so most of its styling rides on the
   shared .fr-modal class. This block only covers the FAB + a couple of
   modal-specific tweaks (info line, success toast).
   ══════════════════════════════════════════════════════════════════════ */

/* ── FAB button ─────────────────────────────────────────────────────── */
#support-fab-btn.btn,
#support-fab-btn {
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: var(--fr-r-md) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;

    /* Publish Rates blue — matches the navbar primary action gradient
       (.btn-primary in assets/15_legacy_base.css) so the FAB reads as a sibling of the
       publish flow, not a separate system. */
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    border: 2px solid var(--fr-accent) !important;
    color: #FDF8EE !important;
    box-shadow:
        0 1px 0 rgba(20, 24, 29, 0.04),
        0 6px 20px -6px rgba(52, 152, 219, 0.45),
        0 12px 28px -10px rgba(180, 83, 9, 0.20) !important;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
#support-fab-btn.btn .fas,
#support-fab-btn .fas {
    font-size: 1.4rem;
    color: #FDF8EE !important;
}
#support-fab-btn.btn:hover,
#support-fab-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f618d) !important;
    border-color: var(--fr-accent-strong) !important;
    color: #FDF8EE !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(20, 24, 29, 0.04),
        0 10px 28px -6px rgba(52, 152, 219, 0.55),
        0 18px 36px -10px rgba(180, 83, 9, 0.28) !important;
}
#support-fab-btn.btn:focus-visible,
#support-fab-btn:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(180, 83, 9, 0.25),
        0 6px 20px -6px rgba(52, 152, 219, 0.45) !important;
}
#support-fab-btn.btn:active,
#support-fab-btn:active {
    transform: translateY(0);
}

/* ── Send Feedback modal: info line at the bottom of the body ──────── */
#support-modal .modal-body > .text-muted.small {
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--fr-bg);
    border-radius: var(--fr-r-sm);
    border: 1px solid var(--fr-hairline);
    color: var(--fr-ink-3) !important;
    font-size: 12px !important;
    line-height: 1.45;
}
#support-modal .modal-body > .text-muted.small .fas {
    color: var(--fr-accent);
}

/* ── Success toast — quieter Frontier-flavored treatment ────────────── */
#support-success-toast.toast,
#support-success-toast {
    background-color: var(--fr-surface) !important;
    border: 1px solid var(--fr-hairline-strong) !important;
    border-left: 3px solid var(--fr-positive) !important;
    border-radius: var(--fr-r-md) !important;
    box-shadow: 0 12px 36px -8px rgba(20, 24, 29, 0.18) !important;
    font-family: var(--fr-font-sans);
}
#support-success-toast .toast-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fr-hairline) !important;
    color: var(--fr-ink) !important;
    font-weight: 500;
    font-size: 13.5px;
}
#support-success-toast .toast-header .fas {
    color: var(--fr-positive) !important;
}
#support-success-toast .toast-body {
    color: var(--fr-ink-2);
    font-size: 13px;
    padding: 10px 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   END SUPPORT FAB + SEND FEEDBACK MODAL
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   PRICING MATRIX MODAL — Frontier table overrides
   ──────────────────────────────────────────────────────────────────────
   The legacy global rule at ~line 1643 forces .dash-header to a navy
   gradient with !important, and the global .dash-cell rule forces a
   gray !important border. Same approach as .fr-preview-folder — bump
   specificity here so the pricing matrix gets a cream/editorial header
   and proper Frontier hairlines on its cells.
   ══════════════════════════════════════════════════════════════════════ */

.fr-matrix-table-wrap .dash-table-container .dash-header {
    background: #FAF7F0 !important;
    color: var(--fr-ink) !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border: 1px solid var(--fr-hairline) !important;
    border-bottom: 1px solid var(--fr-hairline-strong) !important;
}
.fr-matrix-table-wrap .dash-table-container .dash-header .column-header-name {
    color: var(--fr-ink) !important;
    font-weight: 600 !important;
}

/* Body cell borders — Frontier hairline, not the global #e3e6f0 gray. */
.fr-matrix-table-wrap .dash-table-container .dash-cell {
    border: 1px solid var(--fr-hairline) !important;
    font-family: var(--fr-font-sans) !important;
}

/* Active/selected cell focus — amber halo matching form-input focus.
   Beats the global blue .dash-selected-cell rule via specificity + !important. */
.fr-matrix-table-wrap .dash-table-container .dash-selected-cell,
.fr-matrix-table-wrap .dash-table-container .dash-cell--selected {
    background-color: var(--fr-accent-soft) !important;
}

/* Tighten the modal chrome around the pricing matrix so the table — which
   now renders at its natural height with no internal vertical scrollbar —
   fits a typical viewport without forcing the modal-body to scroll. Scoped
   via :has() so other fr-modal modals keep their normal spacious chrome. */
.fr-modal:has(.fr-matrix-table-wrap) .modal-dialog {
    margin-top: 0.6rem !important;
    margin-bottom: 0.6rem !important;
}
.fr-modal:has(.fr-matrix-table-wrap) .modal-body {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
}
.fr-modal:has(.fr-matrix-table-wrap) .modal-footer {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   END PRICING MATRIX MODAL
   ══════════════════════════════════════════════════════════════════════ */