/* ================================================================================================
// 	File Name: style.scss
// 	Description: Style for customization.
// 	----------------------------------------------------------------------------------------------
// 	Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
// 	Version: 1.0
// 	Author: ThemeSelection
// 	Author URL: https://themeselection.com/
// ================================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


/* ================================================================================================
   The palette
   ------------------------------------------------------------------------------------------------
   One block, read by everything: base.html's chrome rules, the .pr-form tokens below, the register
   console and users/login.html — which is a standalone page and cannot see a <style> block in
   base.html, which is why these live here rather than there.
   ============================================================================================= */

/* --pr-chrome-* is the frame (top bar, menu, table head), --pr-brand-* the accent on controls
   and state. The frame stays neutral and colour is spent only where something is clickable,
   selected, or carries a state. */
:root {
    /* Frame: not white. The bars sit on the same near-white as the page so
       the chrome recedes and only the panels read as surfaces.
       --pr-chrome-surface is the white a bar element (a search field, a
       raised bar) sits on when it needs to lift off that grey. */
    --pr-chrome-from: #f7f8fd;
    --pr-chrome-to: #f7f8fd;
    --pr-chrome-surface: #ffffff;
    --pr-on-chrome: #1f2137;
    --pr-chrome-ink: #1f2137;
    --pr-chrome-ink-soft: #626684;
    --pr-chrome-rule: #e3e5f0;

    /* Accent: indigo, plus the two pale tints that fill a selected row, an
       active pill's track and a focus ring. */
    --pr-brand-from: #4f46e5;
    --pr-brand-to: #6366f1;
    --pr-brand-strong: #4338ca;
    --pr-brand-wash: #eef2ff;
    --pr-brand-rule: #e3e5f0;
    --pr-brand-rule-strong: #c9cce0;
    --pr-brand-tint: #e0e7ff;
    --pr-brand-hairline: #eceef6;

    /* Page: flat — the two ends match so there is no gradient. The only
       gradients in the app are the top bar and the register heroes. */
    --pr-page-from: #f4f5fb;
    --pr-page-to: #f4f5fb;

    --pr-danger-color: #e11d48;
    --pr-danger-wash-color: #ffe4e6;

    --pr-shadow: rgba(31, 33, 55, .14);
    /* Panels are flat: separation comes from the page behind them and a
       hairline border, not from a shadow. */
    --pr-card-shadow: none;
    --pr-card-radius: 1rem;

    --pr-table-head-bg: #f5f6fc;
    --pr-table-head-ink: #3c4063;

    /* ---- Bars, panels and data table --------------------------------
       The neutrals the whole frame is built from, kept as --jira-* because
       every rule below and the whole of style.css already reads them. The
       table loses every vertical border: rows are separated, columns are
       not. */
    --jira-surface: #ffffff;
    --jira-rule: #e6e8f2;
    /* The window's one dark band. Deep indigo, the same family the register
       heroes are painted in, which is what stops a page of near-white from
       reading as unfinished. */
    --jira-nav: #1e1b4b;
    --jira-nav-hover: rgba(255, 255, 255, .12);
    --jira-nav-ink: #ffffff;
    --jira-nav-ink-soft: #b9bce0;
    /* The tints that separate a header, a footer or an alternate row from
       the white around them. */
    --jira-tint: #f2f3fa;
    --jira-tint-soft: #fafbfe;
    --jira-green: #047857;
    --jira-green-bg: #d1fae5;
    --jira-yellow-bg: #fef3c7;
    --jira-yellow-ink: #92400e;
    --jira-red: #be123c;
    --jira-red-bg: #ffe4e6;
    --jira-neutral-bg: #e7e9f4;
    /* The data table's own colours, kept separate from the nav so the head
       can be repainted on its own. It is a pale band with dark labels, not
       a second dark bar: the head is sticky and a navy strip following the
       rows down the screen is heavier than the data under it. */
    --jira-table-head-bg: #f5f6fc;
    --jira-table-head-ink: #3c4063;
    --jira-table-ink: #1f2137;
    --jira-ink: #4b4f6b;
    --jira-ink-strong: #1f2137;
    --jira-ink-subtle: #757a99;
    --jira-blue: #4f46e5;
    --jira-blue-hover: #6366f1;
    --jira-selected-bg: #eef2ff;
    --jira-hover-bg: #f5f6fc;
    --jira-radius: 6px;

    /* ---- Register console -------------------------------------------
       The hero band each register page opens with, and the surfaces of the
       toolbar and footer around its table. style.css owns the layout; the
       colours live here with the rest of the palette. */
    --reg-hero-from: #241a5c;
    --reg-hero-via: #3730a3;
    --reg-hero-to: #4f46e5;
    --reg-hero-ink: #ffffff;
    --reg-hero-ink-soft: rgba(255, 255, 255, .64);
    --reg-hero-rule: rgba(255, 255, 255, .16);
    --reg-hero-accent: #a5b4fc;
    --reg-hero-live: #34d399;
    --reg-pill-track: #f0f1f9;
}


/* ================================================================================================
   Purchase Request form
   ------------------------------------------------------------------------------------------------
   Everything is scoped under .pr-form so none of it leaks into the rest of the Chameleon theme.
   The brand colours come from the palette above, so the form follows whatever the chrome is
   wearing; the values after the commas are only the fallback if that block is missing. The
   neutrals are biased slightly toward the brand so they read as chosen rather than inherited.
   The shell around these classes is templates/form_base.html — see the form console section
   further down, which is what makes these pages match the registers.
   ============================================================================================= */

