:root {
    --bg-ink: #1e1d1b;
    --bg-muted: #6b6a65;
    --bg-rule: #dcdad2;
    --bg-paper: #ffffff;
    --bg-canvas: #f4f2ec;
    --bg-teal: #0f6e56;
    --bg-teal-dark: #0b5442;
    --bg-teal-soft: #e1f5ee;
    --bg-coral: #993c1d;
    --bg-amber: #854f0b;
}

body {
    background: var(--bg-canvas);
    color: var(--bg-ink);
    font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- buttons */
.btn-primary {
    --bs-btn-bg: var(--bg-teal);
    --bs-btn-border-color: var(--bg-teal);
    --bs-btn-hover-bg: var(--bg-teal-dark);
    --bs-btn-hover-border-color: var(--bg-teal-dark);
    --bs-btn-active-bg: var(--bg-teal-dark);
    --bs-btn-active-border-color: var(--bg-teal-dark);
    --bs-btn-disabled-bg: var(--bg-teal);
    --bs-btn-disabled-border-color: var(--bg-teal);
    font-weight: 500;
}

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

/* ---------------------------------------------------------------- auth shell */
.auth-body { min-height: 100vh; }

.auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .auth-shell { grid-template-columns: 1.05fr 1fr; }
}

.auth-brand {
    background: linear-gradient(160deg, #0d3d31 0%, #0f6e56 100%);
    color: #eaf6f2;
    padding: 56px 60px;
    flex-direction: column;
    justify-content: space-between;
}

.brand-mark {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .8;
}

.brand-heading {
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 18px 0 18px;
    max-width: 15ch;
}

.brand-copy {
    font-size: 1rem;
    line-height: 1.7;
    opacity: .85;
    max-width: 46ch;
    margin-bottom: 26px;
}

.brand-list { list-style: none; padding: 0; margin: 0; }

.brand-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    font-size: .95rem;
    opacity: .92;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.brand-list i { margin-top: 3px; opacity: .8; }

.brand-foot {
    font-size: .82rem;
    opacity: .6;
    letter-spacing: .04em;
}

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    background: var(--bg-paper);
    width: 100%;
    max-width: 480px;
    border-radius: 14px;
    padding: 40px;
    box-shadow: 0 1px 2px rgba(30, 29, 27, .05), 0 12px 32px rgba(30, 29, 27, .07);
}

@media (max-width: 575px) {
    .auth-card { padding: 28px 22px; border-radius: 10px; }
}

.auth-head { margin-bottom: 26px; }

.auth-head h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.auth-head p {
    color: var(--bg-muted);
    font-size: .95rem;
    margin: 0;
}

.auth-foot {
    text-align: center;
    margin: 22px 0 0;
    font-size: .92rem;
    color: var(--bg-muted);
}

/* ---------------------------------------------------------------- forms */
.section-label {
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bg-rule);
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .35rem;
}

.form-control, .input-group-text {
    border-color: #cfcdc4;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.form-control:focus {
    border-color: var(--bg-teal);
    box-shadow: 0 0 0 .18rem rgba(15, 110, 86, .14);
}

.form-hint {
    font-size: .8rem;
    color: var(--bg-muted);
    margin-top: .3rem;
}

.field-error, .field-validation-error {
    display: block;
    font-size: .82rem;
    color: #b02a37;
    margin-top: .3rem;
}

.input-validation-error { border-color: #b02a37; }

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

.otp-input {
    font-size: 1.7rem;
    letter-spacing: .55em;
    text-align: center;
    font-weight: 600;
    padding: .7rem 0 .7rem .55em;
}

/* ---------------------------------------------------------------- marks */
.success-mark, .warn-mark {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.success-mark { background: var(--bg-teal-soft); color: var(--bg-teal); }
.warn-mark { background: #faeeda; color: var(--bg-amber); }

/* ---------------------------------------------------------------- app chrome */
.app-navbar {
    background: var(--bg-paper);
    border-bottom: 1px solid var(--bg-rule);
}

.app-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--bg-teal);
}

.eyebrow {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bg-muted);
}

.page-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 4px 0 0;
}

.role-badge {
    background: var(--bg-teal-soft);
    color: var(--bg-teal);
    font-weight: 500;
    padding: .5em .9em;
}

.stat-card {
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 12px;
    padding: 20px 22px;
    height: 100%;
}

.stat-card--alert { border-left: 3px solid var(--bg-coral); }

.stat-label {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 6px 0 2px;
}

