/* ==========================================================================
   Brand theme for Bootstrap 5.3 (app name comes from config/app.php)
   Palette: #34BDEB (brand)  #000000 (ink)  #FFFFFF (surface)

   Loaded AFTER bootstrap.min.css, styles.css (SB Admin) and custom.css so it
   has the last word. Bootstrap 5.3 is driven by CSS variables, so most of this
   file just re-points those variables instead of fighting the cascade.
   ========================================================================== */

:root {
    --ll-brand: #34bdeb;
    --ll-brand-rgb: 52, 189, 235;
    --ll-brand-dark: #1ba3d2;
    --ll-brand-darker: #1582a8;
    --ll-brand-tint: #ecf9fe;
    --ll-brand-tint-2: #d2f1fc;

    --ll-ink: #000000;
    --ll-ink-muted: #4b5563;
    --ll-ink-subtle: #6b7280;

    --ll-surface: #ffffff;
    --ll-canvas: #f4f7f9;
    --ll-line: rgba(0, 0, 0, .1);
    --ll-line-soft: rgba(0, 0, 0, .06);

    --ll-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
    --ll-shadow-pop: 0 10px 30px rgba(0, 0, 0, .12);

    --ll-sidebar-w: 250px;
    --ll-topbar-h: 60px;

    /* Bootstrap theme colour */
    --bs-primary: #34bdeb;
    --bs-primary-rgb: 52, 189, 235;
    --bs-primary-text-emphasis: #14688a;
    --bs-primary-bg-subtle: #ecf9fe;
    --bs-primary-border-subtle: #a8e5f8;

    --bs-link-color: #1582a8;
    --bs-link-color-rgb: 21, 130, 168;
    --bs-link-hover-color: #14688a;
    --bs-link-hover-color-rgb: 20, 104, 138;

    --bs-focus-ring-color: rgba(52, 189, 235, .35);
    --bs-border-color: rgba(0, 0, 0, .1);
    --bs-body-color: #1f2328;
    --bs-heading-color: #000000;
    --bs-body-bg: #ffffff;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;

    --bs-body-font-family: "Segoe UI Variable", "Segoe UI", -apple-system,
        BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    color: var(--bs-body-color);
}

/* Bootstrap 5.3 headings read --bs-heading-color (default: inherit). Setting
   the variable rather than `color` means headings on a dark or brand-filled
   surface keep inheriting that surface's colour instead of going black. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

::selection {
    background: var(--ll-brand);
    color: var(--ll-ink);
}

/* Keyboard focus is always visible and always brand-coloured. */
:focus-visible {
    outline: 2px solid var(--ll-brand);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.sb-nav-fixed .sb-topnav { height: var(--ll-topbar-h); }

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav,
.sb-topnav .navbar-brand { width: var(--ll-sidebar-w); }

.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: var(--ll-sidebar-w);
    top: var(--ll-topbar-h);
    background-color: var(--ll-canvas);
    min-height: calc(100vh - var(--ll-topbar-h));
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    padding-top: var(--ll-topbar-h);
}

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: translateX(calc(-1 * var(--ll-sidebar-w))); }
.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content { padding-left: 0; }

@media (max-width: 991.98px) {
    .sb-nav-fixed #layoutSidenav #layoutSidenav_content { padding-left: 0; }
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav { transform: translateX(calc(-1 * var(--ll-sidebar-w))); }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: translateX(0); }
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content { padding-left: 0; }

    /* Scrim behind the drawer */
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
        content: "";
        position: fixed;
        inset: var(--ll-topbar-h) 0 0 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1037;
    }
}

main { padding-bottom: 1rem; }

/* The brand is pinned to the sidebar width on desktop so the toggle lines up
   with the rail edge; on phones it just takes the room it needs. */
