/* =====================================================================
   EyeQ School — theme
   ---------------------------------------------------------------------
   Loads AFTER bootstrap.min.css and app.min.css and re-skins them, so
   every existing view picks up the new look without being edited.

   Built for a school office: staff sit on dense fee registers, marks
   entry and attendance grids all day.

   Palette : deep slate navigation band, teal for actions, amber held
             back for money still owed so an arrear never reads as a
             normal number.
   Numerals: IBM Plex Mono, tabular, so fee columns line up on scan.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* base */
    --eq-ink: #10162B;
    --eq-ink-2: #1B2440;
    --eq-ink-3: #2A3454;
    --eq-accent: #0E7C7B;
    --eq-accent-dark: #0A5F5E;
    --eq-accent-soft: #E4F2F1;
    --eq-amber: #B26A00;
    --eq-amber-soft: #FDF3E2;
    --eq-danger: #B4322A;
    --eq-danger-soft: #FBEDEC;
    --eq-success: #1E7A4F;
    --eq-success-soft: #E7F4EE;
    --eq-info: #1F5F94;
    --eq-info-soft: #E6EFF7;
    --eq-canvas: #F4F6FA;
    --eq-surface: #FFFFFF;
    --eq-surface-2: #FAFBFD;
    --eq-line: #E2E7F0;
    --eq-line-strong: #CBD3E1;
    --eq-text: #1A2138;
    --eq-text-2: #5A6480;
    --eq-text-3: #8A93AC;
    /* metrics */
    --eq-nav-h: 48px;
    --eq-bar-h: 46px;
    --eq-radius: 6px;
    --eq-radius-sm: 4px;
    --eq-shadow: 0 1px 2px rgba(16,22,43,.06),0 4px 12px rgba(16,22,43,.05);
    --eq-shadow-lg: 0 8px 28px rgba(16,22,43,.14);
    --eq-mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
    --eq-sans: 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    /* bootstrap remap so untouched views inherit the palette */
    --bs-primary: #0E7C7B;
    --bs-primary-rgb: 14,124,123;
    --bs-secondary: #5A6480;
    --bs-secondary-rgb: 90,100,128;
    --bs-success: #1E7A4F;
    --bs-success-rgb: 30,122,79;
    --bs-danger: #B4322A;
    --bs-danger-rgb: 180,50,42;
    --bs-warning: #B26A00;
    --bs-warning-rgb: 178,106,0;
    --bs-info: #1F5F94;
    --bs-info-rgb: 31,95,148;
    --bs-body-color: #1A2138;
    --bs-body-bg: #F4F6FA;
    --bs-border-color: #E2E7F0;
    --bs-link-color: #0E7C7B;
    --bs-link-hover-color: #0A5F5E;
    --bs-border-radius: 6px;
    --bs-font-sans-serif: 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* dark mode — the topbar toggle in the old template sets this attribute */
[data-bs-theme="dark"] {
    --eq-canvas: #151B2E;
    --eq-surface: #1B2238;
    --eq-surface-2: #212942;
    --eq-line: #2C3550;
    --eq-line-strong: #3A4563;
    --eq-text: #E4E8F2;
    --eq-text-2: #A3ACC4;
    --eq-text-3: #7A849E;
    --bs-body-color: #E4E8F2;
    --bs-body-bg: #151B2E;
    --bs-border-color: #2C3550;
}

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

html {
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    background: var(--eq-canvas);
    color: var(--eq-text);
    font-family: var(--eq-sans);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--eq-text)
}

/* numerals — every amount, count and code -------------------------- */
.eq-num, .eq-money, td.eq-num, th.eq-num {
    font-family: var(--eq-mono);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

    .eq-money::before {
        content: '\20B9\2009'
    }

    .eq-money.bare::before {
        content: ''
    }

.eq-code {
    font-family: var(--eq-mono);
    font-size: .92em;
    letter-spacing: -.02em
}

/* =====================================================================
   1. SHELL
   ===================================================================== */
#layout-wrapper, .eq-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.eq-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.eq-content {
    padding: 16px clamp(18px, 3vw, 56px) 28px;
    flex: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto
}

/* the old template's sidebar/vertical shell is retired */
.app-menu, .vertical-menu, #scrollbar, .navbar-menu {
    display: none !important
}

.main-content {
    margin-left: 0 !important;
    width: 100% !important
}

.page-content {
    padding: 0 !important
}

/* =====================================================================
   2. TOP NAVIGATION BAND
   The slate that used to be a vertical rail, laid horizontally.
   ===================================================================== */
.eq-nav {
    background: var(--eq-ink);
    color: #C7CEE0;
    height: var(--eq-nav-h);
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 1040;
    padding: 0 14px;
    gap: 4px;
}

.eq-nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 14px;
    flex: 0 0 auto;
    min-width: 0
}

    .eq-nav-brand .mark {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: var(--eq-accent);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: -.03em;
        /*        overflow: hidden;*/
        overflow: visible;
        flex: 0 0 auto;
    }

        .eq-nav-brand .mark img {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

    .eq-nav-brand b {
        color: #fff;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0
    }

.eq-nav-scroll {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none
}

    .eq-nav-scroll::-webkit-scrollbar {
        display: none
    }

.eq-nav-item {
    position: relative;
    display: flex;
    align-items: stretch
}

.eq-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    color: #C7CEE0;
    font-size: 12.8px;
    font-weight: 500;
    white-space: nowrap;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2.5px solid transparent;
}

    .eq-nav-link i {
        font-size: 15px;
        opacity: .8
    }

    .eq-nav-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff
    }

    .eq-nav-item.open > .eq-nav-link,
    .eq-nav-link.active {
        color: #fff;
        border-bottom-color: var(--eq-accent);
        background: rgba(14,124,123,.16)
    }

    .eq-nav-link .caret {
        font-size: 9px;
        opacity: .55;
        margin-left: 1px
    }