.stat-note {
    font-size: .82rem;
    color: var(--bg-muted);
}

/* ================================================================ app shell */
.app-body { background: var(--bg-canvas); }

/* ---------------------------------------------------------------- top menu bar */
.app-menubar {
    background: linear-gradient(100deg, #0d3d31 0%, #0f6e56 100%);
    color: #eaf6f2;
    z-index: 1030;
}

/* nowrap on desktop. Wrapping is what put the search and user block on a second row:
   the nav claimed the remaining width and pushed them off the end. */
.menubar-inner {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 0 16px;
    min-height: 50px;
    flex-wrap: nowrap;
}

.menubar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    text-decoration: none;
    padding-right: 12px;
    margin-right: 2px;
    border-right: 1px solid rgba(255, 255, 255, .16);
    white-space: nowrap;
    flex: 0 0 auto;
}

.menubar-brand:hover { color: #fff; }
.menubar-brand i { opacity: .85; }

.menubar-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Visible by default. Only the small-screen rule hides it, and the toggle re-opens it.
   flex 0 1 auto so it takes what it needs and no more, leaving the right side its space. */
.menubar-nav { flex: 0 1 auto; min-width: 0; display: block; }

.menu-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    height: 100%;
}

.menu-list > li { display: flex; }

.menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .86);
    font-size: .86rem;
    font-weight: 500;
    padding: 0 11px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.menu-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }

/* The open group stays lit, so you can see where you are without opening the menu. */
.menu-link.is-open {
    background: rgba(255, 255, 255, .13);
    color: #fff;
    border-bottom-color: #fff;
}

.menu-link i:first-child { opacity: .8; font-size: .95rem; }
.menu-link .caret { font-size: .6rem; opacity: .6; margin-left: 1px; }

.menubar-nav .dropdown-menu {
    border: 1px solid var(--bg-rule);
    border-radius: 0 0 10px 10px;
    border-top: 0;
    box-shadow: 0 8px 24px rgba(30, 29, 27, .16);
    padding: 6px;
    margin-top: 0;
    min-width: 236px;
}

.menubar-nav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    padding: 8px 11px;
    font-size: .9rem;
    color: var(--bg-ink);
}

.menubar-nav .dropdown-item:hover { background: var(--bg-teal-soft); color: var(--bg-teal); }
.menubar-nav .dropdown-item i { opacity: .65; width: 16px; }

.menubar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.menubar-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: .8rem;
    color: #eaf6f2;
    white-space: nowrap;
}

.menubar-user {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 6px;
    padding: 5px 11px;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}

.menubar-user:hover { background: rgba(255, 255, 255, .2); }

.app-menubar .bell-dot { border: 2px solid #0f6e56; }

.app-menubar .btn-light {
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
}

.app-menubar .btn-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.app-main {
    padding: 24px 26px 60px;
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .menubar-inner { flex-wrap: wrap; align-items: center; }
    .menubar-nav { flex-basis: 100%; display: none; }
    .menubar-nav.is-open { display: block; }
    .menu-list { flex-direction: column; align-items: stretch; padding-bottom: 8px; }
    .menu-list { height: auto; }
    .menu-list > li { display: block; }
    .menu-link { border-bottom: 0; border-radius: 6px; padding: 10px 12px; }
    .menubar-nav .dropdown-menu { border-radius: 8px; border-top: 1px solid var(--bg-rule); }
    .app-main { padding: 18px 14px 48px; }
}

/* ---------------------------------------------------------------- page furniture */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-sub { color: var(--bg-muted); font-size: .93rem; margin: 6px 0 0; max-width: 62ch; }

.big-count { font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--bg-coral); }

