@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --bs-primary: #009ade;
    --bs-primary-rgb: 0, 154, 222;
    --bs-link-color: #009ade;
    --bs-link-color-rgb: 0, 154, 222;
    --bs-link-hover-color: #007bb2;
    --bs-body-font-family: 'Lato', system-ui, sans-serif;
    --bs-body-bg: #ffffff;
}

body {
    font-family: 'Lato', system-ui, sans-serif;
    background: #fff url('/images/background.png') repeat;
    background-image: image-set('/images/background.png' 1x, '/images/background_@2X.png' 2x);
    background-size: 100px 100px;
}

/* the coloured Got it?! stripe sits in the navbar's bottom padding */
.app-navbar {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 10px;
    background: #fff url('/images/background_sub_navbar.png') no-repeat center bottom;
    background-image: image-set('/images/background_sub_navbar.png' 1x, '/images/background_sub_navbar_@2X.png' 2x);
    background-size: 2560px 10px;
}
.navbar-brand { margin: 0; padding: 0; }
/* like the legacy layout: the g of the logo hangs 5px into the stripe */
.navbar-brand img { display: block; margin-top: 5px; margin-bottom: -5px; }
.tm-logo { height: 40px; }

.btn-primary {
    --bs-btn-bg: #009ade;
    --bs-btn-border-color: #009ade;
    --bs-btn-hover-bg: #008bc8;
    --bs-btn-hover-border-color: #008bc8;
    --bs-btn-active-bg: #007bb2;
    --bs-btn-active-border-color: #007bb2;
    --bs-btn-disabled-bg: #009ade;
    --bs-btn-disabled-border-color: #009ade;
    color: #fff;
}

.page-link { color: #007bb2; }
.page-link .bi { vertical-align: -1px; }
.active > .page-link, .page-item.active .page-link { background-color: #009ade; border-color: #009ade; }

.card { --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; }

/* slightly roomier forms */
.card-body { padding: 1.5rem; }
.card-header, .card-footer { padding: 1rem 1.5rem; }

.app-shell { min-height: calc(100vh - 76px); }
.app-sidebar { width: 120px; background-color: #f1f3f5; }
.app-sidebar .list-group-item { aspect-ratio: 1; padding: 0.5rem; }
/* list-group-flush drops the last item's bottom line; the old tabs had one under each */
.app-sidebar .list-group-item:last-child { border-bottom-width: var(--bs-list-group-border-width); }
.app-sidebar .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-action-hover-bg: rgba(0, 0, 0, 0.03);
    --bs-list-group-active-bg: #fff;
    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-border-color: var(--bs-border-color);
}

.table th a { text-decoration: none; }
.table-edged > :not(caption) > tr > :first-child { padding-left: 1rem; }
.table-edged > :not(caption) > tr > :last-child { padding-right: 1rem; }

/* bootstrap gives disabled buttons pointer-events: none, so the cursor goes on their tooltip wrapper */
[data-bs-toggle="tooltip"]:has(> .btn:disabled) { cursor: not-allowed; }