/* ===========================================================================
   PLUTOPRICE — SITEWIDE DESIGN SYSTEM
   Cream paper, warm ink text, forest accent, DM Sans + Fraunces typography.
   Adapted from the supplied PlutoPrice landing mockup.
   =========================================================================== */

:root {
    /* Surfaces */
    --color-bg:            #FFF3E8;   /* cream paper */
    --color-bg-2:          #FCEADC;   /* slightly darker cream for soft panels */
    --color-card:          #FFFFFF;   /* paper white */
    --color-card-soft:     #FBF6EF;   /* off-white inner panels */

    /* Text */
    --color-text:          #1A1208;   /* warm ink */
    --color-text-2:        #3D2E1F;   /* secondary ink */
    --color-text-muted:    #7A6A57;   /* muted text + mono labels */
    --color-text-faint:    #9C8E78;   /* very faint */
    --color-text-onink:    #FFF3E8;   /* text on dark ink backgrounds */

    /* Borders (ink at low opacity) */
    --color-border:        rgba(26, 18, 8, 0.12);
    --color-border-subtle: rgba(26, 18, 8, 0.06);
    --color-rule:          rgba(26, 18, 8, 0.12);

    /* Accent (forest green) + states */
    --color-primary:       #1F8A5B;
    --color-primary-dark:  #155F3F;
    --color-primary-soft:  #C9E6D5;

    /* Semantic */
    --color-success:       #1F8A5B;
    --color-success-dark:  #155F3F;
    --color-success-soft:  #C9E6D5;
    --color-danger:        #B4421C;
    --color-danger-dark:   #7C2D10;
    --color-danger-soft:   #F7C8AF;
    --color-warning:       #E26D2C;
    --color-warning-soft:  #FFD6A8;
    --color-info:          #3F4DC0;

    /* Shape */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  18px;
    --radius-xl:  24px;

    --shadow-sm:  0 1px 2px rgba(26, 18, 8, 0.04);
    --shadow-md:  0 1px 3px rgba(26, 18, 8, 0.04), 0 8px 24px rgba(26, 18, 8, 0.06);
    --shadow-lg:  0 30px 80px -30px rgba(26, 18, 8, 0.25), 0 12px 30px -16px rgba(26, 18, 8, 0.12);

    /* Bootstrap overrides */
    --bs-primary: #1F8A5B;
    --bs-primary-rgb: 31, 138, 91;
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-dark);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-body-font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Base ---- */

html, body {
    font-family: var(--bs-body-font-family);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color .12s ease;
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

p { color: var(--color-text-2); text-wrap: pretty; }
p.lead { font-size: 1.25rem; line-height: 1.45; color: var(--color-text-2); font-weight: 400; }

/* ---- Typography ---- */

h1, h2, h3, h4, h5 {
    margin: 0 0 0.75rem;
    font-family: "DM Sans", var(--bs-body-font-family);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--color-text);
}

h1 { font-size: 2.5rem;   letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: 1.875rem; letter-spacing: -0.03em; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }

/* FocusOnNavigate (in Routes.razor) programmatically focuses the page H1 so
   screen readers announce the new page. Suppress the visible focus ring — H1
   is not interactive, so a focus outline is just visual noise. */
h1:focus, h1:focus-visible { outline: none; }

@media (min-width: 768px) {
    h1 { font-size: 3rem; }
}

/* Italic-serif accent for marketing copy (e.g. "Quote in seconds, *not Sundays.*") */
.serif {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-2);
    letter-spacing: -0.02em;
}

/* Small uppercase eyebrow / mono label */
.eyebrow, .mono {
    font-family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.section-label { /* legacy alias */
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.text-muted { color: var(--color-text-muted) !important; }

/* ---- Cards ---- */

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}

.card + .card { margin-top: 1.25rem; }

/* ---- Forms ---- */

.form-label {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.form-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.form-control,
.form-control-sm,
.form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    background: #fff;
    color: var(--color-text);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus,
.form-control-sm:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.18);
    outline: none;
}

.form-control::placeholder { color: var(--color-text-faint); }

