/*
 * Linehaul Brand System
 * ---------------------
 * Logo mark accent: #0091FF
 * Product action blue: #2458A6
 * Core navy: #12233F
 * Controls: 6px radius
 * Panels: 8px radius
 *
 * Semantic audit colors (emerald / amber / rose / red / violet) are
 * intentionally NOT overridden here.
 */

:root {
    --lh-navy: #12233f;
    --lh-navy-deep: #0c192d;

    --lh-mark-blue: #0091ff;
    --lh-blue: #2458a6;
    --lh-blue-hover: #1d4b91;
    --lh-blue-soft: #eef4fb;
    --lh-blue-border: #cbdbee;

    --lh-slate-950: #172033;
    --lh-slate-900: #1f2937;
    --lh-slate-700: #455468;
    --lh-slate-600: #5d6b7d;
    --lh-slate-500: #718096;
    --lh-slate-400: #94a0b0;
    --lh-slate-300: #cbd2dc;
    --lh-slate-200: #dde2e8;
    --lh-slate-100: #eef1f4;
    --lh-slate-50: #f7f8fa;

    /* v2.1 application surfaces: one continuous white work plane. */
    --lh-bg-app: #ffffff;
    --lh-bg-surface: #ffffff;
    --lh-bg-subtle: #f7f8fa;
    --lh-bg-hover: #f3f6f9;
    --lh-bg-sidebar: #fbfcfe;
    --lh-border: #dbe3ec;
    --lh-border-strong: #c4cfdb;
    --lh-text: #172033;
    --lh-text-secondary: #455468;
    --lh-text-muted: #59697e;
    --lh-text-subtle: #627086;

    --lh-radius-control: 0.375rem;
    --lh-radius-panel: 0.5rem;
    --lh-radius-overlay: 0.625rem;

    --lh-control-height: 2.5rem;
    --lh-control-height-compact: 2.125rem;
    --lh-page-gap: 1.5rem;
    --lh-section-gap: 1.25rem;

    --lh-focus-ring: 0 0 0 3px rgba(36, 88, 166, 0.12);
    --lh-shadow-overlay: 0 18px 48px rgba(12, 25, 45, 0.16);
}

html {
    color-scheme: light;
}

body {
    background-color: var(--lh-bg-app);
    color: var(--lh-text);
}

.lh-site-body {
    min-width: 0;
    background: var(--lh-bg-app);
}

body.lh-authenticated-workspace {
    background: var(--lh-bg-app);
}

body.lh-authenticated-workspace .lh-app-main {
    background: var(--lh-bg-app);
}

::selection {
    background: rgba(0, 145, 255, 0.18);
    color: var(--lh-slate-950);
}


/* ==========================================================================
   LINEHAUL V2 SHARED VISUAL PRIMITIVES
   Quiet industrial precision: flatter hierarchy, fewer cards, exact alignment.
   ========================================================================== */