.card-panel {
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 12px;
    padding: 20px 22px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-title { font-size: 1.02rem; font-weight: 600; margin: 0; }

.filter-bar {
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

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

/* ---------------------------------------------------------------- tables */
.data-table thead th {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--bg-ink);
    white-space: nowrap;
}

.data-table td, .data-table th { padding: .62rem .75rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }

.mono { font-family: ui-monospace, Consolas, monospace; }

.badge-soft { background: #f0eee7; color: #5f5e5a; font-weight: 500; }
.badge-ok { background: var(--bg-teal-soft); color: var(--bg-teal); font-weight: 500; }
.badge-warn { background: #faeeda; color: var(--bg-amber); font-weight: 500; }
.badge-bad { background: #faece7; color: var(--bg-coral); font-weight: 500; }

/* ---------------------------------------------------------------- share bars */
.share-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.share-name { width: 190px; flex: 0 0 190px; font-size: .92rem; }

.share-bar {
    flex: 1 1 auto;
    height: 9px;
    background: #f0eee7;
    border-radius: 5px;
    overflow: hidden;
    min-width: 60px;
}

.share-fill { height: 100%; background: var(--bg-teal); border-radius: 5px; }
.share-fill--dealer { background: var(--bg-coral); }
.share-value { width: 96px; flex: 0 0 96px; text-align: right; font-size: .9rem; font-weight: 600; }
.share-value .text-muted { font-weight: 400; font-size: .82rem; margin-left: 5px; }

/* ---------------------------------------------------------------- assignment bar */
.assign-bar {
    position: sticky;
    top: 57px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.assign-bar.is-active {
    border-color: var(--bg-teal);
    box-shadow: 0 2px 10px rgba(15, 110, 86, .12);
}

/* ---------------------------------------------------------------- import */
.dropzone {
    border: 2px dashed #cfcdc4;
    border-radius: 12px;
    padding: 42px 20px;
    text-align: center;
    color: var(--bg-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.dropzone:hover, .dropzone.is-over { border-color: var(--bg-teal); background: #fafcfb; }
.dropzone.has-file { border-style: solid; border-color: var(--bg-teal); background: var(--bg-teal-soft); }
.dropzone i { font-size: 2rem; opacity: .55; }
.dropzone-title { font-size: 1.02rem; font-weight: 600; color: var(--bg-ink); margin-top: 10px; }
.dropzone-sub { font-size: .85rem; margin-top: 3px; }
.dropzone-file { margin-top: 12px; font-weight: 600; color: var(--bg-teal); }

.map-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #f1efe8;
}

.map-row:last-of-type { border-bottom: 0; }
.map-label { width: 210px; flex: 0 0 210px; font-size: .9rem; font-weight: 500; margin: 0; }
.map-row select { flex: 1 1 auto; }
.map-row--missing .map-label { color: var(--bg-coral); }
.map-row--missing select { border-color: var(--bg-coral); }

.req {
    font-size: .66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bg-coral);
    margin-left: 6px;
    font-weight: 600;
}

.step-list { padding-left: 18px; margin: 0; }
.step-list li { padding: 6px 0; font-size: .92rem; line-height: 1.6; }

.hint-box {
    display: flex;
    gap: 10px;
    background: #fdf8ef;
    border-left: 3px solid var(--bg-amber);
    padding: 12px 14px;
    border-radius: 6px;
    font-size: .88rem;
}

.hint-box i { color: var(--bg-amber); margin-top: 2px; }

.perm-table td, .perm-table th { padding: .5rem .6rem; }

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--bg-rule); }
.timeline li { position: relative; padding: 0 0 20px 18px; }

.timeline li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-teal);
    border: 2px solid var(--bg-paper);
}

.timeline-head { font-size: .95rem; }
.timeline-meta { font-size: .82rem; color: var(--bg-muted); margin-top: 2px; }
.timeline-reason { font-size: .88rem; color: #5f5e5a; margin-top: 6px; font-style: italic; }

/* ================================================================ accounting */
.total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1efe8;
    font-size: .93rem;
}

.total-row:last-child { border-bottom: 0; }
.total-row strong { font-size: 1.02rem; }

.total-row--diff {
    border-top: 1px solid var(--bg-rule);
    border-bottom: 0;
    margin-top: 6px;
    padding-top: 12px;
}

.total-row.is-balanced strong { color: var(--bg-teal); }
.total-row.is-off strong { color: var(--bg-coral); }

.data-table tfoot td { border-top: 1px solid var(--bg-ink); padding-top: .7rem; }
.data-table .table-light td { background: #f7f5ef; }

/* ================================================================ reporting */
.report-card {
    display: block;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 12px;
    padding: 18px 20px;
    height: 100%;
    text-decoration: none;
    color: var(--bg-ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.report-card:hover {
    border-color: var(--bg-teal);
    box-shadow: 0 2px 12px rgba(15, 110, 86, .1);
    transform: translateY(-1px);
    color: var(--bg-ink);
}

.report-title { font-weight: 600; font-size: 1rem; }
.report-desc { color: var(--bg-muted); font-size: .87rem; line-height: 1.55; margin: 6px 0 12px; }
.report-go { font-size: .82rem; color: var(--bg-teal); font-weight: 500; }

.report-table td, .report-table th { white-space: nowrap; }
.report-table td.small { white-space: normal; }

.print-header { display: none; }

/* ---------------------------------------------------------------- insights */
.insight-card {
    display: flex;
    gap: 14px;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-left: 3px solid var(--bg-teal);
    border-radius: 10px;
    padding: 16px 18px;
    height: 100%;
}

.insight-card.insight--warn { border-left-color: var(--bg-amber); }
.insight-card.insight--good { border-left-color: var(--bg-teal); }

.insight-icon { font-size: 1.3rem; color: var(--bg-teal); opacity: .8; line-height: 1.2; }
.insight--warn .insight-icon { color: var(--bg-amber); }
.insight-title { font-weight: 600; font-size: .98rem; margin-bottom: 4px; }
.insight-body { font-size: .9rem; line-height: 1.6; color: #4a4945; }

/* ---------------------------------------------------------------- notifications */
.bell-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--bg-coral);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 9px;
    min-width: 16px;
}

.bell-menu { width: 340px; padding: 0; max-height: 420px; overflow-y: auto; }

.bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-rule);
    font-size: .9rem;
}

.bell-item {
    display: block;
    padding: 11px 16px;
    border-bottom: 1px solid #f4f2ec;
    text-decoration: none;
    color: var(--bg-ink);
}

.bell-item:hover { background: #faf9f5; color: var(--bg-ink); }
.bell-item.is-unread { background: #f4fbf8; }
.bell-title { font-weight: 600; font-size: .88rem; }
.bell-message { font-size: .82rem; color: var(--bg-muted); line-height: 1.5; margin-top: 2px; }
.bell-age { font-size: .74rem; color: #9c9a92; margin-top: 3px; }

.notice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1efe8;
}

.notice-row:last-child { border-bottom: 0; }
.notice-row.is-unread { background: #f4fbf8; }
.notice-title { font-weight: 600; font-size: .95rem; }
.notice-message { font-size: .88rem; color: #4a4945; margin-top: 2px; }
.notice-meta { font-size: .76rem; color: var(--bg-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- print */
@media print {
    .app-menubar, .app-navbar, .no-print, .filter-bar, .alert { display: none !important; }
    .app-main { padding: 0; max-width: none; }
    .card-panel { border: 0; padding: 0; }
    .print-header { display: block; margin-bottom: 14px; }
    .print-header h2 { font-size: 15pt; margin: 0 0 4px; }
    .print-meta { font-size: 8pt; color: #666; }
    .data-table { font-size: 8pt; }
    .data-table td, .data-table th { padding: 3px 5px; }
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }
    @page { margin: 12mm; size: landscape; }
}

/* ================================================================ global search */
.app-search { position: relative; width: 180px; flex: 0 1 auto; }

/* Only widen the search where the bar has room to spare. */
@media (min-width: 1600px) {
    .app-search { width: 280px; }
}

.app-search > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bg-muted);
    font-size: .85rem;
    pointer-events: none;
}

.app-search input { padding-left: 30px; background: #f7f5ef; border-color: transparent; }
.app-search input:focus { background: #fff; }

.quick-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 420px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(30, 29, 27, .12);
    z-index: 1040;
}

.quick-results.is-open { display: block; }

.quick-item {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f4f2ec;
    text-decoration: none;
    color: var(--bg-ink);
}

.quick-item:hover { background: #faf9f5; color: var(--bg-ink); }

.quick-kind {
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
    width: 56px;
    flex: 0 0 56px;
    padding-top: 3px;
}

.quick-title { font-size: .88rem; font-weight: 600; }
.quick-sub { font-size: .78rem; color: var(--bg-muted); margin-top: 1px; }

.quick-all {
    display: block;
    padding: 9px 14px;
    text-align: center;
    font-size: .82rem;
    color: var(--bg-teal);
    text-decoration: none;
    background: #faf9f5;
}

.search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid #f1efe8;
    text-decoration: none;
    color: var(--bg-ink);
}

.search-row:last-child { border-bottom: 0; }
.search-row:hover { background: #faf9f5; color: var(--bg-ink); }
.search-title { font-weight: 600; font-size: .93rem; }
.search-sub { font-size: .82rem; color: var(--bg-muted); margin-top: 2px; }
.search-match { font-size: .72rem; color: #9c9a92; margin-top: 4px; }

.section-label {
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
    margin: 0 0 12px;
}

/* ================================================================ charts */
/*
   Chart.js with responsive + maintainAspectRatio:false sizes the canvas to its parent.
   If the parent has no height of its own it grows to fit the canvas, and every resize
   feeds the next one until the page is thousands of pixels tall. A fixed height on a
   positioned wrapper is the documented fix, and the canvas must not carry its own
   width or height attribute.
*/
.chart-box { position: relative; height: 240px; width: 100%; }
.chart-box canvas { display: block; }

/* Belt and braces. If a chart is ever added without the wrapper, this stops the canvas
   growing without limit rather than letting it blow the page apart again. */
canvas.bg-chart { max-height: 260px !important; }

@media (max-width: 575px) {
    .chart-box { height: 200px; }
}

/* ================================================================ scan to select */
.scan-panel {
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-left: 3px solid var(--bg-teal);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.scan-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.scan-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bg-teal);
    margin: 0;
    white-space: nowrap;
}

.scan-label i { font-size: 1.05rem; }

.scan-row input {
    flex: 1 1 300px;
    min-width: 220px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .04em;
    border-color: var(--bg-teal);
}

.scan-row input:focus { box-shadow: 0 0 0 .2rem rgba(15, 110, 86, .16); }

.scan-hint { font-size: .78rem; color: var(--bg-muted); white-space: nowrap; }

.scan-feedback {
    font-size: .85rem;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: min-height .12s;
}

.scan-feedback.is-ok, .scan-feedback.is-bad,
.scan-feedback.is-warn, .scan-feedback.is-busy { min-height: 22px; margin-top: 8px; }

.scan-feedback.is-ok { color: var(--bg-teal); font-weight: 500; }
.scan-feedback.is-bad { color: var(--bg-coral); font-weight: 500; }
.scan-feedback.is-warn { color: var(--bg-amber); font-weight: 500; }
.scan-feedback.is-busy { color: var(--bg-muted); }

.scan-picked {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 108px;
    overflow-y: auto;
}

.scan-picked:empty { margin-top: 0; }

.pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-teal-soft);
    border: 1px solid rgba(15, 110, 86, .2);
    border-radius: 20px;
    padding: 4px 6px 4px 12px;
    font-size: .8rem;
    color: var(--bg-teal);
    animation: chip-in .16s ease-out;
}

.pick-chip strong { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.pick-chip span { color: #4a4945; max-width: 160px; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }

.pick-chip button {
    background: transparent;
    border: 0;
    color: var(--bg-teal);
    font-size: 1rem;
    line-height: 1;
    padding: 0 5px;
    border-radius: 50%;
    opacity: .6;
}

.pick-chip button:hover { opacity: 1; background: rgba(15, 110, 86, .12); }

@keyframes chip-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

/* The row the scan just ticked, so the eye can confirm it landed. */
.data-table tr.is-picked { background: var(--bg-teal-soft) !important; }
.data-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--bg-teal); }
/* ================================================================ cost grid on the model form
   Appended to site.css. A compact label-and-amount pair, so a dozen charges fit in the form
   panel beside the list without turning it into a second page.
   ============================================================================================ */
.cost-grid { border-top: 1px solid var(--bg-rule); }

.cost-grid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #f4f2ec;
}

.cost-grid-row:last-child { border-bottom: 0; }

.cost-grid-label {
    flex: 1 1 auto;
    font-size: .87rem;
    margin: 0;
    line-height: 1.3;
}

.cost-grid-note {
    display: block;
    font-size: .72rem;
    color: var(--bg-muted);
}

.cost-grid-row input { width: 130px; flex: 0 0 130px; }

/* Used as a JavaScript hook on the model form. Given a rule of its own so the field is
   never left unstyled if the markup around it changes. */
.cost-default { text-align: right; }
.cost-grid-row input.is-balancing { border-color: var(--bg-teal); font-weight: 600; }
/* ================================================================ cost break-up, compact
   Append to site.css.

   The old layout was one full-width row per head with its own remark box, which ran to
   eleven rows and forced a scroll before the last charge could be typed. Two columns, a
   summary strip instead of a side panel, and remarks hidden until wanted put the whole
   thing on one screen.
   ============================================================================================ */
.page-head--tight { margin-bottom: 14px; }

.cost-shell { display: flex; gap: 18px; align-items: flex-start; }
.cost-main { flex: 1 1 auto; min-width: 0; }
.cost-side { flex: 0 0 220px; position: sticky; top: 74px; }

/* ---------------------------------------------------------------- the sum, across the top */
.cost-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 12px;
}

.cost-strip > div { min-width: 0; }
.cost-strip--total { margin-left: auto; text-align: right; }

.cost-strip-label {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bg-muted);
    font-weight: 600;
}

.cost-strip-value { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.cost-strip--total .cost-strip-value { color: var(--bg-teal); font-size: 1.45rem; }

.cost-strip-note { font-size: .74rem; color: var(--bg-muted); margin-top: 1px; }
.cost-strip-note.is-off { color: var(--bg-coral); font-weight: 500; }

.cost-strip-plus {
    color: var(--bg-muted);
    opacity: .5;
    font-size: .9rem;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- two columns of charges */
.cost-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 22px;
    background: var(--bg-paper);
    border: 1px solid var(--bg-rule);
    border-radius: 12px;
    padding: 14px 20px;
}

.cc-cell { padding: 4px 0; }

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

.cc-label {
    flex: 1 1 auto;
    font-size: .88rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-label i { font-size: .72rem; opacity: .55; margin-left: 3px; }

.cc-amount { width: 128px; flex: 0 0 128px; text-align: right; }

.cc-cell--balancing .cc-amount {
    border-color: var(--bg-teal);
    background: var(--bg-teal-soft);
    font-weight: 600;
}

.cc-note-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--bg-muted);
    opacity: .4;
    padding: 2px 4px;
    font-size: .82rem;
    line-height: 1;
    border-radius: 4px;
}

.cc-note-btn:hover { opacity: 1; background: #f2f0ea; }
.cc-note-btn.has-note { opacity: 1; color: var(--bg-teal); }

.cc-remark { margin-top: 5px; font-size: .82rem; }

@media (max-width: 1199.98px) {
    .cost-shell { flex-direction: column; }
    .cost-side { position: static; flex-basis: auto; width: 100%; }
}

@media (max-width: 767.98px) {
    .cost-grid-2 { grid-template-columns: 1fr; }
    .cost-strip { flex-wrap: wrap; gap: 12px; }
    .cost-strip-plus { display: none; }
    .cost-strip--total { margin-left: 0; text-align: left; }
}

/* ================================================================ list plus dialog
   The masters screens put the list first and the form in a dialog. A form sitting beside a
   list competes with it for width and pushes the rows into a narrow column; moved out, the
   list gets the whole screen and stays on one page.
   ============================================================================================ */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.toolbar-note {
    font-size: .8rem;
    color: var(--bg-amber);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tighter rows, so twenty five records fit where fifteen did. */
.data-table--tight td,
.data-table--tight th { padding: .42rem .7rem; }

.data-table--tight tbody tr { line-height: 1.35; }

/* ---------------------------------------------------------------- dialogs */
.modal-content { border: 0; border-radius: 12px; }

.modal-header {
    border-bottom: 1px solid var(--bg-rule);
    padding: 14px 20px;
}

.modal-title { font-size: 1.02rem; font-weight: 600; }
.modal-body { padding: 18px 20px; }

.modal-footer {
    border-top: 1px solid var(--bg-rule);
    padding: 12px 20px;
    background: #faf9f5;
    border-radius: 0 0 12px 12px;
}

/* A link styled as a close button still needs to look like one. */
.modal-header a.btn-close { text-decoration: none; opacity: .5; }
.modal-header a.btn-close:hover { opacity: 1; }

/* Inside a dialog the charges grid has no card of its own. */
.cost-grid-2--flat {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 2px 28px;
}

/*
   A label set to flex:1 pushes its input to the far edge of the cell, and in a wide dialog
   the two end up so far apart they stop reading as a pair. Capping the label keeps the box
   beside the words it belongs to.
*/
.cost-grid-2--flat .cc-label { flex: 0 1 auto; max-width: 170px; }
.cost-grid-2--flat .cc-row { justify-content: space-between; gap: 12px; }
.cost-grid-2--flat .cc-amount { width: 118px; flex: 0 0 118px; }
.cost-grid-2--flat .cc-cell { padding: 2px 0; }

/*
   The dialog must never grow past the window, or the footer slides under the fold and the
   save button cannot be reached. Bootstrap's scrollable dialog caps the whole thing; this
   caps the body so the header and footer always stay put.
*/
.modal-dialog-scrollable .modal-body { max-height: calc(100vh - 210px); }

@media (max-height: 700px) {
    .modal-dialog-scrollable .modal-body { max-height: calc(100vh - 170px); }
    .modal-header, .modal-footer { padding-top: 10px; padding-bottom: 10px; }
}