/* ==========================================================================
   Lead Management Portal — application stylesheet
   Layered on top of Bootstrap 5.3. Bootstrap supplies the reset, grid and
   form controls; everything here is the portal's own design system.

   Order: tokens → shell → navigation → topbar → buttons → page furniture →
   cards → tables → chips → pagination → forms → module-specific blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Palette lifted from the SSMA admin reference (ui/ssma-admin-portal.html)
       so this portal and that product read as one system. */
    --page: #f2f2ef;
    --surface: #fcfcfb;
    --surface-2: #f7f7f4;
    --surface-3: #eeeeea;

    --ink: #0b0b0b;
    --ink-2: #52514e;
    /* Was #898781: 3.5:1 on a card and 3.35:1 on the page ground, under AA
       for the 11-12px captions this token is used for. Measured against
       both grounds, since section hints sit on the page and card captions
       do not. */
    --ink-3: #706e68;

    --line: rgba(11, 11, 11, 0.10);
    --line-2: #e1e0d9;
    --axis: #c3c2b7;

    --scroll-thumb: rgba(11, 11, 11, 0.24);
    --scroll-thumb-hover: rgba(11, 11, 11, 0.40);

    --lm-primary: #1A3C8B;
    --lm-primary-dark: #17347a;
    --lm-primary-soft: #e8edf9;

    --lm-accent: #E58B1A;
    --lm-accent-soft: #fdf1e0;

    --nav-bg: linear-gradient(176deg, #152f6e 0%, #1A3C8B 60%, #22499f 100%);
    --nav-ink: #dbe5ff;
    --nav-ink-muted: #8fa3d6;
    --nav-ink-soft: #a9bdf0;

    /* Series accents from the reference palette. */
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;

    --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b;
    --good-text: #006300; --crit-text: #b02c2c;
    /* The other three tints had no token, so their text colour was
       hard-coded into each chip and never adapted for dark mode. */
    --info-text: #1c5cab; --warn-text: #8a6100; --serious-text: #a24a22;
    --good-bg: #e6f5e6; --warn-bg: #fdf3dc; --serious-bg: #fdeee7;
    --crit-bg: #fbe9e9; --info-bg: #e8f0fb;

    --lm-radius: 12px;
    --lm-radius-sm: 8px;

    --lm-shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
    --lm-shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 8px 24px -12px rgba(11, 11, 11, 0.16);
    --lm-shadow-lg: 0 24px 64px -24px rgba(11, 11, 11, 0.35);

    --lm-sidebar-width: 266px;
    --lm-topbar-height: 60px;

    --lm-transition: 0.13s ease;
}

:root[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    --bs-body-bg: var(--page);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-3);
    --bs-border-color: var(--line-2);
    --bs-tertiary-bg: var(--surface-2);
    --lm-card-bg: var(--surface);

    /* Bootstrap derives these from the body background, which would make
       every raised surface the same tone as the page. */
    --bs-card-bg: var(--surface);
    --bs-dropdown-bg: var(--surface);
    --bs-modal-bg: var(--surface);
}

:root[data-bs-theme="dark"] {
    --page: #10151d;
    --surface: #161d27;
    --surface-2: #1d2531;
    --surface-3: #232c3a;

    --ink: #e6e8ec;
    --ink-2: #aab1bd;
    --ink-3: #8b93a1;

    --line: rgba(255, 255, 255, 0.09);
    --line-2: #2a3341;

    --scroll-thumb: rgba(255, 255, 255, 0.22);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.38);

    --s1: #4f83f1;

    --lm-primary: #4f83f1;
    --lm-primary-dark: #3a6fdd;
    --lm-primary-soft: rgba(79, 131, 241, 0.16);

    --nav-bg: linear-gradient(176deg, #0b1523 0%, #101d33 60%, #16264180 100%);

    --good-bg: rgba(12, 163, 12, 0.16); --warn-bg: rgba(250, 178, 25, 0.16);
    --serious-bg: rgba(236, 131, 90, 0.16); --crit-bg: rgba(208, 59, 59, 0.16);
    --info-bg: rgba(37, 106, 191, 0.18);
    --good-text: #6fd06f; --crit-text: #f08a8a;
    --info-text: #7fb4f2; --warn-text: #f0c258; --serious-text: #f2a684;

    --bs-body-bg: var(--page);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-3);
    --bs-border-color: var(--line-2);
    --bs-tertiary-bg: var(--surface-2);
    --lm-card-bg: var(--surface);
    --bs-card-bg: var(--surface);
    --bs-dropdown-bg: var(--surface);
    --bs-modal-bg: var(--surface);

    --lm-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
}

.lm-body {
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap scopes --bs-card-bg on the component, not on :root, so the
   surface has to be set here or a card inherits the tinted page and reads
   flat against it. Same for the other floating surfaces. */
.lm-body .card {
    --bs-card-bg: var(--lm-card-bg);
    background-color: var(--lm-card-bg);
    border-radius: var(--lm-radius);
    border-color: var(--line);
    box-shadow: var(--lm-shadow);
}

.lm-body .dropdown-menu,
.lm-body .modal-content,
.lm-body .list-group-item {
    background-color: var(--lm-card-bg);
}

.lm-body .card-header { background-color: transparent; border-color: var(--bs-border-color); }

.lm-border { border: 1px solid var(--bs-border-color); border-radius: var(--lm-radius); }

/* --------------------------------------------------------------------------
   2. Shell
   -------------------------------------------------------------------------- */
.lm-shell { display: flex; min-height: 100vh; }

.lm-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lm-content { flex: 1 1 auto; padding: 1.25rem 1.5rem 2rem; }

.lm-footer { padding: 0.9rem 1.5rem 1.4rem; }

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */
.lm-sidebar {
    width: var(--lm-sidebar-width);
    flex: 0 0 var(--lm-sidebar-width);
    background: var(--nav-bg);
    color: var(--nav-ink);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1040;
}

.lm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    min-height: var(--lm-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #fff;
}

.lm-logo {
    width: 36px; height: 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-accent);
    color: #fff;
    font-size: 1rem;
}

.lm-brand-name { font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.25; color: #fff; }

.lm-brand-sub {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--nav-ink-soft);
}

.lm-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 16px; }

/* The sidebar is dark in both themes, so its bar is always light-on-dark
   rather than following --scroll-thumb. */
.lm-nav {
    scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}

.lm-nav::-webkit-scrollbar { width: 6px; }
.lm-nav::-webkit-scrollbar-track { background: transparent; }
.lm-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); border-radius: 3px; }
.lm-nav:hover { scrollbar-color: rgba(255, 255, 255, 0.32) transparent; }

.lm-nav-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--nav-ink-muted);
    padding: 20px 12px 7px;
}

.lm-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8.5px 12px;
    margin-bottom: 1px;
    border-radius: 9px;
    color: var(--nav-ink);
    text-decoration: none;
    font-size: 13.4px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color var(--lm-transition), color var(--lm-transition);
}

