/* Client portal (#83), in the GUISOFT design system (OfficeGest design system v4, design.dev.guisoft.net) since
   2026-11-02: its colour tokens, font stack and components (navbar, card, form, alert, badge, table); the icons are
   Lucide's (faturas.icons). The tokens below are copied as they are from the design system's og-ace.css
   (gitlab.guisoft.net/gs/officegest/design-system, assets/bs4/css/ace/og-ace.css), only those the rules use; dark is
   OfficeGest's `.dark` theme, taken with the system's setting. Never a colour of our own. No fonts, images or
   scripts from elsewhere: the page's Content-Security-Policy allows only this server. */
:root {
    --secondary-button-light-color: var(--grey-800);
    --secondary-button-light-hover-background: var(--grey-200);
    --grey-50: hsl(0, 0%, 100%);
    --grey-100: hsl(0, 0%, 97%);
    --grey-200: hsl(0, 0%, 96%);
    --grey-300: hsl(0, 0%, 90%);
    --grey-500: hsl(0, 0%, 69%);
    --grey-600: hsl(0, 0%, 56%);
    --grey-800: hsl(0, 0%, 27%);
    --blue-50: hsl(204, 100%, 98%);
    --blue-100: hsl(202, 100%, 94%);
    --blue-200: hsl(199, 100%, 86%);
    --blue-500: hsl(198, 98%, 48%);
    --blue-800: #006394;
    --blue-900: hsl(201, 89%, 24%);
    --blue-1000: hsl(203, 90%, 16%);
    --green-100: hsl(139, 58%, 93%);
    --green-200: hsl(138, 53%, 85%);
    --green-300: hsl(139, 52%, 73%);
    --green-900: hsl(141, 42%, 20%);
    --red-100: hsl(0, 93%, 94%);
    --red-200: hsl(1, 100%, 89%);
    --red-300: hsl(1, 96%, 82%);
    --red-800: hsl(1, 72%, 35%);
    --red-900: hsl(1, 65%, 31%);
    --red-1000: hsl(1, 77%, 15%);
    --orange-100: hsl(43, 96%, 89%);
    --orange-200: hsl(42, 97%, 77%);
    --orange-300: hsl(40, 96%, 65%);
    --orange-900: hsl(16, 78%, 26%);
    --orange-1000: hsl(15, 92%, 14%);
    --sky-100: hsl(200, 94%, 94%);
    --sky-300: hsl(194, 98%, 74%);
    --sky-900: hsl(197, 82%, 24%);
    --sky-1000: hsl(199, 83%, 16%);
    --body-background-top: var(--grey-50);
    --body-background-middle: var(--grey-100);
    --body-background-bottom: var(--grey-200);
    --body-background-hover-middle: var(--grey-200);
    --body-text-color: var(--grey-800);
    --muted-text-color: var(--grey-600);
    --border-color: var(--grey-300);
    --border-hover-color: var(--grey-500);
    --navbar-background: var(--blue-800);
    --primary-color: var(--blue-900);
    --primary-light-background: var(--blue-100);
    --success-contrast-color: var(--green-900);
    --success-light-background: var(--green-100);
    --success-light-border: var(--green-300);
    --danger-color: var(--red-800);
    --danger-contrast-color: var(--red-900);
    --danger-light-background: var(--red-100);
    --danger-light-border: var(--red-300);
    --warning-contrast-color: var(--orange-900);
    --warning-light-background: var(--orange-100);
    --warning-light-border: var(--orange-300);
    --info-contrast-color: var(--sky-900);
    --info-light-background: var(--sky-100);
    --info-light-border: var(--sky-300);
    --primary-button-background: var(--blue-800);
    --primary-button-color: var(--blue-50);
    --primary-button-border: var(--blue-900);
    --primary-button-hover-background: var(--blue-900);
    --primary-button-hover-color: var(--primary-button-color);
    --primary-button-hover-border: var(--blue-1000);
    --primary-button-active-background: var(--blue-1000);
    --primary-button-active-color: var(--primary-button-color);
    --primary-button-active-border: var(--blue-1000);
    --primary-badge-light-background: var(--blue-200);
    --primary-badge-light-color: var(--blue-1000);
    --secondary-badge-light-background: var(--grey-300);
    --secondary-badge-light-color: var(--grey-800);
    --danger-badge-light-background: var(--red-200);
    --danger-badge-light-color: var(--red-1000);
    --success-badge-light-background: var(--green-200);
    --success-badge-light-color: var(--green-900);
    --warning-badge-light-background: var(--orange-200);
    --warning-badge-light-color: var(--orange-1000);
    --info-badge-light-background: var(--sky-300);
    --info-badge-light-color: var(--sky-1000);
    --input-color: var(--body-text-color);
    --input-bg: var(--body-background-top);
    --input-border: var(--border-color);
    --input-hover-border: var(--border-hover-color);
    --input-focus-ring: 0 0 0 2px var(--blue-200);
    --input-focus-border: var(--blue-500);
    --input-focus-color: var(--body-text-color);
    --input-focus-bg: var(--body-background-top);
    --input-placeholder-color: var(--muted-text-color);
    --table-striped: var(--body-background-middle);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --secondary-button-light-color: var(--grey-75);
        --secondary-button-light-hover-background: var(--grey-900);
        --grey-75: hsl(0, 0%, 96%);
        --grey-200: hsl(0, 0%, 56%);
        --grey-300: hsl(0, 0%, 36%);
        --grey-400: hsl(0, 0%, 19%);
        --grey-700: hsl(0, 0%, 12%);
        --grey-800: hsl(0, 0%, 9%);
        --grey-900: hsl(0, 0%, 7%);
        --blue-50: hsl(202, 100%, 94%);
        --blue-75: hsl(200, 100%, 87%);
        --blue-400: hsl(200, 100%, 42%);
        --blue-500: hsl(200, 100%, 29%);
        --blue-700: hsl(200, 100%, 19%);
        --blue-800: hsl(200, 100%, 14%);
        --blue-900: hsl(200, 100%, 9%);
        --green-75: hsl(138, 48%, 86%);
        --green-100: hsl(139, 47%, 78%);
        --green-700: hsl(139, 47%, 20%);
        --green-900: hsl(139, 46%, 8%);
        --red-75: hsl(1, 91%, 86%);
        --red-300: hsl(1, 79%, 61%);
        --red-700: hsl(1, 83%, 26%);
        --red-900: hsl(0, 91%, 11%);
        --orange-100: hsl(43, 96%, 78%);
        --orange-700: hsl(20, 89%, 26%);
        --orange-900: hsl(16, 78%, 8%);
        --sky-75: hsl(192, 91%, 79%);
        --sky-100: hsl(193, 91%, 73%);
        --sky-700: hsl(196, 94%, 21%);
        --sky-900: hsl(198, 94%, 7%);
        --body-background-top: var(--grey-700);
        --body-background-middle: var(--grey-800);
        --body-background-bottom: var(--grey-900);
        --body-background-hover-middle: var(--grey-700);
        --body-text-color: var(--grey-75);
        --border-color: var(--grey-400);
        --muted-text-color: var(--grey-200);
        --border-hover-color: var(--grey-300);
        --primary-color: var(--blue-400);
        --primary-light-background: var(--blue-900);
        --success-contrast-color: var(--green-100);
        --success-light-background: var(--green-900);
        --success-light-border: var(--green-700);
        --danger-color: var(--red-300);
        --danger-contrast-color: var(--red-75);
        --danger-light-background: var(--red-900);
        --danger-light-border: var(--red-700);
        --warning-contrast-color: var(--orange-100);
        --warning-light-background: var(--orange-900);
        --warning-light-border: var(--orange-700);
        --info-contrast-color: var(--sky-100);
        --info-light-background: var(--sky-900);
        --info-light-border: var(--sky-700);
        --primary-button-background: var(--blue-700);
        --primary-button-border: var(--blue-800);
        --primary-button-hover-background: var(--blue-800);
        --primary-button-hover-border: var(--blue-900);
        --primary-button-active-background: var(--blue-900);
        --primary-button-active-border: var(--blue-900);
        --primary-badge-light-background: var(--blue-900);
        --primary-badge-light-color: var(--blue-75);
        --secondary-badge-light-background: var(--grey-900);
        --secondary-badge-light-color: var(--grey-75);
        --danger-badge-light-background: var(--red-900);
        --danger-badge-light-color: var(--red-75);
        --success-badge-light-background: var(--green-900);
        --success-badge-light-color: var(--green-75);
        --warning-badge-light-background: var(--orange-900);
        --warning-badge-light-color: var(--orange-100);
        --info-badge-light-background: var(--sky-900);
        --info-badge-light-color: var(--sky-75);
        --input-focus-ring: 0 0 0 2px var(--blue-800);
    }
}

