/* ==========================================================================
   Service Center — application shell
   --------------------------------------------------------------------------
   Design direction: "the service counter".
   Navigation is treated like the signage in a shop: condensed, stencilled,
   always labelled. The active item wears an orange clip, the way a job tag is
   clipped to the board. Everything else stays quiet so the clip is the only
   thing competing for attention.

   The condensed face is not decoration — it is what lets eight *labelled*
   destinations fit at 1280px, where the previous bar had to hide its labels
   and leave beginners with unlabelled icons.
   ========================================================================== */

:root {
    /* Brand */
    --sc-navy: #00325e;
    --sc-navy-900: #001c35;
    --sc-navy-700: #013a6d;
    --sc-navy-600: #0a4a86;
    --sc-orange: #f97316;
    --sc-orange-soft: #ffb066;
    --sc-amber: #efa31d;

    /* Neutrals */
    --sc-ink: #14202b;
    --sc-steel: #5c6f80;
    --sc-line: #dde4ea;
    --sc-paper: #f2f5f8;
    --sc-surface: #fff;

    /* Status */
    --sc-green: #13b955;
    --sc-red: #e5484d;

    /* Metrics */
    --sc-bar-h: 58px;
    --sc-radius: 10px;
    --sc-tap: 44px;
    --sc-shadow: 0 1px 2px rgba(20,32,43,.06), 0 4px 16px rgba(20,32,43,.05);

    /* Type */
    --sc-sign: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    --sc-display: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Signage type utility — nav labels, eyebrows, table headers, stat captions
   -------------------------------------------------------------------------- */
.sc-sign {
    font-family: var(--sc-sign);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .085em;
    line-height: 1;
}

/* ==========================================================================
   1. Brand band — logo, primary nav, utilities
   ========================================================================== */

.navbar.bg-menu-nav {
    min-height: var(--sc-bar-h);
    padding: 0 16px;
    background: var(--sc-navy);
    background: linear-gradient(90deg, var(--sc-navy-900) 0%, var(--sc-navy) 55%, var(--sc-navy-700) 100%);
    /* Deliberately NOT orange. This rule used to be a full-width orange band,
       which meant the active item's orange clip sat orange-on-orange and could
       not be seen. The clip is the signature, so it gets to be the only orange
       on this edge; the bar itself closes with a quiet dark rule. */
    border-bottom: 3px solid var(--sc-navy-900);
    flex-wrap: nowrap;
}

.navbar.bg-menu-nav .navbar-brand.mainlogo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-right: 22px;
    flex: 0 0 auto;
}

.mainlogo img {
    height: 34px;
    width: 34px;
    border-radius: 7px;
}

/* Wordmark sits beside the tile so the product names itself on every screen. */
.mainlogo .sc-wordmark {
    font-family: var(--sc-sign);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 17px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* --- Primary nav items ---------------------------------------------------- */

.navbar.bg-menu-nav .navbar-nav {
    align-items: stretch;
}

.navbar.bg-menu-nav .nav-item {
    display: flex;
    align-items: stretch;
}

/* Specificity matches Bootstrap's .navbar-dark .navbar-nav .nav-link so we can
   restyle without !important. */
.navbar-dark .navbar-nav .nav-link,
.navbar.bg-menu-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--sc-tap);
    padding: 6px 14px;
    margin: 0 1px;
    border-radius: var(--sc-radius) var(--sc-radius) 0 0;
    color: rgba(255,255,255,.78);
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .075em;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background-color: rgba(255,255,255,.09);
    text-decoration: none;
}

.navbar.bg-menu-nav .nav-link .nav-icon {
    font-size: 15px;
    margin: 0;
    opacity: .9;
}

.navbar.bg-menu-nav .nav-link .desktop-label {
    display: inline;
}

/* --- The clip: active destination ---------------------------------------- */

.navbar.bg-menu-nav .nav-link.is-current,
.navbar.bg-menu-nav .nav-item.active > .nav-link,
.navbar.bg-menu-nav .nav-link.active {
    background-color: rgba(255,255,255,.13);
    color: #fff;
}

.navbar.bg-menu-nav .nav-link.is-current::after,
.navbar.bg-menu-nav .nav-item.active > .nav-link::after,
.navbar.bg-menu-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -3px;
    height: 3px;
    background: var(--sc-orange);
    border-radius: 2px 2px 0 0;
}