.lm-nav-link i { font-size: 15px; width: 17px; text-align: center; flex-shrink: 0; opacity: 0.92; }

.lm-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* The selected item lifts out of the navy rail as a light card with dark
   text — not a coloured pill. The orange icon carries the brand accent. */
.lm-nav-link.active {
    background: #ffffff;
    color: #0f1c2e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.lm-nav-link.active:hover { background: #ffffff; color: #0f1c2e; }
.lm-nav-link.active i { opacity: 1; color: var(--lm-accent); }

.lm-nav-link.disabled { opacity: 0.4; cursor: default; }
.lm-nav-link.disabled:hover { background: transparent; color: var(--nav-ink); }

.lm-nav-badge {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1.5px 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.lm-nav-badge.muted { background: rgba(255, 255, 255, 0.12); color: var(--nav-ink-muted); }

.lm-sidebar-footer { padding: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }

.lm-sidebar-user {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-align: left;
    transition: background-color var(--lm-transition);
}

.lm-sidebar-user:hover { background: rgba(255, 255, 255, 0.12); }
.lm-sidebar-user .name { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.lm-sidebar-user .role { font-size: 10.5px; color: var(--nav-ink-soft); }
.lm-sidebar-user i { opacity: 0.5; font-size: 0.8rem; }

.lm-avatar {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
}

.lm-avatar-navy { background: var(--lm-primary); color: #fff; }
.lm-avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   4. Topbar
   -------------------------------------------------------------------------- */
.lm-topbar {
    height: var(--lm-topbar-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 20px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.lm-crumb { align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.lm-crumb .section { color: var(--bs-secondary-color); }
.lm-crumb .sep { color: var(--bs-border-color); }
.lm-crumb .page { font-weight: 600; }

.lm-module-pill {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.lm-search {
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    min-width: 260px;
    transition: border-color var(--lm-transition), background-color var(--lm-transition);
}

.lm-search:focus-within { border-color: var(--lm-primary); background: var(--lm-card-bg, #fff); }

.lm-search input {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 0.82rem;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
}

.lm-search .kbd {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.lm-bell-dot {
    position: absolute;
    top: 6px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #dc2626;
    border: 1.5px solid var(--lm-card-bg, #fff);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-icon {
    position: relative;
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid transparent;
    color: var(--bs-secondary-color);
    background: transparent;
}

.btn-icon:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.btn-light-bordered {
    background: var(--lm-card-bg, #fff);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 9px;
}

.btn-light-bordered:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-border-subtle, var(--bs-border-color));
    color: var(--bs-body-color);
}

.lm-body .btn-primary {
    background: var(--lm-primary);
    border-color: var(--lm-primary);
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 9px;
}

.lm-body .btn-primary:hover { background: var(--lm-primary-dark); border-color: var(--lm-primary-dark); }

.lm-body .btn { border-radius: var(--lm-radius-sm); }
.lm-body .btn-sm { border-radius: 8px; font-size: 12.2px; }
.btn-light-bordered:hover { background: var(--surface-3); border-color: var(--axis); }

/* Square icon-only buttons inside tables, except ones carrying a label. */
.lm-table .btn-sm:not(.lm-btn-label) {
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lm-btn-label { white-space: nowrap; }

.lm-toggle-secret { border-radius: 0 9px 9px 0; }

/* --------------------------------------------------------------------------
   6. Page furniture
   -------------------------------------------------------------------------- */
.lm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.lm-page-head h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.lm-page-head .sub {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

/* A section divider: small caps label, a hint, then a rule to the edge.
   The h2 inside carries the document outline, so its size has to be reset
   here or Bootstrap's heading scale takes over. */
.lm-section-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.75rem 0 0.8rem;
}

.lm-section-head h2 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.lm-section-head .hint {
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
}

.lm-section-head .rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--line-2);
    min-width: 1rem;
}

/* --------------------------------------------------------------------------
   7. Dashboard tiles, KPIs, timeline
   -------------------------------------------------------------------------- */
.lm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 0.6rem;
}

.lm-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--lm-radius-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color var(--lm-transition), transform var(--lm-transition), box-shadow var(--lm-transition);
}

.lm-tile:hover {
    border-color: var(--lm-primary);
    transform: translateY(-1px);
    box-shadow: var(--lm-shadow);
    color: inherit;
}

.lm-tile-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    font-size: 0.9rem;
}

/* The count sits after the label whatever the markup order. */
/* Order applies to the dashboard tiles only — the same icon class is
   reused inside table cells, where the markup order is already right. */
.lm-tile > .lm-tile-icon { order: 1; }
.lm-tile > span:not([class]) { order: 2; }

.lm-tile-badge {
    order: 3;
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.lm-tile-badge.muted {
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--surface-3);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lm-tile.disabled { opacity: 0.6; cursor: default; }
.lm-tile.disabled:hover { border-color: var(--line-2); transform: none; box-shadow: none; }

/* Per-tile icon tints, so a module is recognisable by colour at a glance. */
.lm-tile-icon.tint-blue   { background: #e8f0fb; color: #2a78d6; }
.lm-tile-icon.tint-indigo { background: #e8edf9; color: #1A3C8B; }
.lm-tile-icon.tint-purple { background: #efe9fb; color: #6d5ae8; }
.lm-tile-icon.tint-teal   { background: #e2f5ef; color: #1baf7a; }
.lm-tile-icon.tint-green  { background: var(--good-bg); color: var(--good-text); }
.lm-tile-icon.tint-orange { background: var(--accent-soft, #fdf1e0); color: #c9761a; }
.lm-tile-icon.tint-amber  { background: var(--warn-bg); color: var(--warn-text); }
.lm-tile-icon.tint-red    { background: var(--crit-bg); color: var(--crit-text); }
.lm-tile-icon.tint-pink   { background: #fbe9f1; color: #b83280; }

.lm-kpi {
    height: 100%;
    padding: 14px 15px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lm-kpi-delta .vs { color: var(--ink-3); font-weight: 500; }
.lm-kpi-foot { margin-top: auto; padding-top: 0.6rem; }
.lm-kpi-foot .caption { margin-bottom: 0.35rem; }
.lm-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.lm-kpi-value { font-size: 27px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lm-kpi-foot { font-size: 11.5px; color: var(--ink-3); }

.lm-kpi-delta { font-size: 11.8px; font-weight: 600; }
.lm-kpi-delta.up { color: var(--good-text); }
.lm-kpi-delta.down { color: var(--crit-text); }

/* preserveAspectRatio="none" means the SVG has no intrinsic height to fall
   back on — without an explicit one it grows past the card. */
.lm-spark {
    width: 100%;
    height: 44px;
    /* Pinned to the foot so a card with a chart lines up with one that
       carries a meter instead. */
    margin: 0.55rem -15px -10px;
    margin-top: auto;
    width: calc(100% + 30px);
    overflow: hidden;
}

.lm-spark svg { width: 100%; height: 100%; display: block; }

.lm-progress { height: 6px; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.lm-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--lm-primary); }

.lm-timeline { position: relative; padding-left: 1.1rem; }

.lm-timeline::before {
    content: "";
    position: absolute;
    left: 4px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--bs-border-color);
}

.lm-timeline-item { position: relative; padding-bottom: 0.9rem; font-size: 0.82rem; }

.lm-timeline-dot {
    position: absolute;
    left: -1.1rem; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--lm-primary);
    border: 2px solid var(--lm-card-bg, #fff);
}

/* --------------------------------------------------------------------------
   8. Stat cards (compact, icon left)
   -------------------------------------------------------------------------- */
.lm-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

@media (min-width: 768px) {
    .lm-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
    .lm-stat-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.lm-stat-mini {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem 0.5rem 0.85rem;
    overflow: hidden;
    text-align: left;
}

.lm-stat-mini::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--stat-accent, var(--lm-primary));
}

.lm-stat-mini-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    color: var(--stat-accent, var(--lm-primary));
    background: color-mix(in srgb, var(--stat-accent, var(--lm-primary)) 13%, transparent);
}

.lm-stat-mini-body { min-width: 0; }

.lm-stat-mini-label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.lm-stat-mini-value { font-size: 1.15rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lm-stat-mini-sub { font-size: 0.66rem; line-height: 1.1; color: var(--bs-secondary-color); }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
/* overflow clips the table header's square corners to the card radius,
   which is what stops the corner notches showing through. */
.lm-table-card { overflow: hidden; }
.lm-table-card > .card-body { padding: 0; }

.lm-table { margin-bottom: 0; }

.lm-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    padding: 9px 12px;
}

.lm-table tbody td { padding: 9.5px 12px; vertical-align: middle; border-color: var(--line); }
.lm-table tbody tr:hover { background: var(--surface-2); }
.lm-table tbody tr:last-child td { border-bottom: 0; }

/* The lead tables run dense — many columns, scanned rather than read. */
.lm-leads-table { font-size: 12.8px; }
.lm-leads-table tbody td { padding: 7px 12px; }
.lm-leads-table thead th { padding: 0.55rem 0.7rem; }

.lm-row-danger > td { background: rgba(220, 38, 38, 0.045); }
.lm-row-danger > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.lm-row-active > td { background: rgba(22, 163, 74, 0.06); }
.lm-row-muted > td { opacity: 0.55; }
.lm-row-muted:hover > td { opacity: 0.85; }

.lm-th-flag, .lm-td-flag { text-align: center; width: 74px; }

/* These toggle a group's behaviour straight from the list, so they are the
   primary control in the row and want a comfortable hit area. */
/* [type=checkbox] outranks a bare class in Bootstrap, so the selector has to
   match it to set the corner radius. */
.lm-flag-toggle[type="checkbox"] {
    width: 1.45rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
    border-width: 1.5px;
    border-radius: 6px;
}

.lm-flag-toggle:hover:not(:checked) { border-color: var(--lm-primary); }
.lm-flag-toggle:focus { box-shadow: 0 0 0 3px rgba(26, 60, 139, 0.15); }

/* Toolbar above a table */
.lm-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
}

.lm-table-count { font-size: 12.5px; color: var(--ink-3); }
.lm-table-count strong { color: var(--bs-body-color); font-weight: 700; }
.lm-table-count .sep { opacity: 0.4; margin: 0 0.15rem; }

/* Status tabs — quiet text until selected, then a filled blue pill. */
.lm-tabs { display: inline-flex; gap: 0.15rem; flex-wrap: wrap; }

.lm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--lm-transition), color var(--lm-transition);
}

.lm-tab:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.lm-tab.active {
    background: var(--lm-primary);
    border-color: var(--lm-primary);
    color: #fff;
}

.lm-tab.active:hover { background: var(--lm-primary); color: #fff; }

.lm-tab-icon { font-size: 0.78rem; line-height: 1; }

/* Column chooser */
.lm-columns-dd { margin-left: auto; }

.lm-columns-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
}

.lm-columns-btn::after { display: none !important; }

.lm-columns-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.34rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.lm-columns-caret { font-size: 0.68rem; opacity: 0.6; }

#lmColumnMenu { width: 232px; box-shadow: var(--lm-shadow); }

.lm-columns-head {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.lm-columns-list { max-height: 340px; overflow-y: auto; padding: 0.35rem; }

.lm-columns-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.32rem 0.5rem;
    border-radius: 7px;
    font-size: 0.83rem;
    cursor: pointer;
}

.lm-columns-item:hover { background: var(--bs-tertiary-bg); }
.lm-columns-item input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* --------------------------------------------------------------------------
   10. Chips, swatches, small markers
   -------------------------------------------------------------------------- */
.lm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--ink-2);
}

.lm-chip-blue   { background: var(--info-bg);     color: var(--info-text); }
.lm-chip-green  { background: var(--good-bg);     color: var(--good-text); }
.lm-chip-red    { background: var(--crit-bg);     color: var(--crit-text); }
.lm-chip-amber  { background: var(--warn-bg);     color: var(--warn-text); }
.lm-chip-gray   { background: var(--surface-3);   color: var(--ink-2); }
.lm-chip-violet { background: var(--serious-bg);  color: var(--serious-text); }

.lm-id-chip {
    display: inline-block;
    padding: 1.5px 6px;
    border-radius: 6px;
    background: var(--lm-primary-soft);
    font-family: var(--bs-font-monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lm-primary);
}

.lm-id-chip-click { background: var(--crit-bg); color: var(--crit-text); }

.lm-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.lm-color-swatch {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

.lm-color-swatch-lg { width: 34px; height: 34px; border-radius: 8px; }

.lm-coupon-thumb {
    width: 38px; height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.lm-coupon-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

/* The assigned-coupon tray. Tags are appended by script with no whitespace
   between them, so the gap has to come from the container. */
#lmAssignMembers {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

.lm-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 5px 0 10px;
    border-radius: 20px;
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
}

.lm-coupon-tag > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-coupon-tag-x {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    line-height: 1;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color var(--lm-transition), color var(--lm-transition), opacity var(--lm-transition);
}

.lm-coupon-tag-x:hover {
    opacity: 1;
    background: var(--crit-bg);
    color: var(--crit-text);
}

.lm-group-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   11. Pagination
   -------------------------------------------------------------------------- */
.lm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
}

.lm-pager-info { font-size: 12.5px; color: var(--ink-3); }
.lm-pager-info strong { color: var(--ink); font-weight: 700; }

.lm-pager-controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.lm-pager-size {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 12px;
    color: var(--ink-3);
    margin: 0;
}

/* Match the page buttons so the whole cluster shares one height. */
.lm-pager-size .form-select {
    width: auto;
    height: 32px;
    padding: 0 1.85rem 0 0.6rem;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--lm-radius-sm);
    background-position: right 0.5rem center;
}

/* Every page control is the same 32px square, so 1 and 36 sit on the same
   rhythm and the arrows and ellipsis do not read as odd ones out. */
.lm-pages { gap: 3px; }

.lm-pages .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: var(--lm-radius-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color var(--lm-transition), border-color var(--lm-transition), color var(--lm-transition);
}

.lm-pages .page-link:hover { background: var(--surface-3); border-color: var(--axis); color: var(--ink); }
.lm-pages .page-link:focus { box-shadow: none; }

/* The current page uses the palette's bright blue (--s1) rather than the
   deep brand navy: at 32px the navy reads as a heavy dark block, while this
   keeps the marker legible as "you are here". */
.lm-pages .page-item.active .page-link {
    background: var(--s1);
    border-color: var(--s1);
    color: #fff;
    font-weight: 700;
}

.lm-pages .page-item.disabled .page-link {
    opacity: 0.4;
    background: transparent;
    pointer-events: none;
}

/* The gap marker is punctuation, not a button. */
.lm-pages .page-item.disabled .page-link:not([aria-label]) {
    border-color: transparent;
    background: transparent;
    opacity: 0.55;
    min-width: 18px;
}

/* Bootstrap Icons are a light-stroked font: at the numerals' size the
   chevrons read noticeably weaker than the digits beside them. Size them up
   and give the glyph its own optical weight so the arrows carry the same
   presence as the numbers. */
.lm-pages .page-link i {
    font-size: 0.95rem;
    line-height: 1;
    -webkit-text-stroke: 0.4px currentColor;
}

.lm-pages .page-item:not(.disabled) .page-link:hover i { color: var(--lm-primary); }

/* --------------------------------------------------------------------------
   12. Forms, filters and settings
   -------------------------------------------------------------------------- */
.lm-body .form-control,
.lm-body .form-select {
    border-radius: 9px;
    border-color: var(--bs-border-color);
    font-size: 0.86rem;
}

.lm-body .form-control:focus,
.lm-body .form-select:focus {
    border-color: var(--lm-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.lm-body .form-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.lm-body .form-text { font-size: 0.74rem; }
.lm-body .form-check-input:checked { background-color: var(--lm-primary); border-color: var(--lm-primary); }

/* A labelled control: micro caption above the input, no stray margin so it
   can sit inline in a filter bar. */
.lm-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.lm-field > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
}

.lm-field .form-control,
.lm-field .form-select { min-width: 150px; }

/* Every filter bar is a Bootstrap .row of col-md-* cells. Giving it its own
   display and gap breaks the column arithmetic — 4+3+2+3 no longer fits on
   one line and the buttons drop to a second row. Only spacing is added
   here; the grid stays Bootstrap's. */
/* The bar lives inside .lm-table-card, whose card-body has no padding — so
   it supplies its own inset but must NOT paint a border, radius or surface
   of its own, or it reads as a second card nested in the first. */
.lm-filterbar {
    align-items: center;
    padding: 12px 14px;

    /* .row with a gutter sets a negative top margin to offset its cells;
       inside a card that lifts the whole bar over the card's top edge and
       leaves a notch at each rounded corner. */
    margin: 0;
}

.lm-filterbar > [class*="col-"] { display: flex; align-items: center; }
.lm-filterbar > [class*="col-"] > * { width: 100%; }
.lm-filterbar .btn { width: auto; white-space: nowrap; }

/* Selects render 3px shorter than inputs and buttons by default, which
   leaves the row visibly ragged. */
.lm-filterbar .form-control,
.lm-filterbar .form-select,
.lm-filterbar .input-group,
.lm-filterbar .btn { height: 38px; }

.lm-filterbar .form-select { padding-top: 0; padding-bottom: 0; }
.lm-filterbar .btn { display: inline-flex; align-items: center; justify-content: center; }

/* Date range → quick presets → submit, on one baseline. */
.lm-daterow {
    display: flex;
    align-items: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 14px 16px;
}

.lm-daterange { display: flex; align-items: flex-end; gap: 0.5rem; }

.lm-daterange-arrow {
    color: var(--ink-3);
    font-size: 0.8rem;
    padding-bottom: 9px;
}

/* The day-count chip and the presets line up with the inputs, not the captions. */
.lm-daterow > .lm-chip,
.lm-daterange > .lm-chip { margin-bottom: 5px; }

.lm-presets { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1px; }

/* Bootstrap's btn-group squares off the inner corners; these read as
   separate choices, so each keeps its own radius. */
.lm-presets > .btn {
    border-radius: var(--lm-radius-sm) !important;
    padding: 0.3rem 0.7rem;
}

.lm-daterow > .btn[type="submit"] { margin-bottom: 1px; }

.lm-advanced-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-2);
}

.lm-advanced-title .lm-dot { width: 7px; height: 7px; color: var(--lm-primary); }

/* Chevron follows the open state so the control reads honestly. */
.lm-collapse-header .bi-chevron-down { transition: transform var(--lm-transition); font-size: 0.8rem; color: var(--ink-3); }
.lm-collapse-header.collapsed .bi-chevron-down { transform: rotate(-90deg); }

.lm-image-drop {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--lm-radius);
    padding: 1.25rem;
    text-align: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: border-color var(--lm-transition), background-color var(--lm-transition);
}

.lm-image-drop:hover, .lm-image-drop.dragover { border-color: var(--lm-primary); background: var(--lm-primary-soft); }

/* The uploaded file can be any size — coupon logos are often 1000px plus.
   Without a bound the preview renders at its natural size and pushes its
   way out of the card and across the page. Contain rather than cover: this
   is a proof of what was uploaded, and cropping it would hide the parts
   someone is checking. */
.lm-image-drop img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border-radius: var(--lm-radius-sm);
}

/* These rows are Bootstrap input-groups. Do NOT give them their own display:
   .input-group > .form-control carries width:1%, which only fills its space
   because flex grows it — switch the parent to grid and the input collapses
   to a square you cannot type in. Layout is left to the input-group; only
   the remove button is restyled. */
.lm-repeater-row { max-width: 520px; }

.lm-repeater-remove {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.lm-settings-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }

.lm-settings-tabs .nav-link,
.lm-settings-tabs a {
    padding: 0.35rem 0.85rem;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border: 1px solid transparent;
}

.lm-settings-tabs a:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.lm-settings-tabs a.active { background: var(--lm-primary); color: #fff; }

.lm-setting-row:last-child { border-bottom: 0 !important; }
.lm-cfg-field { max-width: 420px; }
.lm-cfg-wide { max-width: 100%; }

.lm-perm-group {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--lm-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
}

.lm-perm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.84rem;
}

.lm-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
    color: inherit;
}

.lm-collapse-header:hover { background: var(--bs-tertiary-bg); }
.lm-collapse-summary { font-size: 0.76rem; color: var(--bs-secondary-color); font-weight: 500; }

.lm-group-settings { border: 1px solid var(--bs-border-color); border-radius: var(--lm-radius); overflow: hidden; }
.lm-group-settings + .lm-group-settings { margin-top: 0.6rem; }
.lm-group-toggle { display: flex; align-items: center; gap: 0.5rem; }
.lm-provider-fields { padding: 0.9rem 1rem; border-top: 1px solid var(--bs-border-color); }

/* Picking the live campaign is the row's primary action, so the radio is
   sized to match the group flag toggles rather than a default form control. */
.lm-active-radio {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    border-width: 1.5px;
    cursor: pointer;
}

.lm-active-radio:hover:not(:checked):not(:disabled) { border-color: var(--lm-primary); }
.lm-active-radio:focus { box-shadow: 0 0 0 3px rgba(26, 60, 139, 0.15); }
.lm-active-radio:disabled { cursor: not-allowed; opacity: 0.45; }

.lm-activate-form { display: inline-flex; }

/* The live profile keeps a clear marker down its left edge. */
.lm-row-active > td:first-child { box-shadow: inset 3px 0 0 var(--good); }

.lm-confirm { text-align: center; padding: 0.5rem 0.25rem; }

.lm-confirm-icon {
    width: 52px; height: 52px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-size: 1.3rem;
}

.lm-assign-suggest {
    position: absolute;
    z-index: 1050;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--lm-card-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--lm-radius);
    box-shadow: var(--lm-shadow);
}

/* These rows are <button> elements — without resetting the native chrome
   each one draws as a small bordered box that hugs its text instead of a
   full-width list row. */
.lm-assign-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.8px;
    text-align: left;
    cursor: pointer;
}

.lm-assign-suggest-item:last-child { border-bottom: 0; }
.lm-assign-suggest-item:hover { background: var(--surface-2); }
.lm-assign-suggest-item:focus-visible { outline: 2px solid var(--lm-primary); outline-offset: -2px; }

/* The slug leads, the name follows in muted text. */
.lm-assign-suggest-item .slug { font-family: var(--bs-font-monospace); font-weight: 600; color: var(--lm-primary); }
.lm-assign-suggest-item .name { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lm-domains-btn, .lm-group-coupons-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--lm-primary);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   13. Auth screens
   -------------------------------------------------------------------------- */
.lm-auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0f1c2e 0%, #1e3a5f 55%, #1a56db 100%);
}

