/*
    THE GUEST APP'S ONLY STYLESHEET.

    WHO IS READING THIS PAGE, because everything below follows from it: a salesperson who has never heard
    of PurchaseIT, who arrived from an email, who has no account and no reason to make one, and who is
    deciding in the first five seconds whether this is worth their afternoon. It has to look like a
    business asked them a serious question - not like an internal tool somebody pointed outwards.

    DELIBERATELY NOT THE PORTALS' SIX THEMES. A guest has no preference to remember and no settings page
    to set one on, so there is one look and it is the confident one.
*/

:root {
    --guest-ink: #101828;
    --guest-body: #475467;
    --guest-muted: #667085;
    --guest-line: #e4e7ec;
    --guest-line-soft: #f2f4f7;
    --guest-surface: #ffffff;
    --guest-canvas: #f8f9fc;

    /* One accent, used for the primary action and nothing else, so it always means "this is the button". */
    --guest-accent: #0b5cd5;
    --guest-accent-dark: #0847a6;

    --guest-hot: #b42318;
    --guest-warm: #b54708;
    --guest-cold: #175cd3;

    --guest-radius: 0.75rem;
    --guest-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

body {
    color: var(--guest-body);
    background-color: var(--guest-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fw-semibold, strong {
    color: var(--guest-ink);
}

/* --- CHROME ------------------------------------------------------------------------------------- */

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

.guest-brand {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--guest-ink);
}

.guest-brand-note {
    color: var(--guest-muted);
    font-size: 0.875rem;
}

.guest-footer {
    color: var(--guest-muted);
    border-top: 1px solid var(--guest-line);
    background: var(--guest-surface);
    margin-top: 4rem;
    font-size: 0.875rem;
}

.guest-card {
    background: var(--guest-surface);
    border: 1px solid var(--guest-line);
    border-radius: var(--guest-radius);
    box-shadow: var(--guest-shadow);
}

/*
    THE PRIMARY ACTION. Bootstrap's default blue is fine and anonymous; this one is the same blue the
    invitation email uses, so the button they clicked in their inbox and the button they press here are
    visibly the same promise.
*/
.btn-primary {
    --bs-btn-bg: var(--guest-accent);
    --bs-btn-border-color: var(--guest-accent);
    --bs-btn-hover-bg: var(--guest-accent-dark);
    --bs-btn-hover-border-color: var(--guest-accent-dark);
    --bs-btn-active-bg: var(--guest-accent-dark);
    --bs-btn-active-border-color: var(--guest-accent-dark);
    font-weight: 600;
}

.btn {
    border-radius: 0.5rem;
}

/* --- THE LINE TABLE ----------------------------------------------------------------------------- */

/*
    IT SCROLLS INSIDE ITSELF RATHER THAN PUSHING THE PAGE SIDEWAYS.

    A bid form has more columns than a phone has width, and a supplier pricing from a car park is a real
    case rather than a hypothetical one. A horizontally scrolling PAGE hides the submit button; a
    horizontally scrolling TABLE does not.
*/
.guest-lines {
    overflow-x: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.guest-lines table {
    min-width: 52rem;
}

/*
    *** COLUMN WIDTHS ARE DECLARED, NOT LEFT TO THE BROWSER (Bradley, testing 2026-08-22). ***

    Auto layout sizes every column to its widest content, so one long description made the item column
    swallow the row and squeezed the four inputs into ragged slivers of different widths. Fixing the input
    columns and letting the item column take what is left is what makes the controls line up down the page
    - which is what the eye is actually checking when it scans a form.
*/
.guest-lines thead th {
    color: var(--guest-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--guest-line);
    white-space: nowrap;
    vertical-align: bottom;
}

.guest-lines tbody td {
    border-bottom: 1px solid var(--guest-line-soft);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.guest-col-no    { width: 2.5rem; }
.guest-col-qty   { width: 6rem; }
.guest-col-price { width: 11rem; }
.guest-col-pack  { width: 9rem; }
.guest-col-lead  { width: 6.5rem; }
.guest-col-nq    { width: 6rem; }
/* The item column takes whatever is left, which is what "no width" means under table-layout: fixed. */
.guest-col-item  { min-width: 16rem; }

/* A line marked "not quoting" keeps its boxes visible but stops inviting numbers into them. */
.guest-muted-field {
    opacity: 0.45;
}

/*
    THE NORMALISATION PREVIEW - §5.3's first hazard control.

    "R550.00 / 120 = R4.583333 per Each", live, as they type. Reserved height even when empty, so the row
    does not jump the moment somebody types their first digit.
*/
.guest-normalised {
    font-size: 0.8rem;
    color: var(--guest-muted);
    min-height: 1.25rem;
    margin-top: 0.25rem;
}

.guest-normalised.is-set {
    color: var(--guest-ink);
    font-variant-numeric: tabular-nums;
}

/*
    HOT / WARM / COLD.

    ICON AND TEXT, NEVER COLOUR ALONE - the same rule the buyer's hazard flags follow, and for the same
    reason: about one man in twelve cannot tell the red from the green, and this is the only feedback a
    losing supplier ever gets about the field.
*/
.guest-band {
    font-weight: 600;
    font-size: 0.8rem;
}

.guest-band-hot { color: var(--guest-hot); }
.guest-band-warm { color: var(--guest-warm); }
.guest-band-cold { color: var(--guest-cold); }

.guest-outcome {
    font-size: 0.85rem;
    color: var(--guest-muted);
}

/* --- FORMS -------------------------------------------------------------------------------------- */

.form-control, .form-select {
    border-color: var(--guest-line);
    border-radius: 0.5rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--guest-accent);
    box-shadow: 0 0 0 3px rgba(11, 92, 213, 0.12);
}

.form-label {
    color: var(--guest-ink);
    font-weight: 500;
}

/* Money and quantities line up column-wise only if the digits are the same width. */
input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* --- THE JOIN CALL TO ACTION -------------------------------------------------------------------- */

.guest-join {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fe 100%);
    border: 1px solid var(--guest-line);
    border-radius: var(--guest-radius);
}