.navbar.bg-menu-nav .nav-link.is-current .nav-icon,
.navbar.bg-menu-nav .nav-item.active > .nav-link .nav-icon {
    opacity: 1;
    color: var(--sc-orange-soft);
}

/* Role visibility. Applied as a class so nothing writes an inline display onto
   a nav item — an inline value would override the flex layout the bar depends
   on and knock those items out of alignment with the rest. */
.sc-role-hidden { display: none !important; }

/* Groups: hairline separators encode the shop's own workflow order —
   today's work, then the jobs, then the money, then the record.
   Absolutely positioned so the divider does not depend on the <li> being a
   flex container; it survives whatever display value the item ends up with. */
.navbar.bg-menu-nav .nav-group-end {
    position: relative;
    margin-right: 19px;
}

.navbar.bg-menu-nav .nav-group-end::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.2);
}

/* --- Right-hand utility cluster ------------------------------------------ */

/* The utility cluster lives OUTSIDE the collapse so the account menu, alerts
   and the clock stay reachable on a tablet without opening the menu first.
   Flex order puts it back on the right at desktop widths. */
.sc-utilities {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    order: 3;
}

.navbar.bg-menu-nav .navbar-collapse { order: 2; }

/* The nav sits in a .container; let it use the full bar width instead of
   being capped at the grid breakpoint, so labels have room to stay visible. */
.navbar.bg-menu-nav .sc-nav-scroller { max-width: none; padding-left: 0; padding-right: 0; }
.navbar.bg-menu-nav .navbar-toggler { order: 4; border: 0; padding: 8px 10px; }

.sc-util-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--sc-tap);
    min-height: var(--sc-tap);
    padding: 0 12px;
    border-radius: var(--sc-radius);
    color: rgba(255,255,255,.85);
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: transparent;
    border: 0;
    transition: background-color .15s ease, color .15s ease;
}

.sc-util-btn:hover,
.sc-util-btn:focus {
    background-color: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
}

.sc-util-btn .fa-bell,
.sc-util-btn .far,
.sc-util-btn .fas {
    font-size: 17px;
}

/* Unread count. Hidden entirely at zero — an empty badge is noise. */
.circle-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0;
    background-color: var(--sc-red);
    color: #fff;
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    font-family: var(--sc-display);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.circle-badge:empty,
.circle-badge.is-zero { display: none; }

/* "More" menu — the home for screens that previously had no way in. */
.sc-more-menu.dropdown-menu {
    min-width: 232px;
    padding: 8px;
    margin-top: 0;
    border: 1px solid var(--sc-line);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--sc-shadow);
}

.sc-more-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--sc-ink);
}

.sc-more-menu .dropdown-item:hover { background: var(--sc-paper); }
.sc-more-menu .dropdown-item i { width: 18px; text-align: center; color: var(--sc-steel); }

.sc-menu-head {
    padding: 10px 10px 4px;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sc-steel);
}

.sc-menu-head:first-child { padding-top: 4px; }

/* Bootstrap hides dropdown carets inside collapsed navbars poorly; on the
   vertical drawer let the menu sit inline instead of floating off-screen. */
@media (max-width: 991.98px) {
    .sc-more-menu.dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0 0 6px;
        background: rgba(255,255,255,.06);
        border: 0;
        box-shadow: none;
    }

    .sc-more-menu .dropdown-item { color: rgba(255,255,255,.85); min-height: 46px; }
    .sc-more-menu .dropdown-item:hover { background: rgba(255,255,255,.12); color: #fff; }
    .sc-more-menu .dropdown-item i { color: rgba(255,255,255,.6); }
    .sc-more-menu .sc-menu-head { color: rgba(255,255,255,.55); }
}

/* Account menu trigger */
.sc-account {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--sc-tap);
    padding: 0 10px 0 6px;
    border-radius: var(--sc-radius);
    color: #fff;
    transition: background-color .15s ease;
}

.sc-account:hover,
.sc-account:focus { background-color: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

.sc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--sc-orange);
    color: #fff;
    font-family: var(--sc-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}

.sc-account-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.sc-account-name b {
    font-family: var(--sc-display);
    font-weight: 600;
    font-size: 13px;
}

.sc-account-name span {
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.6);
}

/* --- Clock in / out, promoted into the bar ------------------------------- */

