/* ──────────────────────────────────────────────────────────────────────────
   BAMMBQM — minimal light theme, scoped to this app. No bleed-through from
   BAMMB; everything below is self-contained.
   ────────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
    background: #f1f5f9;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: #4f46e5; color: #fff; padding: 6px 10px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Header ────────────────────────────────────────────────────────────── */
.qm-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
/* Inner wrapper centers + caps the header content to match the work area's width.
   .qm-shell--wide is 1280px max — header content uses the same. */
.qm-header__inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 18px;
}
.qm-header-spacer { flex: 1; }
.qm-header-actions { display: flex; align-items: center; gap: 10px; }
.qm-logo-link { display: inline-flex; align-items: center; }
/* Render the PNG at its natural aspect ratio. Height is the only constraint;
   width auto-scales so the wordmark never stretches. */
.qm-logo {
    height: 40px; width: auto; display: block;
    image-rendering: -webkit-optimize-contrast;   /* sharper at half-pixel sizes */
}

/* ── Cards / shells ────────────────────────────────────────────────────── */
.qm-shell {
    max-width: 920px; margin: 32px auto; padding: 0 18px;
}
.qm-shell--wide { max-width: 1280px; }
.qm-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 24px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .06);
}
.qm-page-head { margin-block-end: 12px; }
.qm-page-head h1 { margin: 0; font-size: 1.6rem; color: #0f172a; }
.qm-page-head__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
/* Compact header — title + toolbar share one row, no subtitle. */
.qm-page-head--compact .qm-page-head__row { align-items: center; }
.muted { color: #475569; }
.small { font-size: .9rem; }

/* ── Inputs / buttons ──────────────────────────────────────────────────── */
.qm-input {
    background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1;
    padding: 10px 12px; border-radius: 8px; font: inherit;
    width: 100%;
}
.qm-input:focus {
    outline: 2px solid #6366f1; outline-offset: 1px; border-color: #6366f1;
}
.qm-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 8px; font-weight: 600;
    font: inherit; cursor: pointer; border: 1px solid transparent;
    line-height: 1;
}
.qm-btn.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff; border: none;
}
.qm-btn.primary:hover { filter: brightness(1.05); }
.qm-btn.ghost {
    background: #ffffff; color: #0f172a; border-color: #cbd5e1;
}
.qm-btn.ghost:hover { background: #eef2ff; border-color: #6366f1; }

/* ── Login form ────────────────────────────────────────────────────────── */
.qm-form { display: grid; gap: 14px; max-width: 420px; margin-block-start: 14px; }
.qm-form label { display: grid; gap: 6px; }
.qm-form label > span { font-weight: 600; color: #334155; }

/* ── Banners ───────────────────────────────────────────────────────────── */
.qm-banner {
    padding: 12px 14px; border-radius: 10px; border: 1px solid; margin: 12px 0;
}
.qm-banner.info { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
.qm-banner.warn { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.qm-banner.crit { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }

/* ── Tabs — equal-width, single row, no scroll ───────────────────────────── */
.qm-tabs {
    display: flex; gap: 8px;
    background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    margin-block-end: 8px;
}
.qm-tab {
    /* Each tab takes an equal share of the row — no scrollbar, all visible. */
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 10px 8px;
    background: #f8fafc; color: #334155;
    border: 1px solid #e2e8f0; border-radius: 10px;
    font: inherit; cursor: pointer; line-height: 1.15; text-align: center;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
}
/* Two-line label: queue number on top (1.05rem), description on the second line at
   half size (.55rem ≈ 50% of the queue number). */
.qm-tab__num  { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.qm-tab__desc {
    font-weight: 600; font-size: .55rem; letter-spacing: .03em;
    text-transform: uppercase; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.qm-tab:hover {
    background: #eef2ff; color: #1e1b4b; border-color: #c7d2fe;
    transform: translateY(-1px);
}
.qm-tab:hover .qm-tab__desc { color: #4338ca; }
/* Active tab — solid indigo (no gradient). */
.qm-tab.active {
    background: #4f46e5; color: #ffffff; border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .25);
}
.qm-tab.active .qm-tab__desc { color: rgba(255, 255, 255, .9); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
/* Default toolbar (legacy) — full-width card under the tabs. */
.qm-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    margin-block-end: 16px;
}
/* Inline toolbar — sits inside the page-head row alongside the title.
   No card chrome, no margin, just buttons. */
.qm-toolbar--inline {
    background: transparent; border: 0; padding: 0; margin: 0;
    flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end;
}
.qm-toolbar-spacer { flex: 1; }

/* ── Work area ─────────────────────────────────────────────────────────── */
.qm-work-host {
    display: flex; flex-direction: column; gap: 8px; align-items: stretch;
}
.qm-work-pane { animation: qm-fadein .15s ease-out; }
@keyframes qm-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.qm-loader {
    display: flex; align-items: center; gap: 10px;
    padding: 18px; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 12px; color: #475569;
}
.qm-spinner-lg {
    width: 22px; height: 22px;
    border: 3px solid #c7d2fe; border-top-color: #4f46e5;
    border-radius: 50%; animation: qm-spin .9s linear infinite;
}
@keyframes qm-spin { to { transform: rotate(360deg); } }

/* Iframe height is driven entirely by postMessage from the embedded page —
   no min-height, no border, no overflow-clipping. The PNR content renders
   "directly on the page" with the dashboard hosting it in place. */
.qm-pnr-frame {
    width: 100%; border: 0; background: transparent;
    display: block; overflow: hidden;
}

/* ── Modal dialogs (Send Email, Update Queue) ─────────────────────────────── */
.qm-dialog {
    max-width: 720px; width: 92vw;
    border: none; padding: 0; background: transparent;
    color: #0f172a;
    /* Anchor every modal near the top of the viewport rather than the
       browser's default vertical-centering. The auto inline margins keep it
       horizontally centered; the explicit block margins pin the top. */
    margin-block-start: 4vh; margin-block-end: auto;
    margin-inline-start: auto; margin-inline-end: auto;
}
/* Send Email dialog — wider canvas so the body textarea has room to compose. */
#qmEmailDialog { max-width: 1100px; }
/* Form fields fill the dialog so the To / Subject / Body inputs span the full width. */
#qmEmailDialog .qm-form,
#qmEmailDialog .qm-form label { width: 100%; max-width: 100%; }
#qmEmailDialog .qm-form .qm-input { width: 100%; max-width: 100%; box-sizing: border-box; }
#qmEmailDialog .qm-form textarea.qm-input { min-height: 280px; }
/* Activity log dialog needs the same width as the dashboard work area so the
   audit table has room for all five columns (Time / PNR / Action / Outcome / Summary). */
#qmActivityLogDialog { max-width: 1280px; }

/* Debug dialogs (PNR queue response, Travelor API response) — wide canvas with a
   scrollable monospace pre block so operators can inspect the raw payload. */
.qm-debug-dialog { max-width: 1180px; }
.qm-debug-dialog .qm-dialog__card { padding: 18px; }
.qm-debug-pre {
    margin: 14px 0 0; max-height: 65vh; overflow: auto;
    background: #0f172a; color: #e2e8f0; border-radius: 10px;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
    direction: ltr; text-align: start;
}
.qm-debug-pre code { color: inherit; }
.qm-pnr-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-block-end: 14px;
}
.qm-pnr-section-head h2 { margin: 0; }
/* Time column wide enough that "dd-MM-yyyy HH:mm" stays on a single line; PNR column
   is constrained so it doesn't push the others around. */
#qmActivityLogDialog table.qm-clean-table th:first-child,
#qmActivityLogDialog table.qm-clean-table td:first-child {
    min-width: 160px; white-space: nowrap;
}
#qmActivityLogDialog table.qm-clean-table th:nth-child(2),
#qmActivityLogDialog table.qm-clean-table td:nth-child(2) {
    min-width: 90px; white-space: nowrap;
}
.qm-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.qm-dialog__card {
    background: #ffffff; color: #0f172a;
    border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.qm-dialog__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-block-end: 14px;
}
.qm-dialog__head h2 { margin: 0; font-size: 1.2rem; }
.qm-dialog__actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-block-start: 14px;
}
.qm-dialog .qm-input { width: 100%; }
.qm-dialog textarea.qm-input {
    font-family: inherit; line-height: 1.55; resize: vertical;
}
button.qm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.qm-pnr { display: flex; flex-direction: column; gap: 16px; }
/* Severity and Reasons render side-by-side on a single row. The reasons tile
   stretches to consume the rest of the width; the severity tile stays narrow
   so its big sev pill doesn't get pushed out of shape. */
.qm-pnr-action {
    display: flex; flex-direction: row; gap: 14px; align-items: stretch;
    flex-wrap: nowrap;
}
.qm-pnr-action__sev-tile     { flex: 0 0 auto; min-width: 180px; }
.qm-pnr-action__reasons-tile { flex: 1 1 auto; min-width: 0; }
.qm-pnr-action__sev {
    font-size: 1.6rem; font-weight: 800; padding: 4px 12px;
    border-radius: 999px; display: inline-block; line-height: 1.1;
}
.qm-pnr-reasons { margin: 6px 0 0; padding-inline-start: 18px; }
.qm-pnr-reasons li { color: #0f172a; }

/* ── Clean table ──────────────────────────────────────────────────────── */
.table-wrap { max-height: 60vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
/* Inside the embedded PNR view (iframe body has .qm-embed) the segments table
   should grow naturally without an internal scrollbar — the iframe itself is
   sized to its content height by the parent dashboard. */
.qm-embed .table-wrap { max-height: none; overflow: visible; border: none; border-radius: 0; }
table.qm-clean-table {
    width: 100%; border-collapse: collapse;
}
.qm-clean-table thead th {
    background: #f1f5f9; color: #0f172a; font-weight: 700; text-align: start;
    padding: 12px 14px; border-bottom: 1px solid #cbd5e1;
    cursor: pointer; user-select: none; position: sticky; top: 0;
}
.qm-clean-table thead th:hover { background: #e2e8f0; }
.qm-clean-table thead th .qm-sort-ind { color: #64748b; margin-inline-start: 6px; font-weight: 400; }
.qm-clean-table tbody td {
    padding: 10px 14px; color: #0f172a; border-bottom: 1px solid #f1f5f9;
    font-size: .95rem;
}
.qm-clean-table tbody tr:nth-child(even) td { background: #f8fafc; }
.qm-clean-table tbody tr:hover td { background: #eef2ff; }
.qm-clean-pnr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700; letter-spacing: .02em;
}
.qm-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.qm-pill.closed { background: #dcfce7; color: #166534; }
.qm-pill.skip   { background: #e2e8f0; color: #334155; }
.qm-pill.open   { background: #fef3c7; color: #78350f; }
.qm-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: #4f46e5; font-weight: 600; text-decoration: none;
    padding: 4px 8px; border-radius: 6px;
}
.qm-link:hover { background: #eef2ff; text-decoration: underline; }

/* ── PNR detail page ─────────────────────────────────────────────────── */
.qm-pnr-back { margin-block-end: 14px; }
.qm-pnr-head__row {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-block-end: 18px;
}
.qm-pnr-head__big {
    font-size: 2.25rem; font-weight: 700; color: #0f172a; line-height: 1.05;
    letter-spacing: -.01em;
}
.qm-pnr-head__route { margin-block-start: 8px; font-size: 1.05rem; color: #1e1b4b; }
/* Single-line trip summary: "<carrier> | <trip type> | <airport chain> | <gds>" */
.qm-pnr-head__trip {
    margin-block-start: 8px; font-size: 1rem; color: #334155;
    font-weight: 600; letter-spacing: .01em;
}
.qm-pnr-head__meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.qm-pnr-head__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.qm-tile {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 14px; color: #0f172a;
}
.qm-tile strong { color: #0f172a; }
/* Status tile lays the status label, issue pill and severity pill out in a single row. */
.qm-pnr-status-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-block-start: 2px;
}
/* IATA status-code pills carry a `title` attribute with the human description —
   the dotted underline + help cursor signals there's a tooltip on hover. */
.qm-status-code {
    cursor: help;
    text-decoration: underline dotted rgba(15, 23, 42, .35);
    text-underline-offset: 3px;
}

/* ── Multi-queue Clean picker ─────────────────────────────────────────── */
.qm-clean-pick-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px; margin-block: 4px 14px;
}
.qm-clean-pick {
    display: flex; align-items: center; gap: 10px;
    background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 10px;
    padding: 10px 14px; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.qm-clean-pick:hover { background: #eef2ff; border-color: #c7d2fe; }
.qm-clean-pick:has(input:checked) { background: #eef2ff; border-color: #4f46e5; }
.qm-clean-pick input[type=checkbox] {
    width: 18px; height: 18px; flex-shrink: 0; accent-color: #4f46e5;
}
.qm-clean-pick--all { background: #ffffff; border-style: dashed; }
.qm-clean-pick--all:has(input:checked) { background: #eef2ff; border-style: solid; }

/* Clean results table — header row that introduces each queue's batch */
.qm-clean-group-head td {
    background: #1e293b !important; color: #e2e8f0 !important;
    padding: 8px 14px !important; font-size: .85rem;
    letter-spacing: .04em; text-transform: uppercase;
}
.qm-card h2 { margin: 0 0 14px; font-size: 1.15rem; color: #0f172a; }

.qm-sev {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 700; letter-spacing: .03em;
}
.qm-sev--high   { background: #fee2e2; color: #7f1d1d; }
.qm-sev--medium { background: #fef3c7; color: #78350f; }
.qm-sev--low    { background: #dcfce7; color: #166534; }

.qm-issue-pill {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: #eef2ff; color: #1e1b4b; font-weight: 700; font-size: .82rem;
}

.qm-seg-original td { background: #f8fafc; }
.qm-seg-original td:first-child + td { font-weight: 700; }

.qm-pax-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
.qm-pax-list li {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px 14px; color: #0f172a;
}