@media (max-width: 991.98px) {
    .sb-topnav .navbar-brand { width: auto; padding-left: .875rem; padding-right: .5rem; }
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.sb-topnav.navbar {
    background-color: var(--ll-surface) !important;
    border-bottom: 1px solid var(--ll-line);
    padding: 0 1rem 0 0;
}

.sb-topnav .navbar-brand {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
    height: var(--ll-topbar-h);
    color: var(--ll-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

.sb-topnav .navbar-brand:hover { text-decoration: none; }
.sb-topnav .navbar-brand img { max-height: 34px; width: auto; }

.ll-brandmark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
}

.ll-brandmark .ll-brandmark-badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    background: var(--ll-brand);
    color: var(--ll-ink);
    font-size: .95rem;
}

.ll-brandmark .ll-brandmark-accent { color: var(--ll-brand); }

/* Sidebar toggle */
#sidebarToggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--ll-ink);
    transition: background-color .15s ease;
}

#sidebarToggle:hover,
#sidebarToggle:focus { background: rgba(0, 0, 0, .06); color: var(--ll-ink); }

/* Account button */
.ll-account-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem;
    border-radius: 999px;
    transition: background-color .15s ease;
}

.ll-account-toggle:hover { background: rgba(0, 0, 0, .06); text-decoration: none; }
.ll-account-toggle::after { display: none; }

.ll-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ll-ink);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    object-fit: cover;
    overflow: hidden;
}

.ll-avatar-lg { width: 44px; height: 44px; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sb-sidenav.sb-sidenav-dark {
    background-color: var(--ll-ink);
    color: rgba(255, 255, 255, .72);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu { padding: .75rem .625rem 2rem; }

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav { gap: 2px; }

/* custom.css adds an 8px margin to every .nav-item; the flex gap handles it. */
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-item { margin-bottom: 0; }

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link i { color: inherit; }

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    background-color: var(--ll-brand) !important;
    color: var(--ll-ink) !important;
    font-weight: 600;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link.active i { color: var(--ll-ink); }

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
    margin-left: auto;
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    transition: transform .15s ease;
}

/* Expanded groups keep their label bright but not filled. */
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link[data-bs-toggle="collapse"].active {
    background-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link[data-bs-toggle="collapse"].active i { color: #fff; }

/* Nested links */
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-nested {
    gap: 2px;
    margin: 2px 0 2px 1.35rem;
    padding-left: .5rem;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-nested .nav-link {
    padding: .45rem .6rem;
    font-size: .825rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-nested .nav-link.active {
    background-color: transparent !important;
    color: var(--ll-brand) !important;
    font-weight: 600;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-nested .nav-link.active i { color: var(--ll-brand); }

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
    padding: 1rem .75rem .35rem;
    color: rgba(255, 255, 255, .38);
    font-size: .69rem;
    letter-spacing: .06em;
}

/* Thin scrollbar inside the dark rail */
.sb-sidenav-menu::-webkit-scrollbar { width: 6px; }
.sb-sidenav-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .875rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover { text-decoration: none; }

/* Cyan is light, so black text on it reads far better than white. */
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--ll-brand);
    --bs-btn-border-color: var(--ll-brand);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #4fc7ef;
    --bs-btn-hover-border-color: #4fc7ef;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ll-brand-dark);
    --bs-btn-active-border-color: var(--ll-brand-dark);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--ll-brand);
    --bs-btn-disabled-border-color: var(--ll-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--ll-brand-darker);
    --bs-btn-border-color: var(--ll-brand);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--ll-brand);
    --bs-btn-hover-border-color: var(--ll-brand);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--ll-brand);
    --bs-btn-active-border-color: var(--ll-brand);
}

.btn-dark {
    --bs-btn-bg: var(--ll-ink);
    --bs-btn-border-color: var(--ll-ink);
    --bs-btn-hover-bg: #262626;
    --bs-btn-hover-border-color: #262626;
    --bs-btn-active-bg: #000;
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ll-line);
    --bs-btn-color: var(--ll-ink);
    --bs-btn-hover-bg: var(--ll-brand-tint);
    --bs-btn-hover-border-color: var(--ll-brand);
    --bs-btn-hover-color: var(--ll-ink);
}

.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .7rem; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.4rem; }