/* Base: OfficeGest's font stack (no serif, ever), page and text colours of the theme. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Source Sans Pro", Roboto,
        "Trebuchet MS", Arial, sans-serif;
    color: var(--body-text-color); background-color: var(--body-background-bottom);
}
main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--body-text-color); }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary-color); }
b { font-weight: 600; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.text-muted, .muted { color: var(--muted-text-color); }
.text-primary { color: var(--primary-color); }

/* Icons: Lucide, drawn inline (faturas.icons), a little over one em so the 2-unit stroke stays clear. */
.icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.22em; }
.spin { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Navbar: OfficeGest's top bar, in the navbar colour, with the OfficeGest mark. */
.navbar { flex: none; color: var(--grey-50); background-color: var(--navbar-background); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.og-mark { width: 2rem; height: 2rem; flex: none; }
.brand-name { font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
.brand-name small { display: block; font-weight: 400; font-size: .8125rem; opacity: .85; }
.navbar-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.navbar-user form { margin: 0; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .875rem; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Button: weight 600, small radius; one primary per group. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
    font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; border-radius: .25rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--input-focus-ring); }
.btn:disabled { cursor: default; opacity: .65; }
.btn-primary {
    color: var(--primary-button-color); background-color: var(--primary-button-background);
    border-color: var(--primary-button-border); box-shadow: 0 1px 0 rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn-primary:hover:not(:disabled) {
    color: var(--primary-button-hover-color); background-color: var(--primary-button-hover-background);
    border-color: var(--primary-button-hover-border);
}
.btn-primary:active:not(:disabled) {
    color: var(--primary-button-active-color); background-color: var(--primary-button-active-background);
    border-color: var(--primary-button-active-border);
}
.btn-block { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: .9375rem; }
.btn-navbar { color: var(--grey-50); background-color: transparent; border-color: rgba(255, 255, 255, .35); padding: 6px 12px; }
.btn-navbar:hover { background-color: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .6); }

/* Card (UI::Card, "ccard"): title and subtitle in the header, body, footer with the actions on the right. */
.card {
    display: flex; flex-direction: column; min-width: 0; margin: 0;
    background-color: var(--body-background-top); border: 1px solid var(--border-color); border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border-color); }
.card-title p { margin-top: 4px; font-size: .875rem; }
.card-body { padding: 20px; margin: 0; }
.card-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px;
    border-top: 1px solid var(--border-color); background-color: var(--body-background-middle);
    border-radius: 0 0 .5rem .5rem;
}