/* mega panel */
.eq-mega {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: 0 0 var(--eq-radius) var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    padding: 10px;
    display: none;
    z-index: 1050;
}

.eq-nav-item.open .eq-mega {
    display: block
}

.eq-mega.wide {
    min-width: 620px;
    display: none
}

.eq-nav-item.open .eq-mega.wide {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2px 14px
}

.eq-mega.wide-2 {
    min-width: 430px
}

.eq-nav-item.open .eq-mega.wide-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2px 14px
}

/* Desktop dropdown fix: .eq-nav-scroll has overflow-x:auto, which also clips
   vertical overflow, so the absolute panels were cut off. Fixed positioning
   escapes that clipping; left is set from eyeq-app.js when a panel opens. */
@media (min-width:861px) {
    .eq-nav-scroll .eq-mega {
        position: fixed;
        top: var(--eq-nav-h);
        left: 0;
    }
}

.eq-mega-col {
    min-width: 0;
}

.eq-mega-label {
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eq-text-3);
}

.eq-mega a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--eq-radius-sm);
    color: var(--eq-text);
    font-size: 12.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .eq-mega a:hover {
        background: var(--eq-accent-soft);
        color: var(--eq-accent-dark)
    }

    .eq-mega a.active {
        background: var(--eq-accent-soft);
        color: var(--eq-accent-dark);
        font-weight: 600
    }

    .eq-mega a .dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: .35;
        flex: 0 0 auto
    }

    .eq-mega a:hover .dot, .eq-mega a.active .dot {
        opacity: 1
    }

.eq-mega hr {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid var(--eq-line)
}

/* right cluster */
.eq-nav-right {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding-left: 8px
}

.eq-nav-btn {
    width: 31px;
    height: 31px;
    border-radius: var(--eq-radius);
    border: 0;
    background: transparent;
    color: #C7CEE0;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 15px;
}

    .eq-nav-btn:hover {
        background: rgba(255,255,255,.09);
        color: #fff
    }

.eq-nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(255,255,255,.12);
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    color: #C7CEE0;
    font-family: inherit;
    height: 31px;
}

.eq-avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--eq-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    flex: 0 0 auto;
}

.eq-nav-user .who {
    text-align: left;
    line-height: 1.2
}

    .eq-nav-user .who b {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #fff
    }

    .eq-nav-user .who span {
        font-size: 10px;
        color: #8A93AC
    }

.eq-drop {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 216px;
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 1050;
}

.eq-nav-item.open .eq-drop {
    display: block
}

.eq-drop a, .eq-drop button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--eq-radius-sm);
    color: var(--eq-text);
    font-size: 13px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

    .eq-drop a:hover, .eq-drop button:hover {
        background: var(--eq-canvas)
    }

.eq-drop .head {
    padding: 7px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--eq-text-3)
}

.eq-drop hr {
    margin: 5px 4px;
    border: 0;
    border-top: 1px solid var(--eq-line)
}

.eq-drop .danger {
    color: var(--eq-danger)
}

/* burger — mobile only */
.eq-burger {
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    align-items: center;
    justify-content: center
}

/* =====================================================================
   3. CONTEXT BAR — the signature element.
   School, session, and today's live numbers, on every screen.
   ===================================================================== */
.eq-context {
    background: var(--eq-surface);
    border-bottom: 1px solid var(--eq-line);
    min-height: var(--eq-bar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 18px;
    position: sticky;
    top: var(--eq-nav-h);
    z-index: 1030;
    flex-wrap: wrap;
}

    .eq-context .eq-context-date {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--eq-text-2);
        white-space: nowrap
    }

    .eq-context .spacer {
        flex: 1
    }

.eq-session {
    display: flex;
    align-items: center;
    gap: 6px
}

    .eq-session select {
        border: 1px solid var(--eq-line-strong);
        border-radius: 100px;
        padding: 4px 26px 4px 11px;
        font-family: var(--eq-mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--eq-accent-dark);
        background: var(--eq-accent-soft);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A5F5E'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 7px center;
        background-size: 13px;
    }

/* today's live figures */
.eq-live {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap
}

.eq-live-cell {
    padding: 0 13px;
    border-left: 1px solid var(--eq-line);
    line-height: 1.25
}

    .eq-live-cell:first-child {
        border-left: 0
    }

    .eq-live-cell .k {
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--eq-text-3);
        display: block
    }

    .eq-live-cell .v {
        font-family: var(--eq-mono);
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums
    }

        .eq-live-cell .v.owed {
            color: var(--eq-amber)
        }

        .eq-live-cell .v.good {
            color: var(--eq-success)
        }

        .eq-live-cell .v.bad {
            color: var(--eq-danger)
        }

/* =====================================================================
   4. PAGE HEAD
   ===================================================================== */
.eq-head, .page-title-box {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
    margin-top: 5px;
    flex-wrap: wrap
}

    .eq-head h1, .page-title-box h4 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .eq-head .crumb {
        font-size: 11.5px;
        color: var(--eq-text-3);
        margin-bottom: 2px
    }

    .eq-head .actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
        flex-wrap: wrap
    }

.breadcrumb {
    font-size: 11.5px;
    margin: 0
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '\203A';
    color: var(--eq-text-3)
}

/* =====================================================================
   5. CARDS  (restyles bootstrap .card used across every old view)
   ===================================================================== */
.card, .eq-card {
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow);
    margin-bottom: 16px;
}

