/* Colours are taken from the Negros Medical Trading logo: its one green, on
   white. The darker shades are for hover and pressed states, the sidebar is
   the same green taken down to near black. */
:root {
    --brand-green: #2b6136;
    --brand-green-dark: #204a29;
    --brand-green-darker: #183a20;
    --brand-green-light: #3d8a4d;
    --brand-black: #231f20;
    --brand-grey: #a7a9ac;

    /* Inter, loaded from Google Fonts by head_assets(); the rest is what
       shows if that cannot be reached. */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --bs-primary: #2b6136;
    --bs-primary-rgb: 43, 97, 54;
    --bs-link-color: #2b6136;
    --bs-link-color-rgb: 43, 97, 54;
    --bs-link-hover-color: #183a20;
    --bs-link-hover-color-rgb: 24, 58, 32;
    --bs-focus-ring-color: rgba(43, 97, 54, .25);
}

body {
    background: #f3f3f4;
    letter-spacing: -.01em;
}

/* Links are told apart by colour, never by an underline. */
a,
a:hover,
.btn-link,
.btn-link:hover {
    text-decoration: none;
}

/* ---- Sidebar menu ------------------------------------------------------
   Fixed on the left. On a desktop the toggle folds it to icons only (the
   choice is kept in a cookie); below 992px it slides in over the page. */
:root {
    --sidebar-width: 300px;
    --sidebar-collapsed-width: 72px;
    --topbar-height: 64px;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: #12291a;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .18);
    transition: width .2s ease, transform .2s ease;
}

/* The logo is green on white, so its row stays white. */
.sidebar-brand {
    flex-shrink: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 16px;
    background: #fff;
    border-bottom: 3px solid var(--brand-green);
}

.sidebar-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 40px;
}

.sidebar-toggle-btn,
.topbar-burger {
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #6b6b6f;
    font-size: 1.25rem;
    line-height: 1;
}

.sidebar-toggle-btn:hover,
.topbar-burger:hover {
    color: var(--brand-black);
    background: #ececed;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 16px;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-section-label {
    padding: 16px 12px 6px;
    color: rgba(255, 255, 255, .5);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A rule between two items of a section. */
.sidebar-separator {
    margin: 4px 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .3);
    opacity: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
    padding: 9px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, .85);
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-link i {
    flex-shrink: 0;
    width: 1.25rem;
    font-size: 1.1rem;
    text-align: center;
}

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

.sidebar-link.active {
    color: #fff;
    background: var(--brand-green-light);
}

/* A sub-menu: the row that opens it, and its items set in from the left. */
.sidebar-link .sidebar-caret {
    width: auto;
    margin-left: auto;
    font-size: .75rem;
    transition: transform .2s ease;
}

.sidebar-group-toggle.collapsed .sidebar-caret {
    transform: rotate(-90deg);
}

.sidebar-group-toggle[aria-expanded="true"] {
    color: #fff;
}

.sidebar-sub .sidebar-link {
    padding-left: 28px;
    font-size: .875rem;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, .45);
}

.main-area {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    flex-shrink: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e3e3e5;
}

.topbar-brand {
    color: var(--brand-black);
    font-weight: 600;
    text-decoration: none;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-black);
    line-height: 1.2;
    text-decoration: none;
}

.topbar-user > i {
    color: var(--brand-grey);
    font-size: 1.75rem;
}

@media (min-width: 992px) {
    .sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar-collapsed .main-area {
        margin-left: var(--sidebar-collapsed-width);
    }

    .sidebar-collapsed .sidebar-brand {
        justify-content: center;
        padding: 0;
    }

    .sidebar-collapsed .sidebar-brand a,
    .sidebar-collapsed .sidebar-link span,
    .sidebar-collapsed .sidebar-section-label span {
        display: none;
    }

    /* A section title becomes a rule between the groups of icons. */
    .sidebar-collapsed .sidebar-section-label {
        margin: 8px 8px;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: 10px 0;
    }

    /* Folded, there is no room to open a sub-menu: its items are always
       shown, as icons like the rest. */
    .sidebar-collapsed .sidebar-group-toggle {
        display: none;
    }

    .sidebar-collapsed .sidebar-sub {
        display: block !important;
        height: auto !important;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar-open .sidebar {
        transform: none;
        box-shadow: 2px 0 8px rgba(0, 0, 0, .18);
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
    }

    .main-area {
        margin-left: 0;
    }
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-black);
}