.btn:focus-visible { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label { font-weight: 600; font-size: .875rem; color: var(--ll-ink); margin-bottom: .4rem; }

.form-control,
.form-select,
textarea {
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .5rem;
    padding: .55rem .75rem;
    font-size: .9rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--ll-brand);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-control::placeholder { color: var(--ll-ink-subtle); }

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }

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

.form-check-input:focus {
    border-color: var(--ll-brand);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-floating > label { color: var(--ll-ink-subtle); }

.input-group-text {
    background: var(--ll-canvas);
    border-color: rgba(0, 0, 0, .18);
    border-radius: .5rem;
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-border-color: var(--ll-line);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: .75rem;
    --bs-card-bg: var(--ll-surface);
    border-radius: .75rem;
    box-shadow: var(--ll-shadow-sm);
}

.card-header {
    background: var(--ll-surface);
    border-bottom: 1px solid var(--ll-line);
    padding: .95rem 1.25rem;
    font-weight: 600;
    color: var(--ll-ink);
}

.card-body { padding: 1.25rem; }

.card-footer {
    background: var(--ll-surface);
    border-top: 1px solid var(--ll-line);
    padding: .95rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Card headers

   The app marks its card headers with `bg-dark text-white` (97 of them). They
   used to be repainted as a solid brand fill, which put a saturated cyan slab
   on top of every card -- loud on dense pages, and it forced grey subtext onto
   cyan where it barely read. They are neutralised here instead: the title sits
   in ink on the card surface, with a thin brand rule carrying the accent, so
   colour is spent on data rather than on chrome.
   -------------------------------------------------------------------------- */

.card-header.bg-dark,
.card-header.bg-black {
    background-color: var(--ll-surface) !important;
    border-bottom: 1px solid var(--ll-line);
    box-shadow: inset 3px 0 0 var(--ll-brand);
    --bs-heading-color: var(--ll-ink);
}

/* Beats the `text-white` utility, which carries !important. */
.card-header.bg-dark,
.card-header.bg-black,
.card-header.bg-dark.text-white,
.card-header.bg-black.text-white { color: var(--ll-ink) !important; }

/* Anything that asked for white text would vanish on the light surface. */
.card-header.bg-dark .text-white:not(.btn),
.card-header.bg-black .text-white:not(.btn) { color: var(--ll-ink) !important; }

.card-header.bg-dark .text-body-secondary,
.card-header.bg-black .text-body-secondary { color: var(--ll-ink-subtle) !important; }

.card-header.bg-dark .form-label,
.card-header.bg-black .form-label { color: var(--ll-ink); }

.card-header.bg-dark a:not(.btn),
.card-header.bg-black a:not(.btn) { color: var(--ll-brand-darker); text-decoration: none; }

.card-header.bg-dark a:not(.btn):hover,
.card-header.bg-black a:not(.btn):hover { text-decoration: underline; }

/* Some views nest a .card-footer inside the header as a button holder; strip
   the footer chrome so it does not paint a second slab inside the header. */
.card-header .card-footer,
.card-header .card-footor {
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* On a light header the buttons are just normal buttons again -- no inversion,
   so a primary action reads as brand-coloured here exactly as it does in the
   card body. `.btn.text-white` from the markup lands correctly on the fill. */
.card-header.bg-dark .btn.text-white,
.card-header.bg-black .btn.text-white { color: #fff !important; }

.card-header.bg-dark .btn-light,
.card-header.bg-black .btn-light,
.card-header.bg-dark .btn-outline-light,
.card-header.bg-black .btn-outline-light {
    --bs-btn-color: var(--ll-ink);
    --bs-btn-bg: var(--ll-surface);
    --bs-btn-border-color: var(--ll-line);
    --bs-btn-hover-bg: var(--ll-canvas);
    --bs-btn-hover-border-color: var(--ll-line);
}

/* Card titles carry the weight now that the fill is gone. */
.card-header.bg-dark h1, .card-header.bg-black h1,
.card-header.bg-dark h2, .card-header.bg-black h2,
.card-header.bg-dark h3, .card-header.bg-black h3,
.card-header.bg-dark h4, .card-header.bg-black h4 {
    color: var(--ll-ink);
    font-weight: 700;
    margin-bottom: 0;
}

/* The icon that precedes most card titles keeps the brand colour. */
.card-header.bg-dark .icon,
.card-header.bg-black .icon { color: var(--ll-brand-darker); }

/* Surfaces that are genuinely dark keep inheriting their own text colour. */
.sb-sidenav-dark,
.ll-auth-brand,
.bg-dark:not(.card-header),
.bg-black:not(.card-header),
.navbar-dark { --bs-heading-color: inherit; }

/* Accent strip for stat/summary cards: <div class="card ll-card-accent"> */
.ll-card-accent { border-top: 3px solid var(--ll-brand); }

/* --------------------------------------------------------------------------
   List-page toolbar

   Every list page carries the same row: a per-page select, then search and
   filters. They were laid out with `justify-content-between`, which stranded
   the per-page control on the far left with a gap across the middle, and each
   page set its own widths inline. One pattern instead:

     <div class="ll-toolbar">
       <div class="ll-toolbar-field ll-perpage"> ... </div>
       <div class="ll-toolbar-group"> ...filters... </div>
     </div>
   -------------------------------------------------------------------------- */

.ll-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

/* Filters sit together at the trailing edge; the per-page select stays put.
   `flex: 1` rather than `margin-left: auto` so a long filter set wraps inside
   this group instead of pushing itself onto a line of its own and leaving the
   per-page select alone on an empty row. */
.ll-toolbar-group {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .75rem 1rem;
}

.ll-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 11rem;
}

.ll-toolbar-field > label,
.ll-toolbar-field > .form-label {
    margin: 0;
    color: var(--ll-ink-subtle);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ll-toolbar-field.ll-perpage { min-width: 0; width: 5.5rem; }

/* Buttons in the toolbar line up with the inputs, not their labels. */
.ll-toolbar .btn { margin-bottom: 1px; }

@media (max-width: 575.98px) {
    .ll-toolbar-group { justify-content: flex-start; width: 100%; }
    .ll-toolbar-field { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Sortable table headers

   Every sortable column was `style="color:#000; text-decoration:none"` with a
   `margin-left: 10px` span for the caret -- 100+ copies, and the result read as
   plain text with no sign it could be clicked. One class, with a real hover and
   keyboard focus state.
   -------------------------------------------------------------------------- */

.ll-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ll-ink);
    text-decoration: none;
    white-space: nowrap;
}

.ll-sort:hover,
.ll-sort:focus-visible { color: var(--ll-brand-darker); }

/* The caret is quiet until the column is the active sort. */
.ll-sort .ll-sort-caret { color: var(--ll-ink-subtle); font-size: .8em; }
.ll-sort:hover .ll-sort-caret { color: inherit; }

/* Card titles: `style="font-size:1.6rem"` repeated on every page header. */
.ll-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--ll-ink);
}

/* --------------------------------------------------------------------------
   Numeric cells

   Counts and money read as columns, so they are right-aligned and set in
   tabular figures; otherwise digits of different widths make the column ragged.
   -------------------------------------------------------------------------- */

.table th.ll-num,
.table td.ll-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A plain wrapper for tables that some views built with class="table" on a div,
   which handed a layout container the table's own type styles.

   It also scrolls. These tables run to ~1480px against a ~1140px column, and
   with the default `overflow: visible` they spilled straight out of the card
   and gave the whole page a horizontal scrollbar. Scrolling the table inside
   its own box keeps the page still. */
.ll-table-wrap {
    border: 1px solid var(--ll-line);
    border-radius: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ll-table-wrap > .table { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-hover-bg: var(--ll-brand-tint);
    --bs-table-border-color: var(--ll-line-soft);
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--ll-ink-muted);
}

.table > thead > tr > th {
    background: var(--ll-canvas);
    border-bottom: 1px solid var(--ll-line);
    color: var(--ll-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
    padding: .7rem .85rem;
    vertical-align: middle;
}

/* .responsive-text tables carry their own media-query font sizes in
   custom.css; a fixed size here would out-specify and break them. */
.table:not(.responsive-text) > thead > tr > th { font-size: .72rem; }

.table > tbody > tr > td {
    padding: .7rem .85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ll-line-soft);
}

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

.table-responsive {
    border: 1px solid var(--ll-line);
    border-radius: .75rem;
    background: var(--ll-surface);
}

/* --------------------------------------------------------------------------
   Badges, alerts, dropdowns, pagination, tabs
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .35em .65em;
    border-radius: 999px;
}

.badge.bg-primary { background-color: var(--ll-brand) !important; color: #000 !important; }

.alert {
    border-radius: .6rem;
    border-width: 1px;
    font-size: .9rem;
    padding: .8rem 1rem;
}

.alert-primary {
    --bs-alert-bg: var(--ll-brand-tint);
    --bs-alert-border-color: var(--ll-brand-tint-2);
    --bs-alert-color: #14688a;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--ll-line);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-link-active-bg: var(--ll-brand);
    --bs-dropdown-link-active-color: #000;
    box-shadow: var(--ll-shadow-pop);
    padding: .375rem;
}

.dropdown-item {
    border-radius: .45rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dropdown-item:hover { background: var(--ll-brand-tint); color: var(--ll-ink); }
.dropdown-item.text-danger:hover { background: #fdeaea; color: #b02a37 !important; }

.pagination {
    --bs-pagination-color: var(--ll-ink-muted);
    --bs-pagination-active-bg: var(--ll-brand);
    --bs-pagination-active-border-color: var(--ll-brand);
    --bs-pagination-active-color: #000;
    --bs-pagination-hover-bg: var(--ll-brand-tint);
    --bs-pagination-hover-color: var(--ll-ink);
    --bs-pagination-focus-bg: var(--ll-brand-tint);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    --bs-pagination-border-color: var(--ll-line);
    --bs-pagination-border-radius: .45rem;
    gap: .25rem;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--ll-line);
    --bs-nav-tabs-link-active-color: var(--ll-ink);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--ll-brand);
    border-bottom-width: 1px;
}

.nav-tabs .nav-link {
    border-width: 0 0 2px;
    color: var(--ll-ink-subtle);
    font-weight: 600;
    font-size: .9rem;
}

.nav-tabs .nav-link:hover { border-color: transparent transparent var(--ll-brand-tint-2); color: var(--ll-ink); }

.modal-content { border: 0; border-radius: .85rem; box-shadow: var(--ll-shadow-pop); }
.modal-header { border-bottom: 1px solid var(--ll-line); padding: 1rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--ll-line); padding: 1rem 1.25rem; }

/* --------------------------------------------------------------------------
   Page header + footer
   -------------------------------------------------------------------------- */

.ll-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ll-page-head h1,
.ll-page-head .h1 { font-size: 1.5rem; margin: 0; }

.ll-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--ll-ink-muted);
    font-size: .85rem;
    font-weight: 600;
}

