/* rm.cdnrg.com/css/staff.css
   Staff site. Written for this site, not ported from anywhere.

   The brand guidelines cover public-facing material; for internal tools they
   are a loose guide and readability wins where the two disagree. CE red
   carries the chrome, text is charcoal rather than black, the canvas is
   white. Interface colours are chosen for measured contrast rather than
   taken from a marketing palette.

   The driver site shares NONE of this. It is a different product with its
   own stylesheet.

   Author:  Nikita
   Created: 2026-08-24 */

@font-face {
    font-family: 'Inter';
    src: url('/css/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ce-red:      #CF1E2E;   /* chrome only, so the tool reads as CE */
    --ce-red-dark: #A4141F;

    --accent:      #0B5C7A;   /* primary actions and links   7.02:1 on white */
    --accent-dark: #084456;
    --accent-tint: #EAF4F8;
    --ink:         #22262A;   /* body text. Darker than brand charcoal on
                                 purpose: charcoal is a print colour and
                                 reads washed out on a lit screen. */
    --charcoal:    #54575A;
    --soft:        #5C6165;
    --line:        #C2C7CC;
    --edge:        #8B9298;
    --canvas:      #FFFFFF;
    --panel:       #F4F6F8;
    --good:        #146B3A;
    --bad:         #8A1C1C;
    --bad-bg:      #FDECEC;
    --warn-bg:     #FFF6E5;
    --warn-ink:    #6B4A00;

    /* Type scale, operational screens. Set with Nikita 2026-08-27 and recorded
       in the solv4ex-brand-style skill, which now carries one scale per tool
       class rather than one for everything. The old single scale was measured
       off the S4XAB budget tool and applied here regardless.

       Table cells are body size. Shrinking a cell is a density optimisation
       and this site has white space to spare. Floor is 14px. */
    --fs-title:    24px;
    --fs-cardhead: 18px;
    --fs-body:     16px;
    --fs-label:    14px;

    --radius-card: 6px;
    --radius-ctl:  4px;
    --shadow-card: 0 1px 4px rgba(0,0,0,.08);
    --shadow-pop:  0 4px 16px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }

/* The browser default for [hidden] loses to any explicit display, so an
   element set to flex renders even when hidden. This makes the attribute
   mean what it says. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* Figures in columns must align, and identifiers must not be misread. */
.num { font-variant-numeric: tabular-nums; text-align: right; }
.ident { font-variant-numeric: tabular-nums slashed-zero; }

/* ---- buttons ---------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-ctl);
    cursor: pointer;
    text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: var(--canvas); color: var(--accent); border-color: var(--edge); }
.btn-ghost:hover { background: var(--accent-tint); }
.btn-okta { background: var(--canvas); color: var(--ink); border-color: var(--edge); width: 100%; }
.btn-okta:hover { background: var(--panel); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

/* ---- banners ---------------------------------------------------- */

.banner {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--radius-ctl);
    border-left: 4px solid var(--accent);
    background: var(--accent-tint);
}
.banner-error { border-left-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.banner-warn  { border-left-color: var(--warn-ink); background: var(--warn-bg); color: var(--warn-ink); }

/* ---- sign in ---------------------------------------------------- */

.signin-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    background: var(--panel);
    padding: 48px 20px;
}
.signin {
    width: 100%;
    max-width: 400px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 32px;
    /* A fixed-width panel that content cannot exceed, so hidden is safe. */
    overflow: hidden;
}
.signin-brand {
    margin: 0 0 24px;
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ce-red);
}
.signin-lead { margin: 0 0 20px; color: var(--soft); }

.signin-form { display: flex; flex-direction: column; gap: 4px; }
.signin-form label {
    margin-top: 12px;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--charcoal);
}
.signin-form input[type="text"],
.signin-form input[type="password"] {
    padding: 10px 12px;
    font: inherit;
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--edge);
    border-radius: var(--radius-ctl);
}
.signin-form input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.signin-form .btn { margin-top: 20px; }

/* Six digits, spaced so they are readable at a glance and hard to mistype. */
.code-input {
    font-size: 24px;
    letter-spacing: .4em;
    text-align: center;
    font-variant-numeric: tabular-nums slashed-zero;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: var(--fs-label);
    font-weight: 400;
    color: var(--charcoal);
}

/* A rule with the word "or" sitting in it, between the two ways to sign in. */
.signin-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--soft);
    font-size: var(--fs-label);
}
.signin-or::before,
.signin-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.signin-note {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-label);
    color: var(--soft);
}

/* ---- a plain page, before the real chrome exists ---------------- */