.card-header, .eq-card-head {
    padding: 11px 15px;
    border-bottom: 1px solid var(--eq-line);
    background: transparent;
    /*    display: flex;*/
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: var(--eq-radius) var(--eq-radius) 0 0;
}

    .card-header h4, .card-header h5, .card-title, .eq-card-head h2 {
        font-size: 14px;
        font-weight: 600;
        margin: 0
    }

    .eq-card-head .sub {
        font-size: 11.5px;
        color: var(--eq-text-3)
    }

    .eq-card-head .right, .card-header .right {
        margin-left: auto;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap
    }

.card-body, .eq-card-body {
    padding: 15px
}

    .eq-card-body.flush {
        padding: 0
    }

.card-footer {
    background: var(--eq-surface-2);
    border-top: 1px solid var(--eq-line);
    padding: 11px 15px
}

/* stat tiles */
.eq-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(178px,1fr));
    gap: 13px;
    /*    margin-bottom: 16px;
    margin-top: 16px*/
    margin: 5px;
}

.eq-stat {
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    padding: 13px 15px;
    box-shadow: var(--eq-shadow);
    position: relative;
    overflow: hidden;
}

    .eq-stat::after {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--eq-accent)
    }

    .eq-stat.owed::after {
        background: var(--eq-amber)
    }

    .eq-stat.good::after {
        background: var(--eq-success)
    }

    .eq-stat.bad::after {
        background: var(--eq-danger)
    }

    .eq-stat.info::after {
        background: var(--eq-info)
    }

    .eq-stat .k {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--eq-text-3)
    }

    .eq-stat .v {
        font-family: var(--eq-mono);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -.025em;
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
        display: block
    }

    .eq-stat .f {
        font-size: 11.5px;
        color: var(--eq-text-2);
        margin-top: 2px
    }

    .eq-stat a.v {
        color: var(--eq-text)
    }

/* =====================================================================
   6. TABLES
   ===================================================================== */
.table-responsive, .eq-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.table, table.eq-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0;
    color: var(--eq-text)
}

    .table > thead > tr > th, table.eq-grid thead th {
        background: var(--eq-surface-2);
        border-bottom: 1px solid var(--eq-line-strong);
        border-top: 0;
        padding: 9px 11px;
        text-align: left;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--eq-text-2);
        white-space: nowrap;
        vertical-align: middle;
    }

    .table > tbody > tr > td, table.eq-grid tbody td {
        padding: 8px 11px;
        border-bottom: 1px solid var(--eq-line);
        border-top: 0;
        vertical-align: middle;
    }

    .table > tbody > tr:hover, table.eq-grid tbody tr:hover {
        background: var(--eq-surface-2)
    }

    table.eq-grid tbody tr.is-selected {
        background: var(--eq-accent-soft)
    }

    .table > tfoot > tr > td, table.eq-grid tfoot td {
        padding: 9px 11px;
        border-top: 2px solid var(--eq-line-strong);
        font-weight: 600;
        background: var(--eq-surface-2);
    }

    .table-sm > :not(caption) > * > *, table.eq-grid.compact tbody td {
        padding: 5px 9px
    }

    table.eq-grid .w-1 {
        width: 1%;
        white-space: nowrap
    }

.table-bordered > :not(caption) > * > * {
    border-color: var(--eq-line)
}

/* sticky header for long registers */
.eq-table-wrap.sticky {
    max-height: 66vh;
    overflow-y: auto
}

    .eq-table-wrap.sticky thead th {
        position: sticky;
        top: 0;
        z-index: 2
    }

.eq-empty {
    padding: 42px 20px;
    text-align: center;
    color: var(--eq-text-3)
}

    .eq-empty b {
        display: block;
        color: var(--eq-text-2);
        font-size: 14px;
        margin-bottom: 3px;
        font-weight: 600
    }

/* =====================================================================
   7. FORMS
   ===================================================================== */
.eq-form {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 12px 15px
}

    .eq-form.two {
        grid-template-columns: repeat(2,1fr)
    }

    .eq-form.three {
        grid-template-columns: repeat(3,1fr)
    }

    .eq-form.four {
        grid-template-columns: repeat(4,1fr)
    }

.eq-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

    .eq-field.span-2 {
        grid-column: span 2
    }

    .eq-field.span-3 {
        grid-column: span 3
    }

    .eq-field.span-full {
        grid-column: 1/-1
    }

label, .form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--eq-text-2);
    margin-bottom: 0
}

    label .req, .req {
        color: var(--eq-danger)
    }

.eq-hint, .form-text {
    font-size: 11px;
    color: var(--eq-text-3)
}

.form-control, .form-select,
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], input[type=tel], input[type=search],
input[type=file], select, textarea {
    width: 100%;
    padding: 6.5px 10px;
    border: 1px solid var(--eq-line-strong);
    border-radius: var(--eq-radius);
    font-family: inherit;
    font-size: 13px;
    color: var(--eq-text);
    background: var(--eq-surface);
    transition: border-color .12s,box-shadow .12s;
}

    .form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--eq-accent);
        box-shadow: 0 0 0 3px rgba(14,124,123,.13);
    }

.form-control-sm, .form-select-sm {
    padding: 4px 8px;
    font-size: 12px
}

input[readonly], input:disabled, select:disabled, textarea:disabled,
.form-control:disabled, .form-control[readonly] {
    background: #F2F4F8;
    color: var(--eq-text-2);
    cursor: not-allowed;
}

[data-bs-theme="dark"] input[readonly], [data-bs-theme="dark"] .form-control:disabled {
    background: #252D47
}

input.eq-num-in {
    font-family: var(--eq-mono);
    text-align: center;
    font-variant-numeric: tabular-nums
}

textarea {
    min-height: 72px;
    resize: vertical
}