/* Form: label above the field, help text tied to it, the focus ring of the theme. */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
.form-control {
    display: block; width: 100%; min-width: 0; padding: 8px 12px; font: inherit; font-size: .9375rem; line-height: 1.5;
    color: var(--input-color); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: .25rem;
    transition: border-color 120ms, box-shadow 120ms;
}
.form-control:hover { border-color: var(--input-hover-border); }
.form-control:focus { outline: none; color: var(--input-focus-color); background-color: var(--input-focus-bg);
    border-color: var(--input-focus-border); box-shadow: var(--input-focus-ring); }
.form-control::placeholder { color: var(--input-placeholder-color); opacity: 1; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
    display: flex; align-items: center; padding: 0 12px; font-size: .9375rem; white-space: nowrap;
    color: var(--muted-text-color); background-color: var(--body-background-middle);
    border: 1px solid var(--input-border); border-left: 0; border-radius: 0 .25rem .25rem 0;
}
.form-text { display: flex; gap: 6px; margin-top: 6px; font-size: .8125rem; line-height: 1.45; }
.form-text .icon { margin-top: .1em; }
.card-body > .form-text { margin-top: 4px; }

/* Alert (UI::Alert): the type's light background and border, its icon, and the text in its colour. */
.alert { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid;
    border-radius: .5rem; font-size: .9375rem; }
.alert-icon { font-size: 1.375rem; margin-top: -1px; }
.alert-danger { color: var(--danger-contrast-color); background-color: var(--danger-light-background); border-color: var(--danger-light-border); }
.alert-warning { color: var(--warning-contrast-color); background-color: var(--warning-light-background); border-color: var(--warning-light-border); }
.alert-success { color: var(--success-contrast-color); background-color: var(--success-light-background); border-color: var(--success-light-border); }
.alert-info { color: var(--info-contrast-color); background-color: var(--info-light-background); border-color: var(--info-light-border); }