.narrow {
    max-width: 640px;
    margin: 48px auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------------------
   Bootstrap theming.

   THE COMMENT OPENER ON THE LINE ABOVE WAS MISSING until 2026-08-26, and
   it cost more than a comment. Without it the parser read this prose as the
   beginning of a selector, ran on past the closing marker to the next
   brace, and discarded the whole :root rule below as invalid - so not one
   Bootstrap variable was ever remapped onto a brand token. The rule
   immediately after it then asked for var(--bs-font-sans-serif), which no
   longer existed, and an undefined custom property is invalid at
   computed-value time rather than ignored: body fell back to the initial
   font and the entire staff site rendered in the browser's default serif.

   Everything the file said about following the brand was true of the text
   and false of the page. Worth remembering as the shape of the failure: a
   stylesheet cannot report an error, so a broken rule is silent and the
   only symptom is a page that looks slightly wrong to whoever opens it.

   Rewritten 2026-08-26. The staff site uses Bootstrap because v2 split the
   driver app onto its own host - v1 hand-rolled everything because the app
   lived inside this site and a framework would have been dead weight in a
   cached offline shell. That constraint no longer applies here.

   Every value below is one of the brand tokens declared above. Bootstrap's
   own variables are remapped onto them rather than a second palette being
   introduced, so the framework follows the brand instead of overriding it.
   --------------------------------------------------------------------- */

:root {
    --bs-primary:        var(--accent);
    --bs-link-color:     var(--accent);
    --bs-link-hover-color: var(--accent-dark);
    --bs-body-color:     var(--ink);
    --bs-body-bg:        var(--canvas);
    --bs-border-color:   var(--line);
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
}

body { font-family: var(--bs-font-sans-serif); }

/* CE red carries the chrome so the tool reads as CE at a glance. It is
   deliberately not used for buttons or links - contrast on white is worse
   than the accent, and a red action button reads as destructive. */
.cerm-navbar {
    background: var(--ce-red);
    border-bottom: 3px solid var(--ce-red-dark);
    padding-top: .35rem;
    padding-bottom: .35rem;
}
.cerm-navbar .navbar-brand,
.cerm-navbar .nav-link { color: #fff; }
.cerm-navbar .nav-link:hover,
.cerm-navbar .nav-link:focus { color: rgba(255,255,255,.82); }
.cerm-navbar .navbar-brand { font-weight: 600; }
.cerm-navbar .nav-link.active,
.cerm-navbar .nav-link.show,
.cerm-navbar .navbar-nav .nav-link.active { color: #fff; }
.cerm-navbar .nav-link.active {
    font-weight: 600;
    background: rgba(255,255,255,.16);
    border-radius: .3rem;
}
.cerm-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.45);
}
.cerm-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.dropdown-item.active,
.dropdown-item:active { background-color: var(--accent); }

.cerm-page { max-width: 78rem; padding-top: 1.25rem; padding-bottom: 4rem; }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-disabled-bg: var(--panel);
    --bs-btn-disabled-color: var(--soft);
    --bs-btn-disabled-border-color: var(--line);
}
/* Writes create real records in NetSuite. The colour says so. */
.btn-danger {
    --bs-btn-bg: var(--bad);
    --bs-btn-border-color: var(--bad);
}

.hint { color: var(--soft); font-size: var(--fs-label); }
.err  { color: var(--bad); }
.lede { color: var(--charcoal); }

.grid-table { --bs-table-border-color: var(--line); width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.grid-table th, .grid-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid-table th { color: var(--charcoal); font-weight: 600; white-space: nowrap; }
.grid-table tr.is-bad { background: var(--bad-bg); }

.card { border-color: var(--line); }
.card-write { border-color: var(--bad); background: var(--bad-bg); }

.exchange { border: 1px solid var(--line); border-radius: .375rem; margin: .5rem 0; padding: .5rem .75rem; }
.exchange.is-ok  { border-left: 4px solid var(--good); }
.exchange.is-bad { border-left: 4px solid var(--bad); }
.exchange summary { cursor: pointer; font-size: var(--fs-body); }
.exchange h4 { margin: .8rem 0 .3rem; font-size: var(--fs-label); color: var(--charcoal); text-transform: uppercase; letter-spacing: .05em; }
.exchange pre { background: var(--panel); border: 1px solid var(--line); border-radius: .25rem; padding: .6rem; overflow-x: auto; font-size: var(--fs-label); margin: 0; }

/* ---------------------------------------------------------------------
   Forms and cards.
   Fields are CAPPED, not 1fr. A branch picker stretched across a 2000px
   monitor is what auto-fit with 1fr gives you, and it reads as broken.
   --------------------------------------------------------------------- */

.cerm-mark { border-radius: 3px; background: #fff; padding: 2px; }

.card {
    border: 1px solid var(--line);
    border-radius: .375rem;
    padding: 1rem 1.1rem;
    margin: 0 0 1.25rem;
    background: var(--canvas);
}
.card h2 { font-size: var(--fs-cardhead); margin: 0 0 .75rem; }
.card fieldset { border: 1px solid var(--line); border-radius: .25rem; margin: 0 0 .75rem; padding: .6rem .8rem; }
.card legend { font-size: var(--fs-label); color: var(--charcoal); padding: 0 .3rem; width: auto; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 15rem));
    gap: .65rem 1rem;
    align-items: start;
}
.grid label,
.card fieldset label {
    display: flex; flex-direction: column; gap: .2rem;
    font-size: var(--fs-label); color: var(--charcoal);
}
.grid input[type="text"], .grid input[type="password"], .grid select,
.card fieldset input[type="text"] {
    font: inherit; font-size: var(--fs-body);
    padding: .35rem .5rem;
    border: 1px solid var(--edge); border-radius: .25rem;
    background: var(--canvas); color: var(--ink);
    max-width: 100%;
}
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

