/* ============================================================
   OperationHub
   Shared stylesheet.

   Direction: a ledger, not a dashboard. Records are read in
   columns, so figures are tabular, rules are hairlines, and
   surfaces are flat. Colour is used to mark state, never to
   decorate.
   ============================================================ */

:root {

    /* The dark theme sets color-scheme:dark. Without the matching
       declaration here, a machine set to dark at the OS level paints
       native controls (select menus, date pickers, scrollbars) dark
       while the page around them stays light. */
    color-scheme: light;

    /* Brand ramp, cyan through indigo. */
    --blue-100: #00AEEF;
    --blue-200: #0089CF;
    --blue-300: #0072BC;
    --blue-400: #005BAA;
    --blue-500: #21409A;
    --blue-600: #2E3192;

    /* Roles. */
    --accent:        var(--blue-300);
    --accent-strong: var(--blue-400);
    --accent-bright: var(--blue-100);
    --ink-brand:     var(--blue-600);

    --accent-wash:   #EAF4FB;
    --accent-edge:   #BFDDEF;

    /* Neutrals. Cool grey, so the blues stay clean. */
    --canvas:     #F0F3F7;
    --surface:    #FFFFFF;
    --surface-2:  #F6F8FB;

    --rule:       #D6DEE8;
    --rule-firm:  #B9C5D2;

    --ink:        #14181D;
    --ink-2:      #4A525C;
    --ink-3:      #6E7781;
    --ink-4:      #97A0AA;

    /* State. */
    --ok:        #1B7F4B;
    --ok-wash:   #E7F4ED;
    --warn:      #9A6206;
    --warn-wash: #FBF1DF;
    --stop:      #B3261E;
    --stop-wash: #FBEAE9;

    --radius:    6px;
    --radius-sm: 4px;

    --rail-width:   240px;
    --topbar-height: 60px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* ----------------------------------------------------
       Compatibility aliases.

       The page templates still carry their own inline CSS
       from the previous design and reference these names.
       Mapping them here re-skins those pages to the new
       palette immediately. Remove each alias as its page
       is migrated to the shared classes above.
       ---------------------------------------------------- */

    --primary:        var(--accent);
    --primary-soft:   var(--accent-wash);

    --border:         var(--rule);
    --border-strong:  var(--rule-firm);

    --surface-soft:   var(--surface-2);

    --text:           var(--ink);
    --text-primary:   var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --text-light:     var(--ink-4);

    --sidebar-muted:  var(--ink-4);

    --success:        var(--ok);
    --success-soft:   var(--ok-wash);
    --warning:        var(--warn);
    --warning-soft:   var(--warn-wash);
    --danger:         var(--stop);

    --radius-md:      var(--radius);
    --radius-lg:      8px;

    /* Flat surfaces: the previous design leaned on shadows. */
    --shadow-xs:      none;
    --shadow-sm:      none;
}


/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--canvas);
    color: var(--ink);

    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}

/* Figures line up in columns. This is the detail the whole
   design is built around, so it is set globally. */
table,
.figure,
.num {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--accent-strong);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* Screen-reader-only label. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ---------- Shell ---------- */

.shell {
    min-height: 100vh;
    display: flex;
}

.rail {
    width: var(--rail-width);
    flex-shrink: 0;

    position: fixed;
    inset: 0 auto 0 0;

    display: flex;
    flex-direction: column;

    background: var(--surface);
    border-right: 1px solid var(--rule);
}

.main {
    flex: 1;
    min-width: 0;

    margin-left: var(--rail-width);

    /* A short page used to leave the footer floating mid-screen.
       The column makes the content area absorb the spare height. */
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;

    padding: 24px 28px 40px;
}


/* ---------- Wordmark ---------- */

.wordmark {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 18px 18px 16px;
}

.wordmark-mark {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: var(--radius-sm);

    background: var(--ink-brand);
    color: #fff;

    font-size: 13px;
    font-weight: 700;
}

.wordmark-name {
    color: var(--ink-brand);

    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.015em;
}


/* ---------- Workspace ---------- */

.workspace {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 12px 14px;
    padding: 9px 10px;

    border: 1px solid var(--rule);
    border-radius: var(--radius);

    background: var(--surface-2);
}

.workspace-mark {
    width: 26px;
    height: 26px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: var(--radius-sm);

    background: var(--accent-wash);
    color: var(--accent-strong);

    font-size: 12px;
    font-weight: 700;
}

.workspace-copy {
    min-width: 0;
}

.workspace-copy strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 600;
}

.workspace-copy span {
    display: block;

    color: var(--ink-4);

    font-size: 11px;
}


/* ---------- Navigation ---------- */

.nav {
    flex: 1;
    overflow-y: auto;

    padding: 0 12px;
}

.nav-group + .nav-group {
    margin-top: 18px;
}

.nav-group-title {
    padding: 0 10px 6px;

    color: var(--ink-4);

    font-size: 11px;
    font-weight: 600;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px 10px;
    margin-bottom: 1px;

    border-radius: var(--radius-sm);

    color: var(--ink-2);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--ink);

    text-decoration: none;
}

.nav-link.active {
    background: var(--accent-wash);
    color: var(--accent-strong);

    font-weight: 600;
}

.nav-link svg {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    stroke: currentColor;
    stroke-width: 1.6;

    fill: none;
}


/* ---------- Rail footer ---------- */

.rail-foot {
    /* Pin the account block to the bottom of the rail. In the workspace
       the nav is long enough to push it there on its own; the platform
       shell has two links, so it needs saying. */
    margin-block-start: auto;

    padding: 12px;
    border-top: 1px solid var(--rule);
}

.account {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border-radius: var(--radius);

    background: var(--surface-2);
}

.account-mark {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--ink-brand);
    color: #fff;

    font-size: 12px;
    font-weight: 650;
}

.account-copy {
    min-width: 0;
}

.account-copy strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 600;
}

.account-copy span {
    display: block;

    color: var(--ink-4);

    font-size: 11px;
}