.pr-form {
    --pr-ink:          #464855;
    --pr-ink-soft:     #626E82;
    --pr-muted:        #98A4B8;
    --pr-rule:         var(--pr-brand-rule, #e7e6f3);
    --pr-rule-strong:  var(--pr-brand-rule-strong, #d5d3e8);
    --pr-surface:      #ffffff;
    --pr-sunken:       #F9FAFD;
    --pr-accent:       var(--pr-brand-from, #6967ce);
    /* For accent surfaces carrying white text — a highlight-bright accent cannot. */
    --pr-accent-solid: var(--pr-brand-strong, #6967ce);
    --pr-accent-wash:  var(--pr-brand-wash, #eeeefa);
    --pr-danger:       var(--pr-danger-color, #fa626b);
    --pr-danger-wash:  var(--pr-danger-wash-color, #fdeced);

    color: var(--pr-ink);
}


/* --- Section bands ------------------------------------------------------------------------- */
/* Not cards: a rule and a numbered heading are enough to separate them, which keeps the border
   + shadow budget for the things that really are objects (line-item table, totals panel). */

.pr-section + .pr-section {
    margin-top: 2.25rem;
}

.pr-section__head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pr-rule);
}

.pr-section__num {
    font-family: Comfortaa, Muli, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pr-accent);
    font-variant-numeric: tabular-nums;
}

.pr-section__title {
    margin: 0;
    font-family: Comfortaa, Muli, sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pr-ink);
}

.pr-section__hint {
    margin-left: auto;
    font-size: .75rem;
    color: var(--pr-muted);
}


/* --- Fields -------------------------------------------------------------------------------- */

.pr-form .form-group {
    margin-bottom: 1.1rem;
}

.pr-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--pr-ink-soft);
}

.pr-req {
    color: var(--pr-danger);
    margin-left: .15em;
}

.pr-form .form-control {
    height: auto;
    padding: .45rem .6rem;
    font-size: .8125rem;
    color: var(--pr-ink);
    background-color: var(--pr-surface);
    border: 1px solid var(--pr-rule-strong);
    border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pr-form textarea.form-control {
    line-height: 1.5;
}

.pr-form .form-control:focus {
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 3px var(--pr-accent-wash);
}

.pr-form .form-control::placeholder {
    color: var(--pr-muted);
}

.pr-form .form-control.is-invalid {
    border-color: var(--pr-danger);
}

.pr-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--pr-danger-wash);
}

.pr-form .invalid-feedback {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--pr-danger);
}

.pr-form .form-text {
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--pr-muted);
}

/* Money and quantity: digits line up in columns, so give them tabular figures. */
.pr-num input,
.pr-form input[type="number"] {
    font-variant-numeric: tabular-nums;
}


/* --- Yes / No segmented control ------------------------------------------------------------ */
/* The sheet's Y/N columns ask long questions, so the control has to stay small while the label
   wraps freely. Three radios (unanswered / yes / no) keep "not answered" a real, reachable state. */

/* A radio group's accessible name is its <legend>, so it has to be reset off Bootstrap's
   1.5rem reboot default rather than styled as a plain label. */
.pr-yn__q {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin-bottom: .35rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--pr-ink-soft);
}

.pr-yn__set {
    position: relative; /* anchors the visually-hidden radios so they can't stretch the page */
    display: inline-flex;
    border: 1px solid var(--pr-rule-strong);
    border-radius: 4px;
    overflow: hidden;
    background: var(--pr-surface);
}

.pr-yn__set.is-invalid {
    border-color: var(--pr-danger);
}

.pr-yn__set input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pr-yn__set label {
    margin: 0;
    padding: .45rem .85rem;
    min-width: 2.75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    text-align: center;
    color: var(--pr-ink-soft);
    background: var(--pr-surface);
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, color .12s ease;
}

.pr-yn__set input + label:not(:first-of-type) {
    border-left: 1px solid var(--pr-rule);
}

.pr-yn__set label:hover {
    background: var(--pr-sunken);
}

.pr-yn__set input:checked + label {
    background: var(--pr-accent-solid);
    color: #fff;
}

/* "Not answered" is the resting state, not an answer — it must not wear the accent, or an
   untouched question looks answered. The accent is reserved for a real Yes/No. */
.pr-yn__set input:checked + label.pr-yn__none {
    background: var(--pr-sunken);
    color: var(--pr-muted);
}

.pr-yn__set input:focus-visible + label {
    box-shadow: inset 0 0 0 2px var(--pr-accent-wash);
}


/* --- Line items ---------------------------------------------------------------------------- */
/* The source really is a spreadsheet, so the line block is a table. It is wider than a phone;
   it gets its own horizontal scroller so the page body never scrolls sideways. */

.pr-lines {
    border: 1px solid var(--pr-rule-strong);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--pr-surface);
}

.pr-lines__scroll {
    overflow-x: auto;
}

.pr-lines table {
    width: 100%;
    min-width: 1080px;
    margin: 0;
    border-collapse: collapse;
}

.pr-lines thead th {
    padding: .6rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pr-ink-soft);
    background: var(--pr-sunken);
    border-bottom: 1px solid var(--pr-rule-strong);
}

.pr-lines tbody td {
    padding: .5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--pr-rule);
}

.pr-lines tbody tr:last-child td {
    border-bottom: 0;
}