/* Keep legacy Tailwind slate utilities on the exact Linehaul neutral system. */
.text-slate-950 { color: var(--lh-slate-950) !important; }
.text-slate-900 { color: var(--lh-slate-900) !important; }
.text-slate-700 { color: var(--lh-slate-700) !important; }
.text-slate-600 { color: var(--lh-slate-600) !important; }
.text-slate-500 { color: var(--lh-text-muted) !important; }
.text-slate-400 { color: var(--lh-text-subtle) !important; }
.border-slate-300 { border-color: var(--lh-border-strong) !important; }
.border-slate-200 { border-color: var(--lh-border) !important; }
.border-slate-100 { border-color: #e8edf2 !important; }
.bg-slate-50 { background-color: var(--lh-bg-subtle) !important; }
.bg-slate-100 { background-color: var(--lh-slate-100) !important; }

/* Global application canvas. Branding is structural, not decorative. */
.lh-app-main,
.lh-public-main {
    min-width: 0;
}

.lh-app-main {
    position: relative;
    isolation: isolate;
}

.lh-page-shell {
    width: 100%;
    min-width: 0;
}

.lh-page-shell--narrow {
    max-width: 64rem;
}

.lh-page-header {
    border-bottom: 1px solid var(--lh-border);
}

.lh-page-title {
    color: var(--lh-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lh-page-description {
    color: var(--lh-text-muted);
}

.lh-section-kicker {
    color: var(--lh-text-muted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 0.875rem;
    text-transform: uppercase;
}

/* Primary static surface. A surface is not automatically a card. */
.lh-surface {
    background: var(--lh-bg-surface);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-panel);
    box-shadow: none;
}

.lh-surface--subtle {
    background: var(--lh-bg-subtle);
}

.lh-surface-header {
    border-bottom: 1px solid var(--lh-border);
}

/* Use a divider instead of another nested box whenever the content is related. */
.lh-divider {
    border-color: var(--lh-border);
}

.lh-inline-note {
    border-left: 2px solid var(--lh-border-strong);
    padding-left: 0.75rem;
    color: var(--lh-text-secondary);
}

/* Dense AP tables live directly on the work plane. Their own row/header
   dividers provide structure; an outer card is usually redundant. */
.lh-work-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-block: 1px solid var(--lh-border);
    border-inline: 0;
    border-radius: 0;
    background: var(--lh-bg-surface);
    box-shadow: none;
}

.lh-work-table table {
    font-variant-numeric: tabular-nums;
}

.lh-work-table__scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    /* Horizontal table gestures stay with the table, but vertical wheel/touch
       input must be allowed to chain back to the page when this viewport has
       no more vertical range. Containing both axes makes ordinary page
       scrolling appear broken whenever the pointer is over a work table. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f8fafc;
}

.lh-work-table__scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.lh-work-table__scroll::-webkit-scrollbar-track {
    background: #f8fafc;
}

.lh-work-table__scroll::-webkit-scrollbar-thumb {
    border: 2px solid #f8fafc;
    border-radius: 999px;
    background: #94a3b8;
}

/* Related controls and a primary table can share one workbench without a
   visible shell. Alignment and spacing should do the grouping; the table keeps
   its own structural rules. */
.lh-workbench {
    min-width: 0;
    background: var(--lh-bg-surface);
}

.lh-workbench__row {
    min-width: 0;
    background: var(--lh-bg-surface);
}

/* Bulk-selection mode is a genuine temporary context, so a lightweight card is
   preferable to another permanent divider line. */
.lh-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--lh-blue-border);
    border-radius: var(--lh-radius-control);
    background: rgba(238, 244, 251, .62);
    box-shadow: none;
}

.lh-selection-bar.hidden {
    display: none;
}

.lh-selection-bar__summary,
.lh-selection-bar__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.lh-selection-bar__actions {
    flex: 0 0 auto;
}

.lh-selection-count {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0 0.625rem;
    border: 1px solid var(--lh-blue-border);
    border-radius: var(--lh-radius-control);
    background: #fff;
    color: var(--lh-blue);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lh-selection-bar__description {
    color: #53657a;
    font-size: 0.6875rem;
    line-height: 1rem;
}

@media (max-width: 640px) {
    .lh-selection-bar {
        align-items: flex-start;
    }

    .lh-selection-bar__description {
        display: none;
    }

    .lh-selection-bar__actions {
        gap: 0.375rem;
    }
}

/* A flat page section uses alignment and whitespace rather than a card shell. */
.lh-workspace-section {
    min-width: 0;
    background: var(--lh-bg-app);
}

.lh-workspace-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 0.75rem;
}

/* Operational metrics should read as one strip, not four independent cards. */
.lh-metric-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    border-block: 1px solid var(--lh-border);
    background: var(--lh-border);
}

.lh-metric-strip > * {
    min-width: 0;
    background: var(--lh-bg-app);
}