.signout {
    margin: 0;
}

.signout button {
    width: 100%;

    margin-top: 8px;
    padding: 7px 10px;

    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--ink-2);

    font: inherit;
    font-size: 12px;

    text-align: start;

    cursor: pointer;
}

.signout button:hover {
    border-color: var(--rule-firm);
    color: var(--ink);
}


/* ---------- Topbar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;

    min-height: var(--topbar-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 0 28px;

    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.topbar h1 {
    font-size: 16px;
    font-weight: 600;
}

.search {
    width: min(360px, 40vw);

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 11px;

    border: 1px solid var(--rule);
    border-radius: var(--radius);

    background: var(--surface-2);
}

.search:focus-within {
    border-color: var(--accent-edge);
    background: var(--surface);
}

.search svg {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    stroke: var(--ink-4);
    stroke-width: 1.7;

    fill: none;
}

.search input {
    width: 100%;

    border: 0;
    background: none;

    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.search input:focus {
    outline: none;
}


/* ---------- Page head ---------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
}

.page-head h2 {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.page-head p {
    max-width: 62ch;
    margin: 4px 0 0;

    color: var(--ink-3);

    font-size: 13px;
}

.page-actions {
    display: flex;
    gap: 8px;

    flex-shrink: 0;
}


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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 13px;

    border: 1px solid transparent;
    border-radius: var(--radius);

    font: inherit;
    font-size: 13px;
    font-weight: 550;

    white-space: nowrap;

    cursor: pointer;

    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

/* Interaction feedback.

   A highlight tracks the pointer across the button using the
   --mx/--my custom properties set in app.js, so the surface reads
   as lit from where the cursor is. It only exists while the
   pointer is over the control, and it is suppressed entirely
   under prefers-reduced-motion. */
.btn {
    position: relative;
    overflow: hidden;

    transition:
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease,
        box-shadow .14s ease,
        transform .06s ease;
}

.btn::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            120px circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, .32),
            transparent 62%
        );

    transition: opacity .16s ease;

    pointer-events: none;
}

.btn:hover::after {
    opacity: 1;
}

/* Secondary and quiet buttons sit on white, so a white highlight
   would be invisible. They pick up the brand tint instead. */
.btn-secondary::after,
.btn-quiet::after,
.btn-danger::after {
    background:
        radial-gradient(
            120px circle at var(--mx, 50%) var(--my, 50%),
            rgba(0, 174, 239, .16),
            transparent 62%
        );
}

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

.btn-primary:hover {
    box-shadow: 0 1px 8px rgba(0, 114, 188, .34);
}

.btn > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {

    .btn::after {
        display: none;
    }

    .btn:active {
        transform: none;
    }

}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--rule-firm);
    color: var(--ink-2);
}

.btn-secondary:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.btn-quiet {
    background: none;
    border-color: transparent;
    color: var(--accent-strong);

    padding-left: 6px;
    padding-right: 6px;
}

.btn-quiet:hover {
    background: var(--accent-wash);
}

/* Row actions read as a set, not as separate controls. */
td.cell-right .btn-quiet {
    padding-top: 4px;
    padding-bottom: 4px;

    font-size: 12px;
}

.btn-danger {
    background: var(--surface);
    border-color: var(--rule-firm);
    color: var(--stop);
}

.btn-danger:hover {
    background: var(--stop-wash);
    border-color: var(--stop);
}

.btn svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;
    stroke-width: 1.8;

    fill: none;
}


/* ---------- Panels ---------- */

.panel {
    background: var(--surface);

    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.panel + .panel {
    margin-top: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 14px 16px;

    border-bottom: 1px solid var(--rule);
}

.panel-head h3 {
    font-size: 14px;
    font-weight: 600;
}

.panel-head p {
    margin: 2px 0 0;

    color: var(--ink-3);

    font-size: 12px;
}

.panel-body {
    padding: 16px;
}


/* ---------- Figures ---------- */

.figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-bottom: 16px;

    background: var(--surface);

    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* One shared rule between figures rather than four boxed cards. */
.figure {
    padding: 14px 16px;
}

.figure + .figure {
    border-left: 1px solid var(--rule);
}

.figure-label {
    color: var(--ink-3);

    font-size: 12px;
    font-weight: 500;
}

.figure-value {
    margin-top: 4px;

    font-size: 24px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.figure-note {
    margin-top: 4px;

    color: var(--ink-4);

    font-size: 12px;
}


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

.table-wrap {
    overflow-x: auto;
}

table.records {
    width: 100%;
    border-collapse: collapse;
}

table.records th {
    padding: 9px 16px;

    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);

    color: var(--ink-3);

    font-size: 12px;
    font-weight: 600;

    text-align: start;
    white-space: nowrap;
}

table.records td {
    padding: 11px 16px;

    border-bottom: 1px solid var(--rule);

    font-size: 13px;
    vertical-align: middle;
}

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

table.records tbody tr:hover {
    background: var(--surface-2);
}

.cell-primary {
    font-weight: 550;
}

.cell-muted {
    color: var(--ink-3);
}

.cell-right {
    text-align: end;
}


/* ---------- Row actions ----------

   A popover, so it renders in the top layer and is not clipped by
   the table's horizontal scroll container. JavaScript places it
   beside the button that opened it. */

.row-menu {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    background: none;
    color: var(--ink-3);

    cursor: pointer;
}

.row-menu:hover,
.row-menu[aria-expanded="true"] {
    border-color: var(--rule);
    background: var(--surface-2);
    color: var(--ink);
}

.sheet {
    position: fixed;

    width: 232px;

    margin: 0;
    padding: 0;

    border: 1px solid var(--rule);
    border-radius: var(--radius);

    background: var(--surface);
    color: var(--ink);

    box-shadow: 0 10px 30px rgba(20, 24, 29, .14);

    /* Open state. */
    opacity: 1;
    transform: translateY(0) scale(1);

    transition:
        opacity .13s ease,
        transform .13s ease,
        overlay .13s allow-discrete,
        display .13s allow-discrete;
}

/* Closed, and the state it animates from when opening. */
.sheet:not(:popover-open) {
    opacity: 0;
    transform: translateY(-4px) scale(.97);
}

@starting-style {
    .sheet:popover-open {
        opacity: 0;
        transform: translateY(-4px) scale(.97);
    }
}

/* Opening upward when there is no room below. */
.sheet.is-above:not(:popover-open),
.sheet.is-above {
    transform-origin: bottom right;
}

.sheet::backdrop {
    background: transparent;
}

.sheet-head {
    padding: 10px 12px;

    border-bottom: 1px solid var(--rule);
}

.sheet-head strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 600;
}