.pr-lines__index {
    width: 2.5rem;
    font-family: Comfortaa, Muli, sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pr-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding-top: .95rem !important;
}

.pr-lines__err td {
    padding-top: 0;
    border-bottom: 1px solid var(--pr-rule);
}

/* Computed, not typed: flat ground and no border so it never invites a click. */
.pr-lines__total {
    display: block;
    padding: .45rem .6rem;
    font-size: .8125rem;
    font-weight: 700;
    text-align: right;
    color: var(--pr-ink);
    background: var(--pr-sunken);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* Inside a table cell the segmented control drops its label spacing and tightens up. */
.pr-lines .pr-yn {
    margin-bottom: 0;
}

.pr-lines .pr-yn__set label {
    min-width: 2.25rem;
    padding: .45rem .55rem;
}

.pr-lines__hint {
    padding: .6rem .85rem;
    font-size: .75rem;
    color: var(--pr-muted);
    background: var(--pr-sunken);
    border-top: 1px solid var(--pr-rule);
}


/* --- Totals panel -------------------------------------------------------------------------- */

.pr-totals {
    border: 1px solid var(--pr-rule-strong);
    border-radius: .75rem;
    padding: 1rem 1.15rem;
    background: var(--pr-sunken);
}

.pr-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
}

.pr-totals__row + .pr-totals__row {
    border-top: 1px solid var(--pr-rule);
}

.pr-totals__row dt {
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pr-ink-soft);
}

.pr-totals__row dd {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pr-ink);
    font-variant-numeric: tabular-nums;
}

.pr-totals__row--grand {
    margin-top: .25rem;
    padding-top: .7rem;
    border-top: 2px solid var(--pr-rule-strong) !important;
}

.pr-totals__row--grand dt {
    color: var(--pr-ink);
}

.pr-totals__row--grand dd {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pr-accent);
}

.pr-totals .form-control {
    max-width: 8.5rem;
    text-align: right;
}


/* --- Action bar ---------------------------------------------------------------------------- */
/* The form is long enough that Create would otherwise sit below the fold for the whole session. */

.pr-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 2rem -1.5rem -1.5rem;
    padding: .9rem 1.5rem;
    background: var(--pr-surface);
    border-top: 1px solid var(--pr-rule-strong);
    box-shadow: 0 -4px 14px rgba(70, 72, 85, .06);
}

.pr-actions__total {
    margin-right: auto;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pr-muted);
}

.pr-actions__total strong {
    display: block;
    margin-top: .1rem;
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pr-ink);
    font-variant-numeric: tabular-nums;
}


/* --- Error summary ------------------------------------------------------------------------- */