/* Badge: the light variant, with an icon, never colour alone. */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: .8125rem; font-weight: 600;
    line-height: 1.2; border-radius: .25rem; }
.badge-light-success { color: var(--success-badge-light-color); background-color: var(--success-badge-light-background); }
.badge-light-warning { color: var(--warning-badge-light-color); background-color: var(--warning-badge-light-background); }
.badge-light-danger { color: var(--danger-badge-light-color); background-color: var(--danger-badge-light-background); }
.badge-light-info { color: var(--info-badge-light-color); background-color: var(--info-badge-light-background); }
.badge-light-secondary { color: var(--secondary-badge-light-color); background-color: var(--secondary-badge-light-background); }

/* Sign-in: the form card, and beside it what the portal does. */
.auth { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 24px; align-items: start;
    max-width: 960px; padding-top: 48px; padding-bottom: 48px; }
.auth .card-footer { padding: 16px 20px; }
.about h2 { font-size: 1.25rem; }
.about .card-title p { font-size: .9375rem; }
.about ul, .tips ul, ul.card-body { list-style: none; display: grid; gap: 18px; }
.about li, .tips li { display: flex; gap: 14px; }
.about li > .icon, .tips li > .icon { font-size: 1.25rem; margin-top: 1px; }
.about li b, .tips li b { display: block; }
.about li span, .tips li span { display: block; color: var(--muted-text-color); font-size: .875rem; }

/* The sending page: the page header, the upload card and the tips beside it, then the table. */
.app { padding-top: 24px; padding-bottom: 40px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px; }
.page-header p { margin-top: 4px; }
.send-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start;
    margin-bottom: 32px; }
.drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px;
    text-align: center; cursor: pointer; border: 2px dashed var(--border-hover-color); border-radius: .5rem;
    background-color: var(--body-background-middle); transition: border-color .15s, background-color .15s;
}
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--input-focus-border); background-color: var(--primary-light-background); }
.drop:focus-within { box-shadow: var(--input-focus-ring); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 4px; }
.drop-title { font-size: 1.0625rem; font-weight: 600; }
.drop-sub { font-size: .875rem; color: var(--muted-text-color); }
.drop-sub u { color: var(--primary-color); }
.picked { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.picked:not(:empty) { margin-top: 14px; }
.picked li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: .875rem;
    border: 1px solid var(--border-color); border-radius: .25rem; background-color: var(--body-background-top); }
.picked .ext { flex: none; padding: 2px 6px; font-size: .75rem; font-weight: 600; border-radius: .25rem;
    color: var(--primary-badge-light-color); background-color: var(--primary-badge-light-background); }
.picked .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked .size { flex: none; color: var(--muted-text-color); font-variant-numeric: tabular-nums; }
.progress { display: none; height: 6px; margin-top: 14px; overflow: hidden; border-radius: 3px;
    background-color: var(--body-background-bottom); }
.sending .progress { display: block; }
.progress-bar { display: block; width: 0; height: 100%; background-color: var(--primary-button-background); transition: width .2s; }
.progress.indeterminate .progress-bar { width: 35%; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.upload-bar { justify-content: space-between; }
.count { font-size: .875rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: 1.25rem; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted-text-color); }

/* Table: a block of its own, never inside a card; striped, with the hover of the theme. */
.table-block { overflow-x: auto; background-color: var(--body-background-top); border: 1px solid var(--border-color);
    border-radius: .5rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.table-block > p { padding: 20px; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { padding: 12px 16px; text-align: left; font-size: .8125rem; font-weight: 600; white-space: nowrap;
    color: var(--muted-text-color); background-color: var(--body-background-middle); border-bottom: 1px solid var(--border-color); }
.table td { padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--border-color); }
.table tbody tr:first-child td { border-top: 0; }
.table-striped tbody tr:nth-of-type(2n+1) { background-color: var(--table-striped); }
.table-hover tbody tr:hover { background-color: var(--body-background-hover-middle); }
.table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table td:nth-child(2) { font-weight: 600; overflow-wrap: anywhere; min-width: 9rem; }
.table td:nth-child(3) { min-width: 13rem; }
.table td .badge { margin-bottom: 4px; }
/* the original as sent, downloaded from the sending (2026-11-03) */
.table a.original { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-color); text-decoration: none; overflow-wrap: anywhere; }
.table a.original:hover { text-decoration: underline; }
/* the filter by state and the pages (#145) */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px;
    border-bottom: 1px solid var(--border-color); }