.form-check-input {
    width: 15px;
    height: 15px;
    margin-top: .15em;
    border-color: var(--eq-line-strong);
    cursor: pointer
}

    .form-check-input:checked {
        background-color: var(--eq-accent);
        border-color: var(--eq-accent)
    }

    .form-check-input:focus {
        border-color: var(--eq-accent);
        box-shadow: 0 0 0 3px rgba(14,124,123,.13)
    }

.eq-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 400;
    color: var(--eq-text)
}

    .eq-check input {
        width: 15px;
        height: 15px;
        accent-color: var(--eq-accent);
        cursor: pointer
    }

.eq-field-error, .text-danger, .field-validation-error {
    font-size: 11px;
    color: var(--eq-danger)
}

.input-error, .input-validation-error {
    border-color: var(--eq-danger) !important
}

fieldset.eq-block {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
    min-width: 0
}

    fieldset.eq-block > legend {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--eq-accent-dark);
        padding: 0 0 7px;
        margin-bottom: 11px;
        border-bottom: 1px solid var(--eq-line);
        width: 100%;
        float: none;
    }

.input-group-text {
    background: var(--eq-surface-2);
    border-color: var(--eq-line-strong);
    font-size: 12.5px;
    color: var(--eq-text-2)
}

/* =====================================================================
   8. BUTTONS
   ===================================================================== */
.btn, .eq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6.5px 14px;
    border-radius: var(--eq-radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s,border-color .12s,color .12s;
    line-height: 1.45;
}

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

    .btn-primary:hover, .eq-btn-primary:hover, .btn-primary:focus {
        background: var(--eq-accent-dark);
        border-color: var(--eq-accent-dark);
        color: #fff
    }

.btn-outline-primary {
    background: transparent;
    border-color: var(--eq-accent);
    color: var(--eq-accent)
}

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

.btn-secondary, .btn-light, .eq-btn-outline {
    background: var(--eq-surface);
    border-color: var(--eq-line-strong);
    color: var(--eq-text);
}

    .btn-secondary:hover, .btn-light:hover, .eq-btn-outline:hover {
        background: var(--eq-canvas);
        border-color: var(--eq-text-3);
        color: var(--eq-text)
    }

.btn-success {
    background: var(--eq-success);
    border-color: var(--eq-success);
    color: #fff
}

    .btn-success:hover {
        background: #166040;
        border-color: #166040;
        color: #fff
    }

.btn-danger {
    background: var(--eq-danger);
    border-color: var(--eq-danger);
    color: #fff
}

    .btn-danger:hover {
        background: #93261F;
        border-color: #93261F;
        color: #fff
    }

.btn-warning {
    background: var(--eq-amber);
    border-color: var(--eq-amber);
    color: #fff
}

    .btn-warning:hover {
        background: #8F5500;
        border-color: #8F5500;
        color: #fff
    }

.btn-info {
    background: var(--eq-info);
    border-color: var(--eq-info);
    color: #fff
}

.eq-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--eq-text-2)
}

    .eq-btn-ghost:hover {
        background: var(--eq-canvas);
        color: var(--eq-text)
    }

.btn-sm, .eq-btn-sm {
    padding: 4px 9px;
    font-size: 11.5px
}

.btn-lg, .eq-btn-lg {
    padding: 9px 19px;
    font-size: 14px
}

.btn:disabled, .eq-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.eq-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

    .eq-btn-row.end {
        justify-content: flex-end
    }

/* ---- "Go to" quick-action strip (dashboard, sits under the stat cards) ---- */
.eq-goto-strip {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow);
    padding: 12px;
    margin-bottom: 16px;
}

.eq-goto-btn {
    text-align: center;
    padding: 12px 8px;
    border: 1px solid var(--eq-line-strong);
    border-radius: 10px;
    background: var(--eq-surface);
    color: var(--eq-text);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

    .eq-goto-btn:hover {
        border-color: var(--eq-accent);
        color: var(--eq-accent-dark);
        background: var(--eq-accent-soft);
        text-decoration: none;
    }

    .eq-goto-btn.active {
        border-color: var(--eq-accent);
        background: var(--eq-accent-soft);
        color: var(--eq-accent-dark);
        font-weight: 700;
        box-shadow: 0 0 0 1px var(--eq-accent) inset;
    }

    .eq-goto-btn.disabled {
        border-style: dashed;
        color: var(--eq-text-3);
        background: var(--eq-surface-2);
        opacity: .8;
        cursor: not-allowed;
        pointer-events: none;
    }

/* below ~1180px, 10 real columns get too cramped to read — scroll
   the strip horizontally instead of wrapping to a second row */
@media (max-width: 1180px) {
    .eq-goto-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .eq-goto-btn {
        flex: 0 0 auto;
        min-width: 128px;
        white-space: normal;
    }
}

.eq-icon-btn {
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid var(--eq-line-strong);
    background: var(--eq-surface);
    border-radius: var(--eq-radius);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    color: var(--eq-text-2);
    font-size: 14px;
}

    .eq-icon-btn:hover {
        background: var(--eq-canvas);
        color: var(--eq-text);
        border-color: var(--eq-text-3)
    }

    .eq-icon-btn.danger:hover {
        background: var(--eq-danger-soft);
        color: var(--eq-danger);
        border-color: var(--eq-danger)
    }

/* =====================================================================
   9. BADGES / ALERTS
   ===================================================================== */
.badge, .eq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 600;
    background: #EEF1F6;
    color: var(--eq-text-2);
    white-space: nowrap;
}

    .eq-badge.teal, .badge.bg-primary {
        background: var(--eq-accent-soft) !important;
        color: var(--eq-accent-dark) !important
    }

    .eq-badge.amber, .badge.bg-warning {
        background: var(--eq-amber-soft) !important;
        color: var(--eq-amber) !important
    }

    .eq-badge.green, .badge.bg-success {
        background: var(--eq-success-soft) !important;
        color: var(--eq-success) !important
    }

    .eq-badge.red, .badge.bg-danger {
        background: var(--eq-danger-soft) !important;
        color: var(--eq-danger) !important
    }

    .eq-badge.blue, .badge.bg-info {
        background: var(--eq-info-soft) !important;
        color: var(--eq-info) !important
    }

    .eq-badge.grey, .badge.bg-secondary {
        background: #EEF1F6 !important;
        color: var(--eq-text-3) !important
    }