.ll-back:hover { background: rgba(0, 0, 0, .06); color: var(--ll-ink); }

footer.ll-footer {
    background: var(--ll-surface);
    border-top: 1px solid var(--ll-line);
    font-size: .8rem;
    color: var(--ll-ink-subtle);
}

footer.ll-footer a { color: var(--ll-ink-subtle); }
footer.ll-footer a:hover { color: var(--ll-brand-darker); }

/* --------------------------------------------------------------------------
   Auth screens
   -------------------------------------------------------------------------- */

.ll-auth { min-height: 100vh; }

.ll-auth-brand {
    position: relative;
    overflow: hidden;
    background: var(--ll-ink);
    color: #fff;
}

/* Soft cyan glow behind the brand copy */
.ll-auth-brand::before,
.ll-auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.ll-auth-brand::before {
    width: 380px; height: 380px;
    top: -120px; right: -110px;
    background: rgba(52, 189, 235, .28);
}

.ll-auth-brand::after {
    width: 320px; height: 320px;
    bottom: -130px; left: -80px;
    background: rgba(52, 189, 235, .14);
}

.ll-auth-brand > * { position: relative; z-index: 1; }
.ll-auth-brand h2 { color: #fff; font-size: 1.9rem; line-height: 1.25; }
.ll-auth-brand p { color: rgba(255, 255, 255, .62); }
.ll-auth-brand .ll-brandmark { color: #fff; }

.ll-auth-form { background: var(--ll-surface); }

.ll-password-toggle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    display: grid;
    place-items: center;
    width: 44px;
    border: 0;
    background: transparent;
    color: var(--ll-ink-subtle);
    z-index: 5;
}

.ll-password-toggle:hover { color: var(--ll-ink); }

/* --------------------------------------------------------------------------
   Contrast repairs

   A lot of markup writes `btn btn-primary text-white`, which was correct when
   primary was Bootstrap blue. Primary is now cyan, where white text lands at
   about 2.2:1 - well under the 4.5:1 minimum. Black on cyan is 9.5:1.
   The brand card headers re-invert their own buttons above.
   -------------------------------------------------------------------------- */

.btn-primary.text-white,
.btn-outline-primary.text-white:hover { color: #000 !important; }

/* --------------------------------------------------------------------------
   DataTables

   The plugin renders its own controls outside Bootstrap's component classes,
   so it needs theming of its own to match the rest of the app.
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .5rem;
    padding: .4rem .65rem;
    font-size: .875rem;
    margin-left: .5rem;
    background: var(--ll-surface);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ll-brand);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    outline: 0;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    font-size: .85rem;
    color: var(--ll-ink-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: .45rem !important;
    border: 1px solid var(--ll-line) !important;
    margin-left: .25rem;
    padding: .3rem .65rem !important;
    font-size: .85rem;
    color: var(--ll-ink-muted) !important;
    background: var(--ll-surface) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ll-brand-tint) !important;
    border-color: var(--ll-brand) !important;
    color: var(--ll-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ll-brand) !important;
    border-color: var(--ll-brand) !important;
    color: #000 !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
    background: var(--ll-surface) !important;
}

.dt-buttons .dt-button {
    border-radius: .5rem !important;
    border: 1px solid var(--ll-line) !important;
    background: var(--ll-surface) !important;
    color: var(--ll-ink) !important;
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .8rem !important;
}

.dt-buttons .dt-button:hover {
    background: var(--ll-brand) !important;
    border-color: var(--ll-brand) !important;
    color: #000 !important;
}

/* --------------------------------------------------------------------------
   Toggle switch (markup and base styles live in custom.css)
   -------------------------------------------------------------------------- */

.switch input:checked + .slider { background-color: var(--ll-brand); }
.switch input:checked + .slider::before { color: #000; }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* --------------------------------------------------------------------------
   Legacy class compatibility

   The views carry class names from Bootstrap 3/4, Tailwind, and a few that were
   never defined anywhere. Nothing loaded defines them, so they silently do
   nothing. Aliasing them here restores the intended rendering without editing
   several hundred call sites.
   -------------------------------------------------------------------------- */

/* Bootstrap 4 -> 5 renames */
.form-group { margin-bottom: 1rem; }
.font-weight-bold, .text-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.text-muted { color: var(--ll-ink-subtle) !important; }

/* Bootstrap 3 grid offsets */
.col-md-offset-4 { margin-left: 33.33333333%; }

/* Tailwind leftovers */
.w-full { width: 100%; }

/* Bootstrap 4 modal close button, still wired up via wire:click */
.close {
    padding: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ll-ink-subtle);
    opacity: .8;
}

.close:hover { background: rgba(0, 0, 0, .06); color: var(--ll-ink); opacity: 1; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.text-brand { color: var(--ll-brand) !important; }
.bg-brand { background-color: var(--ll-brand) !important; color: #000 !important; }
.border-brand { border-color: var(--ll-brand) !important; }