.lm-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.9rem;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.lm-auth-brand-logo {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   14. Live-refresh pill (leads report)
   -------------------------------------------------------------------------- */
.lm-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}

.lm-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: lm-live-blink 2s ease-in-out infinite;
}

.lm-live-pill.flash { background: rgba(22, 163, 74, 0.32); }

.lm-live-pill.paused {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.lm-live-pill.paused .lm-live-dot { animation: none; opacity: 0.55; }

@keyframes lm-live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   15. Suppression lists (phones / IPs / area codes / email domains)
   -------------------------------------------------------------------------- */
.lm-bp-row {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lm-bac-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lm-bp-remove { width: 38px; padding: 0; color: var(--bs-secondary-color); }
.lm-bp-remove:disabled { opacity: 0.4; }
.lm-bp-remove:not(:disabled):hover { color: #dc2626; border-color: #dc2626; }

.lm-bp-paste { font-family: var(--bs-font-monospace); font-size: 0.85rem; }
.lm-bp-search { width: 240px; }
.lm-bp-phone { font-family: var(--bs-font-monospace); letter-spacing: 0.02em; }
.lm-bp-check-box { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.lm-add-tabs .nav-link {
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-radius: 7px;
}

.lm-add-tabs .nav-link.active { background: var(--lm-primary); color: #fff; }

.lm-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    font-size: 0.85rem;
}

/* Suggested domains */
.lm-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.lm-suggest-label { font-size: 0.78rem; font-weight: 600; color: var(--bs-secondary-color); margin-right: 0.2rem; }

.lm-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px dashed var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.76rem;
    font-weight: 600;
    font-family: var(--bs-font-monospace);
    cursor: pointer;
    transition: all var(--lm-transition);
}

.lm-suggest-chip:hover:not(:disabled) { border-style: solid; border-color: var(--lm-primary); color: var(--lm-primary); }
.lm-suggest-chip:disabled { opacity: 0.4; cursor: default; text-decoration: line-through; }

.lm-suggest-count {
    font-size: 0.68rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Readable secrets (agent passwords) */
.lm-secret { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--bs-font-monospace); font-size: 0.8rem; }
.lm-secret-value { letter-spacing: 0.04em; user-select: all; }

.lm-secret-btn {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    cursor: pointer;
}

.lm-secret-btn:hover { color: var(--lm-primary); border-color: var(--lm-primary); }
.lm-secret.is-open .lm-secret-value { color: var(--lm-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. API documentation
   -------------------------------------------------------------------------- */
.lm-docs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.lm-docs-nav-inner {
    position: sticky;
    top: calc(var(--lm-topbar-height) + 1rem);
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--lm-card-bg, #fff);
}

.lm-docs-nav-head {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: 0.15rem 0.5rem 0.5rem;
}

.lm-docs-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.34rem 0.5rem;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-decoration: none;
    line-height: 1.25;
}

.lm-docs-link i { font-size: 0.82rem; opacity: 0.7; }
.lm-docs-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.lm-docs-link.active { background: var(--lm-primary-soft); color: var(--lm-primary); }
.lm-docs-link.active i { opacity: 1; }

.lm-docs-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.lm-docs-card { scroll-margin-top: calc(var(--lm-topbar-height) + 1rem); }
.lm-docs-card p { font-size: 0.88rem; line-height: 1.6; }

.lm-docs-h { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.6rem; }

.lm-docs-h3 {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 1.1rem 0 0.5rem;
}

.lm-docs-table { font-size: 0.82rem; margin-bottom: 0; }
.lm-docs-table th { font-size: 0.68rem; }

.lm-param {
    font-size: 0.78rem;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.lm-endpoint-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.lm-method {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    color: #fff;
}

.lm-method-post { background: #16a34a; }
.lm-method-get { background: #2563eb; }

.lm-endpoint-path { font-size: 0.9rem; font-weight: 600; color: var(--bs-body-color); }

.lm-code {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.lm-code pre { margin: 0; padding: 0.8rem 2.6rem 0.8rem 0.9rem; overflow-x: auto; }
.lm-code code { font-size: 0.78rem; line-height: 1.55; color: var(--bs-body-color); white-space: pre; }

.lm-code-copy {
    position: absolute;
    top: 0.45rem; right: 0.45rem;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--lm-card-bg, #fff);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--lm-transition), color var(--lm-transition);
}

.lm-code:hover .lm-code-copy, .lm-code-copy:focus { opacity: 1; }
.lm-code-copy:hover { color: var(--lm-primary); border-color: var(--lm-primary); }
.lm-code-copy.copied { color: #16a34a; border-color: #16a34a; opacity: 1; }

.lm-flow { display: flex; flex-direction: column; gap: 0.35rem; }

.lm-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.lm-flow-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lm-primary);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
}

.lm-flow-arrow { text-align: center; color: var(--bs-secondary-color); font-size: 0.8rem; line-height: 1; }

.lm-docs-config { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lm-config-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    font-size: 0.76rem;
    font-weight: 600;
}

.lm-config-pill.on { border-color: rgba(22, 163, 74, 0.4); background: rgba(22, 163, 74, 0.1); color: #15803d; }
.lm-config-pill.off { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.lm-config-pill.neutral { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }

.lm-reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem; }

.lm-reason {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.lm-reason code { font-size: 0.76rem; color: var(--lm-primary); }
.lm-reason span { font-size: 0.74rem; color: var(--bs-secondary-color); }

/* --------------------------------------------------------------------------
   17. Agent portal
   -------------------------------------------------------------------------- */
.lm-agent-body { background: var(--bs-tertiary-bg); }

.lm-agent-bar {
    background: var(--nav-bg);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.lm-agent-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.lm-agent-brand { display: flex; align-items: center; gap: 0.7rem; }

.lm-agent-logo {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-primary);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.lm-agent-name { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.lm-agent-email { font-size: 0.74rem; opacity: 0.6; }
.lm-agent-bar-right { display: flex; align-items: center; gap: 0.75rem; }
.lm-agent-date { font-size: 0.78rem; opacity: 0.75; }

.lm-agent-logout {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.lm-agent-logout:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.lm-agent-main { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }

.lm-agent-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.lm-agent-head h1 { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.lm-agent-sub { font-size: 0.82rem; color: var(--bs-secondary-color); margin-top: 0.15rem; }
.lm-agent-search { min-width: 240px; }

.lm-agent-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.3s ease;
}

.lm-agent-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: lm-live-blink 2s ease-in-out infinite;
}

.lm-agent-live.flash { background: rgba(22, 163, 74, 0.35); }

.lm-agent-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }

.lm-agent-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--stat-accent, var(--lm-primary));
    background: var(--lm-card-bg, #fff);
}

.lm-agent-card-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--stat-accent, var(--lm-primary));
    background: color-mix(in srgb, var(--stat-accent, var(--lm-primary)) 13%, transparent);
}

.lm-agent-card-label { font-size: 0.72rem; font-weight: 600; color: var(--bs-secondary-color); }
.lm-agent-card-value { font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }

.lm-agent-groups {
    grid-column: 1 / -1;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--lm-card-bg, #fff);
}

.lm-agent-group-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

.lm-agent-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    font-size: 0.76rem;
    font-weight: 600;
}

.lm-agent-group-chip span {
    padding: 0 0.32rem;
    border-radius: 999px;
    background: var(--lm-primary);
    color: #fff;
    font-size: 0.68rem;
}

.lm-agent-table-card { border-radius: var(--lm-radius); overflow: hidden; }

.lm-agent-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.85rem;
}

.lm-agent-updated { font-size: 0.74rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.lm-agent-table td { padding: 0.6rem 0.75rem; font-size: 0.86rem; }
.lm-agent-time { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); font-size: 0.8rem; }

.lm-agent-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--lm-primary);
    font-variant-numeric: tabular-nums;
}

.lm-agent-phone:hover { text-decoration: underline; }

@keyframes lm-agent-new {
    0%   { background: rgba(22, 163, 74, 0.28); }
    100% { background: transparent; }
}

.lm-agent-table tr.is-new > td { animation: lm-agent-new 2.4s ease-out; }

.lm-agent-group-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.3rem;
    max-height: 320px;
    overflow-y: auto;
}

.lm-agent-group-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    font-size: 0.84rem;
    cursor: pointer;
}

.lm-agent-group-option:hover { background: var(--bs-tertiary-bg); }
.lm-agent-group-option input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.lm-agent-history .list-group-item { padding: 0.6rem 0.9rem; }

.lm-agent-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0f1c2e 0%, #1e3a5f 55%, #0d9488 100%);
}