.pr-alert {
    display: flex;
    gap: .6rem;
    padding: .8rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .8125rem;
    /* The --pr-danger-* pair is defined on .pr-form, and the sign-in page's banner sits outside
       the form element, so each one falls back to the palette's own token. Without that the
       banner renders as bare red text on white. */
    color: #9f1239;
    background: var(--pr-danger-wash, var(--pr-danger-wash-color, #ffe4e6));
    border-left: 3px solid var(--pr-danger, var(--pr-danger-color, #e11d48));
    border-radius: 0 .5rem .5rem 0;
}


/* --- Focus + motion ------------------------------------------------------------------------ */

.pr-form a:focus-visible,
.pr-form button:focus-visible {
    outline: 2px solid var(--pr-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pr-form * {
        transition: none !important;
    }
}


/* --- Narrow screens ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {
    .pr-actions {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pr-actions .btn {
        flex: 1 1 auto;
    }
}


/* ================================================================================================
   Purchase Request data table (home)
   ============================================================================================= */

/* Atlassian's table: no fill behind the header, small grey uppercase labels, and rules that
   separate rows only — Jira never draws a vertical border between columns. Colours come from
   the --jira-* tokens in base.html's palette, with the old values as the fallback. */
.pr-data-table thead th {
    /* A filled navy band, the same colour as the top bar, so the table is anchored
       at its head the way the page is. White labels on it; the uppercase tracking
       stays because it is what keeps a dense header row scannable. */
    color: var(--jira-table-head-ink, var(--pr-table-head-ink, #fff));
    background-color: var(--jira-table-head-bg, var(--pr-table-head-bg, var(--pr-brand-from, #6967ce)));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    /* No rule under a filled head — the fill already ends it. */
    border-bottom: 0;
}

/* The head is a solid band, so the wrapper's radius has to be carried by the first
   and last cells or the navy squares off the rounded corners above it. */
.pr-data-table thead th:first-child {
    border-top-left-radius: var(--jira-radius, 3px);
}

.pr-data-table thead th:last-child {
    border-top-right-radius: var(--jira-radius, 3px);
}

/* Rows are separated, columns are not. .table-bordered draws all four sides on every cell, so
   the side borders are cleared here rather than the class being removed from the template. */
.pr-data-table th,
.pr-data-table td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--jira-rule, #dfe1e6);
}

.pr-data-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Alternate rows in N10. Barely there on its own, but across twenty-odd columns it
   is what lets the eye stay on one row while scrolling sideways. */
.pr-data-table tbody tr:nth-child(even) {
    background-color: var(--jira-tint-soft, #fafbfc);
}

/* .table-hover's default is a grey with a blue cast; Jira's row hover is the pale
   blue it uses for a selected issue, which also beats the zebra underneath. */
.pr-data-table.table-hover tbody tr:hover,
.pr-data-table.table-hover tbody tr:nth-child(even):hover {
    background-color: var(--pr-brand-wash, #deebff);
}

/* The first column is the row's identity, so it carries the weight and the brand
   colour — the same move as an issue key in Jira. */
.pr-data-table tbody td:first-child {
    font-weight: 600;
    color: var(--pr-brand-from, #0052cc);
}


/* --- Status lozenge ------------------------------------------------------------------------ */
/* Atlassian's lozenge. The status is the only column whose value carries a state, so it is the
   only one worth colouring; everything else stays type. The modifier is built from the model's
   Status value in _data_table_row.html, so a new status lands here as an unstyled neutral
   lozenge rather than as a broken cell. */

.pr-lozenge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--jira-ink, #42526e);
    background-color: var(--jira-neutral-bg, #dfe1e6);
}

.pr-lozenge--draft {
    color: var(--jira-ink, #42526e);
    background-color: var(--jira-neutral-bg, #dfe1e6);
}

.pr-lozenge--submitted {
    color: var(--pr-brand-strong, #0747a6);
    background-color: var(--pr-brand-wash, #deebff);
}

.pr-lozenge--approved {
    color: var(--jira-green, #00875a);
    background-color: var(--jira-green-bg, #e3fcef);
}

.pr-lozenge--rejected {
    color: var(--jira-red, #de350b);
    background-color: var(--jira-red-bg, #ffebe6);
}

/* PurchaseOrder.Status. Draft shares the neutral above; an order moves grey -> blue ->
   green as it is issued and received, and closed goes back to neutral. */
.pr-lozenge--issued {
    color: var(--pr-brand-strong, #0747a6);
    background-color: var(--pr-brand-wash, #deebff);
}

.pr-lozenge--received {
    color: var(--jira-green, #00875a);
    background-color: var(--jira-green-bg, #e3fcef);
}

.pr-lozenge--closed {
    color: var(--jira-ink-subtle, #6b778c);
    background-color: var(--jira-neutral-bg, #dfe1e6);
}

.pr-data-table tbody td {
    color: var(--jira-table-ink, var(--jira-ink-strong, #172b4d));
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* No cell wraps — every value stays on one line and the table scrolls sideways instead. A date
   like "Sept. 22, 2026" was breaking over three lines in its narrow column. */
.pr-data-table th,
.pr-data-table td {
    white-space: nowrap;
}

/* Jira sits its tables inside a hairline box rather than lifting them off the page, so the
   shadow this wrapper used to carry is now a border. It stays on .table-responsive and not on
   the <table>: that wrapper is overflow-x:auto, and a shadow or radius painted on a descendant
   of a scroll container gets clipped by it. */
.pr-table-shadow {
    box-shadow: none;
    border: 1px solid var(--jira-rule, #dfe1e6);
    /* Atlassian's own radius, and the wrapper is a scroll container so this also clips the
       table inside it. */
    border-radius: var(--jira-radius, 0.35rem);
    background-color: var(--jira-surface, #ffffff);
}

/* .table-bordered draws a square 1px border round the table, whose corners the radius above
   would slice off. Drop that outer border and let the wrapper own the edge. */
.pr-table-shadow > .table-bordered {
    border: 0;
}


/* --- Select column ---------------------------------------------------------------------------- */
/* The checkbox column is furniture, not data: it stays narrow, centred, and out of the way of the
   values beside it. */

.pr-select-cell {
    width: 2.75rem;
    text-align: center;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

.pr-data-table .pr-select-cell input {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    cursor: pointer;
    /* The header cell is navy, so the box has to be told to draw its checked state in
       the accent rather than the browser's default blue on blue. */
    accent-color: var(--pr-brand-from, #0052cc);
}

.pr-data-table thead .pr-select-cell input {
    accent-color: var(--jira-surface, #ffffff);
}

/* A ticked row is the one thing that should outrank the zebra and the hover wash, so the
   selection stays visible while the eye is somewhere else on the row. */
.pr-data-table tbody tr:has(.pr-select:checked),
.pr-data-table.table-hover tbody tr:has(.pr-select:checked):hover {
    background-color: var(--pr-brand-wash, #deebff);
}

.pr-approve-count {
    font-variant-numeric: tabular-nums;
    opacity: .85;
}


/* --- Two-step panels ------------------------------------------------------------------------- */
/* Download and upload are one job in two halves, so they sit side by side in equal panels rather
   than stacked. Each panel is a column flexbox with the note growing, which pushes the control to
   the bottom — that is what makes the button on the left and the file field on the right line up
   whatever length the text above them runs to. */

.pr-steps {
    margin-top: .5rem;
}

.pr-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 1.35rem 1.35rem;
    border: 1px solid var(--pr-rule);
    border-radius: .75rem;
    background: var(--pr-surface);
}

.pr-step + .pr-step,
.pr-steps > [class^="col-"] + [class^="col-"] .pr-step {
    /* Bootstrap's gutter handles the horizontal gap; this is the gap once the columns
       stack on a narrow screen. */
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .pr-steps > [class^="col-"] + [class^="col-"] .pr-step {
        margin-top: 1rem;
    }
}

.pr-step__head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pr-rule);
}

.pr-step__num {
    font-family: Comfortaa, Muli, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pr-accent);
    font-variant-numeric: tabular-nums;
}

.pr-step__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pr-ink);
}

.pr-step__badge {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: var(--jira-radius, 3px);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pr-accent-solid);
    background-color: var(--pr-accent-wash);
}

/* Grows, so the action below it is pinned to the bottom of the panel. */
.pr-step__note {
    flex: 1 1 auto;
    margin: 0 0 1rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--pr-ink-soft);
}

.pr-step__action {
    margin-top: auto;
}

.pr-step__action .form-control {
    padding: .4rem .5rem;
}

.pr-steps__errors {
    margin-top: 2rem;
}


/* --- Document links ---------------------------------------------------------------------------- */
/* Three formats of one document, so they read as a set of small tags rather than as three
   separate sentences in the cell. */

.pr-docs a {
    display: inline-block;
    margin-right: .25rem;
    padding: .05rem .35rem;
    border: 1px solid var(--pr-brand-rule, #dfe1e6);
    border-radius: var(--jira-radius, 3px);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--pr-brand-from, #0052cc);
}

.pr-docs a:hover {
    text-decoration: none;
    background-color: var(--pr-brand-wash, #deebff);
}


/* ================================================================================================
   Register console — purchase requests, purchase orders, suppliers
   ============================================================================================= */
/* The shell in templates/register_base.html. Its whole shape is an answer to two things: how far
   you scroll and how many times you click.

   Scrolling: the page itself does not scroll. The hero, the sticky toolbar and the panel footer
   are fixed furniture, and the only thing that moves is the table body inside .reg-scroll, which
   is capped to what is left of the viewport. Inside it the head is sticky and the first two cells
   of every row are frozen, so a register thirty columns wide can be read sideways without losing
   which record you are on.

   Clicking: every control acts on its own — pills are links, the rows select navigates on change,
   the search box searches on Enter. There is no Apply button on the page.

   Colours are the --reg-*, --pr-brand-* and --jira-* tokens from the palette at the top of this
   file; nothing
   here invents one. */

.reg {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* A flex item's default min-width is auto, which for the panel means the min-content width of
   a thirty-column table — the panel would refuse to shrink and push the whole console wider
   than the window. The scroll box is what is meant to absorb that width, not the page. */
.reg > *,
.reg-toolbar > * {
    min-width: 0;
}


/* --- Hero ------------------------------------------------------------------------------------ */
/* The one saturated band on the page: what this register is, the few numbers worth knowing before
   you filter, and the actions that create records. The numbers count the whole register rather
   than the filtered page — they are the context you filter against. */

.reg-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.05rem 1.35rem;
    border-radius: var(--pr-card-radius, 1rem);
    background-image: linear-gradient(
        112deg,
        var(--reg-hero-from) 0%,
        var(--reg-hero-via) 52%,
        var(--reg-hero-to) 100%
    );
    color: var(--reg-hero-ink);
}

.reg-hero__id {
    flex: 1 1 20rem;
    min-width: 0;
}

.reg-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .2rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--reg-hero-ink-soft);
}

/* A live indicator, not decoration: it is the only thing on the band that says the page is
   showing current data rather than a printout. */
.reg-hero__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: var(--reg-hero-live);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}

.reg-hero__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--reg-hero-ink);
}

/* The second word carries the accent so the title reads as one phrase with a subject, the way
   the page's own heading is "Purchase Requests" and not two headings. */
.reg-hero__title-tail {
    font-weight: 400;
    color: var(--reg-hero-accent);
}

.reg-hero__note {
    margin: .25rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--reg-hero-ink-soft);
}

.reg-stats {
    display: flex;
    gap: 1.75rem;
    margin: 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--reg-hero-rule);
}

/* dt first in the markup because a description list wants it that way; column-reverse is what
   puts the number above its label without lying about the structure. */
.reg-stat {
    display: flex;
    flex-direction: column-reverse;
    gap: .1rem;
}

.reg-stat__value {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--reg-hero-ink);
}

.reg-stat__label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--reg-hero-ink-soft);
}

.reg-hero__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}


/* --- Buttons --------------------------------------------------------------------------------- */
/* Their own class rather than .btn: half of them sit on the dark hero, where the theme's button
   colours are unreadable, and the rest sit in the toolbar at a smaller size. */

.reg-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.reg-btn:hover,
.reg-btn:focus {
    text-decoration: none;
}

.reg-btn:focus-visible {
    outline: 2px solid var(--reg-hero-accent);
    outline-offset: 2px;
}

/* On the hero: a glass outline for the secondary action, solid white for the primary one. */
.reg-btn--ghost {
    border-color: rgba(255, 255, 255, .28);
    background-color: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.reg-btn--ghost:hover {
    background-color: rgba(255, 255, 255, .18);
    color: #ffffff;
}

.reg-btn--solid {
    background-color: #ffffff;
    color: var(--pr-brand-strong);
}

.reg-btn--solid:hover {
    background-color: var(--pr-brand-wash);
    color: var(--pr-brand-strong);
}

/* In the toolbar, on white: the action that commits something to the records. */
.reg-btn--go {
    background-color: var(--jira-green);
    color: #ffffff;
}

.reg-btn--go:hover:not(:disabled) {
    background-color: #036c4f;
    color: #ffffff;
}

.reg-btn--go:disabled {
    background-color: var(--jira-neutral-bg);
    color: var(--jira-ink-subtle);
    cursor: not-allowed;
}


/* --- Toolbar --------------------------------------------------------------------------------- */
/* Sticky, so narrowing the register never means scrolling back to the top to do it. */

.reg-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .5rem .6rem;
    border: 1px solid var(--jira-rule);
    border-radius: .75rem;
    background-color: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
}

.reg-toolbar__filters {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.reg-toolbar__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}


/* --- Filter pills ---------------------------------------------------------------------------- */
/* A segmented control made of links: one click filters, and the result is a URL that can be
   sent to someone else. The group sits on a track so the set reads as one control. */

.reg-pills {
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    border-radius: .6rem;
    background-color: var(--reg-pill-track);
}

.reg-pill {
    padding: .32rem .75rem;
    border-radius: .45rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--jira-ink);
    transition: background-color 120ms ease, color 120ms ease;
}

.reg-pill:hover {
    background-color: rgba(31, 33, 55, .06);
    color: var(--jira-ink-strong);
    text-decoration: none;
}

.reg-pill.is-active {
    background-color: var(--pr-brand-from);
    color: #ffffff;
}

.reg-pill.is-active:hover {
    background-color: var(--pr-brand-strong);
    color: #ffffff;
}


/* --- Search ---------------------------------------------------------------------------------- */

.reg-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 18rem;
    max-width: 34rem;
    margin: 0;
}

.reg-search__input {
    width: 100%;
    height: 2.25rem;
    padding: 0 2.2rem 0 2.25rem;
    border: 1px solid var(--jira-rule);
    border-radius: .6rem;
    background-color: var(--jira-surface);
    font-size: .8125rem;
    color: var(--jira-ink-strong);
}

.reg-search__input::placeholder {
    color: var(--jira-ink-subtle);
}

.reg-search__input:focus {
    outline: none;
    border-color: var(--pr-brand-from);
    box-shadow: 0 0 0 3px var(--pr-brand-wash);
}

.reg-search__icon {
    position: absolute;
    left: .7rem;
    width: .95rem;
    height: .95rem;
    color: var(--jira-ink-subtle);
    pointer-events: none;
}

.reg-search__clear {
    position: absolute;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: var(--jira-ink-subtle);
    background-color: var(--jira-tint);
}

.reg-search__clear:hover {
    color: var(--jira-ink-strong);
    background-color: var(--jira-neutral-bg);
    text-decoration: none;
}

/* The "/" shortcut is only worth advertising while the box is empty — once there is a term in
   it, the clear control takes that corner. */
.reg-search__kbd {
    position: absolute;
    right: .5rem;
    padding: .05rem .35rem;
    border: 1px solid var(--jira-rule);
    border-radius: .25rem;
    background-color: var(--jira-tint);
    font-size: .6875rem;
    color: var(--jira-ink-subtle);
}


/* --- Panel and scroll box --------------------------------------------------------------------- */
/* The table scrolls, the page does not: the box is capped to what the viewport has left after the
   chrome, the hero and the toolbar, which is what keeps the pager and the row count in sight
   however many rows are loaded. */

.reg-panel {
    border: 1px solid var(--jira-rule);
    border-radius: .75rem;
    background-color: var(--jira-surface);
    overflow: hidden;
}

.reg-scroll {
    overflow: auto;
    /* What the viewport has left once the two navbars, the hero, the toolbar and this
       panel's own footer have taken their share. Measured against the tallest of them:
       the pager has to be on screen without scrolling the page, or the footer stops
       being furniture and becomes something else to scroll to. */
    max-height: calc(100vh - 28rem);
    min-height: 12rem;
    /* Reaching the end of the table should not start scrolling the page behind it. */
    overscroll-behavior: contain;
}

.reg-scroll:focus-visible {
    outline: 2px solid var(--pr-brand-from);
    outline-offset: -2px;
}


/* --- The table --------------------------------------------------------------------------------- */
/* .pr-data-table above still owns the rules, the zebra and the lozenges. What is added here is the
   console's density, its pale sticky head, and the two frozen columns. */

.reg-table {
    margin-bottom: 0;
}

.reg-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .6rem .7rem;
    background-color: var(--jira-table-head-bg);
    color: var(--jira-table-head-ink);
    font-size: .75rem;
    font-weight: 600;
    /* The head is pale and stays on screen the whole way down, so it does not need the uppercase
       tracking a one-off header row can carry — at thirty columns it just becomes noise. */
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    /* A sticky cell's own border scrolls away with the row behind it; an inset shadow is painted
       on the cell, so the rule under the head stays put. */
    box-shadow: inset 0 -1px 0 var(--jira-rule);
    border-radius: 0;
}

.reg-table tbody td {
    padding: .45rem .7rem;
    font-size: .8125rem;
}

/* Every row needs a solid background of its own: the frozen cells take theirs with
   `background: inherit`, and a transparent row would let the columns underneath show through as
   they scroll past. */
.reg-table tbody tr {
    background-color: var(--jira-surface);
}

.reg-table tbody tr[hidden] {
    display: none;
}

/* Frozen: the checkbox and the record's number. Everything else scrolls past them. */
.reg-table .pr-select-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    /* The number column is pinned at exactly 2.75rem, so this column has to be exactly
       2.75rem wide. In a table laid out automatically `width` is only a suggestion and
       a column this narrow gets shrunk to its content — which leaves a gap between the
       two frozen cells for the scrolling columns to show through. min-width is the part
       the browser honours. */
    min-width: 2.75rem;
}

.reg-table .reg-key {
    position: sticky;
    left: 2.75rem;
    z-index: 2;
    background: inherit;
    font-weight: 600;
    color: var(--pr-brand-from);
    /* Drawn as shadows rather than a border so it marks the edge of the frozen pair without
       adding a vertical rule to a table that otherwise has none: a hairline, and a soft one
       falling to its right so it reads as the columns passing underneath. */
    box-shadow: 1px 0 0 var(--jira-rule), 6px 0 6px -6px rgba(31, 33, 55, .25);
}

/* The supplier register has no selection column, so its identity column is the left edge. */
.reg-table--nosel .reg-key {
    left: 0;
}

.reg-table thead .pr-select-cell,
.reg-table thead .reg-key {
    /* Above the frozen body cells as well as the scrolling ones: this is the corner where the
       sticky row and the sticky column cross. */
    z-index: 5;
    background-color: var(--jira-table-head-bg);
    color: var(--jira-table-head-ink);
}

.reg-table thead .reg-key {
    box-shadow:
        inset 0 -1px 0 var(--jira-rule),
        1px 0 0 var(--jira-rule),
        6px 0 6px -6px rgba(31, 33, 55, .25);
}

/* The head is pale now, so the select-all box goes back to the accent the body's boxes use. */
.reg-table thead .pr-select-cell input {
    accent-color: var(--pr-brand-from);
}

/* Money and counts: right-aligned with tabular figures, so a column of them can be compared
   down rather than read across. */
.reg-table .reg-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reg-empty {
    padding: 3rem 1rem !important;
    text-align: center;
    color: var(--jira-ink-subtle);
    white-space: normal !important;
}


/* --- Footer ------------------------------------------------------------------------------------ */
/* Page size, what is on screen, and the pager. It sits under the scroll box rather than inside it,
   so it is never scrolled away from. */

.reg-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .45rem .7rem;
    border-top: 1px solid var(--jira-rule);
    background-color: var(--jira-tint-soft);
    font-size: .8125rem;
    color: var(--jira-ink);
}

.reg-rows {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 600;
}

.reg-rows select {
    height: 1.9rem;
    padding: 0 .4rem;
    border: 1px solid var(--jira-rule);
    border-radius: .35rem;
    background-color: var(--jira-surface);
    font-size: .8125rem;
    color: var(--jira-ink-strong);
}

.reg-range {
    margin: 0 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--jira-ink-subtle);
}

/* Written by register.js while the live filter is narrowing the rows already on screen. It is a
   different statement from the count beside it — that one is the size of the result, this one is
   how much of it is visible — so it is said in the accent and in words. */
.reg-range__live {
    color: var(--pr-brand-from);
    font-weight: 600;
}

.reg-pager {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.reg-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--jira-rule);
    border-radius: .35rem;
    background-color: var(--jira-surface);
    color: var(--jira-ink);
    line-height: 1;
}

.reg-pager__btn:hover {
    background-color: var(--pr-brand-wash);
    border-color: var(--pr-brand-rule-strong);
    color: var(--pr-brand-strong);
    text-decoration: none;
}

/* Kept in place rather than removed: the pager should not change width at the first and last
   page, or the buttons move under the pointer. */
.reg-pager__btn.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.reg-pager__page {
    padding: 0 .5rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* --- Narrow screens ------------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    /* The stats are the first thing to go: they are context, and the toolbar is the work. */
    .reg-stats {
        padding-left: 0;
        border-left: 0;
        gap: 1.25rem;
    }

    .reg-hero__actions {
        margin-left: 0;
    }

    /* The stats and the actions wrap onto their own lines here, so the hero is taller
       and the scroll box has to give that height back for the pager to stay in view. */
    .reg-scroll {
        max-height: calc(100vh - 32rem);
    }
}

@media (max-width: 767.98px) {
    .reg-hero {
        padding: .9rem 1rem;
    }

    .reg-hero__title {
        font-size: 1.35rem;
    }

    .reg-stats {
        display: none;
    }

    .reg-toolbar__actions {
        margin-left: 0;
        width: 100%;
    }

    .reg-toolbar__actions .reg-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Nothing is frozen on a phone: two sticky columns out of thirty leave no room for the
       thirty-first. */
    .reg-table .pr-select-cell,
    .reg-table .reg-key {
        position: static;
        box-shadow: none;
    }

    /* On a phone the page scrolls anyway and the chrome above is a different height
       again, so the box is sized as a share of the viewport rather than by subtraction. */
    .reg-scroll {
        max-height: 65vh;
    }
}


/* ================================================================================================
   Form console — create, import and upload pages
   ============================================================================================= */
/* The shell in templates/form_base.html, and the pieces that make a form page read as the same
   product as a register: the same hero, the same panel, the same buttons, the same furniture that
   does not scroll away.

   The fields themselves are still the .pr-form classes above. What is here is the frame around
   them and the handful of overrides that pull that frame onto the console's shapes. */

.frm {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.frm > * {
    min-width: 0;
}

/* A form's hero carries no stat tiles, so it can be shorter than a register's — and the sooner
   the first field is on screen, the better. */
.reg-hero--form {
    padding: .95rem 1.35rem;
}

.reg-hero--form .reg-hero__title {
    font-size: 1.45rem;
}

/* The hero is indigo, so the required-field star has to be legible on it rather than on white. */
.reg-hero--form .pr-req {
    color: var(--reg-hero-accent);
}

.frm-panel {
    border: 1px solid var(--jira-rule);
    border-radius: .75rem;
    background-color: var(--jira-surface);
}

.frm-form {
    padding: 1.35rem 1.5rem 0;
}


/* --- Section nav ------------------------------------------------------------------------------ */
/* Six numbered sections is more than a screen of form. The chips are the register's filter pills
   doing a second job: in-page links that say where you are. */

.frm-nav {
    /* Sticky like the register toolbar, and for the same reason — it is the one control that
       should never be scrolled back to. */
    top: 0;
    overflow-x: auto;
}

.frm-nav .reg-pills {
    flex-wrap: nowrap;
}

/* The sticky strip would otherwise land on top of the heading it just jumped to. */
.pr-section {
    scroll-margin-top: 4.5rem;
}


/* --- Buttons on white ------------------------------------------------------------------------- */
/* .reg-btn--ghost and --solid are painted for the hero's dark band. These two are the same button
   on a white panel: the quiet one for leaving or clearing, the brand one for the page's own
   action where it is not the submit. */

.reg-btn--quiet {
    border-color: var(--jira-rule);
    background-color: var(--jira-surface);
    color: var(--jira-ink);
}

.reg-btn--quiet:hover {
    background-color: var(--jira-hover-bg);
    border-color: var(--pr-brand-rule-strong);
    color: var(--jira-ink-strong);
}

.reg-btn--brand {
    background-color: var(--pr-brand-from);
    color: #ffffff;
}

.reg-btn--brand:hover {
    background-color: var(--pr-brand-strong);
    color: #ffffff;
}


/* --- Action bar -------------------------------------------------------------------------------- */
/* Already sticky; what changes is that it now sits inside .frm-panel, so it has to end that panel
   rather than float over the page — its corners follow the panel's and its rule is the panel's. */

.frm-form .pr-actions {
    margin: 1.75rem -1.5rem 0;
    padding: .8rem 1.5rem;
    border-top: 1px solid var(--jira-rule);
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    background-color: var(--jira-tint-soft);
    box-shadow: 0 -6px 14px rgba(31, 33, 55, .05);
}

/* On a page whose actions are all on the right, the first one carries the gap. */
.frm-form .pr-actions .reg-btn:first-child {
    margin-left: auto;
}

.frm-form .pr-actions__total + .reg-btn {
    margin-left: 0;
}


/* --- Fields, on the console's terms -------------------------------------------------------------- */

.pr-form .form-control:focus {
    border-color: var(--pr-brand-from);
    box-shadow: 0 0 0 3px var(--pr-brand-wash);
}

/* The section number was set in the theme's display face; here it is the same chip the hero's
   eyebrow is, so the two numbering systems on the page look related. */
.pr-section__num {
    font-family: inherit;
    padding: .1rem .4rem;
    border-radius: .35rem;
    background-color: var(--pr-brand-wash);
    color: var(--pr-brand-strong);
}

.pr-step__num {
    font-family: inherit;
    padding: .1rem .4rem;
    border-radius: .35rem;
    background-color: var(--pr-brand-wash);
    color: var(--pr-brand-strong);
}

.pr-step__badge {
    border-radius: .35rem;
}

/* A file input is not a text box: the theme gives it the same height and the filename then sits
   off its baseline. */
.pr-form input[type="file"].form-control {
    padding: .4rem .6rem;
    line-height: 1.5;
}

/* The line-item table and the totals panel are the console's surfaces too. */
.pr-lines thead th {
    background-color: var(--jira-table-head-bg);
    color: var(--jira-table-head-ink);
}

.pr-totals {
    background-color: var(--jira-tint-soft);
}

/* A short scroll box: the error tables on the two upload pages are a list to work through, not a
   register, so they get a fixed reading height instead of the viewport calculation. */
.reg-scroll--short {
    max-height: 22rem;
}


/* --- Narrow screens ------------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .frm-form {
        padding: 1rem 1rem 0;
    }

    .frm-form .pr-actions {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .frm-form .pr-actions .reg-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ================================================================================================
   Sign in
   ============================================================================================= */
/* users/login.html is a standalone page — no navbars, no base.html — so the indigo band that is a
   strip everywhere else is the whole window here, with one white panel on it. The fields are the
   .pr-form ones again; only the frame is particular to this page. */

body.auth-page {
    min-height: 100vh;
    margin: 0;
    background-color: var(--reg-hero-from);
    background-image: linear-gradient(
        140deg,
        var(--reg-hero-from) 0%,
        var(--reg-hero-via) 55%,
        var(--reg-hero-to) 100%
    );
    font-family: "Roboto", "Muli", -apple-system, "Segoe UI", sans-serif;
}

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 23rem;
    padding: 1.75rem 1.75rem 1.5rem;
    border-radius: var(--pr-card-radius);
    background-color: var(--jira-surface);
    /* The one real shadow in the app: this panel floats on the band rather than sitting in a
       page of its own, and a hairline would not lift it off a colour that dark. */
    box-shadow: 0 18px 40px rgba(15, 12, 45, .35);
}

.auth-card__head {
    text-align: center;
    margin-bottom: 1.35rem;
}

.auth-card__mark {
    margin-bottom: .6rem;
}

.auth-card__eyebrow {
    margin: 0;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jira-ink-subtle);
}

.auth-card__title {
    margin: .1rem 0 0;
    font-family: "Roboto", "Muli", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--jira-ink-strong);
}

.auth-card__title-tail {
    color: var(--pr-brand-from);
}

.auth-card__note {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--jira-ink-subtle);
}

.auth-form .form-group:last-of-type {
    margin-bottom: 1.25rem;
}

.auth-form__submit {
    width: 100%;
    justify-content: center;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.auth-foot {
    margin: 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}