.sc-clock .btn-clock-punch {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px !important;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.sc-clock .sc-clock-since {
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.72);
    white-space: nowrap;
}

/* ==========================================================================
   2. Page band — says where you are and what the page is for
   ========================================================================== */

.sc-pagehead {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--sc-surface);
    border-bottom: 1px solid var(--sc-line);
}

.sc-pagehead-text { min-width: 0; }

.sc-pagehead h1 {
    margin: 0;
    font-family: var(--sc-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--sc-ink);
}

/* The beginner's line. Plain language, no jargon, one job only. */
.sc-pagehead p {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sc-steel);
}

.sc-pagehead-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Trial notice sits in the flow instead of floating over the page content. */
.sc-trial {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    background: #fff7e8;
    border-bottom: 1px solid #f2dcae;
    color: #7a4d05;
    font-size: 13.5px;
}

.sc-trial b { font-family: var(--sc-display); font-weight: 700; }
.sc-trial a { color: #7a4d05; font-weight: 700; text-decoration: underline; }
.sc-trial .sc-trial-mark { color: var(--sc-amber); }

/* ==========================================================================
   3. Application canvas
   ========================================================================== */

body { background-color: var(--sc-paper); color: var(--sc-ink); }

/* Scope the wide dropdown to the account menu. Previously this was a global
   `.dropdown-menu { width:300px !important }`, which resized every dropdown in
   the product, including the ones inside grids and forms. */
.sc-account-menu.dropdown-menu {
    width: 292px;
    min-width: 292px;
    padding: 8px;
    border: 1px solid var(--sc-line);
    border-radius: 12px;
    box-shadow: var(--sc-shadow);
}

.sc-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: normal;
}

.sc-account-menu .dropdown-item:hover { background: var(--sc-paper); }
.sc-account-menu .dropdown-item i { width: 18px; text-align: center; }

.sc-menu-account-name {
    padding: 6px 10px 2px;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sc-steel);
}

/* AI token meter — a bare percentage means nothing to a new user, so show it. */
.sc-meter {
    padding: 4px 10px 10px;
    border-bottom: 1px solid var(--sc-line);
    margin-bottom: 6px;
}

.sc-meter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--sc-steel);
    margin-bottom: 5px;
}

.sc-meter-row b { color: var(--sc-ink); font-family: var(--sc-display); }

.sc-meter-track {
    height: 6px;
    border-radius: 999px;
    background: var(--sc-line);
    overflow: hidden;
}

.sc-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--sc-navy-600);
    transition: width .3s ease;
}

/* ==========================================================================
   4. Responsive — desktop, tablet, phone
   ========================================================================== */

/* Tablet: the nav becomes a scrollable strip that KEEPS its labels.
   The old shell dropped labels below 1600px, which meant almost every laptop
   showed unlabelled icons. Scrolling a labelled strip is far easier to learn
   than decoding icons. */
@media (max-width: 1399.98px) {
    .navbar-dark .navbar-nav .nav-link,
    .navbar.bg-menu-nav .nav-link { font-size: 14px; padding: 6px 10px; gap: 6px; }
    .navbar.bg-menu-nav .nav-group-end { margin-right: 11px; }
    .navbar.bg-menu-nav .nav-group-end::after { right: -6px; }
    .mainlogo .sc-wordmark { display: none; }
}