button, .btn {
    font: inherit; font-size: var(--fs-body); padding: .38rem .9rem; cursor: pointer;
    border: 1px solid var(--accent); border-radius: .25rem;
    background: var(--accent); color: #fff;
}
button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button[disabled] { background: var(--panel); color: var(--soft); border-color: var(--line); cursor: not-allowed; }
.card-write button { background: var(--bad); border-color: var(--bad); }
.card-write button[disabled] { background: var(--panel); color: var(--soft); border-color: var(--line); }

/* ---------------------------------------------------------------------
   Checkbox and radio rows.

   .check was written for the sign-in card, where it is one control on its
   own. The admin pages put dozens of them inside .card fieldset, and
   ".card fieldset label" is specificity (0,2,1) against .check at (0,1,0) -
   so the column rule won and every checkbox sat ABOVE its own text. The
   fix is a rule specific enough that it cannot lose, rather than a token
   change: nothing here is a new value, they are the gap already used by
   .actions and the spacing already used by the navbar.

   Added 2026-08-26 with the Setup and System pages.
   --------------------------------------------------------------------- */

.card fieldset label.check,
.card label.check,
.grid label.check,
.grid-table td label.check {
    flex-direction: row;
    align-items: flex-start;
    gap: .5rem;
    margin: .35rem 0;
    font-size: var(--fs-label);
    line-height: 1.4;
}

/* The box itself must not shrink when the text beside it wraps, and it
   should line up with the first line rather than float in the middle of a
   two-line permission description. */
.card label.check input[type="checkbox"],
.card label.check input[type="radio"],
.grid label.check input,
.grid-table td label.check input {
    flex: 0 0 auto;
    margin-top: .18rem;
}

/* A permission label carries its key after the description. The key is
   secondary and belongs on its own line at this size, not trailing the
   sentence where it reads as part of it. */
.card label.check .hint.ident { display: block; }

/* ---- breadcrumbs ------------------------------------------------
   A trail back to where the page was reached from. Added 2026-08-28:
   a trip could only be left by the browser back button, and a stop's
   only route back to its trip was a link inside a table cell, which
   is a link rather than navigation. */
.crumbs {
    margin: 0 0 12px;
    font-size: var(--fs-label);
    color: var(--soft);
}
.crumbs a { color: var(--accent); }
.crumb-sep { margin: 0 8px; color: var(--edge); }
.crumb-here { color: var(--charcoal); }

/* ---- kit component lines ----------------------------------------
   A fulfilment lists the sellable kit and, on the next line, the
   physical item inside it. The component is indented under its kit
   rather than hidden, because dispatch checks the pairing. Added
   2026-08-28, when the component rows started being returned. */
.grid-table tr.is-component > td { background: var(--panel); }
.comp-mark { color: var(--edge); }
.tag-comp {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-ctl);
    background: var(--accent-tint);
    color: var(--accent-dark);
    font-size: var(--fs-label);
    font-weight: 600;
}

/* ---- fact panels -------------------------------------------------
   Label above value, in a card, three across on a wide screen. Added
   2026-08-28: the stop header was a single full-width key-and-value
   table, so eleven facts filled a screen and the lines - the reason
   anyone opens a stop - were below the fold. */
.facts { margin: 0; }
.facts dt {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--charcoal);
    margin-top: 12px;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0; }
.stop-head .card { padding: 16px; }
.stop-head .card h2 { margin-bottom: 12px; }

/* ---- stop ordering ------------------------------------------------
   Added 2026-08-28 with drag and drop on the trip page. No new colour,
   size, radius or shadow: the grip and the drag state are built from
   --soft, --line and --panel, which are already here. */
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"].is-dragging { cursor: grabbing; background: var(--panel); opacity: .6; }
.stop-pos { white-space: nowrap; }
.drag-grip {
    color: var(--soft);
    margin-left: 8px;
    letter-spacing: -.1em;
    user-select: none;
}

/* ---- collapsible sections -----------------------------------------
   Added 2026-08-28. Long pages ran as one unbroken column: on Roles,
   eight roles of thirty-five checkboxes each, with no way to see where
   one ended and the next began.

   <details> rather than a scripted accordion. It is keyboard operable,
   it prints open, it survives JavaScript being off, and the browser
   already draws the disclosure marker - so no marker is invented here.
   The only script involved is in layout.php and opens the section a
   #fragment points into, which is the one thing details will not do. */
details.card > summary {
    font-size: var(--fs-cardhead);
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
details.card[open] > summary { margin-bottom: 12px; }
details.card > summary .hint,
details.card > summary .err { font-weight: 400; }
details.card > summary:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }