/* ==========================================================================
   LinkTrack "Ocean Breeze" theme layer on top of Bootstrap 5.
   Palette reverse-engineered from the legacy application.css (see
   docs/design-port-spec.md). Navy chrome + olive-green primary + teal accent.
   ========================================================================== */

/* ---- Self-hosted Open Sans (ported from legacy/web/css/open_sans.css) ---- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(/fonts/open_sans.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(/fonts/open_sans_semi_bold.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(/fonts/open_sans_extra_bold.ttf) format('truetype');
    font-display: swap;
}

/* ---------------------------- Palette tokens ----------------------------- */
:root {
    --lt-primary: #94ba65;
    --lt-primary-dark: #7da64b;
    --lt-primary-light: #a0c277;
    /* WCAG-AA accessible olive: darker so #fff text clears 4.5:1.
       Used for solid CTA fills and as the green text colour on white. */
    --lt-primary-aa: #5e7e38;          /* white text >= 4.5:1; green text on white >= 4.5:1 */
    --lt-primary-aa-dark: #4f6b2f;
    --lt-secondary: #2790b0;
    --lt-secondary-dark: #1f718a;
    --lt-secondary-light: #2ca1c5;
    --lt-secondary-aa: #1f7c99;        /* white text >= 4.5:1 on teal */
    --lt-tertiary: #979797;
    --lt-tertiary-dark: #828282;
    --lt-tertiary-light: #a6a6a6;

    --lt-navbar: #16283a;     /* topbar (darkest navy) */
    --lt-header: #1d354d;     /* header + footer navy */
    --lt-header-inset: #28496b;
    --lt-nav-link: #80a7cf;   /* nav / footer link blue */

    --lt-body-bg: #ffffff;
    --lt-text: #333333;
    --lt-link: #0073ad;        /* darkened from #0088cc to clear AA (4.5:1) on white */
    --lt-link-hover: #005580;

    --lt-masthead-top: #ffffff;
    --lt-masthead-bottom: #ededed;
    --lt-masthead-border: #c9c9c9;

    --lt-table-head-top: #2b4e72;
    --lt-table-head-bottom: #1d354d;
    --lt-table-head: #254463;
    --lt-table-stripe: #f0f3f7;
    --lt-table-bordered-head: #e6e6e6;

    --lt-plan-header: #5f5f5f;
    --lt-plan-price: #6a6a6a;   /* darkened from #797979 so #fff clears AA (4.5:1) */
    --lt-plan-best-header: #83ae4e;
    --lt-plan-best-price: #94ba65;

    /* Chart palette (Theme.js, Ocean Breeze series) */
    --lt-chart-area: #334e5f;
    --lt-chart-area-base: #38597b;
    --lt-chart-bar: #3095b3;
}

/* ----------------- Bootstrap variable overrides (brand) ------------------ */
:root {
    --bs-primary: #94ba65;
    --bs-primary-rgb: 148, 186, 101;
    --bs-link-color: #0073ad;
    --bs-link-color-rgb: 0, 115, 173;
    --bs-link-hover-color: #005580;
    --bs-link-hover-color-rgb: 0, 85, 128;
    --bs-body-font-family: 'Open Sans', Arial, sans-serif;
    --bs-body-font-size: 0.8125rem;
    --bs-body-color: #333333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-body-bg: #ffffff;
}