.form-check-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-control-color {
    width: 56px;
    padding: 4px;
}

/* ---- Buttons ---- */

.btn {
    font-family: "DM Sans", var(--bs-body-font-family);
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 0.6rem 1.1rem;
    transition: background-color .12s ease, color .12s ease,
                border-color .12s ease, transform .08s ease,
                box-shadow .12s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

/* Primary = brand green. Same look as btn-success so every "go forward" action
   across the app reads consistently regardless of which Bootstrap class the
   page reaches for. */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(31,138,91,0.18);
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

/* Success / accent = forest green */
.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.btn-success:hover:not(:disabled),
.btn-success:focus:not(:disabled) {
    background: var(--color-success-dark);
    border-color: var(--color-success-dark);
    color: #fff;
}

.btn-accent {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text);
}

.btn-accent:hover:not(:disabled) {
    background: #C95B22;
    border-color: #C95B22;
    color: var(--color-text);
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
    background: var(--color-bg-2);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline-primary {
    background: var(--color-card);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.btn-outline-primary:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
}

.btn-outline-danger {
    background: var(--color-card);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-outline-danger:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
}

.btn-link {
    color: var(--color-primary-dark);
    text-decoration: none;
    border-color: transparent;
}

.btn-link:hover { text-decoration: underline; }

.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.18); }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }

.btn-lg { padding: 0.85rem 1.4rem; font-size: 1rem; border-radius: var(--radius-md); }

/* ---- Tables ---- */

.table {
    --bs-table-bg: transparent;
    color: var(--color-text);
}

.table > thead > tr > th {
    font-family: "DM Mono", monospace;
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    padding: 0.7rem 0.75rem;
}

.table > tbody > tr > td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr:hover > td { background: var(--color-card-soft); }

/* ---------------------------------------------------------------------------
   RESPONSIVE TABLES — on phones a wide multi-column table can't fit the
   viewport and forces horizontal overflow (which clips the whole page).
   `.table-stack` turns each row into a labelled card at narrow widths: the
   header row is hidden and every cell becomes "LABEL / value" stacked full
   width. Add data-label="..." to each <td> (data-label="" = no label, e.g.
   an action-button cell).
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .table-stack > thead { display: none; }
    .table-stack,
    .table-stack > tbody { display: block; width: 100%; }

    .table-stack > tbody > tr {
        display: block;
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        background: var(--color-card);
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.75rem;
    }

    .table-stack > tbody > tr > td {
        display: block;
        width: 100%;
        max-width: none;
        border: none;
        padding: 0.3rem 0;
        text-align: left !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        display: block;
        font-family: "DM Mono", ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 0.2rem;
    }

    .table-stack > tbody > tr > td[data-label=""]::before { content: none; }

    .table-stack > tbody > tr > td .form-control,
    .table-stack > tbody > tr > td .form-select,
    .table-stack > tbody > tr > td .btn { width: 100%; }
}

/* ---- Badges ---- */

.badge {
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-family: "DM Mono", monospace;
    text-transform: uppercase;
}

.badge.bg-primary    { background: var(--color-primary-soft) !important; color: var(--color-primary-dark) !important; }
.badge.bg-secondary  { background: var(--color-border-subtle) !important; color: var(--color-text-2) !important; }
.badge.bg-success    { background: var(--color-success-soft) !important; color: var(--color-success-dark) !important; }
.badge.bg-info       { background: #E0E4FB !important; color: #2B358C !important; }
.badge.bg-warning    { background: var(--color-warning-soft) !important; color: var(--color-danger-dark) !important; }
.badge.bg-danger     { background: var(--color-danger-soft) !important; color: var(--color-danger-dark) !important; }

/* ---- Alerts ---- */

.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
}

.alert-success { background: var(--color-success-soft); color: var(--color-success-dark); border-color: rgba(31,138,91,0.25); }
.alert-danger  { background: var(--color-danger-soft);  color: var(--color-danger-dark);  border-color: rgba(180,66,28,0.25); }
.alert-warning { background: var(--color-warning-soft); color: var(--color-danger-dark);  border-color: rgba(226,109,44,0.25); }
.alert-info    { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: rgba(31,138,91,0.25); }