@media (min-width: 992px) and (max-width: 1299.98px) {
    .navbar.bg-menu-nav .navbar-collapse > .sc-nav-scroller {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .navbar.bg-menu-nav .sc-nav-scroller::-webkit-scrollbar { display: none; }
    .navbar.bg-menu-nav .navbar-nav { flex-wrap: nowrap; }
    .navbar.bg-menu-nav .nav-item { scroll-snap-align: start; }
    .sc-clock .sc-clock-since { display: none; }
}

/* Phone / small tablet: Bootstrap collapses the bar. Make the drawer a
   comfortable, fully labelled list rather than a cramped menu. */
@media (max-width: 991.98px) {
    .navbar.bg-menu-nav { flex-wrap: wrap; padding: 6px 12px; }
    .mainlogo .sc-wordmark { display: inline; }

    .sc-utilities { order: 2; }
    .navbar.bg-menu-nav .navbar-toggler { order: 3; }

    .navbar.bg-menu-nav .navbar-collapse {
        order: 4;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        margin-top: 6px;
        border-top: 1px solid rgba(255,255,255,.16);
        padding-top: 6px;
    }

    .navbar.bg-menu-nav .navbar-collapse > .container { max-width: none; padding: 0; }
    .navbar.bg-menu-nav .navbar-nav { flex-direction: column; align-items: stretch; }

    .navbar-dark .navbar-nav .nav-link,
    .navbar.bg-menu-nav .nav-link {
        justify-content: flex-start;
        min-height: 48px;
        padding: 10px 14px;
        margin: 1px 0;
        border-radius: var(--sc-radius);
        font-size: 16px;
        gap: 12px;
    }

    .navbar.bg-menu-nav .nav-link .nav-icon { width: 22px; font-size: 17px; text-align: center; }

    /* On a vertical list an underline reads as a divider, so the clip moves
       to the leading edge where it still reads as "you are here". */
    .navbar.bg-menu-nav .nav-link.is-current::after,
    .navbar.bg-menu-nav .nav-item.active > .nav-link::after,
    .navbar.bg-menu-nav .nav-link.active::after {
        left: 0; right: auto; top: 8px; bottom: 8px;
        width: 3px; height: auto; border-radius: 0 2px 2px 0;
    }

    .navbar.bg-menu-nav .nav-group-end::after { display: none; }

    /* In the vertical drawer a rule between groups reads better than a
       divider beside them. */
    .navbar.bg-menu-nav .nav-group-end {
        border-bottom: 1px solid rgba(255,255,255,.14);
        margin: 0 0 6px;
        padding-bottom: 6px;
    }

    .sc-utilities { margin-left: auto; gap: 2px; }
    .sc-account-name { display: none; }
    .sc-clock .sc-clock-since { display: none; }
    .sc-pagehead { padding: 12px 16px; }
    .sc-pagehead h1 { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .sc-clock { display: none; }
    .sc-pagehead p { display: none; }
}

/* Touch devices: no hover-dependent affordances, larger targets. */
@media (hover: none) {
    .navbar-dark .navbar-nav .nav-link,
    .navbar.bg-menu-nav .nav-link { min-height: 46px; }
}

/* Desktop: run the nav items the full height of the bar.
   The bar is 58px with a 3px orange rule, so the content box is 55px. A 44px
   link, centred by Bootstrap, left the active clip drawn at bottom:-3px
   floating ~3px clear of that rule - it read as a detached orange stub
   instead of a tag clipped to the board. Stretching the chain (bar > collapse
   > .container > ul > li > a) puts the clip flush on the bar's edge. */
@media (min-width: 992px) {
    .navbar.bg-menu-nav,
    .navbar.bg-menu-nav .navbar-collapse {
        align-items: stretch;
    }

    .navbar.bg-menu-nav .sc-nav-scroller {
        display: flex;
        align-items: stretch;
    }

    /* The bar's 58px includes its 3px rule (border-box), so the content box is
       55px. Match that exactly — 58px here would overflow by 3px and push the
       clip down onto the rule itself. */
    .navbar-dark .navbar-nav .nav-link,
    .navbar.bg-menu-nav .nav-link {
        min-height: calc(var(--sc-bar-h) - 3px);
    }

    /* Flush to the bottom of the content box, so the clip reads as a tag
       seated on the bar's edge rather than a stub floating mid-air. */
    .navbar.bg-menu-nav .nav-link.is-current::after,
    .navbar.bg-menu-nav .nav-item.active > .nav-link::after,
    .navbar.bg-menu-nav .nav-link.active::after {
        bottom: 0;
        left: 6px;
        right: 6px;
        height: 4px;
    }
}

/* ==========================================================================
   5. Shared controls
   --------------------------------------------------------------------------
   Styled through Bootstrap's own class names so every screen picks these up
   without being rewritten. Kept deliberately low-specificity: a page can still
   override locally, and Kendo widgets are left alone.
   ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */

.sc-page { padding: 18px 22px 40px; }

@media (max-width: 991.98px) { .sc-page { padding: 14px 16px 32px; } }

/* --- Buttons: say what happens, and be big enough to hit ------------------ */

/* Buttons take the display face, not the signage face. The stencilled
   uppercase treatment is reserved for navigation and column labels — using it
   on every button as well would make the whole product shout. */
.btn {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--sc-radius);
    font-family: var(--sc-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
}

.btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 12px 24px; font-size: 17px; }

/* The one loud button on a screen. Orange is the "do this" colour. */
.btn-cta,
.btn-cta:focus {
    background-color: var(--sc-orange);
    border-color: var(--sc-orange);
    color: #fff;
}

.btn-cta:hover { background-color: #e2620a; border-color: #e2620a; color: #fff; }

.btn:focus-visible { outline: 2px solid var(--sc-navy-600); outline-offset: 2px; box-shadow: none; }

/* Icon-only buttons still need a real target. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sc-tap);
    min-height: var(--sc-tap);
    padding: 0;
}

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

.form-control,
.custom-select {
    min-height: 42px;
    border-color: var(--sc-line);
    border-radius: var(--sc-radius);
    color: var(--sc-ink);
    font-size: 15px;
}

.form-control::placeholder { color: #9aa9b6; }

label {
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sc-steel);
    margin-bottom: 5px;
}

/* Help text under a field explains the field. It is not a second label. */
.form-text, .sc-hint { font-size: 12.5px; color: var(--sc-steel); }

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

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

.card-header, .sc-card-head {
    background: transparent;
    border-bottom: 1px solid var(--sc-line);
    padding: 13px 16px;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: var(--sc-steel);
}

/* --- Tables: desktop rows, tablet cards ---------------------------------- */

.sc-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
}

.sc-table { width: 100%; margin: 0; border-collapse: collapse; }

.sc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sc-paper);
    border-bottom: 1px solid var(--sc-line);
    padding: 11px 14px;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: var(--sc-steel);
    white-space: nowrap;
    text-align: left;
}