body {
    background-color: var(--lt-body-bg);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

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

/* ------------------------------ Top bar --------------------------------- */
.lt-topbar {
    background-color: var(--lt-navbar);
    border-bottom: 1px solid #000;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}
.lt-topbar a {
    color: var(--lt-nav-link);
}
.lt-topbar a:hover,
.lt-topbar .dropdown-toggle:hover {
    color: #fff;
    text-decoration: none;
}
.lt-topbar .navbar-brand {
    color: #fff;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
.lt-topbar .dropdown-menu {
    font-size: 0.8125rem;
}

/* ------------------------- Header / primary nav -------------------------- */
.lt-header {
    background-color: var(--lt-header);
    box-shadow: inset 0 1px 0 var(--lt-header-inset);
    min-height: 56px;
}
.lt-header .navbar-brand {
    width: 146px;
    height: 32px;
    margin: 0;
    padding: 0;
    background: url(/images/linktracklogo-header.png) no-repeat 0 center;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
}
.lt-header .nav-link {
    color: var(--lt-nav-link);
    font-weight: 600;
}
.lt-header .nav-link:hover,
.lt-header .nav-link.active,
.lt-header .show > .nav-link {
    color: #fff;
}
.lt-header .navbar-toggler {
    border-color: var(--lt-header-inset);
    color: var(--lt-primary);
}
.lt-header .navbar-toggler-icon {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(40deg);
}

/* ------------------------------ Masthead -------------------------------- */
.lt-masthead {
    background: linear-gradient(to bottom, var(--lt-masthead-top), var(--lt-masthead-bottom));
    border-bottom: 1px solid var(--lt-masthead-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    color: var(--lt-text);
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
}
.lt-masthead h1,
.lt-masthead h2 {
    margin: 0;
    font-weight: 600;
    font-size: 1.75rem;
}
.lt-masthead .lt-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #555;
}

/* ------------------------------- Sidebar -------------------------------- */
.lt-sidebar .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--lt-text);
    border: 1px solid #e3e3e3;
    border-bottom: 0;
    border-radius: 0;
    padding: 0.55rem 0.85rem;
}
.lt-sidebar .nav-item:first-child .nav-link {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}
.lt-sidebar .nav-item:last-child .nav-link {
    border-bottom: 1px solid #e3e3e3;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.lt-sidebar .nav-link:hover {
    background-color: var(--lt-table-stripe);
    text-decoration: none;
}
.lt-sidebar .nav-link.active {
    background-color: var(--lt-header);
    color: #fff;
    border-color: var(--lt-header);
}
.lt-sidebar .nav-link .lt-chevron {
    opacity: .5;
    font-size: .75rem;
}

/* ------------------------------- Footer --------------------------------- */
.lt-footer {
    background-color: var(--lt-header);
    border-top: 1px solid #000;
    box-shadow: inset 0 1px 0 var(--lt-table-head-top);
    color: #fff;
    padding: 1.5rem 0;
    margin-top: 3rem;
}
.lt-footer a {
    color: var(--lt-nav-link);
}
.lt-footer a:hover {
    color: #fff;
}

/* ------------------------------- Buttons -------------------------------- */
/* Primary CTA: olive-green, but deep enough that #fff text clears WCAG AA
   (>= 4.5:1). The gradient runs from the AA olive to a darker olive so even
   the lightest pixels stay above threshold. Brand hue preserved, more depth. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lt-primary-aa);
    --bs-btn-border-color: var(--lt-primary-aa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lt-primary-aa-dark);
    --bs-btn-hover-border-color: var(--lt-primary-aa-dark);
    --bs-btn-active-bg: var(--lt-primary-aa-dark);
    --bs-btn-active-border-color: var(--lt-primary-aa-dark);
    --bs-btn-disabled-bg: var(--lt-primary-aa);
    --bs-btn-disabled-border-color: var(--lt-primary-aa);
    background-image: linear-gradient(to bottom, var(--lt-primary-aa), var(--lt-primary-aa-dark));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.btn-outline-primary {
    --bs-btn-color: var(--lt-primary-aa);          /* green text on white, AA */
    --bs-btn-border-color: var(--lt-primary-aa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lt-primary-aa);
    --bs-btn-hover-border-color: var(--lt-primary-aa);
    --bs-btn-active-bg: var(--lt-primary-aa-dark);
    --bs-btn-active-border-color: var(--lt-primary-aa-dark);
}

.btn-secondary,
.btn-lt-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lt-secondary-aa);
    --bs-btn-border-color: var(--lt-secondary-aa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lt-secondary-dark);
    --bs-btn-hover-border-color: var(--lt-secondary-dark);
    --bs-btn-active-bg: var(--lt-secondary-dark);
    --bs-btn-active-border-color: var(--lt-secondary-dark);
    background-image: linear-gradient(to bottom, var(--lt-secondary-aa), var(--lt-secondary-dark));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

/* Subtle/quiet action: the canonical inline + row-action button. Pairs with
   btn-primary (one main CTA per view) and btn-outline-danger (destructive). */
.btn-subtle,
.btn-lt-subtle {
    --bs-btn-color: #41566b;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #c7d0da;
    --bs-btn-hover-color: var(--lt-header);
    --bs-btn-hover-bg: #eef2f6;
    --bs-btn-hover-border-color: #9fb0c2;
    --bs-btn-active-color: var(--lt-header);
    --bs-btn-active-bg: #e3e9ef;
    --bs-btn-active-border-color: #9fb0c2;
}

