/* ==========================================================================
   Ads Management Panel — 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;
    --ink-3: #898781;

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

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

    --am-accent: #E58B1A;
    --am-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;
    --good-bg: #e6f5e6; --warn-bg: #fdf3dc; --serious-bg: #fdeee7;
    --crit-bg: #fbe9e9; --info-bg: #e8f0fb;

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

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

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

    --am-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);
    --am-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;

    --s1: #4f83f1;

    --am-primary: #4f83f1;
    --am-primary-dark: #3a6fdd;
    --am-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;

    --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);
    --am-card-bg: var(--surface);
    --bs-card-bg: var(--surface);
    --bs-dropdown-bg: var(--surface);
    --bs-modal-bg: var(--surface);

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

.am-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. */
.am-body .card {
    --bs-card-bg: var(--am-card-bg);
    background-color: var(--am-card-bg);
    border-radius: var(--am-radius);
    border-color: var(--line);
    box-shadow: var(--am-shadow);
}

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

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

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

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

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

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

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

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

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

.am-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(--am-accent);
    color: #fff;
    font-size: 1rem;
}

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

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

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

.am-nav::-webkit-scrollbar { width: 6px; }
.am-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border-radius: 3px; }

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

.am-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(--am-transition), color var(--am-transition);
}

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

.am-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. */
.am-nav-link.active {
    background: #ffffff;
    color: #0f1c2e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

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

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

.am-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;
}

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

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

.am-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(--am-transition);
}

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

.am-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(--am-primary-soft);
    color: var(--am-primary);
}

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

/* --------------------------------------------------------------------------
   4. Topbar
   -------------------------------------------------------------------------- */
.am-topbar {
    height: var(--am-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;
}

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

.am-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);
}

.am-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(--am-transition), background-color var(--am-transition);
}

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

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

.am-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;
}

.am-bell-dot {
    position: absolute;
    top: 6px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #dc2626;
    border: 1.5px solid var(--am-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(--am-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);
}

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

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

.am-body .btn { border-radius: var(--am-radius-sm); }
.am-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. */
.am-table .btn-sm:not(.am-btn-label) {
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

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

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

/* Page-head actions.
   Every full-size button up here is normalised to the panel's metrics.
   Bootstrap's default .btn is 1rem, while the panel's is 0.84 — without
   this, an outline or danger button in a page head renders a size larger
   than every other button on the screen, which is how it read before. */
.am-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.am-page-head .btn {
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 9px;
    white-space: nowrap;
}

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

.am-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. */
.am-section-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.75rem 0 0.8rem;
}

.am-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;
}

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

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

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

.am-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--am-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(--am-transition), transform var(--am-transition), box-shadow var(--am-transition);
}

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

.am-tile-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--am-primary-soft);
    color: var(--am-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. */
.am-tile > .am-tile-icon { order: 1; }
.am-tile > span:not([class]) { order: 2; }

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

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

.am-tile.disabled { opacity: 0.6; cursor: default; }
.am-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. */
.am-tile-icon.tint-blue   { background: #e8f0fb; color: #2a78d6; }
.am-tile-icon.tint-indigo { background: #e8edf9; color: #1A3C8B; }
.am-tile-icon.tint-purple { background: #efe9fb; color: #6d5ae8; }
.am-tile-icon.tint-teal   { background: #e2f5ef; color: #1baf7a; }
.am-tile-icon.tint-green  { background: var(--good-bg); color: var(--good-text); }
.am-tile-icon.tint-orange { background: var(--accent-soft, #fdf1e0); color: #c9761a; }
.am-tile-icon.tint-amber  { background: var(--warn-bg); color: #8a6100; }
.am-tile-icon.tint-red    { background: var(--crit-bg); color: var(--crit-text); }
.am-tile-icon.tint-pink   { background: #fbe9f1; color: #b83280; }

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

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

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

.am-kpi-delta { font-size: 11.8px; font-weight: 600; }
.am-kpi-delta.up { color: var(--good-text); }
.am-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. */
.am-spark {
    width: 100%;
    height: 44px;
    margin: 0.55rem -15px -10px;
    width: calc(100% + 30px);
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

.am-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;
}

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

.am-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(--am-primary));
    background: color-mix(in srgb, var(--stat-accent, var(--am-primary)) 13%, transparent);
}

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

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

.am-stat-mini-value { font-size: 1.15rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.am-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. */
.am-table-card { overflow: hidden; }
.am-table-card > .card-body { padding: 0; }

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

.am-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;
}

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

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

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

.am-th-flag, .am-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. */
.am-flag-toggle[type="checkbox"] {
    width: 1.45rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
    border-width: 1.5px;
    border-radius: 6px;
}

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

/* Toolbar above a table */
.am-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);
}

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

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

.am-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(--am-transition), color var(--am-transition);
}

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

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

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

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

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

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

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

.am-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);
}

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

#amColumnMenu { width: 232px; box-shadow: var(--am-shadow); }

.am-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);
}

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

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

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

