/* ============================================
   BROA Brand Palette
   Green:  #BEEACB (light mint), #2e8b57 (medium), #1a6b3c (dark)
   Blue:   #4A81D3 (primary accent)
   Dark:   #32373c (charcoal)
   Red:    #c44d48 (alert)
   ============================================ */

/* Light theme overrides */
[data-theme="light"], :root:not([data-theme="dark"]) {
    --pico-primary: #4A81D3;
    --pico-primary-hover: #3a6db8;
    --pico-primary-focus: rgba(74, 129, 211, 0.25);
    --pico-primary-inverse: #fff;
    --pico-primary-background: #4A81D3;
    --pico-primary-hover-background: #3a6db8;
}

/* Dark theme overrides */
[data-theme="dark"] {
    --pico-primary: #6fa3e8;
    --pico-primary-hover: #8fb8f0;
    --pico-primary-focus: rgba(111, 163, 232, 0.25);
    --pico-primary-inverse: #1a1a2e;
    --pico-primary-background: #4A81D3;
    --pico-primary-hover-background: #3a6db8;
}

/* Branded header */
header.container {
    background: #32373c;
    margin: 0;
    max-width: 100%;
    padding: 0 2rem;
    border-bottom: 3px solid #4A81D3;
}

header.container nav {
    max-width: 1200px;
    margin: 0 auto;
}

header.container nav a,
header.container nav strong {
    color: #fff;
}

header.container nav a:hover {
    color: #BEEACB;
}

/* Three nav lists (brand / #nav-controls / #nav-menu): pin the brand left so the
   controls + links group to the right. margin-right:auto absorbs the free space
   regardless of Pico's justify-content. */
header.container nav > ul:first-child { margin-right: auto; }

/* Mobile hamburger nav (≤640px). Desktop is unchanged: the burger is hidden
   and the links render as the normal right-aligned row. */
.nav-burger {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    padding: 0.4rem;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}
.nav-burger:hover { color: #BEEACB; }
.nav-burger svg { display: block; }
.nav-burger-li { display: none; }

@media (max-width: 640px) {
    header.container { padding: 0 1rem; }
    /* let the nav rows wrap: bar (brand + controls) on row 1, links below when open */
    header.container nav { flex-wrap: wrap; align-items: center; }
    header.container #nav-controls { flex-wrap: wrap; align-items: center; }
    /* Progressive enhancement: only collapse into a hamburger when JS is on
       (html.js). Without JS the burger stays hidden and the links list remains
       visible (it just wraps), so mobile nav is never JS-dependent. */
    html.js .nav-burger-li { display: flex; }
    html.js .nav-burger { display: inline-flex; }
    /* Collapse the links list entirely; the burger reveals it. Because #nav-menu
       follows the bar controls in the DOM, the opened list flows to its own full-
       width row below the bar via natural order — no CSS `order` reflow — so
       keyboard focus order matches the visual order. */
    html.js #nav-menu { display: none; }
    html.js header.container.nav-open #nav-menu { display: flex; flex: 0 0 100%; flex-wrap: wrap; }
    html.js header.container.nav-open #nav-menu .nav-link { flex: 0 0 100%; }
    html.js header.container.nav-open #nav-menu .nav-link a { display: block; padding: 0.5rem 0.25rem; }
}

/* Brand logo + title */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.brand-logo {
    height: 24px;
    width: auto;
}

[data-theme="light"] .brand-logo,
:root:not([data-theme="dark"]) .brand-logo {
    filter: brightness(0.9);
}

/* Stat cards */
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #32373c;
}

[data-theme="dark"] .stat-number {
    color: #e0e0e0;
}

/* Scan bar */
.scan-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.scan-bar button, .scan-bar a[role="button"] {
    width: auto;
    margin: 0;
}

/* Filter bar */
.filter-bar {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
}

.filter-bar label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar select {
    width: auto;
    margin: 0;
}

/* Row flags */
.row-overbill {
    border-left: 4px solid #c44d48;
}

.row-vendor-mismatch {
    border-left: 4px solid #e6a817;
}

/* Overbill card */
.overbill-card {
    border-left: 4px solid #c44d48;
}