.lm-agent-login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem 1.9rem;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.lm-agent-login-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.lm-agent-login-brand h1 { font-size: 1.2rem; font-weight: 800; margin: 0; }

.lm-agent-login-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

.lm-agent-login-sub { font-size: 0.84rem; color: #475569; margin-bottom: 1.1rem; }
.lm-agent-login-foot { margin-top: 1.1rem; font-size: 0.74rem; color: #94a3b8; text-align: center; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .lm-sidebar {
        position: fixed;
        left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    }

    .lm-sidebar.open { transform: translateX(0); }

    .lm-content { padding: 1rem; }
    .lm-topbar { padding: 0 1rem; }
    .lm-docs { grid-template-columns: minmax(0, 1fr); }
    .lm-docs-nav-inner { position: static; }
}

@media (max-width: 767.98px) {
    .lm-bp-row { grid-template-columns: minmax(0, 1fr) auto; }
    .lm-bp-row input[name="reasons[]"] { grid-column: 1 / -1; }
    .lm-bp-search { width: 100%; }
    .lm-repeater-row { grid-template-columns: minmax(0, 1fr); }
    .lm-agent-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lm-agent-search { width: 100%; }
    .lm-page-head h1 { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
    .lm-sidebar, .lm-topbar, .lm-footer, .lm-noprint { display: none !important; }
    .lm-content { padding: 0; }
    .lm-body { background: #fff; }
    .lm-docs { grid-template-columns: minmax(0, 1fr); }
    .lm-code-copy { display: none; }
    .card { box-shadow: none !important; border-color: #ddd !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lm-live-dot, .lm-agent-live-dot { animation: none; }
    .lm-agent-table tr.is-new > td { animation: none; }
}

/* ---------------------------------------------------------------------
   API Tester
   --------------------------------------------------------------------- */
.lm-tester-env {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    align-items: center;
    padding: 14px 18px;
}

.lm-tester-env > div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
}

.lm-tester-env-label {
    color: var(--ink-3);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.lm-tester-step .card-body { padding: 16px 18px 18px; }

.lm-tester-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.lm-tester-head h2 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.lm-tester-head code {
    font-size: .72rem;
    color: var(--ink-3);
    background: none;
    padding: 0;
}

.lm-tester-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lm-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lm-tester-state { margin-left: auto; font-size: .7rem; }

.lm-tester-flags { min-height: 22px; }

.lm-tester-wire {
    max-height: 720px;
    overflow-y: auto;
    padding-right: 4px;
}

.lm-tester-entry {
    border: 1px solid var(--line);
    border-left: 3px solid var(--good);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
}

.lm-tester-entry.is-bad { border-left-color: var(--crit); }

.lm-tester-entry-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .85rem;
}

.lm-tester-ms {
    margin-left: auto;
    color: var(--ink-3);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.lm-tester-sub {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    margin: 10px 0 4px;
}

.lm-tester-entry .lm-code { margin: 0; }

.lm-tester-entry .lm-code pre {
    margin: 0;
    max-height: 260px;
    overflow: auto;
    font-size: .74rem;
    line-height: 1.5;
}

.lm-tester-warn {
    background: var(--warn-bg);
    border: 1px solid rgba(250, 178, 25, .45);
    border-radius: var(--lm-radius-sm);
    color: var(--ink-2);
    font-size: .78rem;
    line-height: 1.5;
    padding: 8px 10px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   Domain categories
   --------------------------------------------------------------------- */
.lm-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    color: var(--cat, var(--lm-primary));
    background: color-mix(in srgb, var(--cat, #1A3C8B) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat, #1A3C8B) 30%, transparent);
}

.lm-cat-chip:hover {
    background: color-mix(in srgb, var(--cat, #1A3C8B) 20%, transparent);
    color: var(--cat, var(--lm-primary));
}

.lm-cat-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cat, #1A3C8B);
    margin-right: 7px;
    vertical-align: middle;
}

/* Inline category picker, autosaved -------------------------------------- */
/* The category stripe lives on .lm-cat-cell, not here. Bootstrap styles
   .form-select's border and transitions border-color, so a stripe drawn on
   the select fought the cascade and did not repaint when only the custom
   property changed. A plain wrapper has neither problem. */
.lm-body .lm-cat-picker {
    font-weight: 600;
    font-size: .76rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* The flag sits beside the picker in a fixed slot rather than under it.
   Under it, an empty span still reserved its line box on every row, which
   is most of the height the table was wasting. */
.lm-cat-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 3px solid var(--cat, var(--line-2));
}

.lm-cat-cell .lm-cat-picker { flex: 1 1 auto; min-width: 0; }

.lm-save-flag {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    font-size: .78rem;
    line-height: 1;
}

.lm-save-flag.is-saving { color: var(--ink-3); }
.lm-save-flag.is-ok     { color: var(--good); }
.lm-save-flag.is-bad    { color: var(--crit); cursor: help; }

.lm-domain-add .card-body { padding: 12px 14px; }
.lm-domain-add-cat { max-width: 210px; flex: none; }

.lm-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--lm-radius-sm);
    background: var(--surface-2);
}

.lm-bulk-count { font-size: .8rem; }
.lm-bulk-select { max-width: 200px; }

/* The domain register is a scan-through list, so keep the rows tight. */
#lmDomainsTable > tbody > tr > td {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

#lmDomainsTable .form-select-sm {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.lm-domain-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.lm-domain-name i { font-size: .9rem; color: var(--ink-3); }
.lm-domain-name.is-bad i { color: var(--crit); }

/* Inline domain rename ---------------------------------------------------
   Reads as text until you click it. A field that looks like a form control
   on every row turns a reference table into a wall of boxes; one that gives
   no hint it is editable is never found. A hover border is the compromise. */
.lm-domain-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lm-domain-cell > i { font-size: .9rem; color: var(--ink-3); flex: none; }
.lm-domain-cell > i.is-bad { color: var(--crit); }

.lm-domain-input {
    flex: 0 1 auto;
    width: 100%;
    max-width: 320px;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.4;
    font-family: inherit;
}

.lm-domain-input:hover:not(:disabled) {
    border-color: var(--line-2);
    background: var(--surface-2);
}

.lm-domain-input:focus {
    outline: none;
    border-color: var(--lm-primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.lm-domain-input:disabled { opacity: .6; }

.lm-domain-note {
    font-size: .72rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-domain-input.is-bad {
    border-color: var(--crit);
    background: var(--crit-bg);
    color: var(--crit-text);
    cursor: help;
}

/* ---------------------------------------------------------------------
   Developer Tool — SOS
   --------------------------------------------------------------------- */
.lm-sos-card { text-align: center; }
.lm-sos-card .card-body { padding: 28px 20px 24px; }
.lm-sos-card.is-on { border-color: var(--crit); }

.lm-sos-state { margin-bottom: 18px; }

.lm-sos-button {
    position: relative;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--surface-3);
    color: var(--ink-2);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.lm-sos-button:hover:not(:disabled) { transform: scale(1.02); }
.lm-sos-button:active:not(:disabled) { transform: scale(.98); }
.lm-sos-button:disabled { opacity: .5; cursor: not-allowed; }

.lm-sos-button:focus-visible {
    outline: 3px solid var(--lm-primary);
    outline-offset: 4px;
}

.lm-sos-label {
    position: relative;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: .12em;
    padding-left: .12em;
}

/* The ring reads as a bezel when off and as an alert halo when on. */
.lm-sos-ring {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
}

.lm-sos-button.is-on {
    background: var(--crit);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(208, 59, 59, .16);
}

.lm-sos-button.is-on .lm-sos-ring {
    border-color: rgba(255, 255, 255, .55);
    animation: lm-sos-pulse 1.8s ease-out infinite;
}

@keyframes lm-sos-pulse {
    0%   { transform: scale(1);    opacity: .9; }
    70%  { transform: scale(1.14); opacity: 0; }
    100% { transform: scale(1.14); opacity: 0; }
}

/* Someone reading this screen in an emergency does not need it throbbing. */
@media (prefers-reduced-motion: reduce) {
    .lm-sos-button.is-on .lm-sos-ring { animation: none; }
    .lm-sos-button { transition: none; }
}

.lm-sos-hint {
    margin: 18px 0 0;
    font-size: .82rem;
    color: var(--ink-2);
}

.lm-sos-meta {
    margin-top: 10px;
    font-size: .74rem;
    color: var(--ink-3);
}

.lm-sos-reason {
    margin-top: 4px;
    font-style: italic;
    color: var(--ink-2);
}

.lm-dev-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lm-dev-history li {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
}

.lm-dev-history li:last-child { border-bottom: 0; }

.lm-dev-history-time {
    flex: 0 0 92px;
    color: var(--ink-3);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.lm-dev-history-text { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------
   Call Test tool (standalone)
   --------------------------------------------------------------------- */
.lm-ct-body {
    background: var(--page);
    min-height: 100vh;
}

.lm-ct-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--nav-bg);
    color: #fff;
}

.lm-ct-brand {
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lm-ct-user {
    margin-left: auto;
    font-size: .82rem;
    color: var(--nav-ink);
}

.lm-ct-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px 40px;
}

.lm-ct-login { max-width: 420px; margin: 40px auto 0; }

.lm-ct-status {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--lm-radius-sm);
    background: var(--surface-2);
}

.lm-ct-status-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lm-ct-status-meta {
    margin-left: auto;
    font-size: .74rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.lm-ct-status-body {
    font-size: .8rem;
    color: var(--ink-2);
    line-height: 1.5;
}

.lm-ct-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
}

/* A heading at the top of a card ----------------------------------------
   Distinct from .lm-section-head, which is a divider BETWEEN top-level
   blocks and carries a 1.75rem top margin for that job. Used as the first
   child of a .card-body that margin becomes dead space, and its 11.5px
   uppercase treatment reads as a label rather than a heading. */
.lm-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    margin: 0 0 1rem;
}

.lm-card-head h1,
.lm-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.lm-card-head .hint {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-3);
}

/* Sub on its own line when the card is narrow. */
.lm-card-head.is-stacked { display: block; }
.lm-card-head.is-stacked .hint { display: block; margin-top: .2rem; }

/* .lm-table-card zeroes its body padding so tables run edge to edge, and
   .lm-filterbar supplies its own inset for that reason. A heading in the
   same position needs the same treatment or it sits flush against the card
   edge, out of line with every other card on the page. */
.lm-table-card > .card-body > .lm-card-head {
    /* 16px to match Bootstrap's .card-body padding, so a heading in a table
       card lines up with one in a plain card sitting beside it. */
    padding: 16px 16px 0;
    margin-bottom: 12px;
}

/* Anything else that is not a table inside a table card. */
.lm-table-card > .card-body > .lm-card-inset {
    padding-left: 16px;
    padding-right: 16px;
}

.lm-table-card > .card-body > .lm-card-inset:last-child { padding-bottom: 16px; }

/* A .row carries a negative horizontal margin of half its gutter so its
   columns' padding lines up with the surrounding text. Add the inset on top
   of that and the row lands half a gutter to the left of everything else,
   so take the gutter back out of the padding. */
.lm-table-card > .card-body > .lm-card-inset.row {
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(16px - var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(16px - var(--bs-gutter-x, 1.5rem) * .5);
}

/* One request/response pair in the Call Test viewer ---------------------- */
.lm-ct-exchange {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--lm-radius-sm);
    background: var(--surface-2);
}

.lm-ct-exchange-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.lm-ct-exchange-head code {
    font-size: .74rem;
    font-weight: 500;
    color: var(--ink-3);
    background: none;
    padding: 0;
}

.lm-ct-sub {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    margin: 10px 0 4px;
}

.lm-ct-exchange .lm-code { margin: 0; }

.lm-ct-exchange .lm-code pre {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    font-size: .74rem;
    line-height: 1.5;
}

/* A switch's parameter, nested under the switch it belongs to ----------- */
.lm-flag-param {
    background: var(--surface-2);
    border-left: 2px solid var(--lm-primary);
}

/* Group picker for the stop-by-group switch ----------------------------- */
.lm-stop-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}

.lm-stop-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--lm-radius-sm);
    background: var(--lm-surface);
    cursor: pointer;
    font-size: .82rem;
    line-height: 1.3;
}

.lm-stop-group:hover { border-color: var(--lm-primary); }

.lm-stop-group.is-on {
    border-color: var(--crit);
    background: color-mix(in srgb, var(--crit) 7%, transparent);
}

.lm-stop-group span span { display: block; }

/* The selected switch on the developer report ---------------------------- */
.lm-stat-active {
    border-color: var(--stat-accent);
    box-shadow: 0 0 0 1px var(--stat-accent) inset;
}

a.lm-stat-mini { color: inherit; }
a.lm-stat-mini:hover { border-color: var(--stat-accent); }

/* Switch names are longer than the dashboard's one-word labels, and a
   report you cannot read the labels of is not a report. Wrap here only —
   the dashboard tiles rely on staying one line. */
.lm-stat-wrap .lm-stat-mini-label { white-space: normal; }
.lm-stat-wrap { min-width: 190px; }

/* Twenty-four groups is 666px of checkboxes, and there are two of these
   pickers. Cap it and let it scroll — the count line above says how many
   are ticked, so nothing is hidden that matters. */
.lm-stop-groups-scroll {
    max-height: 244px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Reports ---------------------------------------------------------------- */
.lm-chart { width: 100%; height: 180px; overflow: visible; }

.lm-funnel-step {
    position: relative;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: var(--lm-radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}

/* The bar sits behind the label rather than beside it, so a step that
   drops to near zero still leaves its text readable. */
.lm-funnel-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--lm-primary) 16%, transparent);
    border-right: 2px solid var(--lm-primary);
}