.btn-tertiary,
.btn-lt-tertiary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #979797;
    --bs-btn-border-color: #979797;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lt-tertiary-dark);
    --bs-btn-hover-border-color: var(--lt-tertiary-dark);
    background-image: linear-gradient(to bottom, var(--lt-tertiary-light), var(--lt-tertiary-dark));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

.btn-inverse {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lt-header);
    --bs-btn-border-color: var(--lt-navbar);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lt-navbar);
    --bs-btn-hover-border-color: #000;
    background-image: linear-gradient(to bottom, #28496b, var(--lt-header));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

/* ------------------------------- Tables --------------------------------- */
/* Data tables read as compact scannable grids (body line-height is 1.7 for
   prose; tables tighten to 1.4). */
.table {
    line-height: 1.4;
}

/* Responsive wrapper: matches history/_table.html.twig. Wrap EVERY data table
   in <div class="table-responsive"> (or .lt-table-wrap) so wide tables scroll
   horizontally inside their container instead of breaking the page on phones. */
.lt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* .table-highlight is the ONE canonical data table (navy Ocean Breeze head).
   Use it for ALL listing/data tables. Reserve a bare `.table` only for
   borderless key/value definition layouts. Add `.table-sm` for dense
   secondary tables; it still inherits the navy head. */
.table-highlight {
    border: 1px solid #ccc;
}
.table-highlight > thead {
    color: #fff;
}
.table-highlight > thead th {
    background-image: linear-gradient(to bottom, var(--lt-table-head-top), var(--lt-table-head-bottom));
    background-color: var(--lt-table-head);
    color: #fff;
    border-color: #16314a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    font-weight: 600;
    vertical-align: middle;
}
.table-highlight > thead th a {
    color: #fff;
}
.table-highlight > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--lt-table-stripe);
}
.table-highlight > tbody td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

/* row action icon links: darkened to >= 4.5:1 on white and given a real hit
   area (~36px) so they are visible and tappable on touch. */
.lt-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    white-space: nowrap;
}
.lt-row-actions a,
.lt-row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: .25rem .4rem;
    color: #566572;
    border-radius: .375rem;
}
.lt-row-actions a:hover,
.lt-row-actions button:hover {
    color: var(--lt-secondary-dark);
    background-color: var(--lt-table-stripe);
    text-decoration: none;
}

/* dashboard big-number stat table */
.lt-stat-table td {
    border: 0;
    vertical-align: middle;
}
.lt-stat-table .value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--lt-header);
    width: 4.5rem;
    text-align: right;
    padding-right: 1rem;
}

/* ------------------------------- Badges --------------------------------- */
.badge.text-bg-primary,
.label-primary {
    background-color: var(--lt-primary-aa) !important;
    color: #fff;
}
.label-secondary,
.badge.text-bg-lt-secondary {
    background-color: var(--lt-secondary-aa) !important;
    color: #fff;
}

/* Status pills (rendered via _partials/status_badge.html.twig). One vocabulary
   for every link/subscription status and confirmed/active boolean in the app.
   Soft tinted fill + darker text, all combinations clear WCAG AA on white.
       active    green   (active / paid / confirmed / yes)
       inactive  grey    (inactive / no / cancelled / unknown)
       suspended amber   (suspended / past_due / failed)
       deleted   red     (deleted / expired / error)
       pending   blue    (pending / trial / processing)                       */