.alert {
    padding: 10px 14px;
    border-radius: var(--eq-radius);
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid
}

.alert-success {
    background: var(--eq-success-soft);
    border-color: #B8DFCA;
    color: #14603C
}

.alert-danger {
    background: var(--eq-danger-soft);
    border-color: #EFC3BF;
    color: #8E251E
}

.alert-info {
    background: var(--eq-accent-soft);
    border-color: #B9DEDC;
    color: var(--eq-accent-dark)
}

.alert-warning {
    background: var(--eq-amber-soft);
    border-color: #EFD5A8;
    color: var(--eq-amber)
}

/* =====================================================================
   10. FILTER BAR / PAGER / TABS
   ===================================================================== */
.eq-filter {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 11px 15px;
    background: var(--eq-surface-2);
    border-bottom: 1px solid var(--eq-line);
}

    .eq-filter .eq-field {
        min-width: 145px;
        flex: 0 1 auto
    }

        .eq-filter .eq-field.grow {
            flex: 1 1 210px
        }

    .eq-filter .eq-btn-row {
        margin-left: auto
    }

.eq-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-top: 1px solid var(--eq-line);
    flex-wrap: wrap
}

    .eq-pager .count {
        font-size: 12px;
        color: var(--eq-text-2)
    }

    .eq-pager .pages {
        margin-left: auto;
        display: flex;
        gap: 4px
    }

        .eq-pager .pages a, .eq-pager .pages span {
            min-width: 28px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid var(--eq-line-strong);
            border-radius: var(--eq-radius);
            display: grid;
            place-items: center;
            font-size: 12px;
            font-family: var(--eq-mono);
            color: var(--eq-text-2);
            background: var(--eq-surface);
        }

            .eq-pager .pages a:hover {
                border-color: var(--eq-accent);
                color: var(--eq-accent)
            }

        .eq-pager .pages .on {
            background: var(--eq-accent);
            border-color: var(--eq-accent);
            color: #fff;
            font-weight: 600
        }

.nav-tabs, .eq-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--eq-line);
    margin-bottom: 15px;
    overflow-x: auto;
    flex-wrap: nowrap
}

    .nav-tabs .nav-link, .eq-tabs a {
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 500;
        color: var(--eq-text-2);
        border: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        background: none;
        border-radius: 0;
    }

        .nav-tabs .nav-link:hover, .eq-tabs a:hover {
            color: var(--eq-text);
            border-color: transparent;
            border-bottom-color: var(--eq-line-strong)
        }

        .nav-tabs .nav-link.active, .eq-tabs a.active {
            color: var(--eq-accent-dark);
            border-bottom-color: var(--eq-accent);
            font-weight: 600;
            background: none;
        }

/* =====================================================================
   11. MODALS / DROPDOWNS (bootstrap)
   ===================================================================== */
.modal-content {
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    background: var(--eq-surface)
}

.modal-header {
    border-bottom: 1px solid var(--eq-line);
    padding: 12px 16px
}

.modal-title {
    font-size: 14.5px;
    font-weight: 600
}

.modal-body {
    padding: 16px
}

.modal-footer {
    border-top: 1px solid var(--eq-line);
    padding: 11px 16px
}

.dropdown-menu {
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg);
    padding: 5px;
    font-size: 13px;
    background: var(--eq-surface);
}

.dropdown-item {
    border-radius: var(--eq-radius-sm);
    padding: 6px 10px;
    color: var(--eq-text)
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: var(--eq-canvas);
        color: var(--eq-text)
    }

/* DataTables, used by several existing report screens */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--eq-line-strong);
    border-radius: var(--eq-radius);
    padding: 5px 9px;
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--eq-accent) !important;
    border-color: var(--eq-accent) !important;
    color: #fff !important;
}

/* =====================================================================
   12. PRINT
   ===================================================================== */
.eq-sheet {
    background: #fff;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 14mm;
    box-shadow: var(--eq-shadow)
}

    .eq-sheet.half {
        min-height: 148mm
    }

@media print {
    .eq-nav, .eq-context, .eq-head .actions, .eq-filter, .eq-pager, .no-print, footer {
        display: none !important
    }

    body {
        background: #fff;
        font-size: 11px
    }

    .eq-content {
        padding: 0;
        max-width: none
    }

    .card, .eq-card {
        border: none;
        box-shadow: none;
        margin: 0
    }

    .eq-sheet {
        width: auto;
        box-shadow: none;
        padding: 0;
        margin: 0
    }

    .table > thead > tr > th {
        background: #fff !important;
        -webkit-print-color-adjust: exact
    }

    a[href]::after {
        content: none !important
    }
}

/* =====================================================================
   13. FOOTER + UTILITIES
   ===================================================================== */
.footer, .eq-footer {
    background: transparent;
    border-top: 1px solid var(--eq-line);
    padding: 12px 18px;
    font-size: 11.5px;
    color: var(--eq-text-3);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    left: 0;
    position: static;
    height: auto;
}

    .eq-footer .spacer {
        flex: 1
    }

.eq-muted {
    color: var(--eq-text-3)
}

.eq-small {
    font-size: 11.5px
}

.eq-strong {
    font-weight: 600
}

.eq-owed {
    color: var(--eq-amber);
    font-weight: 600
}