.sheet-head span {
    display: block;

    margin-top: 1px;

    color: var(--ink-3);

    font-size: 11px;
}

.sheet-body {
    padding: 4px;
}

.sheet-body form {
    margin: 0;
}

.sheet-action {
    width: 100%;

    display: block;

    padding: 8px 10px;

    border: 0;
    border-radius: var(--radius-sm);

    background: none;
    color: var(--ink-2);

    font: inherit;
    font-size: 13px;

    text-align: start;
    text-decoration: none;

    cursor: pointer;
}

.sheet-action:hover {
    background: var(--accent-wash);
    color: var(--accent-strong);

    text-decoration: none;
}

.sheet-action.is-danger:hover {
    background: var(--stop-wash);
    color: var(--stop);
}

@media (prefers-reduced-motion: reduce) {

    .sheet {
        transition: none;
    }

}


/* ---------- Courses ---------- */

.course-meta {
    display: block;

    margin-top: 2px;

    color: var(--ink-3);

    font-size: 12px;
}


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

.badge {
    display: inline-block;

    padding: 2px 8px;

    border-radius: 3px;

    font-size: 12px;
    font-weight: 550;
}

.badge-ok    { background: var(--ok-wash);   color: var(--ok); }
.badge-warn  { background: var(--warn-wash); color: var(--warn); }
.badge-stop  { background: var(--stop-wash); color: var(--stop); }
.badge-quiet { background: var(--surface-2); color: var(--ink-3);
               box-shadow: inset 0 0 0 1px var(--rule); }


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

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 700;
    color: var(--ink-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea,
.input {
    width: 100%;

    padding: 8px 11px;

    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);

    background: var(--surface);
    color: var(--ink);

    font: inherit;
    font-size: 13px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.field-help {
    margin-top: 5px;

    color: var(--ink-3);

    font-size: 12px;
}

.field-error {
    margin-top: 5px;

    color: var(--stop);

    font-size: 12px;
}

.form-actions {
    display: flex;
    gap: 8px;

    padding-top: 4px;
}


/* ---------- Notices ---------- */

.notice {
    padding: 11px 14px;
    margin-bottom: 16px;

    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--ink-4);
    border-radius: var(--radius-sm);

    background: var(--surface);

    font-size: 13px;
}

.notice-error { border-inline-start-color: var(--stop); background: var(--stop-wash); }
.notice-ok    { border-inline-start-color: var(--ok);   background: var(--ok-wash); }
.notice-warn  { border-inline-start-color: var(--warn); background: var(--warn-wash); }


/* ---------- Empty state ---------- */

.empty {
    padding: 44px 20px;
    text-align: center;
}

.empty h4 {
    font-size: 14px;
    font-weight: 600;
}

.empty p {
    max-width: 44ch;
    margin: 5px auto 14px;

    color: var(--ink-3);

    font-size: 13px;
}


/* ---------- Pagination ---------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 16px;

    border-top: 1px solid var(--rule);
}

.pager-count {
    color: var(--ink-3);

    font-size: 12px;
}

.pager-controls {
    display: flex;
    gap: 4px;
}

.pager-btn {
    min-width: 30px;

    padding: 5px 9px;

    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--ink-2);

    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.pager-btn:hover {
    border-color: var(--rule-firm);
    text-decoration: none;
}

.pager-btn.active {
    background: var(--accent-wash);
    border-color: var(--accent-edge);
    color: var(--accent-strong);

    font-weight: 600;
}

.pager-btn.disabled {
    color: var(--ink-4);
    pointer-events: none;
}


/* ---------- Filter bar ----------

   One row of controls on a tinted strip, so it reads as a toolbar
   attached to the table rather than a form the user must fill in.
   Labels sit above their control at small size; the search field
   takes the free space. */

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;

    padding: 12px 16px;

    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-field.is-wide {
    flex: 1;
    min-width: 220px;
}

.filter-field label {
    color: var(--ink-3);

    font-size: 11px;
    font-weight: 600;
}

.filter-field select,
.filter-field input[type="text"],
.filter-field input[type="search"] {
    height: 34px;

    padding: 0 11px;

    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);

    background: var(--surface);
    color: var(--ink);

    font: inherit;
    font-size: 13px;
}

.filter-field select {
    min-width: 150px;
    padding-inline-end: 30px;

    /* Native arrows differ per browser; draw one instead. */
    appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E7781' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px;
}

.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Magnifier sits inside the search field. */
.filter-search {
    position: relative;

    display: flex;
}

.filter-search svg {
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;

    width: 15px;
    height: 15px;

    transform: translateY(-50%);

    stroke: var(--ink-4);
    stroke-width: 1.7;

    fill: none;

    pointer-events: none;
}

.filter-search input {
    width: 100%;
    padding-inline-start: 32px !important;
}

.filter-actions {
    display: flex;
    gap: 6px;

    margin-inline-start: auto;
}

.filter-actions .btn {
    height: 34px;
}

/* Applied filters, shown as removable chips below the bar. */
.filter-applied {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    padding: 10px 16px;

    border-bottom: 1px solid var(--rule);

    font-size: 12px;
}