.lt-badge {
    display: inline-block;
    padding: .2em .6em;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: capitalize;
    border-radius: 50rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.lt-badge--active {
    color: #2f5419;
    background-color: #e6f1d8;
    border-color: #c5dca6;
}
.lt-badge--inactive {
    color: #4a5560;
    background-color: #e9edf1;
    border-color: #d2dae1;
}
.lt-badge--suspended {
    color: #8a5a00;
    background-color: #fbeccf;
    border-color: #f0d293;
}
.lt-badge--deleted {
    color: #9a2530;
    background-color: #fbe0e3;
    border-color: #f1bcc2;
}
.lt-badge--pending {
    color: #15536e;
    background-color: #d8eef6;
    border-color: #aedaeb;
}

/* ----------------------------- Pricing cards ---------------------------- */
.lt-plan-card {
    text-align: center;
    border: 1px solid #ddd;
    overflow: hidden;
}
.lt-plan-card .lt-plan-header {
    background-color: var(--lt-plan-header);
    color: #fff;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1.1rem;
}
.lt-plan-card .lt-plan-price {
    background-color: var(--lt-plan-price);
    color: #fff;
    padding: 1rem 0.5rem;
}
.lt-plan-card .lt-plan-price .lt-amount {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
}
.lt-plan-card.lt-plan-best {
    border-color: var(--lt-plan-best-price);
}
.lt-plan-card.lt-plan-best .lt-plan-header {
    background-color: var(--lt-plan-best-header);
}
.lt-plan-card.lt-plan-best .lt-plan-price {
    background-color: var(--lt-plan-best-price);
}

/* ----------------------------- Marketing -------------------------------- */
.lt-landing-hero {
    background-color: var(--lt-header);
    box-shadow: inset 0 1px 0 var(--lt-header-inset);
    color: #fff;
    padding: 3rem 0;
}
.lt-landing-hero h1 {
    font-weight: 800;
    color: #fff;
}
.lt-landing-hero p {
    color: #c3d3e3;
    font-size: 1rem;
}
.lt-landing-shot {
    max-width: 100%;
    border-radius: .375rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.lt-features-list {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0;
}
.lt-features-list .lt-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lt-circle-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--lt-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.lt-feature-content h3 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
}

.lt-screenshots .lt-thumbnail {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: .375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.lt-extra h3 .lt-slash {
    color: var(--lt-primary);
    font-weight: 800;
    margin-right: .25rem;
}
.lt-footer-links {
    list-style: none;
    padding: 0;
    column-count: 2;
}
.lt-footer-links li {
    margin-bottom: .35rem;
}

/* --------------------------- Misc utilities ----------------------------- */
.link-url {
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
}

/* ==========================================================================
   UI-PASS COMPONENT LAYER
   Shared vocabulary every page reuses. Authored on top of the Ocean Breeze
   palette above. See templates/_partials/* for the Twig partials that emit
   this markup.
   ========================================================================== */

/* --------------------------- Skip-to-content ---------------------------- */
.lt-skip-link {
    position: absolute;
    z-index: 1080;
    top: .5rem;
    left: .5rem;
    padding: .5rem .9rem;
    background-color: var(--lt-header);
    color: #fff;
    font-weight: 600;
    border-radius: .375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.lt-skip-link:hover,
.lt-skip-link:focus {
    color: #fff;
    text-decoration: none;
}
#main-content:focus {
    outline: none;
}

/* ----------------------------- Focus states ----------------------------- */
/* Explicit, high-contrast focus ring. Teal on light surfaces; a white ring on
   the navy chrome so keyboard focus is always visible. Never suppressed. */
:focus-visible {
    outline: 2px solid var(--lt-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}
.lt-row-actions a:focus-visible,
.lt-sidebar .nav-link:focus-visible,
.btn:focus-visible,
.breadcrumb a:focus-visible,
.copy:focus-visible {
    outline: 2px solid var(--lt-secondary);
    outline-offset: 2px;
}
.lt-topbar a:focus-visible,
.lt-header .nav-link:focus-visible,
.lt-header .navbar-brand:focus-visible,
.lt-footer a:focus-visible,
.lt-skip-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------------------- Primary nav: CTA + active ----------------------- */
.lt-header-cta {
    margin-left: .5rem;
}
.lt-header .lt-new-link-btn {
    font-weight: 600;
}
.lt-new-link-btn .lt-icon {
    font-weight: 800;
    margin-right: .15rem;
}
/* Active top-nav item gets a subtle underline marker in addition to the
   white text already defined in the .lt-header block above. */
.lt-header .nav-link.active {
    position: relative;
}
.lt-header .nav-link.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: -2px;
    height: 2px;
    background-color: var(--lt-primary-light);
    border-radius: 2px;
}
@media (max-width: 991.98px) {
    .lt-header .nav-link.active::after { display: none; }
    .lt-header-cta { margin: .5rem 0 0; }
    .lt-header .lt-new-link-btn { width: 100%; }
    /* Constrain the fixed-width logo brand so it doesn't crowd the toggler. */
    .lt-header .navbar-brand { width: 146px; max-width: 50vw; background-size: contain; }
}

/* Topbar account dropdown polish */
.lt-topbar .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--lt-header);
}