.eq-clear {
    color: var(--eq-success);
    font-weight: 600
}

.eq-due {
    color: var(--eq-danger);
    font-weight: 600
}

.eq-nowrap {
    white-space: nowrap
}

.eq-mt-1 {
    margin-top: 8px
}

.eq-mt-2 {
    margin-top: 16px
}

.eq-mt-3 {
    margin-top: 24px
}

.eq-mb-1 {
    margin-bottom: 8px
}

.eq-mb-2 {
    margin-bottom: 16px
}

.eq-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.eq-grow {
    flex: 1;
    min-width: 0
}

/* simple bar/donut used by the dashboard, no chart library needed */
.eq-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px
}

    .eq-bar-row .lbl {
        width: 104px;
        font-size: 12px;
        color: var(--eq-text-2);
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 0 auto
    }

.eq-bar-track {
    flex: 1;
    background: #EEF1F6;
    border-radius: 3px;
    height: 16px;
    overflow: hidden;
    min-width: 40px
}

[data-bs-theme="dark"] .eq-bar-track {
    background: #2C3550
}

.eq-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--eq-accent)
}

.eq-bar-row .val {
    width: 84px;
    font-family: var(--eq-mono);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto
}

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width:1200px) {
    .eq-live-cell {
        padding: 0 10px
    }

    .eq-form.four {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:992px) {
    .eq-nav-user .who {
        display: none
    }

    .eq-live-cell:nth-child(n+4) {
        display: none
    }

    .eq-form.three, .eq-form.four {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:860px) {
    .eq-burger {
        display: inline-flex
    }

    /* .eq-nav-scroll leaves normal flow below (position:fixed for the
       drawer), so it no longer acts as the flex:1 spacer that pushes the
       profile cluster to the right. Let the brand take the freed space
       instead, and push the profile cluster to the right explicitly. */
    .eq-nav-brand {
        flex: 1 1 auto;
        padding-right: 8px
    }

        .eq-nav-brand b {
            display: inline-block;
            max-width: 100%
        }

    .eq-nav-right {
        margin-left: auto
    }

    .eq-nav-scroll {
        position: fixed;
        inset: var(--eq-nav-h) auto 0 0;
        width: 272px;
        background: var(--eq-ink);
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform .18s ease;
        padding: 8px 0 28px;
        z-index: 1045;
    }

    body.eq-nav-open .eq-nav-scroll {
        transform: none
    }

    body.eq-nav-open::after {
        content: '';
        position: fixed;
        inset: var(--eq-nav-h) 0 0 0;
        background: rgba(16,22,43,.45);
        /* Must stay below .eq-nav's own z-index (1040): .eq-nav-scroll is a
           position:fixed child of .eq-nav, so it is painted inside .eq-nav's
           stacking context, not the root one. A backdrop z-index above 1040
           (this was 1042) sat on the root stacking context and painted over
           the whole drawer, so the menu looked like it wasn't opening. */
        z-index: 1035
    }

    .eq-nav-item {
        flex-direction: column
    }

    .eq-nav-link {
        padding: 10px 18px;
        border-bottom: 0;
        border-left: 2.5px solid transparent;
        justify-content: flex-start
    }

        .eq-nav-link .caret {
            margin-left: auto
        }

    .eq-nav-item.open > .eq-nav-link {
        border-bottom: 0;
        border-left-color: var(--eq-accent)
    }

    .eq-mega, .eq-mega.wide, .eq-mega.wide-2 {
        position: static;
        min-width: 0;
        width: 100%;
        background: rgba(0,0,0,.22);
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 2px 0 8px;
    }

    .eq-nav-item.open .eq-mega.wide, .eq-nav-item.open .eq-mega.wide-2 {
        display: block
    }

    .eq-mega a {
        color: #C7CEE0;
        padding: 7px 18px 7px 34px;
        border-radius: 0
    }

        .eq-mega a:hover, .eq-mega a.active {
            background: rgba(255,255,255,.08);
            color: #fff
        }

    .eq-mega-label {
        color: #6C7694;
        padding: 9px 18px 3px
    }

    .eq-mega hr {
        border-color: rgba(255,255,255,.1)
    }

    .eq-context {
        padding: 6px 12px;
        gap: 10px
    }

    .eq-content {
        padding: 12px
    }

    .eq-form, .eq-form.two, .eq-form.three, .eq-form.four {
        grid-template-columns: 1fr
    }

    .eq-field.span-2, .eq-field.span-3 {
        grid-column: span 1
    }

    .eq-filter .eq-btn-row {
        margin-left: 0;
        width: 100%
    }

    .eq-head h1, .page-title-box h4 {
        font-size: 16px
    }
}

@media (max-width:620px) {
    .eq-live {
        width: 100%;
        order: 3
    }

    .eq-live-cell {
        padding: 0 11px 0 0;
        border-left: 0;
        border-right: 1px solid var(--eq-line)
    }

        .eq-live-cell:last-child {
            border-right: 0
        }

        .eq-live-cell:nth-child(n+4) {
            display: block
        }

    .eq-stats {
        grid-template-columns: repeat(2,1fr);
        gap: 10px
    }

    .eq-stat .v {
        font-size: 18px
    }

    .table, table.eq-grid {
        font-size: 12.5px
    }

        .table > tbody > tr > td, table.eq-grid tbody td {
            padding: 7px 9px
        }

    .eq-context .school b {
        max-width: 55vw
    }
}

@media (max-width:420px) {
    .eq-stats {
        grid-template-columns: 1fr
    }
}

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

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

/* =====================================================================
   15. CONVERTED VIEWS
   Classes added by _Tools/convert-theme.py across the 311 existing views.
   They sit next to the original Bootstrap classes, never replace them,
   so every JS selector in the app keeps working.
   ===================================================================== */

/* aliases used by the retokenised per-view <style> blocks */
:root {
    --eq-sunken: #EEF1F7;
    --eq-ok: var(--eq-success);
    --eq-bad: var(--eq-danger);
    --eq-warn: var(--eq-amber);
    --eq-bad-soft: var(--eq-danger-soft);
    --eq-warm-soft: var(--eq-amber-soft);
}

[data-bs-theme="dark"] {
    --eq-sunken: #141A2C;
}

/* ---- 15.1 cards ---------------------------------------------------- */
.eq-card {
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow);
    margin-bottom: 14px;
    overflow: visible;
}

.eq-card-head {
    background: transparent;
    border-bottom: 1px solid var(--eq-line);
    padding: 10px 14px;
    border-radius: var(--eq-radius) var(--eq-radius) 0 0;
}

    .eq-card-head h4, .eq-card-head h5, .eq-card-head h3 {
        font-size: 15px;
        font-weight: 650;
        letter-spacing: -.01em;
        color: var(--eq-text);
        margin: 0;
    }

.eq-card-body {
    padding: 14px
}

/* The old markup nests a card inside a card body and gives the inner one a
   heavy drop shadow. Flatten it: the outer card owns the elevation, the
   inner one becomes a quiet form block. */
.eq-panel {
    background: var(--eq-surface-2) !important;
    border: 1px solid var(--eq-line) !important;
    border-radius: var(--eq-radius) !important;
    box-shadow: none !important;
    margin-bottom: 12px;
}

.eq-card .eq-panel, .eq-card-body .eq-card {
    box-shadow: none !important
}

.eq-panel > .eq-card-body {
    padding: 12px 14px
}

.eq-preview {
    margin-top: 2px
}

.eq-surface {
    background: var(--eq-surface)
}

/* ---- 15.2 grids ---------------------------------------------------- */
.eq-grid {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.8px;
    background: var(--eq-surface);
}

    .eq-grid > :not(caption) > * > * {
        background: transparent
    }

    .eq-grid th {
        background: var(--eq-sunken);
        color: var(--eq-text-2);
        font-size: 10.8px;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
        padding: 7px 9px;
        border: 0;
        border-bottom: 1px solid var(--eq-line-strong);
        white-space: nowrap;
        vertical-align: middle;
    }

    .eq-grid td {
        padding: 5px 9px;
        border: 0;
        border-bottom: 1px solid var(--eq-line);
        vertical-align: middle;
        color: var(--eq-text);
    }

    .eq-grid tbody tr:hover > td {
        background: var(--eq-accent-soft)
    }

    .eq-grid tbody tr:last-child > td {
        border-bottom: 0
    }

    .eq-grid tfoot td, .eq-grid .total td {
        background: var(--eq-sunken);
        font-weight: 700;
        border-top: 1.5px solid var(--eq-line-strong);
    }
    /* figures line up down the column */
    .eq-grid td input[type=text], .eq-grid td input[type=number] {
        font-family: var(--eq-mono);
        font-variant-numeric: tabular-nums;
        text-align: center;
        padding: 3px 5px;
        height: 26px;
        font-size: 12.2px;
    }

.eq-thead {
    --x: 0
}

.eq-scroll {
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    background: var(--eq-surface)
}

    .eq-scroll > .eq-grid th {
        position: sticky;
        top: 0;
        z-index: 2
    }

/* The frozen column. 89 views pin it right, 59 pin left — that lived in the
   per-view <style> block the converter deletes, so the side is carried on the
   element as eq-sticky-left / eq-sticky-right instead. */
.eq-sticky-col {
    position: sticky;
    z-index: 3;
    background: var(--eq-surface);
}

.eq-sticky-right {
    right: 0;
    left: auto;
    box-shadow: -6px 0 8px -6px rgba(16,22,43,.22)
}

.eq-sticky-left {
    left: 0;
    right: auto;
    box-shadow: 6px 0 8px -6px rgba(16,22,43,.22)
}

th.eq-sticky-col {
    background: var(--eq-sunken)
}

.eq-grid tbody tr:hover > .eq-sticky-col {
    background: var(--eq-accent-soft)
}

/* ---- 15.3 forms ---------------------------------------------------- */
.eq-field {
    margin-bottom: 9px
}

.eq-label {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    font-size: 11.2px;
    font-weight: 650;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--eq-text-2);
}

