:root {
    --brand-primary: #eb732f;
    --brand-primary-dark: #b3591f;
    --brand-header: #c8622a;
    --brand-dark: #1e1e1e;
    --bg: #f2f4f8;
    --text: #1a1d20;
    --border: #dde1e8;
    --watermark-blue: #d9d9d9;
    --watermark-text: #2e2e2e;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
}

.app-layout {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.sidebar {
    background: var(--brand-header);
    width: 260px;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 2.5rem;
    text-align: center;
}

.sidebar-footer::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.logout-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.logged-in-as {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
}

.role-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.logout-button {
    color: #fff;
    text-decoration: underline;
    font-size: 0.7rem;
}

.logout-button:hover {
    color: rgba(255, 255, 255, 0.8);
}

.watermark-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.watermark-link {
    display: inline-block;
    text-decoration: none;
}

.watermark-logo {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--watermark-blue);
    overflow: hidden;
    transition: background-color 0.15s ease;
    /* Clip the box (and its background-color) to the octopus icon's own
       silhouette so no rectangular block shows around it -- just the
       shape itself. */
    -webkit-mask-image: url("/static/img/octopus.png");
    mask-image: url("/static/img/octopus.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.watermark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Grayscale keeps the octopus icon's outline/ring pattern as tonal
       detail; the watermarkLevels filter remaps that tonal range, and
       mix-blend-mode: multiply then darkens only where that detail is
       dark, so the icon reads as "one colour" with the outline/pattern
       showing up slightly darker, like a debossed stamp. */
    filter: grayscale(1) url("#watermarkLevels");
    mix-blend-mode: multiply;
}

.watermark-link:hover .watermark-logo {
    background-color: #e5e5e5;
}

.copyright {
    color: var(--watermark-text);
    font-size: 0.7rem;
    margin: 0;
    text-decoration: none;
    position: relative;
    top: -2px;
    transition: color 0.15s ease;
}

.copyright:hover {
    color: var(--watermark-text);
    text-decoration: underline;
}

.sidebar .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.brand-logo-card {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.brand-logo {
    width: 100%;
    height: auto;
    display: block;
}

.brand-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.brand-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

nav a:hover {
    background: #fff;
    color: var(--brand-dark);
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: currentColor;
    fill: none;
}

.nav-badge {
    margin-left: auto;
    display: inline-block;
    min-width: 1.3em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-header);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.nav-group summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    content: "\25B8";
    font-size: 0.7rem;
}

.nav-group[open] summary::after {
    content: "\25BE";
}

.nav-group summary:hover {
    background: #fff;
    color: var(--brand-dark);
}

.nav-group-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem 0 0 0.6rem;
}

.content-area {
    flex: 1;
    min-width: 0;
}

.page-card {
    max-width: 1600px;
    margin: 2rem auto 3rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.topbar {
    background: var(--brand-header);
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.topbar h1 {
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
}

main {
    padding: 2rem;
}

@media (max-width: 760px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
        min-height: 0;
    }

    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .page-card {
        margin: 1.5rem auto 2rem;
    }
}

h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--brand-primary);
}

h2 {
    margin-top: 2rem;
    color: var(--brand-primary);
}

.add-button {
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.add-button:hover {
    background: var(--brand-primary-dark);
}

.period-form,
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.period-form .field,
.filter-form .field {
    margin-bottom: 0;
    max-width: 200px;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-actions .add-button {
    margin-bottom: 0;
}

.chart-card + .report-actions,
.chart-card-row + .report-actions {
    margin-top: 1.5rem;
}

.email-report-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contractor-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 160px;
}

a {
    color: var(--brand-primary);
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    max-width: 320px;
}

.checkbox-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding: 0.6rem 0;
}

.checkbox-list-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    white-space: nowrap;
}

.checkbox-list-item input[type="checkbox"] {
    width: auto;
    min-height: 0;
}

.docket-select-checkbox,
.fuel-select-checkbox {
    transform: scale(1);
}

.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.pagination-summary {
    color: #666;
    font-size: 0.9rem;
}

/* The Docket Report table has 16 columns -- too many to fit one screen
   width under the site-wide default (auto layout, sized off content,
   nowrap). table-layout: fixed makes it respect width:100% of its
   container instead of growing the whole page to fit; each column then
   gets an explicit width sized to what it actually holds, short/fixed
   -format values (codes, numbers, dates) stay on one line since they're
   never going to wrap usefully, free-text values (names, site/stockpile
   names) are allowed to wrap onto a second line rather than force the
   column wider. */