/* --------------------------------------------------------------------------
   10. Chips, swatches, small markers
   -------------------------------------------------------------------------- */
.am-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);
}

.am-chip-blue   { background: var(--info-bg);     color: #1c5cab; }
.am-chip-green  { background: var(--good-bg);     color: var(--good-text); }
.am-chip-red    { background: var(--crit-bg);     color: var(--crit-text); }
.am-chip-amber  { background: var(--warn-bg);     color: #8a6100; }
.am-chip-gray   { background: var(--surface-3);   color: var(--ink-2); }
.am-chip-violet { background: var(--serious-bg);  color: #a24a22; }

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

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

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

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

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

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

.am-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. */
#amAssignMembers {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

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

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

.am-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(--am-transition), color var(--am-transition), opacity var(--am-transition);
}

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

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

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

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

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

.am-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. */
.am-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(--am-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. */
.am-pages { gap: 3px; }

.am-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(--am-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(--am-transition), border-color var(--am-transition), color var(--am-transition);
}

.am-pages .page-link:hover { background: var(--surface-3); border-color: var(--axis); color: var(--ink); }
.am-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". */
.am-pages .page-item.active .page-link {
    background: var(--s1);
    border-color: var(--s1);
    color: #fff;
    font-weight: 700;
}

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

/* The gap marker is punctuation, not a button. */
.am-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. */
.am-pages .page-link i {
    font-size: 0.95rem;
    line-height: 1;
    -webkit-text-stroke: 0.4px currentColor;
}

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

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

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

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

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

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

.am-field .form-control,
.am-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 .am-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. */
.am-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;
}

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

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

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

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

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

.am-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. */
.am-daterow > .am-chip,
.am-daterange > .am-chip { margin-bottom: 5px; }

.am-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. */
.am-presets > .btn {
    border-radius: var(--am-radius-sm) !important;
    padding: 0.3rem 0.7rem;
}

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

.am-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);
}

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

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

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

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

/* 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. */
.am-repeater-row { max-width: 520px; }

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

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

.am-settings-tabs .nav-link,
.am-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;
}

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

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

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

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

.am-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;
}

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

.am-group-settings { border: 1px solid var(--bs-border-color); border-radius: var(--am-radius); overflow: hidden; }
.am-group-settings + .am-group-settings { margin-top: 0.6rem; }
.am-group-toggle { display: flex; align-items: center; gap: 0.5rem; }
.am-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. */
.am-active-radio {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    border-width: 1.5px;
    cursor: pointer;
}

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

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

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

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

.am-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;
}

.am-assign-suggest {
    position: absolute;
    z-index: 1050;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--am-card-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--am-radius);
    box-shadow: var(--am-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. */
.am-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;
}

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

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

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

/* --------------------------------------------------------------------------
   13. Auth screens
   -------------------------------------------------------------------------- */
.am-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%);
}

.am-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);
}

.am-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)
   -------------------------------------------------------------------------- */
.am-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;
}

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

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

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

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

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

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

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

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

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

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

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

.am-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 */
.am-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

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

.am-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(--am-transition);
}

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

.am-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) */
.am-secret { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--bs-font-monospace); font-size: 0.8rem; }
.am-secret-value { letter-spacing: 0.04em; user-select: all; }

.am-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;
}

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

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

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

.am-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;
}

.am-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;
}

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

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

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

.am-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;
}

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

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

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

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

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

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

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

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

.am-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(--am-card-bg, #fff);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--am-transition), color var(--am-transition);
}

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

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

.am-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;
}

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

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

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

.am-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;
}

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

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

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

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

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

.am-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);
}

.am-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;
}

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

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

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

.am-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;
}

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

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

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

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

.am-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;
}

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

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

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

.am-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(--am-primary));
    background: var(--am-card-bg, #fff);
}