.filter-applied-label {
    color: var(--ink-3);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 3px 9px;

    border: 1px solid var(--accent-edge);
    border-radius: 3px;

    background: var(--accent-wash);
    color: var(--accent-strong);

    font-weight: 550;
}


@media (max-width: 760px) {

    .filter-field,
    .filter-field.is-wide {
        flex: 1 1 100%;
        min-width: 0;
    }

    .filter-actions {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions .btn {
        flex: 1;
        justify-content: center;
    }

}


/* ---------- Site footer ---------- */

.site-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    padding: 16px 28px;

    border-top: 1px solid var(--rule);

    background: var(--surface);

    color: var(--ink-4);

    font-size: 12px;
}

.site-foot p {
    margin: 0;
}

.site-foot a {
    color: var(--ink-3);
}

.site-foot a + a {
    margin-inline-start: 16px;
}

.site-foot-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.site-foot-brand a {
    display: inline-flex;
    line-height: 0;
}

.site-foot-brand img {
    height: 16px;
    width: auto;

    display: block;
}


/* ---------- Responsive ---------- */

@media (max-width: 1000px) {

    .figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .figure:nth-child(3) {
        border-left: 0;
    }

    .figure:nth-child(n + 3) {
        border-top: 1px solid var(--rule);
    }

}

/* ---------- Menu button and drawer overlay ----------

   The rail is a fixed sidebar on wide screens. Below 820px it
   becomes an off-canvas drawer: stacking it instead would push the
   whole page down before the reader reaches any content. */

.menu-button {
    width: 34px;
    height: 34px;

    display: none;
    place-items: center;

    margin-inline-end: 12px;

    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--ink-2);

    cursor: pointer;
}

.menu-button:hover {
    border-color: var(--rule-firm);
    color: var(--ink);
}

.menu-button svg {
    width: 18px;
    height: 18px;

    stroke: currentColor;
    stroke-width: 1.8;

    fill: none;
}

.rail-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;

    display: none;

    background: rgba(20, 24, 29, .38);
}


@media (max-width: 820px) {

    .menu-button {
        display: grid;
    }

    /* A collapsed rail is a desktop preference. It is remembered in
       localStorage, so without this a phone inherits the icon-only rail
       and the drawer opens with no labels in it. */
    html.rail-collapsed .rail {
        width: min(280px, 84vw);
    }

    html.rail-collapsed .rail-label {
        display: revert;
    }

    html.rail-collapsed .nav-section > summary,
    html.rail-collapsed .nav-section-links .nav-link,
    html.rail-collapsed .workspace,
    html.rail-collapsed .account {
        justify-content: flex-start;
        padding: 7px 9px;
    }

    html.rail-collapsed .nav-section-links .nav-link {
        padding-inline-start: 32px;
    }

    .rail {
        z-index: 50;

        width: min(280px, 84vw);

        transform: translateX(-100%);

        transition: transform .2s ease;
    }

    .rail.is-open {
        transform: translateX(0);

        box-shadow: 0 0 40px rgba(20, 24, 29, .2);
    }

    body.rail-open .rail-scrim {
        display: block;
    }

    /* The drawer floats over the page, so the content no longer
       leaves room for it. */
    .main {
        margin-left: 0;
    }

    .content {
        padding: 18px 16px 40px;
    }

    .topbar {
        padding: 0 16px;
    }

    .search {
        display: none;
    }

    .page-head {
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
        flex-wrap: wrap;
    }

}

@media (prefers-reduced-motion: reduce) {

    .rail {
        transition: none;
    }

}