.eq-field .eq-label {
    margin-left: 0 !important
}

.eq-input {
    height: 33px;
    padding: 5px 9px;
    font-size: 13px;
    background: var(--eq-surface);
    color: var(--eq-text);
    border: 1px solid var(--eq-line-strong);
    border-radius: var(--eq-radius-sm);
    transition: border-color .12s,box-shadow .12s;
}

    .eq-input:focus {
        border-color: var(--eq-accent);
        box-shadow: 0 0 0 3px var(--eq-accent-soft);
        outline: 0;
    }

textarea.eq-input {
    height: auto;
    min-height: 62px
}

.eq-check {
    width: 15px;
    height: 15px;
    border-color: var(--eq-line-strong);
    cursor: pointer
}

    .eq-check:checked {
        background-color: var(--eq-accent);
        border-color: var(--eq-accent)
    }

/* A read-only box is a computed result, not somewhere to type.
   These were grey, green and white boxes that all looked editable. */
.eq-ro, .eq-input[readonly] {
    background: var(--eq-sunken) !important;
    border-color: var(--eq-line) !important;
    color: var(--eq-text-2);
    font-family: var(--eq-mono);
    font-variant-numeric: tabular-nums;
    cursor: default;
    box-shadow: none !important;
}

    .eq-ro:focus {
        border-color: var(--eq-line) !important;
        box-shadow: none !important
    }