/* Text status colors — light */
.text-danger { color: #c44d48; }
.text-success { color: #1a6b3c; }
.text-warning { color: #b8860b; }

/* Text status colors — dark */
[data-theme="dark"] .text-danger { color: #ef6b67; }
[data-theme="dark"] .text-success { color: #7dcea0; }
[data-theme="dark"] .text-warning { color: #f0c75e; }

/* Badges */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-high { background: #BEEACB; color: #1a6b3c; }
.badge-medium { background: #fde8c8; color: #9a6700; }
.badge-low { background: #f8d7d5; color: #c44d48; }

.badge-status-pending { background: #d4e5f7; color: #2c5f9e; }
.badge-status-reviewed { background: #BEEACB; color: #1a6b3c; }
.badge-status-disputed { background: #f8d7d5; color: #c44d48; }
.badge-status-sent_to_billcom { background: #BEEACB; color: #1a6b3c; }

.badge-overbill { background: #c44d48; color: white; }
.badge-vendor-mismatch { background: #b8860b; color: white; }

/* Carrier scorecard grade badges */
.grade-a { background: #BEEACB; color: #1a6b3c; }
.grade-b { background: #fde8c8; color: #9a6700; }
.grade-c { background: #f8d7d5; color: #c44d48; }
.grade-d { background: #c44d48; color: white; }

[data-theme="dark"] .grade-a { background: #1a6b3c; color: #BEEACB; }
[data-theme="dark"] .grade-b { background: #7a5200; color: #fde8c8; }
[data-theme="dark"] .grade-c { background: #8b2c2a; color: #f8d7d5; }
[data-theme="dark"] .grade-d { background: #c44d48; color: white; }

/* Dark mode badge adjustments */
[data-theme="dark"] .badge-high { background: #1a6b3c; color: #BEEACB; }
[data-theme="dark"] .badge-medium { background: #7a5200; color: #fde8c8; }
[data-theme="dark"] .badge-low { background: #8b2c2a; color: #f8d7d5; }
[data-theme="dark"] .badge-status-pending { background: #1e3f6f; color: #a8ccf0; }
[data-theme="dark"] .badge-status-reviewed { background: #1a6b3c; color: #BEEACB; }
[data-theme="dark"] .badge-status-disputed { background: #8b2c2a; color: #f8d7d5; }
[data-theme="dark"] .badge-status-sent_to_billcom { background: #1a6b3c; color: #BEEACB; }

/* Small buttons */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Theme toggle */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
}

.theme-toggle-btn svg {
    vertical-align: middle;
    color: #fff;
}

/* Responsive tables: Pico v2's <figure> is just display:block (no overflow-x,
   unlike v1), so a wide table wrapped in <figure> expands to its content width
   and pushes the whole page sideways on mobile. Constrain the wrapper so the
   table scrolls within its own box instead. All data tables are wrapped in
   <figure> for this reason (BROAFA-74). */
figure {
    max-width: 100%;
    overflow-x: auto;
}

/* Detail page */
article table th {
    width: 30%;
    text-align: right;
    padding-right: 1rem;
}

/* Email body in notifications */
.email-body {
    white-space: pre-wrap;
    font-size: 0.9rem;
    background: var(--pico-card-background-color);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--pico-muted-border-color);
}

/* ============================================
   Review modals (overbills / unmatched / duplicates)
   ============================================ */
.review-dialog article {
    max-width: 720px;
    width: 92vw;
    padding-top: 1rem;
}
.review-intro {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    margin-bottom: 1.1rem;
}

/* Each reviewable item is a collapsible card */
.review-item {
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--pico-muted-border-color);
    border-radius: 8px;
    margin-bottom: 0.85rem;
    background: var(--pico-card-background-color);
    overflow: hidden;
}
.review-item[data-flag="overbill"] { border-left-color: #c44d48; }
.review-item[data-flag="duplicate"] { border-left-color: #b8860b; }
.review-item[data-flag="unmatched"] { border-left-color: #4A81D3; }

.review-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}
.review-item > summary::-webkit-details-marker { display: none; }
.review-item > summary::marker { content: ""; }
.review-item > summary:hover { background: rgba(74, 129, 211, 0.06); }
.review-item[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); }

.review-title { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.review-title .carrier { font-weight: 600; font-size: 0.98rem; }
.review-title .sub { color: var(--pico-muted-color); font-weight: 400; font-size: 0.8rem; }

/* Right-aligned status pill in the summary */
.review-pill {
    flex: 0 0 auto;
    margin-left: auto;           /* push the pill flush-right within the summary row */
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.review-pill .pct {
    font-size: 0.68rem; font-weight: 500; opacity: 0.78;
    padding-left: 0.42rem; border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.review-pill.is-over { background: #c44d48; color: #fff; }
.review-pill.is-amount { background: #d4e5f7; color: #2c5f9e; }
.review-pill.is-reason { background: #fde8c8; color: #9a6700; }
.review-pill.is-sent { background: #BEEACB; color: #1f6b3a; font-size: .75rem; }
[data-theme="dark"] .review-pill.is-amount { background: #1e3f6f; color: #a8ccf0; }
[data-theme="dark"] .review-pill.is-reason { background: #7a5200; color: #fde8c8; }
[data-theme="dark"] .review-pill.is-sent { background: #1a5c33; color: #BEEACB; }

.review-body { padding: 0.9rem 1rem 1rem; }

/* Estimate vs Invoice comparison strip */
.compare { display: flex; align-items: stretch; gap: 0.5rem; margin-bottom: 1rem; }
.compare .cell {
    flex: 1; text-align: center;
    background: rgba(74, 129, 211, 0.06);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px; padding: 0.55rem 0.5rem;
}
.compare .cell .label {
    display: block; font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--pico-muted-color);
}
.compare .cell .val { display: block; font-size: 1.15rem; font-weight: 700; margin-top: 0.15rem; }
.compare .arrow { display: flex; align-items: center; color: var(--pico-muted-color); font-weight: 700; }

/* Key/value detail columns */
.review-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.kv-title {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--pico-muted-color); margin: 0 0 0.45rem; font-weight: 700;
}
dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; font-size: 0.82rem; }
dl.kv dt { color: var(--pico-muted-color); white-space: nowrap; }
dl.kv dd { margin: 0; word-break: break-word; }

.review-note { font-size: 0.8rem; color: var(--pico-muted-color); margin: 0.9rem 0 0; }
.review-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.review-actions button, .review-actions a[role="button"] { margin: 0; width: auto; }

@media (max-width: 540px) {
    .review-cols { grid-template-columns: 1fr; }
    .compare { flex-direction: column; }
    .compare .arrow { transform: rotate(90deg); justify-content: center; }
}

/* ============================================
   Match detail page (/detail/{id})
   Reuses .compare / .review-cols / dl.kv / .kv-title from the modals.
   ============================================ */
.detail-back {
    display: inline-block; margin-bottom: 0.5rem;
    color: var(--pico-muted-color); text-decoration: none; font-size: 0.85rem;
}
.detail-back:hover { color: var(--pico-primary); }
.detail-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.detail-head h2 { margin: 0; font-size: 1.45rem; }
/* header badges reuse .review-pill but must pack next to the title, not right-align */
.detail-head .review-pill { margin-left: 0; }

.detail-card {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
    background: var(--pico-card-background-color);
}
.detail-card > h3 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--pico-muted-color); margin: 0 0 0.85rem; font-weight: 700;
}
.detail-hero { border-left: 4px solid var(--pico-muted-border-color); }
.detail-hero.is-overbill { border-left-color: #c44d48; }
.detail-hero.is-mismatch { border-left-color: #b8860b; }

/* Hero compare: bigger numbers; third "variance" cell is emphasized */
.compare-lg .cell { padding: 0.7rem 0.6rem; }
.compare-lg .cell .val { font-size: 1.5rem; }
.compare .cell.variance .pct { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 600; opacity: 0.9; }
.compare .cell.variance .val.up { color: #c44d48; }
.compare .cell.variance .val.down { color: #1a6b3c; }
.compare .cell.variance.up { background: rgba(196, 77, 72, 0.08); border-color: rgba(196, 77, 72, 0.35); }

.detail-meta {
    display: flex; gap: 1.75rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--pico-muted-border-color);
}
.detail-meta > div { display: flex; flex-direction: column; gap: 0.3rem; }
.detail-meta .meta-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); font-weight: 700; }
.detail-meta code { background: rgba(74, 129, 211, 0.08); padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.82rem; align-self: flex-start; }

.sf-record + .sf-record { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }

.detail-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.detail-actions form { margin: 0; }
.detail-actions button, .detail-actions a[role="button"] { margin: 0; width: auto; }
.action-group + .action-group { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--pico-muted-border-color); }
.action-group .group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); font-weight: 700; margin: 0 0 0.6rem; }
.action-hint { font-size: 0.78rem; color: var(--pico-muted-color); margin: 0.55rem 0 0; }

@media (max-width: 540px) { .compare-lg { flex-direction: column; } }

/* SSE scan toast */
.scan-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #4A81D3;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: toastIn 0.3s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Signed-in identity in the header nav (BROAFA-84). Muted so it reads as
   context, not a link, and truncates rather than wrapping the nav. */
.nav-user span {
    color: var(--pico-muted-color);
    font-size: 0.85em;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}