@media (max-width: 520px) {

    .figures {
        grid-template-columns: 1fr;
    }

    .figure + .figure {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

}
/* vNext company hub milestone */
.hub-body{min-height:100vh;background:var(--page-bg,#f4f6f8);color:var(--text,#16202a)}
.company-hub-shell,.company-form-shell{max-width:1180px;margin:0 auto;padding:32px 24px}
.company-hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.company-hub-head h1,.compact-page-head h1{margin:.2rem 0 .35rem;font-size:clamp(1.8rem,3vw,2.5rem)}
.company-hub-head p{margin:0;color:var(--muted,#667085)}
.company-hub-actions{display:flex;align-items:center;gap:10px}.company-hub-actions form{margin:0}
.company-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.company-card{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;background:var(--surface,#fff);border:1px solid var(--line,#e4e8ee);border-radius:16px;padding:18px;box-shadow:0 10px 28px rgba(18,30,45,.05)}
.company-card .btn{grid-column:1/-1}.company-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;background:var(--accent-wash);border:1px solid var(--accent-edge);color:var(--primary)}.company-card h2{margin:0;font-size:1.05rem}.company-card p{margin:.2rem 0 0;color:var(--muted,#667085);font-size:.9rem}
.compact-form-card{max-width:640px;background:var(--surface,#fff);border:1px solid var(--line,#e4e8ee);border-radius:16px;padding:20px;display:grid;gap:16px}.form-field{display:grid;gap:6px}.form-field input,.form-field select{width:100%;padding:10px 12px;border:1px solid #cfd6df;border-radius:9px;background:var(--surface,#fff);color:inherit}.field-error{color:#b42318;font-size:.85rem}.empty-state{background:var(--surface,#fff);border:1px dashed #cfd6df;border-radius:16px;padding:28px;text-align:center}.eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#61708a;font-weight:800}
@media(max-width:720px){.company-hub-shell,.company-form-shell{padding:20px 14px}.company-hub-head{flex-direction:column}.company-hub-actions{width:100%;justify-content:space-between}}
.compact-table-wrap{overflow:auto;background:var(--surface,#fff);border:1px solid var(--line,#e4e8ee);border-radius:14px}.compact-table{width:100%;border-collapse:collapse}.compact-table th,.compact-table td{padding:11px 13px;border-bottom:1px solid var(--line,#e4e8ee);text-align:start;vertical-align:middle}.compact-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#667085);background:rgba(127,138,155,.05)}.compact-table tr:last-child td{border-bottom:0}.pill{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--accent-wash);color:var(--primary);font-size:.78rem;margin:2px}.muted{color:var(--muted,#667085)}.btn-sm{padding:6px 9px;font-size:.82rem}

/* ============================================================
   vNext shell: compact, collapsible, dark-mode and RTL aware.
   ============================================================ */
html[data-theme="dark"] {
    --canvas:#0f141b; --surface:#151c25; --surface-2:#1b2430;
    --rule:#2b3542; --rule-firm:#3b4756;
    --ink:#eef3f8; --ink-2:#c6d0dc; --ink-3:#9facbb; --ink-4:#7f8c9d;
    --accent-wash:#162b3d; --accent-edge:#285873; --ink-brand:#7fb4ff;
    --ok-wash:#173327; --warn-wash:#382b16; --stop-wash:#3b1d1d;

    /* Status text has to lift off its own dark wash, so the light
       theme's deep greens and reds are replaced with lighter ones. */
    --ok:#4ade80; --warn:#fbbf24; --stop:#f87171;

    /* Links and primary actions need more lift on a dark canvas. */
    --accent:#3b9ae1; --accent-strong:#5fb0ec; --accent-bright:#7cc6f5;

    color-scheme:dark;
}

/* Cards on a dark canvas need a visible edge: at these lightness
   levels a shadow does nothing, so the border does the separating. */
html[data-theme="dark"] .figure,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .asset-stat,
html[data-theme="dark"] .employee-stat,
html[data-theme="dark"] .company-card{
    border-color:var(--rule);
    box-shadow:none;
}

/* Table rows must not glow brighter than the card they sit in. */
html[data-theme="dark"] table.records tbody tr:hover,
html[data-theme="dark"] .compact-table tbody tr:hover{
    background:var(--surface-2);
}

.vnext-rail{transition:width .18s ease;z-index:30;overflow:visible}
/* The drawer must sit above the scrim. This rule lives after the
   820px block, so state the phone value here too or the later
   z-index:30 above wins and buries the open drawer. */
@media (max-width: 820px){.vnext-rail{z-index:60}}
.vnext-main{transition:margin-inline-start .18s ease}
.rail-brand-row{display:flex;align-items:center;justify-content:space-between;padding-inline-end:10px}
.rail-close-button{display:none}
@media (max-width: 820px){
  .rail-close-button{
    display:inline-grid;place-items:center;
    min-width:34px;height:34px;
    border:1px solid var(--rule);border-radius:8px;
    background:var(--surface);color:var(--ink-2);
    cursor:pointer;font:inherit;
  }
  .rail-close-button:hover{background:var(--surface-2);color:var(--ink)}
}
.rail-brand-row .wordmark{min-width:0}
.rail-collapse-button,.tool-button,.menu-button{border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);border-radius:8px;min-width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;font:inherit}
.rail-collapse-button:hover,.tool-button:hover,.menu-button:hover{background:var(--surface-2);color:var(--ink)}
.rail-collapse-button{width:30px;height:30px;min-width:30px}
/* The rule above sets display for all three buttons. The hamburger
   belongs to the phone drawer only, so put it back out of sight and
   let the 820px block below bring it back. */
.menu-button{display:none}
.workspace-switcher{position:relative;margin:0 12px 12px}
.workspace-switcher .workspace{margin:0;cursor:pointer;list-style:none;position:relative;padding-inline-end:28px}
.workspace-switcher .workspace::-webkit-details-marker{display:none}
.workspace-chevron{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);color:var(--ink-4)}
.workspace-menu{position:absolute;z-index:80;inset-inline:0;top:calc(100% + 6px);display:grid;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.12);max-height:300px;overflow:auto}
.workspace-menu a{padding:8px 10px;border-radius:7px;color:var(--ink-2);font-size:13px}
.workspace-menu a:hover,.workspace-menu a[aria-current="true"]{background:var(--accent-wash);color:var(--accent-strong);text-decoration:none}
.workspace-menu-global{border-top:1px solid var(--rule);margin-top:4px;padding-top:10px!important;font-weight:600}

.vnext-nav{padding:0 9px 12px}
/* ---------- Sidebar sections ----------

   Each section is a <details>, so it works without JavaScript. The
   chevron points right when closed and down when open, which is the
   only thing telling the reader the section can be opened at all. */

.nav-section{margin:2px 0}

.nav-section>summary{
    list-style:none;
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 9px;
    border-radius:7px;
    color:var(--ink-3);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.045em;
    cursor:pointer;
    user-select:none;
}

.nav-section>summary::-webkit-details-marker{display:none}
.nav-section>summary::marker{content:""}

.nav-section-chevron{
    margin-inline-start:auto;
    display:flex;
    color:var(--ink-4);
    transition:transform .18s ease;
}

.nav-section[open]>summary .nav-section-chevron{transform:rotate(90deg)}

[dir="rtl"] .nav-section-chevron{transform:rotate(180deg)}
[dir="rtl"] .nav-section[open]>summary .nav-section-chevron{transform:rotate(90deg)}

/* Icons are drawn, not typed: dingbat characters render differently
   on every platform and look accidental. */
.nav-section-icon,.nav-icon{
    width:18px;
    min-width:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nav-section-icon svg,.nav-icon svg,.ui-icon{
    width:17px;
    height:17px;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.nav-section-chevron svg{width:13px;height:13px;stroke-width:2}

/* Opening slides the links down rather than snapping. */
.nav-section-links{
    display:grid;
    gap:1px;
    overflow:hidden;
}

.nav-section[open]>.nav-section-links{
    animation:nav-open .18s ease;
}

@keyframes nav-open{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
    .nav-section-chevron{transition:none}
    .nav-section[open]>.nav-section-links{animation:none}
}


.nav-section>summary::-webkit-details-marker{display:none}
.nav-section>summary:hover{background:var(--surface-2);color:var(--ink-2)}

.nav-section-links{display:grid;gap:1px}.vnext-nav .nav-link{padding:7px 9px;margin:0}
/* Children sit in from their section heading, so an open section
   reads as a group rather than a flat list. */
.vnext-nav .nav-section-links .nav-link{padding-inline-start:32px}

.account-menu,.top-account-menu{position:relative}.account-menu>summary,.top-account-menu>summary{list-style:none;cursor:pointer}.account-menu>summary::-webkit-details-marker,.top-account-menu>summary::-webkit-details-marker{display:none}
.account-popover{position:absolute;z-index:90;inset-inline-start:0;bottom:calc(100% + 7px);min-width:210px;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:0 14px 34px rgba(15,23,42,.16);display:grid}
.account-popover a,.account-popover button{display:block;width:100%;border:0;background:transparent;color:var(--ink-2);padding:8px 10px;border-radius:7px;text-align:start;font:inherit;font-size:13px;cursor:pointer}
.account-popover a:hover,.account-popover button:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.account-popover form{margin:0}.account-mark.small{width:28px;height:28px}

.vnext-topbar{padding-inline:18px;gap:12px}.topbar-left,.topbar-tools{display:flex;align-items:center;gap:8px;min-width:0}.topbar-tools{margin-inline-start:auto}.compact-search{width:min(280px,28vw);padding:5px 9px}.compact-search input{font-size:12px}
.language-switch{display:flex;align-items:center;border:1px solid var(--rule);border-radius:9px;overflow:hidden}.language-switch form{margin:0}.language-switch .tool-button{border:0;border-radius:0;min-width:34px;height:32px}.language-switch .tool-button.active{background:var(--accent-wash);color:var(--accent-strong);font-weight:700}
.top-account-chip{display:flex;align-items:center;gap:7px;padding:3px 6px 3px 3px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);cursor:pointer}.top-account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink-2)}
.top-account-popover{inset-inline:auto 0;bottom:auto;top:calc(100% + 7px)}
.vnext-content{padding:18px 22px 32px}.compact-page-head{align-items:center;margin-bottom:14px}.compact-page-head h1{font-size:20px}.compact-page-head p{margin-top:2px}

html.rail-collapsed{--rail-width:68px}
html.rail-collapsed .rail-label,html.rail-collapsed .workspace-chevron{display:none!important}
html.rail-collapsed .rail-brand-row{justify-content:center;padding:8px 0 5px;flex-direction:column;gap:3px}
html.rail-collapsed .wordmark{padding:6px}.rail-collapsed .rail-collapse-button span{transform:rotate(180deg)}
html.rail-collapsed .workspace-switcher{margin-inline:9px}.rail-collapsed .workspace{padding:8px;margin:0;justify-content:center}.rail-collapsed .workspace-mark{width:30px;height:30px}.rail-collapsed .nav-section>summary{justify-content:center;padding:8px}.rail-collapsed .nav-section-links .nav-link{justify-content:center;padding:9px}.rail-collapsed .vnext-nav{padding-inline:7px}.rail-collapsed .account{justify-content:center;padding:7px}.rail-collapsed .account-menu .account-popover{inset-inline-start:calc(100% + 8px);bottom:0}

/* Form controls. Previously only `.form-field input` was styled, so any
   control outside that wrapper fell back to the browser default. */
.vnext-content input[type="text"],
.vnext-content input[type="email"],
.vnext-content input[type="password"],
.vnext-content input[type="number"],
.vnext-content input[type="date"],
.vnext-content input[type="search"],
.vnext-content select,
.vnext-content textarea {
    width: 100%;

    min-height: 36px;

    padding: 8px 11px;

    background: var(--surface);

    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);

    color: var(--ink);

    font: inherit;
    font-size: 13px;
}

.vnext-content select {
    padding-inline-end: 30px;

    appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E7781' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px;

    cursor: pointer;
}

html[data-theme="dark"] .vnext-content select {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239AA7B8' stroke-width='1.5'/%3E%3C/svg%3E");
}

.vnext-content input:focus,
.vnext-content select:focus,
.vnext-content textarea:focus {
    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Checkboxes and radios are not text fields and must not stretch. */
.vnext-content input[type="checkbox"],
.vnext-content input[type="radio"] {
    width: 16px;
    height: 16px;

    min-height: 0;

    margin: 0;
    padding: 0;

    accent-color: var(--accent);

    cursor: pointer;
}

/* Empty state mark. Drawn, so it inherits the theme and does not
   depend on an emoji font that renders differently per platform. */
.empty-state-mark {
    width: 30px;
    height: 30px;

    margin-bottom: 12px;

    stroke: var(--ink-4);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    fill: none;
}

.empty-state h3 {
    margin: 0 0 6px;

    color: var(--ink);

    font-size: 15px;
    font-weight: 650;
}

.empty-state p {
    margin: 0 0 14px;

    color: var(--ink-3);

    font-size: 13px;
}

.empty-state p:last-child {
    margin-bottom: 0;
}

/* Facts: label on one side, value on the other, ruled between.
   Several pages had their own copy of this. One definition instead. */
.facts {
    padding: 4px 16px 12px;
}

.fact {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 10px 0;

    border-bottom: 1px solid var(--rule);

    font-size: 13px;
}

.fact:last-child {
    border-bottom: 0;
}

.fact-label {
    color: var(--ink-3);
}

.fact-value {
    font-weight: 550;
    text-align: end;

    font-variant-numeric: tabular-nums;
}

/* Status text used across the asset and employee tables. It was never
   defined, so every one of these rendered as plain body text. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 12px;
    font-weight: 600;
}

.status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.status-active   { color: var(--ok); }
.status-inactive { color: var(--ink-3); }

/* btn-ghost is used by six templates and was never defined, so those
   buttons rendered as bare links. Same treatment as btn-secondary. */
.btn-ghost {
    background: transparent;

    border: 1px solid var(--rule);

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

.btn-ghost:hover {
    background: var(--surface-2);

    color: var(--ink);
}

.legal-lede {
    margin: 0 0 22px;

    color: var(--ink-3);

    font-size: 13px;
    line-height: 1.7;
}

.company-card-copy {
    min-width: 0;
}

.account-more {
    display: inline-grid;
    place-items: center;

    width: 26px;
    height: 26px;

    border: 0;
    border-radius: 7px;

    background: none;
    color: var(--ink-4);

    cursor: pointer;
}

.account-more:hover {
    background: var(--surface-2);
    color: var(--ink-2);
}

/* A wider form that uses the page instead of a 640px strip down the
   left. Fields sit two to a row; anything marked wide spans both. */
.form-card-wide {
    max-width: 920px;

    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.form-grid .form-field {
    min-width: 0;
}

.form-grid .field-wide {
    grid-column: 1 / -1;
}

.form-section-title {
    grid-column: 1 / -1;

    margin: 6px 0 0;
    padding-top: 14px;

    border-top: 1px solid var(--rule);

    color: var(--ink-2);

    font-size: 12px;
    font-weight: 700;
}

.form-grid:first-child .form-section-title:first-child {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
}

/* Checkbox lists rendered by Django come out as a plain <ul>. */
.check-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.check-list li label {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 10px;

    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);

    color: var(--ink);

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}

.check-list li label:hover {
    background: var(--surface-2);
}

@media (max-width: 720px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

}

.form-actions {
    display: flex;
    gap: 8px;
    align-items: center;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid var(--rule);
}

/* Directional chevrons: drawn, not typed, and mirrored for RTL. */
.dir-icon{
    width:15px;
    height:15px;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
    vertical-align:middle;
}
[dir="rtl"] .dir-icon{transform:scaleX(-1)}

/* The drawn select chevron sits on whichever side the text ends. */
[dir="rtl"] .filter-field select,
[dir="rtl"] .vnext-content select{background-position:left 11px center}

[dir="rtl"] .rail{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--rule)}
[dir="rtl"] .main{margin-left:0;margin-right:var(--rail-width)}
[dir="rtl"] .nav-link,[dir="rtl"] .account,[dir="rtl"] .workspace,[dir="rtl"] .page-head,[dir="rtl"] .compact-table th,[dir="rtl"] .compact-table td{text-align:right}
[dir="rtl"] .rail-collapse-button span{transform:rotate(180deg)}
[dir="rtl"].rail-collapsed .rail-collapse-button span{transform:none}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}

@media(max-width:820px){
  html.rail-collapsed{--rail-width:240px}
  .rail-collapse-button{display:none}
  .menu-button{display:inline-grid}
  .top-account-name{display:none}
  .compact-search{display:none}
  [dir="rtl"] .rail{transform:translateX(105%)}
  [dir="rtl"] .rail.is-open{transform:translateX(0)}
  [dir="rtl"] .main{margin-right:0}
  .vnext-content{padding:14px 12px 26px}
}

/* ============================================================
   vNext compact-density layer.
   The old pages keep their semantics/data; these overrides remove
   unnecessary vertical space and normalize the shared visual rhythm.
   ============================================================ */
.vnext-content .panel,
.vnext-content .register,
.vnext-content .asset-stat,
.vnext-content .employee-stat,
.vnext-content .figure,
.vnext-content .create-section,
.vnext-content .form-section,
.vnext-content .side-card,
.vnext-content .upload-card {
    border-radius: 10px !important;
    box-shadow: none !important;
}

.vnext-content .page-head,
.vnext-content .asset-page-header,
.vnext-content .employee-page-header {
    margin-block: 0 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}
.vnext-content .asset-header-eyebrow,
.vnext-content .employee-header-eyebrow,
.vnext-content .asset-header-subtitle,
.vnext-content .employee-header-subtitle {
    display: none !important;
}
.vnext-content .asset-header-title,
.vnext-content .employee-header-title,
.vnext-content .page-head h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.vnext-content .asset-header-actions,
.vnext-content .employee-header-actions,
.vnext-content .page-actions {
    gap: 6px !important;
    flex-wrap: wrap;
}
.vnext-content .btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
}

/* One strip divided by hairlines, not four floating cards.
   Building it from 1px grid gaps showed the container colour
   through, which reads as a seam in dark mode. */
.vnext-content .asset-stats,
.vnext-content .employee-stats,
.vnext-content .figures {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 0 !important;
    margin: 0 0 12px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.vnext-content .asset-stat,
.vnext-content .employee-stat,
.vnext-content .figure {
    min-height: 0 !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

/* The divider sits between cells only, never on the outer edge. */
.vnext-content .asset-stat + .asset-stat,
.vnext-content .employee-stat + .employee-stat,
.vnext-content .figure + .figure {
    border-inline-start: 1px solid var(--rule) !important;
}

@media (max-width: 1000px) {
    /* Two per row, so the divider has to reset on each new row. */
    .vnext-content .asset-stat:nth-child(odd),
    .vnext-content .employee-stat:nth-child(odd),
    .vnext-content .figure:nth-child(odd) {
        border-inline-start: 0 !important;
    }
    .vnext-content .asset-stat:nth-child(n+3),
    .vnext-content .employee-stat:nth-child(n+3),
    .vnext-content .figure:nth-child(n+3) {
        border-top: 1px solid var(--rule) !important;
    }
}
.vnext-content .asset-stat::after,
.vnext-content .employee-stat::after { display:none !important; }
.vnext-content .asset-stat-label,
.vnext-content .employee-stat-label,
.vnext-content .figure-label {
    font-size: 11px !important;
    margin: 0 0 2px !important;
    color: var(--ink-3) !important;
}
.vnext-content .asset-stat-value,
.vnext-content .employee-stat-value,
.vnext-content .figure-value {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}
.vnext-content .asset-stat-meta,
.vnext-content .employee-stat-meta,
.vnext-content .figure-note {
    font-size: 10px !important;
    margin-top: 2px !important;
}

.vnext-content .register {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
}
.vnext-content .register-top {
    gap: 10px !important;
    align-items: center !important;
}
.vnext-content .register-headline { margin:0 !important; }
.vnext-content .register-figure { font-size: 28px !important; line-height:1 !important; }
.vnext-content .register-caption { display:none !important; }
.vnext-content .register-value { margin: 3px 0 0 !important; font-size: 11px !important; }
.vnext-content .register-bar { margin-top: 9px !important; height: 6px !important; }
.vnext-content .register-key { margin-top: 7px !important; gap: 12px !important; }

.vnext-content .filter-bar,
.vnext-content .asset-filter-form,
.vnext-content .employee-filter-form,
.vnext-content .compact-filters {
    gap: 8px !important;
    padding: 8px 10px !important;
    align-items: end !important;
}
.vnext-content .filter-field label,
.vnext-content .filter-label { font-size: 10px !important; margin-bottom: 3px !important; }
.vnext-content input,
.vnext-content select,
.vnext-content textarea {
    min-height: 34px;
}

.vnext-content .table-wrap,
.vnext-content .compact-table-wrap { border-radius: 9px !important; }
.vnext-content table.records th,
.vnext-content table.records td,
.vnext-content .compact-table th,
.vnext-content .compact-table td {
    padding-block: 8px !important;
}

.vnext-content .create-section,
.vnext-content .form-section { margin-bottom: 10px !important; }
.vnext-content .create-section-header,
.vnext-content .form-section-header {
    min-height: 0 !important;
    padding: 8px 12px !important;
}
.vnext-content .create-section-body,
.vnext-content .form-section-body { padding: 10px 12px !important; }
.vnext-content .create-grid,
.vnext-content .form-grid,
.vnext-content .asset-form-grid,
.vnext-content .upload-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px 12px !important;
}
.vnext-content .create-field,
.vnext-content .form-field,
.vnext-content .form-group { gap: 3px !important; }
.vnext-content .create-section-icon,
.vnext-content .form-section-icon { width:28px !important; height:28px !important; }
.vnext-content .side-card { padding: 0 !important; }
.vnext-content .side-card-header { padding: 8px 10px !important; }
.vnext-content .side-card-body { padding: 9px 10px !important; }

.status-tabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 10px; }
.status-tabs a { padding:5px 9px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2); font-size:12px; }
.status-tabs a.active { background:var(--accent-wash); border-color:var(--accent-edge); color:var(--accent-strong); font-weight:650; }

@media (max-width: 900px) {
  .vnext-content .asset-stats,.vnext-content .employee-stats,.vnext-content .figures { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .vnext-content .asset-stats,.vnext-content .employee-stats,.vnext-content .figures { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .vnext-content .create-grid,.vnext-content .form-grid,.vnext-content .asset-form-grid,.vnext-content .upload-grid { grid-template-columns:1fr !important; }
  .vnext-content .page-head,.vnext-content .asset-page-header,.vnext-content .employee-page-header { align-items:flex-start !important; }
}

/* ============================================================
   QA visual consistency pass: clearer form/list hierarchy.
   ============================================================ */
.standard-form-shell {
    width: min(100%, 860px);
    margin: 0 auto;
}

.form-page-head {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
}

.standard-form-card {
    width: 100%;
    border-color: var(--rule-firm);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(20, 32, 48, .06);
}

.standard-form-card .panel-body {
    padding: 24px;
}

.standard-form-card .field input[type="text"],
.standard-form-card .field input[type="email"],
.standard-form-card .field input[type="password"],
.standard-form-card .field input[type="number"],
.standard-form-card .field input[type="date"],
.standard-form-card .field select,
.standard-form-card .field textarea {
    min-height: 42px;
    border-color: var(--rule-firm);
    background: var(--surface);
}

.standard-form-card .field textarea {
    min-height: 120px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.form-grid .field-full {
    grid-column: 1 / -1;
}

.standard-form-card .form-actions {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.list-page-shell {
    display: grid;
    gap: 16px;
}

.qa-list-panel {
    overflow: hidden;
    border-color: var(--rule-firm);
    box-shadow: 0 8px 24px rgba(20, 32, 48, .045);
}

table.records th {
    border-bottom-color: var(--rule-firm);
    background: #EEF3F8;
}

html[data-theme="dark"] table.records th {
    background: var(--surface-2);
}

table.records td {
    border-bottom-color: var(--rule);
}

.row-actions {
    white-space: nowrap;
}

.inline-action-form {
    display: inline-flex;
    margin: 0 0 0 6px;
    vertical-align: middle;
}

[dir="rtl"] .inline-action-form {
    margin: 0 6px 0 0;
}

.flash-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.notice-success {
    border-color: var(--ok);
    background: var(--ok-wash);
    color: var(--ok);
}

.company-form-shell {
    max-width: 760px;
    padding-top: 48px;
}

.company-create-head {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 14px;
}

.company-create-head p {
    margin: 6px 0 0;
    color: var(--ink-3);
}

.company-create-card {
    max-width: none;
    padding: 24px;
    border-color: var(--rule-firm);
    box-shadow: 0 12px 30px rgba(20, 32, 48, .06);
}

.company-create-card .form-field label {
    font-weight: 700;
    color: var(--ink-2);
}

.company-create-card .form-field input,
.company-create-card .form-field select {
    min-height: 42px;
    border-color: var(--rule-firm);
}

.company-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
    .standard-form-shell { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .field-full { grid-column: auto; }
    .standard-form-card .panel-body { padding: 18px; }
    .company-form-shell { padding-top: 20px; }
}

/* Shared live validation for phone/email fields. */
.live-field-feedback {
    min-height: 18px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}
.live-field-feedback.is-valid { color: var(--ok); }
.live-field-feedback.is-invalid { color: var(--stop); }
input.live-valid {
    border-color: var(--ok) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 12%, transparent);
}
input.live-invalid {
    border-color: var(--stop) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stop) 10%, transparent);
}