#docket-report-table {
    font-size: 0.72rem;
    table-layout: fixed;
    width: 100%;
}

#docket-report-table th,
#docket-report-table td {
    padding: 0.3rem 0.3rem;
    white-space: normal;
    overflow-wrap: break-word;
}

#docket-report-table th:first-child,
#docket-report-table td:first-child {
    width: 2.5em;
    text-align: center;
}

/* Row-select checkboxes (Docket Report + Fuel Log) sit in the first
   column of their table and should be centred like every other checkbox
   column, regardless of which table they're in. */
td:has(.docket-select-checkbox),
td:has(.fuel-select-checkbox),
th:has(#select-all-dockets),
th:has(#select-all-fuel) {
    text-align: center;
}

#docket-report-table .col-status,
#docket-report-table .col-fel_asset_number,
#docket-report-table .col-truck_asset_number,
#docket-report-table .col-load_total_weight,
#docket-report-table .col-docket {
    width: 4.5em;
}

#docket-report-table .col-loadrite_docket_number,
#docket-report-table .col-truck_docket_number {
    width: 5.5em;
}

/* Header labels ("FEL Asset Number", "Loadrite Docket Number"...) are
   much longer than the codes/numbers actually stored in these columns --
   only the data cells need to stay on one line, the headers wrap same as
   everywhere else. */
#docket-report-table td.col-status,
#docket-report-table td.col-fel_asset_number,
#docket-report-table td.col-truck_asset_number,
#docket-report-table td.col-load_total_weight,
#docket-report-table td.col-docket,
#docket-report-table td.col-loadrite_docket_number,
#docket-report-table td.col-truck_docket_number {
    white-space: nowrap;
}

#docket-report-table .col-loading_datetime,
#docket-report-table .col-tip_datetime {
    /* "16:46 14/07/26" -- left un-nowrapped so it breaks at the space
       into "16:46" / "14/07/26" rather than needing a wide column or
       (worse) overflowing a narrow nowrap one. */
    width: 5em;
}

#docket-report-table .col-loading_site,
#docket-report-table .col-tipping_site,
#docket-report-table .col-stockpile {
    width: 7.5em;
}

#docket-report-table .col-truck_driver {
    width: 8em;
}

#docket-report-table .col-reconciled {
    width: 6em;
}

#docket-report-table .col-actions {
    width: 9.5em;
}

/* Status, driver/site/stockpile names, asset/docket numbers, and the
   reconciled badge read better centred than left-aligned in their
   (narrow, fixed-width) columns -- headers are already centred by the
   site-wide `th { text-align: center }` rule. */
#docket-report-table td.col-status,
#docket-report-table td.col-truck_driver,
#docket-report-table td.col-loading_site,
#docket-report-table td.col-fel_asset_number,
#docket-report-table td.col-stockpile,
#docket-report-table td.col-truck_asset_number,
#docket-report-table td.col-truck_docket_number,
#docket-report-table td.col-tipping_site,
#docket-report-table td.col-reconciled,
#docket-report-table td.col-docket {
    text-align: center;
}

/* The bulk-select checkbox column (Docket Report + Fuel Log): without
   this, the row/select-all checkboxes pick up the site-wide
   "td input { width:100%; min-width:60px }" rule meant for the editable
   register tables' text inputs, stretching each checkbox's actual layout
   box to 60px+ inside a ~2.5em cell -- scaling it down visually
   (transform: scale()) doesn't shrink that underlying box, so it still
   overflowed the column. Targeted by class/id rather than a table id so
   both report tables (and any future one reusing these classes) get the
   same fix instead of duplicating it per table. */
.docket-select-checkbox,
.fuel-select-checkbox,
#select-all-dockets,
#select-all-fuel {
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
}

/* Status/Reconciled badges inside ANY table: .status-badge's font-size is
   in rem, which is relative to the page's root font size, not the table's
   own (smaller, now-unified 0.72rem) font-size -- so at a table's compact
   width the badge text rendered larger than everything else and could
   overflow its column. Scoped to "inside a table cell" specifically so
   badges used outside tables (e.g. the docket edit form's status summary)
   keep their normal, larger size. */
td .status-badge {
    font-size: 0.62rem;
    padding: 0.15rem 0.35rem;
    max-width: 100%;
    white-space: normal;
}

label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

input, select, textarea {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 2.3rem;
    box-sizing: border-box;
    font-family: inherit;
}

textarea {
    width: 100%;
    max-width: 480px;
    resize: vertical;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    border-color: var(--brand-primary-dark);
}