.sc-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sc-line);
    font-size: 14px;
    vertical-align: middle;
}

.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr:hover { background: var(--sc-paper); }

/* Money and counts line up for comparison and use the display face. */
.sc-num { font-family: var(--sc-display); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* --- Record rows: the shared two-line cell used by every list ------------ */

.sc-reclist tbody tr.is-running { background: #fff6ed; }
.sc-reclist .sc-cell-status { white-space: nowrap; }

.sc-rec-id {
    display: block;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--sc-steel);
}

.sc-rec-title {
    display: block;
    font-family: var(--sc-display);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: var(--sc-ink);
}

.sc-rec-flag { color: var(--sc-red); margin-right: 6px; }
.sc-rec-line { display: block; font-size: 14px; color: var(--sc-ink); }
.sc-rec-sub { display: block; font-size: 13px; color: var(--sc-steel); }

/* In card mode the identifying cell is the card's title, so the two lines
   stack left-aligned instead of being pushed to the right edge. */
@media (max-width: 991.98px) {
    .sc-reclist tbody td.sc-cell-status { display: block; text-align: left; }
    .sc-reclist tbody td.sc-cell-status::before { display: block; margin-bottom: 4px; }
    .sc-reclist .sc-rowactions { justify-content: flex-start; }
    .sc-reclist tbody td[data-label="Actions"] { display: block; text-align: left; }
    .sc-reclist tbody td[data-label="Actions"]::before { display: block; margin-bottom: 6px; }
}

/* Below 992px every row becomes its own card, with the column name carried
   down as a label. A 12-column table on a tablet is not usable otherwise. */
@media (max-width: 991.98px) {
    .sc-tablewrap { border: 0; background: transparent; box-shadow: none; overflow: visible; }
    .sc-table, .sc-table tbody, .sc-table tr, .sc-table td { display: block; width: 100%; }
    .sc-table thead { display: none; }

    .sc-table tbody tr {
        background: var(--sc-surface);
        border: 1px solid var(--sc-line);
        border-radius: var(--sc-radius);
        box-shadow: var(--sc-shadow);
        margin-bottom: 10px;
        padding: 4px 2px;
    }

    .sc-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        border-bottom: 1px solid var(--sc-line);
        padding: 10px 14px;
        text-align: right;
    }

    .sc-table tbody td:last-child { border-bottom: 0; }

    .sc-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-family: var(--sc-sign);
        font-weight: 600;
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--sc-steel);
        text-align: left;
    }

    /* The identifying cell reads as the card's title. */
    .sc-table tbody td.sc-cell-primary {
        display: block;
        text-align: left;
        font-family: var(--sc-display);
        font-weight: 700;
        font-size: 16px;
    }

    .sc-table tbody td.sc-cell-primary::before { display: block; margin-bottom: 2px; }
    .sc-num { text-align: right; }
}