/* ---- Validation ---- */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); font-size: 0.85rem; }

.blazor-error-boundary {
    background: var(--color-danger);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
}

.blazor-error-boundary::after { content: "An error has occurred." }

/* ---- Misc ---- */

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

code {
    background: var(--color-bg-2);
    color: var(--color-text);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: "DM Mono", monospace;
    font-size: 0.85em;
}

/* ---- Stat cards (used on Dashboard + Admin) ---- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.25rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stat-card .eyebrow {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stat-value {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ---- Page chrome ---- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-header h1 { margin: 0; }

.page-header .page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   LINE ITEMS PANEL (used on QuoteDetail read-only view)
   Mirrors the PlutoPrice mockup: mono header strip, rows with a green tick,
   light VAT sub-rows, dark inky TOTAL footer band with cream amount.
   --------------------------------------------------------------------------- */

.lineitems-panel {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-card);
}

.lineitems-head {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.7fr 0.7fr;
    gap: 12px;
    padding: 0.6rem 0.85rem;
    background: var(--color-card-soft);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Numeric headers right-aligned to line up with their row values. */
.lineitems-head .num { text-align: right; }

/* ---- Internal notes panel (read-only quote view) ---- */
.notes-panel {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-card-soft);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.notes-text {
    margin: 0;
    color: var(--color-text);
    white-space: pre-wrap;
    line-height: 1.5;
}

.notes-empty {
    margin: 0;
    color: var(--color-text-faint);
    font-style: italic;
    font-size: 0.9rem;
}

.lineitems-row {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.7fr 0.7fr;
    gap: 12px;
    padding: 0.75rem 0.85rem;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.92rem;
}

.lineitems-row:last-of-type { border-bottom: none; }

.lineitems-row .desc {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lineitems-row .desc .tick {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    background: var(--color-success-soft);
    color: var(--color-success-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lineitems-row .desc-text {
    color: var(--color-text);
}

.lineitems-row .num {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-2);
    text-align: right;
}

.lineitems-row .num.total {
    color: var(--color-text);
    font-weight: 500;
}

.lineitems-sub {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--color-card-soft);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--color-border-subtle);
}

.lineitems-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--color-text);
    color: var(--color-text-onink);
}

.lineitems-foot .lbl {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C7B49A;
}