.eq-derived {
    background: var(--eq-sunken) !important;
    color: var(--eq-text-2) !important;
    border-color: var(--eq-line) !important;
    font-weight: 600;
}

.eq-derived-ok {
    background: var(--eq-success-soft) !important;
    color: var(--eq-success) !important;
    border-color: rgba(30,122,79,.3) !important;
    font-weight: 700;
}

tr.eq-derived-ok > td {
    background: var(--eq-success-soft) !important
}

/* ---- 15.4 buttons -------------------------------------------------- */
.eq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 33px;
    padding: 0 13px;
    font-size: 12.8px;
    font-weight: 600;
    border-radius: var(--eq-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s,border-color .12s;
}

    .eq-btn i {
        font-size: 14px;
        line-height: 1
    }

.eq-btn-sm {
    height: 27px;
    padding: 0 8px;
    font-size: 12px
}

    .eq-btn-sm i {
        font-size: 13px
    }

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

    .eq-btn-primary:hover {
        background: var(--eq-accent-dark) !important;
        border-color: var(--eq-accent-dark) !important;
        color: #fff !important
    }

.eq-btn-secondary {
    background: var(--eq-ink-2) !important;
    border-color: var(--eq-ink-2) !important;
    color: #fff !important
}

    .eq-btn-secondary:hover {
        background: var(--eq-ink) !important;
        color: #fff !important
    }

.eq-btn-danger {
    background: var(--eq-danger) !important;
    border-color: var(--eq-danger) !important;
    color: #fff !important
}

    .eq-btn-danger:hover {
        background: #93261F !important;
        color: #fff !important
    }

.eq-btn-info {
    background: var(--eq-info) !important;
    border-color: var(--eq-info) !important;
    color: #fff !important
}

.eq-btn-warn {
    background: var(--eq-amber) !important;
    border-color: var(--eq-amber) !important;
    color: #fff !important
}
/* Close / Cancel is not a destructive action and should not shout */
.eq-btn-ghost {
    background: var(--eq-surface) !important;
    color: var(--eq-text-2) !important;
    border-color: var(--eq-line-strong) !important;
}

    .eq-btn-ghost:hover {
        background: var(--eq-canvas) !important;
        color: var(--eq-text) !important;
        border-color: var(--eq-text-3) !important
    }

.eq-btn-sm.eq-btn-secondary, .eq-btn-sm.eq-btn-danger {
    background: transparent !important;
    border-color: var(--eq-line-strong) !important;
}

.eq-btn-sm.eq-btn-secondary {
    color: var(--eq-accent) !important
}

.eq-btn-sm.eq-btn-danger {
    color: var(--eq-danger) !important
}

.eq-btn-sm.eq-btn-secondary:hover {
    background: var(--eq-accent-soft) !important;
    border-color: var(--eq-accent) !important
}

.eq-btn-sm.eq-btn-danger:hover {
    background: var(--eq-danger-soft) !important;
    border-color: var(--eq-danger) !important
}

/* ---- 15.5 chrome --------------------------------------------------- */
.eq-badge {
    font-size: 10.6px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
}

.eq-alert {
    border: 1px solid var(--eq-line);
    border-left-width: 3px;
    border-radius: var(--eq-radius-sm);
    padding: 9px 12px;
    font-size: 13px
}

.eq-tabs {
    border-bottom: 1px solid var(--eq-line);
    gap: 2px
}

.eq-modal {
    border: 0;
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow-lg)
}

/* the loader overlay, previously a hardcoded translucent white box */
.eq-loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2000;
    padding: 18px 22px;
    border-radius: var(--eq-radius);
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    box-shadow: var(--eq-shadow-lg);
    text-align: center;
    color: var(--eq-text-2);
}

.eq-spin {
    color: var(--eq-accent) !important;
    width: 1.6rem;
    height: 1.6rem
}

/* ---- 15.6 semantic tints (were inline colour literals) -------------- */
.eq-tint-info {
    background: var(--eq-info-soft) !important;
    color: var(--eq-info) !important
}

.eq-tint-warm {
    background: var(--eq-amber-soft) !important;
    color: var(--eq-amber) !important
}

.eq-tint-bad {
    background: var(--eq-danger-soft) !important;
    color: var(--eq-danger) !important
}

.eq-tint-mute {
    background: var(--eq-sunken) !important;
    color: var(--eq-text-2) !important
}

.eq-text-ok {
    color: var(--eq-success) !important
}

.eq-text-bad {
    color: var(--eq-danger) !important
}

.eq-text-warn {
    color: var(--eq-amber) !important
}

.eq-text-ink {
    color: var(--eq-text) !important
}

.eq-text-inv {
    color: #fff !important
}

/* ---- 15.7 density + print ------------------------------------------ */
.eq-card .row {
    --bs-gutter-x: .75rem
}

.eq-card-body > .row > [class^="col"] {
    margin-bottom: 2px
}

@media print {
    .eq-card, .eq-panel, .eq-scroll {
        box-shadow: none !important;
        border: 0 !important
    }

    .eq-sticky-col, .eq-sticky-left, .eq-sticky-right {
        position: static !important;
        box-shadow: none !important
    }

    .eq-grid th {
        background: #EEE !important;
        color: #000 !important
    }

    .eq-grid td, .eq-grid th {
        border: 1px solid #999 !important
    }

    .eq-btn, .eq-loader {
        display: none !important
    }
}

@media (max-width:620px) {
    .eq-card-body {
        padding: 10px
    }

    .eq-grid {
        font-size: 12px
    }

    .eq-sticky-col, .eq-sticky-left, .eq-sticky-right {
        position: static;
        box-shadow: none
    }

    .eq-btn {
        width: auto
    }
}