@media (min-width: 640px) {
    .lh-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lh-metric-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Financial and identifier values align cleanly without making prose monospace. */
.lh-financial-value,
.lh-identifier-value {
    font-variant-numeric: tabular-nums;
}

/* Compact action clusters are the default authenticated-workspace language. */
.lh-action-cluster {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Floating UI earns elevation. Static content does not. */
.lh-overlay-surface {
    background: var(--lh-bg-surface);
    border: 1px solid var(--lh-border-strong);
    border-radius: var(--lh-radius-overlay);
    box-shadow: var(--lh-shadow-overlay);
}

/* Authenticated footer stays quiet; the sidebar already carries product identity. */
.lh-app-footer {
    background: var(--lh-bg-app);
    border-top: 1px solid var(--lh-border);
    color: var(--lh-text-muted);
}

.lh-app-footer a {
    color: var(--lh-text-muted);
}

.lh-app-footer a:hover {
    color: var(--lh-text-secondary);
}

/* Public footer uses the same exact border/text system without app density. */
.lh-public-footer {
    border-top-color: var(--lh-border) !important;
}

/* Inputs share exact geometry even where older templates use mixed utilities. */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea
) {
    border-radius: var(--lh-radius-control);
}

/* Authenticated product surfaces should not drift into soft consumer geometry. */
body.lh-authenticated-workspace main :where(.rounded-xl, .rounded-2xl, .rounded-3xl) {
    border-radius: var(--lh-radius-panel) !important;
}

/* Preserve true pills and circular controls. */
body.lh-authenticated-workspace main .rounded-full {
    border-radius: 9999px !important;
}

/* Tables and amounts benefit from predictable number widths throughout the app. */
body.lh-authenticated-workspace main :where(table, [data-financial-value]) {
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Primary actions
   Normalize existing Tailwind blue CTAs without touching non-interactive
   audit/status badges that also use blue.
   ------------------------------------------------------------------------- */

.lh-brand-primary,
a.bg-blue-600,
button.bg-blue-600,
a.bg-blue-700,
button.bg-blue-700 {
    background-color: var(--lh-blue) !important;
    border-color: var(--lh-blue) !important;
    color: #ffffff !important;
    border-radius: var(--lh-radius-control) !important;
    box-shadow: none !important;
}

.lh-brand-primary:hover,
a.bg-blue-600:hover,
button.bg-blue-600:hover,
a.bg-blue-700:hover,
button.bg-blue-700:hover {
    background-color: var(--lh-blue-hover) !important;
    border-color: var(--lh-blue-hover) !important;
    color: #ffffff !important;
}

/* Brand-colored text links only; semantic labels/spans keep their own colors. */
.lh-brand-link,
a.text-blue-600,
a.text-blue-700 {
    color: var(--lh-blue) !important;
}

.lh-brand-link:hover,
a.text-blue-600:hover,
a.text-blue-700:hover {
    color: var(--lh-blue-hover) !important;
}

/* Text actions that open a modal or in-place preview use the same small
   diagonal-arrow-in-a-box cue. This keeps "opens here" visually distinct from
   the plain directional arrow reserved for real navigation. */
.lh-popup-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.lh-popup-trigger-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
}

/* Shared surfaces for pages that opt into the standardized B2B panel. */
.lh-brand-panel {
    background: #ffffff;
    border: 1px solid var(--lh-slate-300);
    border-radius: var(--lh-radius-panel);
    box-shadow: none;
}

.lh-brand-secondary {
    background: #ffffff !important;
    border: 1px solid var(--lh-slate-300) !important;
    color: #334155 !important;
    border-radius: var(--lh-radius-control) !important;
    box-shadow: none !important;
}

.lh-brand-secondary:hover {
    background: var(--lh-slate-50) !important;
    border-color: #94a3b8 !important;
    color: var(--lh-slate-950) !important;
}

.lh-brand-top-rule {
    border-top-color: var(--lh-blue) !important;
}

.lh-brand-kicker {
    color: var(--lh-blue) !important;
}

/* Make the same keyboard and form focus language appear across every workflow. */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea
):focus {
    border-color: var(--lh-blue) !important;
    box-shadow: var(--lh-focus-ring) !important;
    outline: none !important;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--lh-mark-blue);
    outline-offset: 2px;
}

/* Compact AP interfaces can remain dense without relying on 9px text. This
   only lifts the smallest legacy utility inside authenticated workspaces; it
   does not make ordinary labels/body copy larger or heavier. */
body.lh-authenticated-workspace .text-\[9px\] {
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
}

/* Keyboard users must get the same obvious focus location on native form
   controls as links/buttons. The ring appears only for focus-visible. */
body.lh-authenticated-workspace :where(
    input,
    select,
    textarea
):focus-visible {
    outline: 2px solid var(--lh-mark-blue) !important;
    outline-offset: 2px !important;
}

/* Logo sizing helpers. */
.lh-brand-lockup {
    display: block;
    width: auto;
    object-fit: contain;
}

.lh-brand-lockup--footer {
    height: 1.85rem;
}

.lh-brand-lockup--checkout {
    height: 2.2rem;
}

@media (max-width: 640px) {
    .lh-brand-lockup--footer {
        height: 1.65rem;
    }

    .lh-brand-lockup--checkout {
        height: 2rem;
    }
}


/* ==========================================================================
   LINEHAUL PRODUCTION NORMALIZATION
   Final compatibility layer for legacy Tailwind utility classes generated by
   existing templates and dynamic JS. This preserves semantic audit colors while
   making every generic blue interaction use the exact Linehaul interface blue.
   ========================================================================== */

/* Exact Linehaul blue for generic blue utility surfaces. */
.bg-blue-600,
.bg-blue-700 {
    background-color: var(--lh-blue) !important;
}

.hover\\:bg-blue-700:hover,
.hover\\:bg-blue-600:hover {
    background-color: var(--lh-blue-hover) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--lh-blue) !important;
}

.hover\\:text-blue-600:hover,
.hover\\:text-blue-700:hover,
.hover\\:text-blue-800:hover {
    color: var(--lh-blue-hover) !important;
}

.border-blue-500,
.border-blue-600,
.border-blue-700 {
    border-color: var(--lh-blue) !important;
}