/* ------------------------------ Breadcrumbs ----------------------------- */
.lt-breadcrumb {
    --bs-breadcrumb-divider: '\203A';   /* › */
    margin: 0 0 1rem;
    padding: .4rem 0;
    font-size: .8125rem;
}
.lt-breadcrumb .breadcrumb-item a {
    color: var(--lt-link);
}
.lt-breadcrumb .breadcrumb-item.active {
    color: #6c757d;
}

/* ---------------------- Page header (masthead actions) ------------------ */
/* The masthead band now lays title/subtitle on the left and an optional
   right-aligned actions slot ({% block page_actions %}) on the right. */
.lt-masthead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}
.lt-masthead-text { min-width: 0; }
.lt-masthead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* Standalone in-body header (templates/_partials/page_header.html.twig) */
.lt-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}
.lt-page-header-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lt-header);
}
.lt-page-header-subtitle {
    margin: .15rem 0 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}
.lt-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* Body toolbar: filters/search on the left, primary action on the right.
   Stacks vertically below md so controls get breathing room on mobile. */
.lt-toolbar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .lt-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ------------------------------- Cards ---------------------------------- */
/* Canonical panel. Wrap each logical section (forms, tables, admin/billing
   blocks) in .card with a .card-header for its title for consistent rhythm. */
.card {
    --bs-card-border-color: #e3e7ec;
    --bs-card-cap-bg: #f6f8fa;
    box-shadow: 0 1px 2px rgba(16, 40, 58, .05);
    margin-bottom: 1.5rem;
}
.card > .card-header {
    font-weight: 600;
    color: var(--lt-header);
}
/* Section stack: consistent gap between stacked cards/sections. */
.lt-section + .lt-section,
.lt-stack > * + * {
    margin-top: 1.5rem;
}

/* ------------------------------ Stat cards ------------------------------ */
/* templates/_partials/stat_card.html.twig. Drop several into .lt-stat-grid. */
.lt-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lt-stat-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background-color: #fff;
    border: 1px solid #e3e7ec;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(16, 40, 58, .05);
}
.lt-stat-card--link {
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.lt-stat-card--link:hover {
    text-decoration: none;
    border-color: #c7d3df;
    box-shadow: 0 4px 12px rgba(16, 40, 58, .1);
    transform: translateY(-1px);
}
.lt-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--lt-header);
}
.lt-stat-card--primary .lt-stat-value { color: var(--lt-primary-aa); }
.lt-stat-card--secondary .lt-stat-value { color: var(--lt-secondary-aa); }
.lt-stat-label {
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #51606e;
}
.lt-stat-hint {
    margin-top: .25rem;
    font-size: .75rem;
    color: #7a8794;
}

/* ----------------------------- Empty state ------------------------------ */
/* templates/_partials/empty_state.html.twig. Centered icon + heading + text + CTA.
   `.lt-empty-state--inline` is the compact variant for inside a table cell. */
.lt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.25rem;
    background-color: #fbfcfd;
    border: 1px dashed #d7dde4;
    border-radius: .5rem;
}
.lt-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .85rem;
    color: var(--lt-secondary);
    background-color: #eaf4f8;
    border-radius: 50%;
}
.lt-empty-state-title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lt-header);
}
.lt-empty-state-text {
    max-width: 28rem;
    margin: 0 0 1rem;
    color: #6c757d;
}
.lt-empty-state-text:last-child { margin-bottom: 0; }
.lt-empty-state .btn { margin-top: .25rem; }
/* Compact, in-table / inline variant: no big icon, muted single line. */
.lt-empty-state--inline {
    padding: 1.1rem .75rem;
    background-color: transparent;
    border: 0;
}
.lt-empty-state--inline .lt-empty-state-text {
    margin-bottom: .5rem;
    color: #6c757d;
}

/* --------------------------- Spacing helpers ---------------------------- */
.lt-gap-sm { gap: .5rem; }
.lt-gap { gap: 1rem; }

/* --------------------------- Touch refinements -------------------------- */
@media (max-width: 767.98px) {
    .lt-sidebar .nav-link { padding: .75rem .85rem; }
    .pagination .page-link { padding: .5rem .75rem; }
}