/* The main action on a page is green; secondary actions are black outlines;
   a destructive one keeps Bootstrap's red outline. */
.btn-primary {
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
    --bs-btn-active-bg: var(--brand-green-darker);
    --bs-btn-active-border-color: var(--brand-green-darker);
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
    --bs-btn-focus-shadow-rgb: 43, 97, 54;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-black);
    --bs-btn-border-color: var(--brand-black);
    --bs-btn-hover-bg: var(--brand-black);
    --bs-btn-hover-border-color: var(--brand-black);
    --bs-btn-active-bg: var(--brand-black);
    --bs-btn-active-border-color: var(--brand-black);
    --bs-btn-disabled-color: var(--brand-black);
    --bs-btn-disabled-border-color: var(--brand-black);
    --bs-btn-focus-shadow-rgb: 35, 31, 32;
}

.text-bg-primary {
    background-color: var(--brand-black) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #9cc3a5;
    box-shadow: 0 0 0 .25rem rgba(43, 97, 54, .2);
}

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

.pagination {
    --bs-pagination-color: var(--brand-black);
    --bs-pagination-hover-color: var(--brand-green-dark);
    --bs-pagination-focus-color: var(--brand-green-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(43, 97, 54, .2);
}

/* The tab strip across the top of a page with several parts. */
.settings-tabs .nav-link {
    color: #55555a;
    font-weight: 500;
}

.settings-tabs .nav-link:hover {
    color: var(--brand-black);
}

.settings-tabs .nav-link.active {
    color: var(--brand-green-dark);
    border-top: 3px solid var(--brand-green);
}

.card {
    border: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* Subtle alternating rows on every data table, including nested lists. */
.table {
    --bs-table-bg-type: initial;
    --bs-table-striped-bg: #f6f9f7;
    --bs-table-hover-bg: #eef4f0;
}

.table > tbody > tr:nth-child(even of :not(.po-detail-row)):not(.po-open) > * {
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

/* The actions of a row (its icon buttons) sit at the right end of the table,
   on one line, whether or not the cell says so itself. */
.table td:has(.btn-sm) {
    text-align: right;
    white-space: nowrap;
}

/* A column heading that orders the list (sort_th()): the arrow is faint
   until the list is ordered by that column. */
.sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link:hover {
    color: var(--brand-green-dark);
}

.sort-link .bi {
    margin-left: .35rem;
    font-size: .75em;
    opacity: .35;
}

.sort-link.active .bi,
.sort-link:hover .bi {
    opacity: 1;
    color: var(--brand-green);
}

.brand-icon {
    color: var(--brand-green);
}

.app-tile {
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.app-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}

/* A long badge wraps inside the tile instead of running out of it. */
.app-tile .badge {
    max-width: 100%;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
}

.app-tile .app-icon {
    font-size: 2rem;
    color: var(--brand-green);
}

/* Quick Access on the dashboard: the pages opened every day, five cards to a
   row on a wide screen. A card is its icon, its name and, at its foot, where
   it goes: Open, or a link for each page of its kind (the purchase orders,
   the delivery receipts). */
.quick-heading {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* The heading is the button that folds the cards away: the arrow at its end
   points down while they show. */
.quick-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.quick-caret {
    margin-left: auto;
    color: #6b6b6f;
    font-size: .875rem;
    transition: transform .2s ease;
}

.quick-toggle.collapsed .quick-caret {
    transform: rotate(-90deg);
}

.quick-grid {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 992px) {
    .kpi-grid.missing-documents-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .quick-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.quick-link {
    --quick-color: var(--brand-green);
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-width: 0;
    padding: .875rem;
    border: 1px solid color-mix(in srgb, var(--quick-color) 45%, transparent);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--quick-color) 12%, #fff);
    color: var(--brand-black);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* The colours of the cards, the ones the counts above a list use. */
.quick-success { --quick-color: var(--brand-green-light); }
.quick-info { --quick-color: #2a78d6; }
.quick-purple { --quick-color: #7b4fc4; }
.quick-warning { --quick-color: #c77c11; }
.quick-teal { --quick-color: #13897f; }
.quick-pink { --quick-color: #c2407e; }

a.quick-link:hover,
a.quick-link:focus-visible {
    background: color-mix(in srgb, var(--quick-color) 20%, #fff);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .1);
    color: var(--brand-black);
    transform: translateY(-2px);
}

a.quick-link:focus-visible,
.quick-choices a:focus-visible {
    outline: 2px solid var(--brand-green-light);
    outline-offset: 2px;
}

/* The icon as the shortcut cards had it: large and green, with no box around it. */
.quick-icon {
    color: var(--quick-color);
    font-size: 2rem;
    line-height: 1;
}

.quick-name {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* The foot of a card, level across a row whatever the length of the names. */
.quick-open,
.quick-choices {
    margin-top: auto;
}

.quick-open {
    color: #55555a;
    font-size: .8125rem;
    font-weight: 500;
}

.quick-open .bi {
    margin-left: .125rem;
    font-size: .6875rem;
    transition: transform .12s ease;
}

a.quick-link:hover .quick-open,
a.quick-link:focus-visible .quick-open {
    color: var(--brand-black);
}

a.quick-link:hover .quick-open .bi,
a.quick-link:focus-visible .quick-open .bi {
    transform: translateX(3px);
}

.quick-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.quick-choices a {
    padding: .1875rem .625rem;
    border: 1px solid color-mix(in srgb, var(--quick-color) 45%, transparent);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-black);
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.quick-choices a:hover,
.quick-choices a:focus-visible {
    border-color: var(--quick-color);
    background: var(--quick-color);
    color: #fff;
}

/* A card holding one record's form: not stretched across a wide screen. */
.form-card {
    max-width: 820px;
}

.setting-number {
    max-width: 10rem;
}

.login-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at top left, rgba(43, 97, 54, .18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(43, 97, 54, .12), transparent 32%),
        linear-gradient(135deg, #eef8f0 0%, #edf3f0 38%, #e8f1f3 100%);
    overflow: hidden;
}

.login-wrap::before,
.login-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(43, 97, 54, .08);
    filter: blur(60px);
}

.login-wrap::before {
    width: 28rem;
    height: 28rem;
    top: -8rem;
    right: -6rem;
}

.login-wrap::after {
    width: 24rem;
    height: 24rem;
    left: -5rem;
    bottom: -8rem;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, .9);
    border: 0;
    border-top: 4px solid var(--brand-green);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .12);
}

.login-logo {
    width: auto;
    max-width: 220px;
    max-height: 140px;
    height: auto;
}

/* The current logo on the settings page, on the white it is shown against. */
.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 110px;
    padding: 12px;
    border: 1px solid #e3e3e5;
    border-radius: 6px;
    background: #fff;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
}

code.perm {
    color: var(--brand-black);
    background: #ececed;
    padding: .1rem .35rem;
    border-radius: .25rem;
}

/* A count above a list (expired, Valid CPR ...). It is a link that filters
   the list; the one in use is outlined. The colour is on the edge and the
   icon badge, and a pale tint of it fills the card -- the figure and its
   label stay in the text colour. */
.stat-card {
    --stat-color: var(--brand-grey);
    background: color-mix(in srgb, var(--stat-color) 11%, #fff);
    /* A thin line of the colour all round; the thick edge is set below. */
    border: 1px solid color-mix(in srgb, var(--stat-color) 70%, #fff);
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 16px 18px;
    color: inherit;
    border-left: 6px solid var(--stat-color);
    transition: transform .12s ease, box-shadow .12s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}

.stat-card.active {
    box-shadow: 0 0 0 3px var(--stat-color);
}

.stat-card .stat-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .75rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--stat-color);
    /* White on the tinted card, so the badge still stands out. */
    background: rgba(255, 255, 255, .75);
}

.stat-card .stat-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #55555a;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

/* One set of card colours, for the counts above a list and the dashboard figures. */
.stat-card.stat-success, .kpi-card.kpi-success { --stat-color: var(--brand-green-light); --kpi-color: var(--brand-green-light); }
.stat-card.stat-warning, .kpi-card.kpi-warning { --stat-color: #c77c11; --kpi-color: #c77c11; }
.stat-card.stat-danger, .kpi-card.kpi-danger { --stat-color: #c0392b; --kpi-color: #c0392b; }
.stat-card.stat-info, .kpi-card.kpi-info { --stat-color: #2a78d6; --kpi-color: #2a78d6; }
.stat-card.stat-purple, .kpi-card.kpi-purple { --stat-color: #7b4fc4; --kpi-color: #7b4fc4; }
.stat-card.stat-teal, .kpi-card.kpi-teal { --stat-color: #13897f; --kpi-color: #13897f; }
.stat-card.stat-pink, .kpi-card.kpi-pink { --stat-color: #c2407e; --kpi-color: #c2407e; }
.stat-card.stat-crimson, .kpi-card.kpi-crimson { --stat-color: #8e1b2e; --kpi-color: #8e1b2e; }

/* The product of a purchase line: a box to type in, and the matches under it. */
.product-picker {
    position: relative;
}

.product-options {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    width: max(100%, 26rem);
    max-height: 18rem;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .16);
}

.product-options .active {
    background: var(--brand-green);
    border-color: var(--brand-green);
}

.product-options .active .text-secondary {
    color: rgba(255, 255, 255, .8) !important;
}

/* Room under the lines for the list of matches to open into. */
.purchase-lines {
    min-height: 16rem;
}

/* A page made for paper (a purchase, the list of purchases): a sheet on the
   screen, and on paper only the sheet. */
.print-page {
    background: #ececed;
}

.print-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
}

.print-sheet {
    max-width: 1000px;
    margin: 0 auto 24px;
    padding: 32px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
    font-size: .875rem;
}

.print-sheet .table {
    font-size: .8125rem;
}

@media print {
    .no-print {
        display: none !important;
    }

    .print-page {
        background: #fff;
    }

    .print-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* A document on more than one form: each form on a page of its own. */
    .print-sheet + .print-sheet {
        break-before: page;
    }

    /* The column headings again on every sheet; a row is not cut in two. */
    .print-sheet thead {
        display: table-header-group;
    }

    .print-sheet tr {
        break-inside: avoid;
    }
}

/* ---- Client Ledger ------------------------------------------------------
   The order that is open: its row and the panel under it are tied together
   by a pale green ground and a green edge on the left. The panel is a card
   with a green head (the order and its figures), the tabs, and their lists. */
.po-type-regular {
    color: #3f4a42;
    background: #e6ebe7;
}

.po-type-consignment {
    color: #7a4b05;
    background: #fbe9c8;
}

.po-open,
.po-detail-row {
    --bs-table-bg: #eef5ef;
    --bs-table-hover-bg: transparent;
}

.po-open > td {
    border-bottom-color: transparent;
}

.po-open > td:first-child,
.po-detail-row > td {
    border-left: 4px solid var(--brand-green);
}

.po-detail-row > td {
    padding: .25rem 1rem 1.25rem;
}

.po-detail {
    overflow: hidden;
    border: 1px solid #cfe0d3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}

.po-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    padding: .875rem 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green-light));
}

.po-detail-title {
    font-size: 1rem;
    font-weight: 600;
}

.po-detail-sub {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
}

.po-detail-figure {
    text-align: right;
}

.po-detail-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.po-detail-value {
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.po-tabs {
    padding: 0 .75rem;
    background: #f6faf7;
    border-bottom: 1px solid #cfe0d3;
}

.po-tabs .nav-link {
    margin-bottom: -1px;
    padding: .75rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #55555a;
    font-weight: 500;
}

.po-tabs .nav-link:hover {
    color: var(--brand-black);
}

.po-tabs .nav-link.active {
    color: var(--brand-green-dark);
    border-bottom-color: var(--brand-green);
}

.po-tabs .badge {
    margin-left: .25rem;
    color: #55555a;
    background: #dfe5e0;
}

.po-tabs .nav-link.active .badge {
    color: #fff;
    background: var(--brand-green);
}

/* The lists of the panel shade their own rows, not with the row they sit in.
   Their text is the size of the sidebar menu. */
.po-detail .table {
    --bs-table-bg-state: initial;
    --bs-table-hover-bg: #f3f8f4;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.po-detail .table > :not(caption) > * > * {
    padding: .5rem .75rem;
}

.po-detail .table > * > tr > :first-child {
    padding-left: 1.25rem;
}

.po-detail .table > * > tr > :last-child {
    padding-right: 1.25rem;
}

.po-detail thead th {
    color: var(--brand-green-darker);
    background: #eef5ef;
    border-bottom: 1px solid #cfe0d3;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.po-detail tfoot td {
    background: #f6faf7;
    border-top: 2px solid #cfe0d3;
    border-bottom: 0;
}

.po-detail tbody tr:last-child > td {
    border-bottom: 0;
}

/* Still to be delivered. */
.po-pending {
    color: #a8620a;
    font-weight: 600;
}

/* The page being shown, under a list. */
.pagination {
    --bs-pagination-active-bg: var(--brand-green);
    --bs-pagination-active-border-color: var(--brand-green);
}

/* ---- Dashboard ---------------------------------------------------------
   The figures across the top, then the charts. The chart colours were
   checked to stay apart for colour-blind readers: green for what is
   invoiced, blue for what is delivered, orange for what is owed. Text is
   never in a series colour; a swatch beside it says which series it is. */
:root {
    --chart-s1: #2f8f45;
    --chart-s2: #2a78d6;
    --chart-s3: #eb6834;
    --chart-grid: #e6e6e8;
    --chart-axis: #c3c3c7;
    --chart-ink: #6b6b6f;
}

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

.kpi-card {
    --kpi-color: var(--brand-grey);
    padding: 1rem 1.125rem;
    /* The same pale tint as the cards above a list. */
    background: color-mix(in srgb, var(--kpi-color) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--kpi-color) 70%, #fff);
    border-top: 6px solid var(--kpi-color);
}

.kpi-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #55555a;
    font-size: .8125rem;
    font-weight: 600;
}

.kpi-label .bi {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    color: var(--kpi-color);
    background: rgba(255, 255, 255, .75);
    font-size: 1.15rem;
}

.kpi-value {
    margin-top: .375rem;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.kpi-note {
    margin-top: .25rem;
    color: #6b6b6f;
    font-size: .8125rem;
}

.kpi-delta {
    font-weight: 600;
}

.kpi-delta.up { color: #1f6b30; }
.kpi-delta.down { color: #b02a1c; }

.chart {
    display: block;
    width: 100%;
    height: auto;
}

.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-base { stroke: var(--chart-axis); stroke-width: 1; }

.chart-tick,
.chart-label {
    fill: var(--chart-ink);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chart-label-year { fill: #9a9a9e; }
.chart-hit { fill: transparent; }

.chart-band:hover .chart-hit,
.chart-band:focus .chart-hit,
.chart-link:focus-visible .chart-hit {
    fill: rgba(35, 31, 32, .05);
}

.chart-band:focus,
.chart-link:focus-visible { outline: none; }

.chart-s1 { fill: var(--chart-s1); background-color: var(--chart-s1); }
.chart-s2 { fill: var(--chart-s2); background-color: var(--chart-s2); }
.chart-s3 { fill: var(--chart-s3); background-color: var(--chart-s3); }

.chart-legend {
    display: flex;
    gap: 1rem;
    color: #55555a;
    font-size: .8125rem;
}

.chart-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: .375rem;
    border-radius: 2px;
}

.chart-table summary { cursor: pointer; }

/* A ranked list: the name and its amount on one line, the bar under them. */
.bar-list {
    display: grid;
    gap: .875rem;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem;
    row-gap: .25rem;
    font-size: .875rem;
}

.bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bar-track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 0 4px 4px 0;
    background: #f0f0f1;
}

.bar-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
}

.bar-note {
    grid-column: 1 / -1;
    color: #6b6b6f;
    font-size: .75rem;
}

.dash-table {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

/* The box that follows the pointer over a chart mark (data-tip). */
.chart-tip {
    position: fixed;
    z-index: 1080;
    max-width: 20rem;
    padding: .5rem .625rem;
    border-radius: 6px;
    color: #fff;
    background: var(--brand-black);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .2);
    font-size: .8125rem;
    line-height: 1.45;
    white-space: pre-line;
    pointer-events: none;
}

/* ---- Phones and tablets --------------------------------------------------
   Below 992px the sidebar already slides in over the page (above). The rest
   of what a small screen needs is here: tablets first, then phones. */
.topbar-brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-scroll {
    overflow-x: auto;
}

/* A finger needs more to press than a pointer does. */
@media (pointer: coarse) {
    .table .btn-sm {
        min-width: 2.25rem;
        min-height: 2.25rem;
    }
}

@media (max-width: 991.98px) {
    /* Never wider than the screen it slides over, and the page behind it
       stays where it is while the menu is open. */
    .sidebar {
        width: min(var(--sidebar-width), 86vw);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .topbar {
        padding: 0 .75rem;
    }
}

/* A tablet upright: the boxes above a list share the row evenly, three or so
   to a line, instead of keeping the narrow columns of a wide screen. */
@media (min-width: 768px) and (max-width: 991.98px) {
    form.row.g-2[method="get"] > [class*="col-md-"] {
        flex: 1 1 13rem;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* A strip of tabs is scrolled sideways, not folded onto several lines. */
    .settings-tabs,
    .po-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .settings-tabs::-webkit-scrollbar,
    .po-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-tabs .nav-item,
    .po-tabs .nav-item {
        flex: none;
    }

    /* The title of a page and its button: the button goes under the title
       when the two do not fit on one line. */
    main > .d-flex.mb-3 {
        flex-wrap: wrap;
        gap: .5rem .75rem;
    }

    .chart-scroll .chart {
        min-width: 560px;
    }

    .product-options {
        width: min(26rem, calc(100vw - 2rem));
    }

    .po-detail-head {
        gap: .5rem 1.25rem;
        padding: .75rem 1rem;
    }

    .po-detail-figure {
        text-align: left;
    }

    .stat-card .stat-value,
    .kpi-value {
        font-size: 1.5rem;
    }

    /* A sheet made for paper is read here by scrolling it sideways. */
    .print-sheet {
        padding: 16px;
        overflow-x: auto;
    }

    /* Under 16px, iOS zooms the page in when a box is tapped. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 1rem;
    }

    /* ---- A list on a phone (.table-stack, set by assets/js/app.js on a
       list of five columns or more): each row is a block of its own, every
       value on a line with the heading of its column in front of it. The
       headings that order the list stay, as a strip above it. */
    .table.table-stack,
    .table.table-stack > tbody,
    .table.table-stack > tfoot,
    .table.table-stack > tbody > tr,
    .table.table-stack > tfoot > tr {
        display: block;
    }

    .table.table-stack > thead {
        display: none;
    }

    .table.table-stack > thead:has(.sort-link) {
        display: block;
    }

    .table.table-stack > thead > tr {
        display: flex;
        align-items: center;
        gap: .5rem;
        overflow-x: auto;
        padding: .5rem 1rem;
        background: #f8f9fa;
        border-bottom: 1px solid var(--bs-border-color);
        scrollbar-width: none;
    }

    .table.table-stack > thead > tr::before {
        content: "Sort";
        flex: none;
        color: #6b6b6f;
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .table.table-stack > thead > tr > th {
        display: none;
    }

    .table.table-stack > thead > tr > th:has(.sort-link) {
        display: block;
        flex: none;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .table-stack > thead .sort-link {
        display: inline-block;
        padding: .25rem .625rem;
        border: 1px solid #d5d5d8;
        border-radius: 999px;
        background: #fff;
        font-size: .8125rem;
        font-weight: 500;
    }

    .table-stack > thead .sort-link.active {
        color: var(--brand-green-dark);
        border-color: var(--brand-green);
    }

    .table.table-stack > tbody > tr,
    .table.table-stack > tfoot > tr {
        padding: .5rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .table.table-stack > tbody:last-child > tr:last-child,
    .table.table-stack > tfoot > tr:last-child {
        border-bottom: 0;
    }

    /* The shading is on the row, so the gaps between its lines are shaded too. */
    .table.table-stack > tbody > tr:nth-child(even of :not(.po-detail-row)):not(.po-open) {
        background: var(--bs-table-striped-bg);
    }

    .table.table-stack > tbody > tr > td {
        background: transparent;
        box-shadow: none;
    }

    .table.table-stack > :not(caption) > tr > td {
        display: flow-root;
        padding: .2rem 1rem;
        border: 0;
    }

    .table.table-stack > :not(caption) > tr > td:empty {
        display: none;
    }

    .table.table-stack > :not(caption) > tr > td[data-label] {
        max-width: none !important;
        text-align: right !important;
    }

    .table.table-stack > :not(caption) > tr > td[data-label]::before {
        content: attr(data-label);
        float: left;
        max-width: 45%;
        margin-right: 1rem;
        color: #55555a;
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.5rem;
        text-align: left;
        white-space: normal;
    }

    /* The order that is open on the Client Ledger: the green edge runs down
       the row and the panel under it. */
    .table.table-stack > tbody > tr.po-open,
    .table.table-stack > tbody > tr.po-detail-row {
        background: #eef5ef;
        border-left: 4px solid var(--brand-green);
    }

    .table.table-stack > tbody > tr.po-open {
        border-bottom: 0;
    }

    .table.table-stack > tbody > tr.po-detail-row > td {
        padding: .25rem .5rem .5rem;
    }

    .po-detail .table.table-stack > * > tr > td {
        padding: .2rem 1rem;
    }
}

/* Documents: the buttons of an upload form stand level with its fields, under
   the height of a label; the webcam and the picture taken with it fill the
   Take Picture popup (assets/js/capture.js). */
@media (min-width: 768px) {
    .document-form-buttons {
        padding-top: 2rem;
    }
}

.capture-view {
    width: 100%;
    max-height: 65vh;
    background: #000;
    border-radius: .375rem;
    object-fit: contain;
}

/* The filters above a list (search, dates, status ...): one light grey for
   all of them, so the options stand apart from the rows they filter. It is
   every card body whose form sends its fields in the address (method="get");
   the pager's rows-per-page form is not laid out as a row and is left alone. */
.card-body:has(> form.row[method="get"]) {
    background: #eef0f2;
    /* A thin line of a deeper grey all round. */
    border: 1px solid #c9ced4 !important;
}

/* At the top of its card, it follows the card's rounded corners. */
.card:not(.rounded-top-0) > .card-body:first-child:has(> form.row[method="get"]) {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* The buttons of those filters: the one that applies them (Search, Filter,
   Find) in pale green, the one that clears them (Reset, Clear) in pale rose.
   Each darkens to its full colour under the pointer. */
.card-body:has(> form.row[method="get"]) .btn-outline-primary {
    --bs-btn-color: var(--brand-green-dark);
    --bs-btn-bg: #dcefdf;
    --bs-btn-border-color: #8fc19a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green-dark);
    --bs-btn-active-border-color: var(--brand-green-dark);
    --bs-btn-focus-shadow-rgb: 43, 97, 54;
    font-weight: 500;
}

.card-body:has(> form.row[method="get"]) .btn-outline-secondary {
    --bs-btn-color: #8a3b33;
    --bs-btn-bg: #fbe5e2;
    --bs-btn-border-color: #e3aaa3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c0392b;
    --bs-btn-hover-border-color: #c0392b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a23024;
    --bs-btn-active-border-color: #a23024;
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
    font-weight: 500;
}

/* The layout of those filters. Search fields are compact, date ranges
   have room for both dates, and lists of choices are moderate. The buttons
   come last, at the bottom right corner. On a narrow screen the controls
   stack one under the other, as before, and only the buttons keep their
   place. */
.card-body:has(> form.row[method="get"]) > form.row > [class*="col-"]:has(> .btn) {
    order: 99;
    flex: 1 0 auto;
    width: auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: .5rem;
}

.card-body:has(> form.row[method="get"]) > form.row > [class*="col-"]:has(> .btn) > .btn {
    /* Over .flex-fill, which some of these buttons carry. */
    flex: 0 0 auto !important;
    min-width: 6rem;
}

/* Filter headings stay available to screen readers without taking up space. */
form.row[method="get"] > [class*="col-"] > label.form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keep filter controls aligned along their bottom edge. */
.card-body:has(> form.row[method="get"]) > form.row {
    align-items: flex-end;
}

@media (min-width: 768px) {
    .card-body:has(> form.row[method="get"]) > form.row > :where([class*="col-"]:not(:has(> .btn))) {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
    }

    .card-body:has(> form.row[method="get"]) > form.row > [class*="col-"]:has(select) {
        flex: 0 1 17rem;
        min-width: 11rem;
    }

    .card-body:has(> form.row[method="get"]) > form.row > [class*="col-"]:has(input[type="date"]) {
        flex: 0 0 27rem;
    }

    .card-body:has(> form.row[method="get"]) > form.row > [class*="col-"]:has(input:not([type]), input[type="text"], input[type="search"]) {
        flex: 0 1 18rem;
    }
}