.border-l-blue-500,
.border-l-blue-600,
.border-l-blue-700 {
    border-left-color: var(--lh-blue) !important;
}

.border-t-blue-600,
.border-t-blue-700 {
    border-top-color: var(--lh-blue) !important;
}

.bg-blue-50 { background-color: var(--lh-blue-soft) !important; }
.bg-blue-100 { background-color: #e3edf9 !important; }
.border-blue-100 { border-color: #dce8f6 !important; }
.border-blue-200 { border-color: var(--lh-blue-border) !important; }
.border-blue-300 { border-color: #adc6e4 !important; }

.accent-blue-600 { accent-color: var(--lh-blue) !important; }

/* Selected provider tabs and other JS-driven tab controls. */
.email-provider-tab[aria-selected="true"] {
    border-bottom-color: var(--lh-blue) !important;
    color: var(--lh-blue) !important;
}

/* Public and app inputs share one visible brand focus treatment. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--lh-blue) !important;
    box-shadow: var(--lh-focus-ring) !important;
    outline: none !important;
}

/* Full-width flex children that opt into a page shell must never exceed viewport. */
.lh-responsive-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Stable semantic status shapes; the colors remain semantic. */
.lh-status-control {
    border-radius: var(--lh-radius-control) !important;
    box-shadow: none !important;
}


/* -------------------------------------------------------------------------
   Duplicate / rebill evidence table
   Explicit CSS is intentional: these rows are built at runtime in JS, so a
   Tailwind arbitrary grid class may not be present in the compiled bundle.
   ------------------------------------------------------------------------- */
.duplicate-evidence-grid {
    display: grid;
    grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(76px, auto);
    gap: 0.5rem;
    align-items: center;
}

.duplicate-evidence-mobile-label {
    display: none;
}

@media (max-width: 640px) {
    .duplicate-evidence-header {
        display: none;
    }

    .duplicate-evidence-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 0.65rem;
        align-items: start;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .duplicate-evidence-signal {
        grid-column: 1;
        grid-row: 1;
    }

    .duplicate-evidence-result {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
    }

    .duplicate-evidence-current,
    .duplicate-evidence-prior {
        grid-column: 1 / -1;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .duplicate-evidence-current {
        grid-row: 2;
    }

    .duplicate-evidence-prior {
        grid-row: 3;
    }

    .duplicate-evidence-mobile-label {
        display: inline-block;
        min-width: 3.4rem;
        margin-right: 0.35rem;
        color: var(--lh-text-muted);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}

/* Formal public/legal surfaces use more whitespace, never extra decoration. */
.lh-document-surface {
    border-color: var(--lh-border);
    background: var(--lh-bg-surface);
}

/* Export readiness: one restrained document-level decision surface shared by
   Invoice History and Batch Management. It explains risk without turning every
   status into another permanent card. */
.lh-export-readiness-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}
.lh-export-readiness-modal.hidden { display: none; }
.lh-export-readiness-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .38);
    cursor: default;
}
.lh-export-readiness-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: min(720px, calc(100dvh - 40px));
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .18);
    outline: none;
}
.lh-export-readiness-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e2e8f0;
}
.lh-export-readiness-kicker {
    color: #56657a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lh-export-readiness-head h2 {
    margin-top: 3px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 760;
}
.lh-export-readiness-close {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lh-export-readiness-close:hover { background: #f3f6f9; color: #0f172a; }
.lh-export-readiness-body {
    display: grid;
    gap: 10px;
    padding: 16px 20px 18px;
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
}
.lh-export-readiness-note,
.lh-export-readiness-warning {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fbfcfe;
}
.lh-export-readiness-warning {
    border-color: #f2d4a3;
    background: #fffaf0;
}
.lh-export-readiness-note strong,
.lh-export-readiness-warning strong { color: #172033; font-size: 11px; }
.lh-export-readiness-note span,
.lh-export-readiness-warning span { color: #56657a; font-size: 11px; }
.lh-export-readiness-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 20px 18px;
    border-top: 1px solid #e2e8f0;
}
.lh-export-readiness-actions button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.lh-export-readiness-cancel,
.lh-export-readiness-secondary {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
}
.lh-export-readiness-review {
    margin-right: auto;
    border: 0;
    background: transparent;
    color: #2458A6;
    padding-inline: 2px !important;
}
.lh-export-readiness-review:hover { color: #1D4B91; text-decoration: underline; }
.lh-export-readiness-cancel:hover,
.lh-export-readiness-secondary:hover { border-color: #94a3b8; background: #f8fafc; }
.lh-export-readiness-primary {
    border: 1px solid #2458A6;
    background: #2458A6;
    color: #fff;
}
.lh-export-readiness-primary:hover { border-color: #1D4B91; background: #1D4B91; }