.am-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(--am-primary));
    background: color-mix(in srgb, var(--stat-accent, var(--am-primary)) 13%, transparent);
}

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

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

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

.am-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;
}

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

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

.am-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;
}

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

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

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

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

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

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

.am-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;
}

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

.am-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%);
}

.am-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);
}

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

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

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

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .am-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);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.am-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);
}

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

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

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

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

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

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

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

/* ---------------------------------------------------------------------
   Domain categories
   --------------------------------------------------------------------- */
.am-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(--am-primary));
    background: color-mix(in srgb, var(--cat, #1A3C8B) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat, #1A3C8B) 30%, transparent);
}

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

.am-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 .am-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. */
.am-body .am-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. */
.am-cat-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 3px solid var(--cat, var(--line-2));
}

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

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

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

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

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

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

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

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

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

.am-domain-name i { font-size: .9rem; color: var(--ink-3); }
.am-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. */
.am-domain-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.am-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;
}

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

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

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

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

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

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

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

.am-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;
}

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

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

.am-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. */
.am-sos-ring {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
}

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

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

@keyframes am-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) {
    .am-sos-button.is-on .am-sos-ring { animation: none; }
    .am-sos-button { transition: none; }
}

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Ad links: the inline domain picker
   -------------------------------------------------------------------------- */
.am-inline-domain {
    display: flex;
    align-items: center;
    gap: 6px;
}

.am-inline-domain .form-select-sm {
    min-width: 150px;
    max-width: 240px;
    font-size: 12.2px;
}

/* --------------------------------------------------------------------------
   A chip that is also a button (the ad link status toggle).
   Bootstrap's .btn-link underlines its text, which made the status chip read
   as a hyperlink; the button is only a hit target here, so it contributes no
   padding, border or decoration of its own.
   -------------------------------------------------------------------------- */
.am-chip-button {
    padding: 0;
    border: 0;
    text-decoration: none;
    vertical-align: middle;
    line-height: 1;
}

.am-chip-button:hover,
.am-chip-button:focus { text-decoration: none; }

.am-chip-button .am-chip { cursor: pointer; }
.am-chip-button:hover .am-chip { filter: brightness(0.96); }
.am-chip-button:focus-visible .am-chip { box-shadow: 0 0 0 3px rgba(26, 60, 139, 0.18); }

/* --------------------------------------------------------------------------
   A URL shown as host + open icon.
   Tracking URLs are hundreds of characters long; printed in full they decide
   the height of every row in the table. The host is what identifies the
   destination, so that is what the cell shows.
   -------------------------------------------------------------------------- */
.am-url-cell { white-space: nowrap; }

.am-url-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 220px;
    font-size: 12.6px;
    color: var(--am-primary);
    text-decoration: none;
}

.am-url-link:hover { text-decoration: underline; }
.am-url-link > i { flex: 0 0 auto; opacity: 0.75; }

.am-url-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* --------------------------------------------------------------------------
   Tag picker (ad group members) + repeatable text rows (targeting IDs).

   The chosen ads are tags, so the current selection is the thing you see;
   the catalogue is reached by typing rather than by scrolling a long list.
   -------------------------------------------------------------------------- */
.am-tagpick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.am-tagpick-tags:empty { display: none; }

.am-tagpick-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--am-primary-soft);
    font-size: 12.6px;
    line-height: 1.2;
}

.am-tagpick-tag .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-tagpick-tag .link { color: var(--ink-3); font-size: 11.6px; }

.am-tagpick-tag button {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 11, 11, 0.08);
    color: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.am-tagpick-tag button:hover { background: var(--crit); color: #fff; }

.am-tagpick-empty { color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }

.am-tagpick-search { position: relative; }
.am-tagpick-search > i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
}
.am-tagpick-search input { padding-left: 32px; }

.am-tagpick-suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line-2);
    border-radius: var(--am-radius-sm);
    background: var(--surface);
    box-shadow: var(--am-shadow);
    padding: 4px;
}

.am-tagpick-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.am-tagpick-option .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-tagpick-option:hover,
.am-tagpick-option.is-active { background: var(--am-primary-soft); }
.am-tagpick-note { padding: 10px 9px; font-size: 13px; color: var(--ink-3); }

/* Repeatable single-value rows. */
.am-repeat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.am-repeat-row + .am-repeat-row { margin-top: 8px; }
.am-repeat-row .am-repeat-remove { flex: 0 0 auto; width: 38px; }