.lineitems-foot .amt {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .lineitems-head, .lineitems-row {
        grid-template-columns: 1fr 0.6fr 0.7fr;
    }
    .lineitems-head > :nth-child(3),
    .lineitems-row > :nth-child(3) {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   AUTH PAGES (custom Login + Register, in /Areas/Identity/Pages/Account/)
   Centred card on a soft background. Logo + brand at top of the card,
   labelled inputs, full-width primary button, OR divider, stacked
   provider buttons, footer link.
   --------------------------------------------------------------------------- */

.auth-body {
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-shell {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.25rem;
    text-align: center;
}

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}

.auth-back-link {
    text-align: center;
    margin: 1rem 0 0;
    font-size: 0.85rem;
}

.auth-back-link a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.auth-back-link a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ---- Logo + brand header ---- */
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.auth-brand-name {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0 0 2rem;
}

/* ---- Form fields ---- */
.auth-field {
    text-align: left;
    margin-bottom: 1rem;
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.auth-forgot {
    font-size: 0.8rem;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-forgot:hover { color: var(--color-primary); }

.auth-input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.15);
}

.auth-input::placeholder { color: var(--color-text-faint); }

.auth-error {
    display: block;
    color: var(--color-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.auth-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-2);
    margin: 0.5rem 0 1.25rem;
    cursor: pointer;
    text-align: left;
}

.auth-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* ---- Primary CTA button ---- */
.auth-primary-btn {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.8rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color .12s ease, transform .08s ease;
    box-shadow: 0 1px 2px rgba(31,138,91,0.18);
}

.auth-primary-btn:hover { background: var(--color-primary-dark); }
.auth-primary-btn:active { transform: translateY(1px); }

.auth-arrow {
    transition: transform .15s ease;
}

.auth-primary-btn:hover .auth-arrow { transform: translateX(3px); }

/* ---- OR divider ---- */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-divider span {
    padding: 0 0.75rem;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

/* ---- External provider buttons ---- */
.auth-provider-btn {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem 0.7rem 3rem;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    margin-top: 0.6rem;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 18px 18px;
    transition: background-color .12s ease, border-color .12s ease;
    font: inherit;
}

.auth-provider-btn:hover {
    background-color: var(--color-bg-2);
    border-color: var(--color-text-muted);
}

.auth-provider-google {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/><path fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/><path fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/><path fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/></svg>");
}

.auth-provider-microsoft {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><rect x='1' y='1' width='9' height='9' fill='%23f25022'/><rect x='11' y='1' width='9' height='9' fill='%237fba00'/><rect x='1' y='11' width='9' height='9' fill='%2300a4ef'/><rect x='11' y='11' width='9' height='9' fill='%23ffb900'/></svg>");
}

/* ---- Footer link ---- */
.auth-footer-link {
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.auth-footer-link a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.auth-footer-link a:hover { color: var(--color-primary); }

/* ---- Validation alerts ---- */
.auth-alert {
    background: var(--color-danger-soft);
    border: 1px solid rgba(180, 66, 28, 0.25);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    color: var(--color-danger-dark);
    font-size: 0.9rem;
    text-align: left;
}

.auth-alert ul { margin: 0; padding-left: 1rem; }

/* The asp-validation-summary tag helper renders the wrapper div even when
   there are no errors (just adds the .validation-summary-valid class).
   Hide it in that state so the empty orange banner doesn't show. */
.auth-alert.validation-summary-valid,
.auth-alert:empty { display: none; }

/* ---------------------------------------------------------------------------
   HERO landing (signed-out home page)
   --------------------------------------------------------------------------- */

.hero {
    padding: 3rem 0 4rem;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    background: var(--color-card);
    font-family: "DM Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-2);
    margin-bottom: 1.5rem;
}

.hero-eyebrow .pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 0 var(--color-primary);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0   rgba(31, 138, 91, 0.45) }
    70%  { box-shadow: 0 0 0 8px rgba(31, 138, 91, 0)   }
    100% { box-shadow: 0 0 0 0   rgba(31, 138, 91, 0)   }
}

.hero h1 {
    font-size: 2.5rem;
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .hero h1 { font-size: 4rem; }
}

.hero h1 .serif {
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-2);
}

.hero .sub {
    margin-top: 1.5rem;
    max-width: 560px;
}

.hero .cta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

.hero .meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.hero .meta-row .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

/* ===========================================================================
   LEGAL PAGES  (/privacy, /terms)
   Long-form prose layout — sits inside LandingLayout, reuses .lp-wrap for the
   container so widths line up with the marketing landing.
   =========================================================================== */

.legal {
    padding: 64px 0 96px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'DM Sans', system-ui, sans-serif;
}

.legal .lp-wrap {
    max-width: 760px;
}

.legal-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.legal h1 {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 8px;
}

.legal-meta {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 32px;
}

.legal-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-text-2);
    margin: 0 0 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.legal h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 40px 0 12px;
    color: var(--color-text);
}

.legal p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 14px;
}

.legal ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.legal li {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 6px;
}

.legal a {
    color: var(--color-primary, #1F8A5B);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal strong {
    font-weight: 600;
    color: var(--color-text);
}

/* Customer-link copy button (QuoteDetail). The "Copied" state is driven by a
   data attribute set client-side in plutoCopyLink (App.razor) instead of by
   rewriting the button's text — rewriting it would orphan the text node Blazor
   tracks and tear down the circuit on the next render. Both spans are rendered
   by Blazor and only their visibility changes, which it doesn't care about. */
.copy-btn .copy-done {
    display: none;
}

.copy-btn[data-copied] .copy-label {
    display: none;
}

.copy-btn[data-copied] .copy-done {
    display: inline;
}