.filters > .icon { color: var(--muted-text-color); width: 16px; height: 16px; }
.filters .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-color); color: var(--primary-color); text-decoration: none; font-size: .8125rem; }
.filters .chip b { font-weight: 700; }
.filters .chip:hover { background-color: var(--primary-light-background); }
.filters .chip.active { color: var(--primary-badge-light-color); background-color: var(--primary-light-background);
    border-color: var(--primary-button-background); font-weight: 600; }
/* the pages: the design system's .pagination (og-ace.css), with the count as OfficeGest's tables show it */
.pager-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-top: 1px solid var(--border-color); font-size: .875rem; }
.pagination { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.page-link { display: inline-flex; align-items: center; gap: 4px; min-width: 2.25rem; justify-content: center;
    padding: .375rem .75rem; line-height: 1.25; color: var(--secondary-button-light-color); background-color: transparent;
    font-weight: 600; border-radius: .25rem; margin-left: .425rem; border: 0; text-decoration: none; }
.page-link .icon { width: 15px; height: 15px; }
a.page-link:hover { color: var(--secondary-button-light-color); background-color: var(--secondary-button-light-hover-background); }
a.page-link:focus-visible { outline: none; box-shadow: var(--input-focus-ring); }
.page-item.active .page-link { color: var(--grey-50); background-color: var(--primary-button-background); }
.page-item.disabled .page-link { opacity: .45; cursor: default; }
@media (max-width: 600px) {
    .pager-bar { justify-content: center; }
    .page-link { margin-left: .15rem; padding: .375rem .45rem; min-width: 1.85rem; }
    .page-link .label, .page-item.far { display: none; }
}
.badge.origin { margin-top: 4px; }
.table a.original .icon { flex: none; width: 15px; height: 15px; }
.table ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.table li.error { color: var(--danger-color); font-weight: 600; }
.table tr.is-new { animation: arrive 2.4s ease-out; }
/* one body per day under its heading (2026-11-02): the striping starts again in each day */
.table tr.day th { padding: 10px 16px; text-align: left; font-size: .9375rem; font-weight: 700;
    color: var(--primary-badge-light-color); background-color: var(--primary-light-background);
    border-left: 4px solid var(--primary-button-background); border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color); white-space: normal; }
.table-striped tbody tr.day, .table-hover tbody tr.day:hover { background-color: transparent; }
.table tbody tr.day + tr td { border-top: 0; }
/* the earlier days (2026-11-02): a light primary button, as the design system's btn-light-primary */
.pager { padding: 16px; display: flex; justify-content: center; }
.pager:first-child { justify-content: flex-start; border-bottom: 1px solid var(--border-color); }
.btn-light-primary { color: var(--primary-badge-light-color); background-color: var(--primary-light-background);
    border-color: var(--primary-light-background); text-decoration: none; }
.btn-light-primary:hover { background-color: var(--primary-badge-light-background);
    border-color: var(--primary-badge-light-background); }
.table tbody + tbody tr.day th { border-top-width: 12px; border-top-color: var(--body-background-top); }
@keyframes arrive { from { background-color: var(--primary-light-background); } }

/* Footer */
.foot { flex: none; padding: 18px 0 22px; font-size: .8125rem; color: var(--muted-text-color); border-top: 1px solid var(--border-color); }
.foot .container { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.foot span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
    .auth, .send-grid { grid-template-columns: minmax(0, 1fr); }
    .auth { padding-top: 24px; max-width: 30rem; }
}
@media (max-width: 600px) {
    .brand-name small, .who span { display: none; }
    .btn-navbar { padding: 6px 10px; }
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; }
    .table tr { padding: 12px 16px; border-top: 1px solid var(--border-color); }
    .table tbody tr:first-child { border-top: 0; }
    .table td { padding: 2px 0; border: 0; min-width: 0; }
    .table tr.day { padding: 0; }
    .table tr.day th { display: block; }
    .table td:first-child { color: var(--muted-text-color); font-size: .8125rem; }
}
@media (max-width: 480px) {
    .brand:has(~ .navbar-user) .brand-name { display: none; }  /* the tenant matters more than the name */
}
@media (prefers-reduced-motion: reduce) {
    .spin, .progress.indeterminate .progress-bar, .table tr.is-new { animation: none; }
}