input:disabled, select:disabled {
    background: #eee;
    color: #666;
    cursor: not-allowed;
}

button {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

button:hover {
    background: var(--brand-primary-dark);
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    border-radius: 6px;
}

/* Register tables embed live inputs/selects for inline editing; without a
   cap these render at the browser's default (~180px) width, which is what
   was forcing wide tables like Truck Register into horizontal scroll. The
   default here covers short codes/numbers/dates; fields whose data runs
   longer (names, companies, emails, free-text descriptions) opt into
   .input-wide or .input-xwide below so their values aren't clipped. */
td input,
td select {
    width: 100%;
    min-width: 60px;
    max-width: 140px;
    min-height: 1.9rem;
    padding: 0.25rem 0.3rem;
    font-size: 0.72rem;
}

td input.route-name-input {
    max-width: 260px;
    min-width: 190px;
}

td input.input-wide,
td select.input-wide {
    min-width: 170px;
    max-width: 240px;
}

td input.input-xwide,
td select.input-xwide {
    min-width: 220px;
    max-width: 320px;
}

table {
    border-collapse: collapse;
    width: auto;
    table-layout: auto;
    font-size: 0.72rem;
}

th, td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.3rem;
    text-align: left;
}

td {
    white-space: nowrap;
}

th {
    background: #eef1f8;
    color: var(--brand-primary);
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 6em;
    text-align: center;
    vertical-align: middle;
}

th a {
    color: var(--brand-primary);
    text-decoration: none;
}

tbody tr:nth-child(even) {
    background: #f7f8fb;
}

.inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.inline-form input {
    padding: 0.3rem;
}

small {
    color: #666;
    display: block;
    margin-top: 0.25rem;
}

td.actions {
    white-space: nowrap;
    vertical-align: middle;
}

td.actions form {
    display: inline-block;
    margin: 0 0 0 0.35rem;
    vertical-align: middle;
}

td.actions button {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
    vertical-align: middle;
}

/* Edit/Delete/Reconcile/Save/View actions are icon-only squares (pencil,
   trash can, checklist, floppy disk, eye) instead of text pills -- same
   footprint everywhere so a row of actions lines up regardless of which
   combination is shown. */
.actions a.edit-link,
.delete-link,
.reconcile-link,
.save-link,
.view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.actions a.edit-link .btn-icon,
.delete-link .btn-icon,
.reconcile-link .btn-icon,
.save-link .btn-icon,
.view-link .btn-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.actions a.edit-link,
.save-link,
.view-link {
    background: var(--brand-primary);
    color: #fff;
}

.actions a.edit-link:hover,
.save-link:hover,
.view-link:hover {
    background: var(--brand-primary-dark);
}

/* Same shape/size as .edit-link, red instead of orange -- used for every
   Delete button across the app so destructive actions read consistently
   next to the Edit button they sit beside. */
.delete-link {
    background: #c0392b;
    color: #fff;
}

.delete-link:hover {
    background: #922b1f;
}

/* Same shape/size again, green -- the checklist icon matches the Load
   Reconciliation sidebar link so "reconcile" reads as one consistent
   concept everywhere it appears. Only shown while a load/fuel entry is
   still unreconciled; unreconciling is done from the edit form instead of
   a second button here. */
.reconcile-link {
    background: #1a7a34;
    color: #fff;
}

.reconcile-link:hover {
    background: #145c28;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: #c0392b;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
}

.link-button:hover {
    background: none;
    color: #922b1f;
}

.error {
    color: #a30000;
    background: #fdecec;
    border: 1px solid #f3b4b4;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    max-width: 480px;
}

.flash-message {
    padding: 0.6rem 1rem;
    border-radius: 4px;
    max-width: 640px;
    margin: 0 0 1.5rem;
}

.flash-error {
    color: #a30000;
    background: #fdecec;
    border: 1px solid #f3b4b4;
}

.flash-success {
    color: #1a7a34;
    background: #e3f7e8;
    border: 1px solid #b3e6bf;
}