/* --- Status ------------------------------------------------------------- */

.sc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--sc-line);
    border-radius: 999px;
    background: var(--sc-paper);
    color: var(--sc-steel);
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

/* A dot as well as a colour, so status does not rely on colour alone. */
.sc-status::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* The shop's own words for where a job is. Any screen listing work orders uses
   this same vocabulary, so a status means the same thing everywhere. */
.sc-status.is-new { background: #e8f0f8; border-color: #c3d7e9; color: var(--sc-navy); }

/* Running right now. The only saturated fill in a list. */
.sc-status.is-inprogress { background: var(--sc-orange); border-color: var(--sc-orange); color: #fff; }

.sc-status.is-research,
.sc-status.is-testing,
.sc-status.is-inreview { background: #eef3f8; border-color: #d5e2ee; color: var(--sc-navy-600); }

/* Blocked, waiting on parts. Amber is the warning token. */
.sc-status.is-onhold { background: #fff4e0; border-color: #f0d9a9; color: #8a5a05; }

.sc-status.is-pendingreview { background: #e7f8ee; border-color: #b6e6c9; color: #0b6b34; }

.sc-status.is-backlog,
.sc-status.is-completed { background: var(--sc-paper); border-color: var(--sc-line); color: var(--sc-steel); }

.sc-status.is-cancelled { background: #fdecec; border-color: #f4c9ca; color: #9a2b2e; }

/* Past due rides beside the status rather than replacing it — a job can be
   both in progress and late, and the writer needs to see both. */
.sc-flag-late {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fdecec;
    color: var(--sc-red);
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

/* Priority is a whisper next to status, not a competitor. */
.sc-prio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sc-sign);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sc-steel);
    white-space: nowrap;
}

.sc-prio::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; background: var(--sc-line); }
.sc-prio.is-moderate::before { background: #9db9d1; }
.sc-prio.is-important::before { background: var(--sc-amber); }
.sc-prio.is-urgent::before { background: var(--sc-red); }
.sc-prio.is-critical { color: var(--sc-red); }
.sc-prio.is-critical::before { background: var(--sc-red); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }

/* Sortable column header. A 44px button, not a bare <th> with a click handler. */
.sc-sortbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: var(--sc-tap);
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sc-sortbtn:hover { color: var(--sc-navy); }
.sc-sortbtn i { font-size: 11px; opacity: .55; }
.sc-sortbtn.is-sorted,
.sc-sortbtn.is-sorted i { color: var(--sc-navy); opacity: 1; }

/* Row commands are always visible — a tablet has no hover, so a hover-only
   command is an unreachable command. */
.sc-rowactions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sc-rowactions .btn { min-height: var(--sc-tap); min-width: var(--sc-tap); padding: 8px 12px; font-size: 14px; }

@media (hover: none) {
    .sc-rowactions .btn { min-height: 46px; }
}

.sc-status-neutral { background: #eef2f6; color: #4a5b6b; }
.sc-status-active  { background: #fff1e3; color: #b1550a; }
.sc-status-waiting { background: #fdf4d9; color: #8a6100; }
.sc-status-done    { background: #e4f7ec; color: #0d7a39; }
.sc-status-alert   { background: #fdeaea; color: #b4292d; }

/* --- Empty states: an invitation, never an apology ----------------------- */

.sc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 52px 24px;
    background: var(--sc-surface);
    border: 1px dashed var(--sc-line);
    border-radius: var(--sc-radius);
}

.sc-empty i { font-size: 30px; color: #b6c3cf; }
.sc-empty h3 { margin: 0; font-family: var(--sc-display); font-weight: 700; font-size: 18px; color: var(--sc-ink); }
.sc-empty p { margin: 0; max-width: 46ch; color: var(--sc-steel); font-size: 14px; }

/* ==========================================================================
   6. Accessibility floor
   ========================================================================== */

.navbar.bg-menu-nav .nav-link:focus-visible,
.sc-util-btn:focus-visible,
.sc-account:focus-visible,
.navbar-brand:focus-visible {
    outline: 2px solid var(--sc-orange-soft);
    outline-offset: -2px;
}

.sc-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 5000;
    padding: 10px 16px;
    background: #fff;
    color: var(--sc-navy);
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    transition: top .15s ease;
}

.sc-skip:focus { top: 0; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}