.lm-funnel-text { position: relative; font-size: .82rem; }
.lm-funnel-value { font-weight: 800; margin-left: .5rem; font-variant-numeric: tabular-nums; }

.lm-meter { margin-bottom: 10px; }

.lm-meter-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    margin-bottom: 3px;
    text-transform: capitalize;
}

.lm-meter-track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
}

.lm-meter-fill { height: 100%; background: var(--crit); border-radius: 3px; }

.lm-hours {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 76px;
    margin-bottom: 4px;
}

.lm-hour { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }

.lm-hour-bar {
    width: 100%;
    background: var(--lm-primary);
    border-radius: 2px 2px 0 0;
    opacity: .75;
}

.lm-hour:hover .lm-hour-bar { opacity: 1; }

/* Presets and the custom picker share a line until the screen is too
   narrow to hold both, then the picker drops beneath. */
.lm-report-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lm-report-dates {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lm-report-dates input[type="date"] { width: 148px; }

/* A section heading can carry one link on the right, level with the rule. */
.lm-section-link {
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--lm-primary);
}

.lm-section-link:hover { text-decoration: underline; }

/* Portal health: label and number on one line, the reason underneath. */
.lm-health-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.lm-health-row:last-child { border-bottom: 0; }

.lm-health-text { flex: 1 1 auto; min-width: 0; }

.lm-health-label {
    font-size: .82rem;
    font-weight: 600;
}

.lm-health-note {
    font-size: .72rem;
    color: var(--ink-3);
}

.lm-health-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Scrollbars ---------------------------------------------------------------
   Two engines, two mechanisms, and both are needed. Firefox only honours the
   standard `scrollbar-width` / `scrollbar-color` pair; WebKit and older
   Chromium only honour the ::-webkit-scrollbar pseudo-elements. Styling one
   side alone is what left Firefox with a 16px classic bar that takes real
   layout width and sits bright against the dark chrome.

   Only `scrollbar-color` inherits; `scrollbar-width` does not, so the width
   has to be stated universally or the sidebar and every picker keeps the
   16px default while the page alone goes thin. The colour still cascades
   from the root, which is what lets .lm-nav override it for its own
   subtree.

   Chromium 121+ honours the standard pair too, and when it does it ignores
   the pseudo-elements below. That is fine: the two produce the same thin,
   themed bar, and the older rules stay as the fallback. */
:root {
    scrollbar-color: var(--scroll-thumb) transparent;
}

* {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /* The transparent border plus padding-box clipping insets the thumb,
       so it reads as a floating pill rather than a full-width slab. */
    background: var(--scroll-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}