.currency-input {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.currency-input span {
    color: #555;
    font-weight: 600;
}

.currency-input input {
    width: 100%;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-loaded {
    background: #fff4d9;
    color: #8a5a00;
}

.status-tipped {
    background: #e3f7e8;
    color: #1a7a34;
}

.status-valid {
    background: #e3f7e8;
    color: #1a7a34;
}

.status-expiring-soon {
    background: #fff4d9;
    color: #8a5a00;
}

.status-expired {
    background: #fdecec;
    color: #a30000;
}

.status-active {
    background: #e3f7e8;
    color: #1a7a34;
}

.status-pending {
    background: #fff4d9;
    color: #8a5a00;
}

.status-inactive {
    background: #eceef1;
    color: #5a6472;
}

.status-required {
    background: #fdecec;
    color: #a30000;
}

.status-no-expiry {
    background: #e3f7e8;
    color: #1a7a34;
}

.status-overdue {
    background: #fdecec;
    color: #a30000;
}

.status-not-reviewed {
    background: #fdecec;
    color: #a30000;
}

/* Requirements matrix (Driver/Truck/Contractor) -- a wide grid with one
   row per entity and one column per requirement type, so the column
   headers are rotated 45deg to stay narrow enough that the whole matrix
   fits on screen without every column forcing horizontal scroll. */
.matrix-scroll {
    overflow-x: auto;
    max-width: 100%;
    border-radius: 6px;
}

.matrix-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    color: #444;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}

.matrix-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.matrix-table {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.72rem;
}

.matrix-table th,
.matrix-table td {
    border: 1px solid var(--border);
    padding: 0.3rem;
}

.matrix-table .matrix-row-header {
    text-align: left;
    white-space: nowrap;
    background: #eef1f8;
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9em;
}

.matrix-table thead th.matrix-row-header {
    z-index: 2;
    text-align: center;
    vertical-align: bottom;
    padding: 4px 0;
}

.matrix-table .matrix-subheader {
    color: #666;
    font-weight: 400;
    font-size: 0.68rem;
    white-space: nowrap;
}

.matrix-col-header {
    width: 2.4em;
    min-width: 2.4em;
    max-width: 2.4em;
    vertical-align: bottom;
    background: #eef1f8;
    padding: 4px 0;
    text-align: center;
}

.matrix-col-header-inner {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: 600;
    color: var(--brand-primary);
}

.matrix-cell {
    text-align: center;
    vertical-align: middle;
}

.matrix-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
}

.matrix-status-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.matrix-status-met {
    background: #e3f7e8;
    color: #1a7a34;
}

.matrix-status-expiring {
    background: #fff4d9;
    color: #8a5a00;
}

.matrix-status-missing {
    background: #fdecec;
    color: #a30000;
}

.matrix-status-na {
    color: #c3c8d1;
}

.role-status-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.role-status-icon {
    flex: none;
}

.role-status-met {
    color: #1a7a34;
}

.role-status-unmet {
    color: #a30000;
}

.col-wide {
    width: 50%;
}

.stacked-list {
    white-space: normal;
}

.stacked-list > div {
    padding: 0.15rem 0;
}

.stacked-list > div:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.popup-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(960px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.popup-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.popup-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.85);
    color: var(--brand-primary);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    font-weight: 400;
    z-index: 5;
}

.popup-close:hover {
    background: #fff;
}

.popup-body .page-card {
    margin: 0;
    box-shadow: none;
    border-radius: 10px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.stat-card {
    background: #f4f6fb;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.stat-unit {
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 0.15rem;
}

.stat-card-revenue {
    background: #fff8e6;
    border-color: #f5deA0;
}

.stat-card-revenue .stat-value {
    color: #8a5a00;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 0.75rem;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.quick-link-tile:hover {
    background: #f4f6fb;
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

.quick-link-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-link-icon svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    fill: none;
}

.quick-link-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.chart-card {
    margin-top: 2rem;
    background: #f4f6fb;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}

.chart-card h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.contractor-details-note {
    margin: 1rem 0 0;
    text-align: right;
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
}

.docket-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
    align-items: start;
}

.docket-column h3,
.docket-general h3 {
    margin: 0 0 1rem;
    color: var(--brand-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.docket-general {
    margin-bottom: 1.5rem;
}

.docket-general-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 2rem;
}

.field-wide {
    grid-column: 1 / -1;
    max-width: none;
}

.required-asterisk {
    color: #c0392b;
}

.label-nowrap {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .docket-columns {
        grid-template-columns: 1fr;
    }
}

/* Driver mobile "field" pages: shared across every field_*.html template so
   the Messages notification bell doesn't need its own <style> block
   duplicated into all of them (those templates are standalone documents,
   not extensions of a shared base, but they all already load this
   stylesheet). */
.field-header-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.field-header-row .field-home-button {
    margin-bottom: 0;
    flex: 1;
}

.field-bell-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f9fafb;
    text-decoration: none;
}

.field-bell-button svg {
    width: 20px;
    height: 20px;
    stroke: var(--brand-primary);
    fill: none;
}

.field-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.field-tile-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}