/* ==========================================================================
   Sidetracker theme
   --------------------------------------------------------------------------
   Single source of truth for the app's look. Loaded after the Bootstrap 4
   CDN and after each base template's inline <style>, so it wins on source
   order without needing extra specificity.

   Layer 1  tokens      — the existing palette, promoted to custom properties
   Layer 2  base        — typography, links, focus
   Layer 3  components  — buttons, cards, tables, forms, badges, nav, misc

   Palette values are unchanged from the original inline styles. Anything new
   here is structural: radii, elevation, transitions, focus rings.
   ========================================================================== */

/* ==========================================================================
   Layer 1 — Tokens
   ========================================================================== */

:root {
    /* Brand */
    --st-primary:             #3D4592;
    --st-primary-dark:        #2b2358;
    --st-primary-tint:        #e7e8f8;
    --st-primary-tint-active: #e1e3fb;
    --st-red:                 #C41212;
    --st-navy:                #121532;

    /* Links */
    --st-link:                #2c78e2;
    --st-link-referrer:       #5583e4;
    --st-link-referrer-hover: #6891eb;

    /* Surfaces & text */
    --st-bg:                  #fff9f9;
    --st-surface:             #ffffff;
    --st-text:                #000000;
    --st-text-muted:          #6c757d;

    /* Neutrals */
    --st-grey-50:             #fafafa;
    --st-grey-100:            #f0f0f0;
    --st-grey-200:            #e6e6e6;
    --st-border:              #d2d2d2;
    --st-border-subtle:       #ececef;

    /* Semantic */
    --st-danger:              #e03e3e;
    --st-danger-btn:          #f96d6d;
    --st-danger-btn-hover:    #e64d4d;
    --st-success:             #4dbd74;
    --st-info:                #18b4b9;
    --st-warning:             #f0a500;

    /* Badge families — solid */
    --st-badge-primary:       #494fc4;
    --st-badge-secondary:     #f0f0f0;
    --st-badge-info:          #18b4b9;
    --st-badge-warning:       #f0a500;
    --st-badge-danger:        #f96d6d;
    --st-badge-success:       #4dbd74;
    --st-badge-purple:        #9b59b6;
    --st-badge-pink:          #ff69b4;
    --st-badge-teal:          #20c997;
    --st-badge-orange:        #fd7e14;
    --st-badge-yellow:        #ffc107;

    /* Badge families — subtle (bg / fg / border / hover) */
    --st-badge-primary-bg:      #ceceff;
    --st-badge-primary-fg:      #0d115d;
    --st-badge-primary-border:  #ceceff;
    --st-badge-primary-hover:   #a5a5f4;

    --st-badge-secondary-bg:     #f0f0f0;
    --st-badge-secondary-fg:     #333333;
    --st-badge-secondary-border: #f0f0f0;
    --st-badge-secondary-hover:  #e6e6e6;

    --st-badge-info-bg:         #d0f5f7;
    --st-badge-info-fg:         #0e676b;
    --st-badge-info-border:     #b0ecec;
    --st-badge-info-hover:      #a9e5e8;

    --st-badge-warning-bg:      #fbedb9;
    --st-badge-warning-fg:      #4d2b04;
    --st-badge-warning-border:  #efdb93;
    --st-badge-warning-hover:   #efdb93;

    --st-badge-danger-bg:       #fbb9b9;
    --st-badge-danger-fg:       #4d0404;
    --st-badge-danger-border:   #ef9393;
    --st-badge-danger-hover:    #ef9393;

    --st-badge-success-bg:      #b9fbdd;
    --st-badge-success-fg:      #044d2c;
    --st-badge-success-border:  #93efc5;
    --st-badge-success-hover:   #93efc5;

    --st-badge-purple-bg:       #e0c6f5;
    --st-badge-purple-fg:       #5b0e70;
    --st-badge-purple-border:   #d1a7ea;
    --st-badge-purple-hover:    #d1a7ea;

    --st-badge-pink-bg:         #ffe0f0;
    --st-badge-pink-fg:         #ad1457;
    --st-badge-pink-border:     #ffb3c8;
    --st-badge-pink-hover:      #ffb3c8;

    --st-badge-teal-bg:         #b2f2dd;
    --st-badge-teal-fg:         #0f5132;
    --st-badge-teal-border:     #8de0c6;
    --st-badge-teal-hover:      #8de0c6;

    --st-badge-orange-bg:       #ffe5cc;
    --st-badge-orange-fg:       #5f320b;
    --st-badge-orange-border:   #ffb380;
    --st-badge-orange-hover:    #ffb380;

    --st-badge-yellow-bg:       #fff9e0;
    --st-badge-yellow-fg:       #665300;
    --st-badge-yellow-border:   #ffe08a;
    --st-badge-yellow-hover:    #ffe08a;

    /* Typography */
    --st-font:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --st-font-size:           16px;
    --st-line-height:         1.5;

    /* Shape */
    --st-radius-sm:           6px;
    --st-radius-md:           8px;
    --st-radius-pill:         999px;

    /* Elevation */
    --st-shadow-sm:           0 1px 2px rgba(16, 18, 40, 0.04),
                              0 1px 3px rgba(16, 18, 40, 0.06);
    --st-shadow-md:           0 2px 4px rgba(16, 18, 40, 0.04),
                              0 8px 24px rgba(16, 18, 40, 0.08);

    /* Motion */
    --st-transition:          140ms ease;

    /* Focus ring */
    --st-focus-ring:          0 0 0 3px rgba(61, 69, 146, 0.28);
}


/* ==========================================================================
   Layer 2 — Base
   ========================================================================== */

body {
    font-family: var(--st-font) !important;
    font-size: var(--st-font-size);
    line-height: var(--st-line-height);
    color: var(--st-text);
    background-color: var(--st-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--st-link);
    transition: color var(--st-transition);
}
a:hover {
    color: var(--st-link);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.011em;
}
h2 {
    font-size: 1.5rem;
    margin-bottom: 1.3rem;
}
.st-header {
    font-size: 20px;
}

label {
    font-size: 12px;
    font-weight: 500;
}

.font-weight-bold {
    font-weight: 600 !important;
}

.text-danger  { color: var(--st-danger) !important; }
.text-success { color: var(--st-success) !important; }
.text-primary { color: var(--st-primary) !important; }
.icon-st-red  { color: var(--st-red); }

/* --- Focus -------------------------------------------------------------
   The original CSS killed outlines globally (`outline: none !important` on
   inputs and buttons), leaving keyboard users with no focus indicator at
   all. Mouse clicks stay clean; Tab navigation now shows a ring. */

input, textarea, select,
button, .btn {
    outline: none !important;
    box-shadow: none !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible {
    outline: none !important;
    box-shadow: var(--st-focus-ring) !important;
    border-radius: var(--st-radius-sm);
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   Layer 3 — Components
   ========================================================================== */

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

button, .btn {
    border: none;
    border-radius: var(--st-radius-sm);
    font-weight: 500;
    transition: background-color var(--st-transition),
                border-color var(--st-transition),
                color var(--st-transition),
                box-shadow var(--st-transition);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--st-primary) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--st-primary-dark) !important;
}

.btn-outline-primary {
    background-color: var(--st-surface) !important;
    color: var(--st-primary);
    border: 1px solid var(--st-primary);
}
.btn-outline-primary:hover {
    color: var(--st-primary-dark);
    border: 1px solid var(--st-primary-dark);
    background-color: var(--st-primary-tint) !important;
}
.btn-outline-primary:active,
.btn-outline-primary:focus {
    color: var(--st-primary-dark) !important;
    border: 1px solid var(--st-primary-dark) !important;
    background-color: var(--st-primary-tint-active) !important;
}

.btn-secondary {
    background-color: var(--st-grey-100) !important;
    color: #333333 !important;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--st-grey-200) !important;
}

/* `.btn-light border` is used ~84x in markup — keep the 1px border it
   relies on rather than swapping it for a shadow. */
.btn-light {
    color: var(--st-text);
    border: var(--st-grey-100) 1px solid;
    background-color: var(--st-surface);
    text-decoration: none !important;
}
.btn-light:hover {
    background-color: var(--st-grey-50);
}

.btn-danger {
    background-color: var(--st-danger-btn) !important;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
    background-color: var(--st-danger-btn-hover) !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Inbox -------------------------------------------------------------
   The Inbox/Archived toggle on the domain detail page. Deliberately NOT
   .nav-link: that class carries `color: ... !important` and a margin-right
   in the Nav section below, which beat any tab styling and left the active
   tab painting near-black text on its own fill. A dedicated class needs no
   !important anywhere. The active chip mirrors .btn-light above so the
   toggle reads as part of the same toolbar as its sibling buttons. */

.inbox-tabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inbox-tabs li { margin: 0; }

.inbox-tab {
    display: inline-block;
    margin: 0;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--st-text-muted);
    background-color: transparent;
    /* Transparent 1px keeps the box the same size as the active state, so
       activating a tab does not nudge its sibling sideways. */
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm);
    text-decoration: none;
    transition: background-color var(--st-transition),
                border-color var(--st-transition),
                color var(--st-transition);
}

.inbox-tab:hover,
.inbox-tab:focus {
    color: var(--st-text);
    background-color: var(--st-grey-50);
    text-decoration: none;
}

.inbox-tab.active {
    color: var(--st-navy);
    background-color: var(--st-grey-100);
    border-color: var(--st-grey-200);
}

.inbox-tab.active:hover,
.inbox-tab.active:focus {
    color: var(--st-navy);
    background-color: var(--st-grey-200);
}


/* --- Session pane -------------------------------------------------------
   The session detail surface, rendered both into the inbox's right-hand
   column (`in_pane`, class .sp-narrow) and as a standalone page (.sp-wide).

   It used to carry its own inline <style>, including an `h5` rule that had
   no scoping and so restyled the whole host page's modals. Everything lives
   here now, behind .session-pane, built from the --st-* tokens.

   One type scale, four steps. Chips deliberately keep the .7rem/.62rem of
   .inbox-tag / .sales-badge: a session should be badged identically in the
   list and in the pane it opens.
   ------------------------------------------------------------------- */

.session-pane {
    --sp-title:   1.0625rem;
    --sp-section: .75rem;
    --sp-body:    .875rem;
    --sp-meta:    .75rem;

    --sp-muted:   #8a9099;
    --sp-rule:    #f0f1f4;

    /* Two spacing decisions, named once. --sp-gutter is the pane's outer margin
       (the sticky header bleeds back over it); --sp-pad is the breathing room
       inside a section. */
    --sp-gutter:  1.75rem;
    --sp-pad:     1.1rem;

    font-size: var(--sp-body);
}

/* One column in both contexts. The standalone page is capped rather than
   split: every block collapses now, so a second column would only spread the
   same content over more eye travel. */
.session-pane .sp-wrap { max-width: 900px; margin: 0 auto; }
/* No padding-top: the sticky header supplies it, so the header's own box starts
   at the scrollport edge and there is no strip above it for rows to show through. */
.sp-narrow .sp-wrap { max-width: none; padding: 0 var(--sp-gutter) 1.25rem; }

/* --- Header --- */

.sp-header {
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--sp-rule);
}

/* Inside the inbox the pane is its own scroll container, so the name and
   the status control stay put while the visit list scrolls under them.

   This used to cancel .inbox-detail's padding with a negative top margin. That
   margin collapsed through the .sp-wrap / .session-pane wrappers instead of
   offsetting the header, so the bar never seated flush and content showed in the
   strip above it. The container is unpadded now and the header owns the gutter,
   bleeding sideways over .sp-wrap's so nothing scrolls past its edges either. */
.sp-narrow .sp-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fbfbfc;
    margin: 0 calc(-1 * var(--sp-gutter)) .75rem;
    padding: 1.25rem var(--sp-gutter) .75rem;
}

.sp-back {
    display: inline-block;
    font-size: var(--sp-meta);
    margin-bottom: .5rem;
}

.sp-identity {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.sp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.sp-identity-body { flex: 1 1 auto; min-width: 0; }

.sp-name {
    font-size: var(--sp-title);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
}

/* --- The meta line: middot-separated, all one size, all muted --- */

.sp-meta {
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    margin-top: .15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .4rem;
}
.sp-meta > * + *::before {
    content: "\00b7";
    margin-right: .4rem;
    color: #c7cbd1;
}
.sp-meta a { color: inherit; text-decoration: underline; }
.sp-meta a:hover { color: var(--st-text); }

.sp-copy {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}
.sp-copy:hover { color: var(--st-text); }
.sp-copy i { font-size: .7em; opacity: .7; }

.sp-header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}
.sp-header-actions .status-icon { color: var(--sp-muted); }

.sp-status-select {
    width: auto;
    min-width: 9.5rem;
    font-size: var(--sp-meta) !important;
    height: auto !important;
    padding: .15rem 1.5rem .15rem .4rem !important;
}

/* --- Tabs --- */

.sp-tabs {
    border-bottom: 1px solid var(--sp-rule);
    margin-bottom: 1rem;
    gap: .25rem;
}
.sp-tabs .nav-link {
    font-size: var(--sp-meta);
    font-weight: 500;
    color: var(--sp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .35rem .5rem;
}
.sp-tabs .nav-link:hover { color: var(--st-text); border-color: transparent; }
.sp-tabs .nav-link.active {
    color: var(--st-navy);
    background: transparent;
    border-bottom-color: var(--st-primary);
}

/* --- Sections --- */

.sp-section {
    background: var(--st-surface);
    border: 1px solid var(--st-border-subtle);
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-sm);
    margin-bottom: 1rem;
}

/* The whole header row is the toggle; an action button (Add, Edit) sits
   beside it rather than nested inside, which a <button> cannot hold. */
.sp-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: var(--sp-pad);
}

.sp-section-heading { margin: 0; flex: 1 1 auto; min-width: 0; }

.sp-section-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem var(--sp-pad);
    background: none;
    border: 0;
    border-radius: var(--st-radius-md);
    text-align: left;
    color: inherit;
}
.sp-section-toggle:hover { background: var(--st-grey-50); }
.sp-section-toggle:hover .sp-section-title { color: var(--st-text); }

.sp-caret {
    flex: 0 0 auto;
    font-size: .65rem;
    color: var(--sp-muted);
    transition: transform var(--st-transition);
}
.sp-section-toggle:not(.collapsed) .sp-caret,
.sp-visit-head:not(.collapsed) .sp-caret { transform: rotate(90deg); }

/* What a shut section still has to tell you: the count, the total. */
.sp-section-metric {
    margin-left: auto;
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    white-space: nowrap;
}

/* A real class, not an h5 — the old rule overrode h5 document-wide. */
.sp-section-title {
    font-size: var(--sp-section);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sp-muted);
    margin: 0;
    line-height: 1.4;
}

.sp-section-body { padding: var(--sp-pad); border-top: 1px solid var(--sp-rule); }
.sp-section-body.is-flush { padding: 0; }
.sp-section-body.is-scroll { max-height: 320px; overflow-y: auto; }

.sp-empty {
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    padding: .5rem 0;
}

/* --- Fields ---
   A two-column grid instead of the old label/<br>/<p>/<hr> stack. Empty
   fields are hidden at rest and revealed by Edit, so the pane is not a
   ribbon of "..." for the many sessions that carry only a name. */

.sp-group + .sp-group { margin-top: 1rem; }

.sp-group-title {
    font-size: var(--sp-section);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sp-muted);
    margin: 0 0 .4rem;
}

.sp-fields { display: block; }

.sp-field {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0 .75rem;
    padding: .22rem 0;
}

.sp-field-label {
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    line-height: 1.6;
}

.sp-field-value {
    font-size: var(--sp-body);
    line-height: 1.6;
    min-width: 0;
    /* anywhere, not break-word: a 300-character referrer URL has no spaces to
       break on, and without this it stretches the track and scrolls the pane. */
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.sp-field-value a { overflow-wrap: anywhere; }

.sp-field-input { font-size: var(--sp-body) !important; }

.sp-field.is-empty { display: none; }
.session-pane.is-editing .sp-field.is-empty { display: grid; }

/* Narrow pane: 8.5rem of label against a short value wastes the column. */
@media (max-width: 575.98px) {
    .sp-field { grid-template-columns: 1fr; gap: 0; }
}

.sp-fields-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .75rem;
}

/* --- Lines (revenue records, ad campaigns) ---
   One class for the motif that was inline-styled in three places, twice in
   markup and once in a JS template literal. */

.sp-line {
    background: var(--st-grey-50);
    border: 1px solid var(--st-border-subtle);
    border-radius: var(--st-radius-sm);
    padding: .45rem .6rem;
    font-size: var(--sp-body);
}
.sp-line + .sp-line { margin-top: .4rem; }

.sp-line-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sp-line-time { font-size: var(--sp-meta); color: var(--sp-muted); }

.sp-line-detail {
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    margin-top: .15rem;
}
.sp-line-detail b { color: var(--st-text); font-weight: 500; }

.sp-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--st-badge-success-bg);
    color: var(--st-badge-success-fg);
    border-radius: var(--st-radius-sm);
    padding: .45rem .6rem;
    margin-bottom: .5rem;
    font-weight: 600;
}
.sp-total-label {
    font-size: var(--sp-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

.revenue-line .delete-revenue { opacity: 0; }
.revenue-line:hover .delete-revenue,
.revenue-line .delete-revenue:focus { opacity: 1; }

/* --- Activity ---
   The feed used to put the timestamp in an <h6> and the message in a muted
   <p>, which read the wrong way round. */

.sp-activity-item {
    padding: .5rem var(--sp-pad);
    border-bottom: 1px solid var(--sp-rule);
}
.sp-activity-item:last-child { border-bottom: 0; }
.sp-activity-msg { font-size: var(--sp-body); line-height: 1.5; }
.sp-activity-time { font-size: var(--sp-meta); color: var(--sp-muted); }

/* --- Visits --- */

.sp-visit + .sp-visit { border-top: 1px solid var(--sp-rule); }

/* The closed row answers "where did this come from" -- campaign or referrer --
   because that is what the visit list is scanned for. */
.sp-visit-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem var(--sp-pad);
    background: none;
    border: 0;
    text-align: left;
    font-size: var(--sp-body);
    color: inherit;
}
.sp-visit-head:hover { background: var(--st-grey-50); }
.sp-visit-index { color: var(--sp-muted); font-size: var(--sp-meta); flex: 0 0 auto; }
.sp-visit-when { font-size: var(--sp-meta); color: var(--sp-muted); flex: 0 0 auto; }
.sp-visit-source {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-visit-referrer { font-size: var(--sp-meta); color: var(--sp-muted); }
.sp-visit-place {
    flex: 0 0 auto;
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    white-space: nowrap;
}

/* "Not captured" on a factual field. Quiet enough not to read as content. */
.sp-dash { color: #c2c6cc; }

/* Campaign facts: same label/value rhythm as the field grid, tighter. */
.sp-line-grid {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: .1rem .6rem;
    margin-top: .4rem;
    font-size: var(--sp-meta);
}
.sp-line-grid > span { min-width: 0; overflow-wrap: anywhere; }
.sp-line-grid > span:nth-child(even) { color: var(--st-text); }

.sp-visit-body { padding: .25rem var(--sp-pad) var(--sp-pad); }

/* The map used to be a full-width band of its own, which on a visit with no
   coordinates was a sized grey box and on every other visit was the largest
   thing in the section. It now sits beside the facts, and only when it exists.

   A container query, not a media query: the same partial renders in a ~660px
   inbox pane and on a 900px page, so viewport width is the wrong question.
   Browsers without support keep the stacked layout, which is the old behaviour. */
.sp-visit-body { container-type: inline-size; }

.sp-visit-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

@container (min-width: 520px) {
    .sp-visit-split.has-map { grid-template-columns: minmax(0, 1fr) 240px; }
}

.visit-map {
    height: 180px;
    width: 100%;
    border-radius: var(--st-radius-sm);
    border: 1px solid var(--st-border-subtle);
}

/* Query strings stay on one line and scroll: wrapping them makes the key=value
   pairs unreadable. Scrolling is confined to this box -- max-width stops the
   nowrap content from widening the grid track it sits in. */
.sp-params {
    display: block;
    max-width: 100%;
    font-size: var(--sp-meta);
    color: var(--sp-muted);
    overflow-x: auto;
    white-space: nowrap;
    margin: 0;
}

.sp-journey { margin-top: .5rem; }
.sp-step {
    display: flex;
    gap: .6rem;
    padding: .4rem 0;
    border-top: 1px solid var(--sp-rule);
}
.sp-step-icon { color: var(--sp-muted); font-size: .75rem; padding-top: .2rem; }
.sp-step-body { min-width: 0; flex: 1 1 auto; }
.sp-step-path { font-size: var(--sp-body); font-weight: 500; overflow-wrap: anywhere; }
.sp-step-meta { font-size: var(--sp-meta); color: var(--sp-muted); }
.sp-step-events {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    font-size: var(--sp-meta);
    color: var(--sp-muted);
}
.sp-step-events li {
    background: var(--st-grey-50);
    border-radius: var(--st-radius-sm);
    padding: .2rem .4rem;
    overflow-wrap: anywhere;
}
.sp-step-events li + li { margin-top: .2rem; }

/* --- Code panels (API data tab) --- */

.sp-code { margin: 0; font-size: var(--sp-meta); }
.sp-code code { background: var(--st-surface) !important; }

/* --- Comments ---
   A thread, oldest at the top, with an always-present composer at the
   bottom. Delete appears on hover so the thread stays quiet at rest. */

.comment-list { margin: 0; padding: 0; list-style: none; }
.comment { padding: .5rem 0; border-bottom: 1px solid var(--sp-rule); }
.comment:first-child { padding-top: 0; }
.comment:last-child { border-bottom: 0; }
.comment-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--sp-meta);
    color: var(--sp-muted);
}
.comment-author { font-weight: 600; color: #3b4149; }
.comment-time::before { content: "\00b7"; margin-right: .4rem; }
.comment-delete {
    margin-left: auto;
    padding: 0 .3rem;
    line-height: 1.2;
    opacity: 0;
}
.comment:hover .comment-delete,
.comment-delete:focus { opacity: 1; }
.comment-body {
    margin-top: .15rem;
    font-size: var(--sp-body);
    color: #23272f;
    white-space: pre-wrap;
    word-break: break-word;
}
.comment-composer { border-top: 1px solid var(--sp-rule); padding-top: .5rem; }
.comment-composer textarea {
    border: 0;
    box-shadow: none;
    resize: none;
    padding: .25rem 0;
    font-size: var(--sp-body);
}
.comment-composer textarea:focus { border: 0; box-shadow: none; }
.comment-hint { font-size: .7rem; color: #b0b5bd; text-align: right; }

/* --- Session tags ---
   User-created tags, on inbox rows and in the pane. Green so they read
   apart from the blue .inbox-tag (rule-derived referrer label) that sits a
   few pixels away. Defined once here; the copies that used to live inline
   in domain_detail.html and _session_pane.html are gone. */

.session-tag {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: #e8f5e9;
    color: #1a7f37;
    border-radius: .2rem;
    padding: 0 .3rem;
    font-size: .7rem;
    /* Sits inline on the row meta line after the visit count, so it needs
       air on both sides. */
    margin: 0 .15rem;
}
.session-tag-x { cursor: pointer; opacity: .55; font-weight: 700; line-height: 1; }
.session-tag-x:hover, .session-tag-x:focus { opacity: 1; }

.session-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
}
.session-tags > .fa-tag { font-size: .7rem; }
#tagInput {
    border: 1px dashed #ccd0d6;
    border-radius: .2rem;
    padding: .05rem .4rem;
    font-size: .7rem;
    width: 7rem;
}
#tagInput:focus { outline: none; border-style: solid; border-color: #2f6fed; }


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

.card {
    border-radius: var(--st-radius-md);
    border: 1px solid var(--st-border-subtle);
    box-shadow: var(--st-shadow-sm);
}
.card-header {
    border-bottom: 1px solid var(--st-border-subtle);
    border-top-left-radius: var(--st-radius-md) !important;
    border-top-right-radius: var(--st-radius-md) !important;
}
.card-footer {
    border-top: 1px solid var(--st-border-subtle);
    border-bottom-left-radius: var(--st-radius-md) !important;
    border-bottom-right-radius: var(--st-radius-md) !important;
}
.card-body {
    padding: 1.35rem;
}

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

.table thead th {
    border-top: none !important;
    border-bottom: 1px solid var(--st-border-subtle);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-text-muted);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
th {
    border-top: none !important;
}
td {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
td, th {
    vertical-align: middle !important;
}
.table td {
    border-top: 1px solid var(--st-border-subtle);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.table-hover tbody tr {
    transition: background-color var(--st-transition);
}
.table-hover tbody tr:hover {
    background-color: var(--st-grey-50);
}
/* Card-wrapped tables: let the last row follow the card's rounded corner. */
.card > .table:last-child tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--st-radius-md);
}
.card > .table:last-child tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--st-radius-md);
}

.td-truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.td-scrollable {
    max-width: 220px;
    max-height: 100px;
    overflow: auto;
    white-space: nowrap;
}
.break-content {
    word-wrap: break-word;
    white-space: normal;
}

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

.form-control {
    border-color: var(--st-border);
    border-radius: var(--st-radius-sm);
    transition: border-color var(--st-transition), box-shadow var(--st-transition);
}
.form-control:focus {
    border-color: var(--st-primary);
}
.form-control:focus-visible {
    box-shadow: var(--st-focus-ring) !important;
}
.required-border {
    border: 1px solid red;
}

.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after { cursor: pointer; }
.custom-switch .custom-control-input:disabled ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled ~ .custom-control-label::after { cursor: not-allowed; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--st-primary);
    border-color: var(--st-primary);
}

.checkbox-dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
}
.checkbox-dropdown select {
    cursor: pointer;
}

/* Select2 — match the height and shape of .form-control */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px);
}
.select2-dropdown {
    border-color: var(--st-border-subtle);
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--st-primary);
}

.search-cube {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: #999999;
    background-color: var(--st-grey-100);
    text-align: center;
    line-height: 1.4em;
    border: 1px solid #cccccc;
    border-radius: var(--st-radius-sm);
    font-weight: bold;
}

/* --- Badges ------------------------------------------------------------ */

.badge {
    border-radius: var(--st-radius-pill);
    padding: 0.35em 0.7em;
    font-weight: 500;
}

.badge-primary   { background-color: var(--st-badge-primary); }
.badge-secondary { background-color: var(--st-badge-secondary); }
.badge-info      { background-color: var(--st-badge-info); }
.badge-warning   { background-color: var(--st-badge-warning); }
.badge-danger    { background-color: var(--st-badge-danger); }
.badge-success   { background-color: var(--st-badge-success); }
.badge-purple    { background-color: var(--st-badge-purple); }
.badge-pink      { background-color: var(--st-badge-pink); }
.badge-teal      { background-color: var(--st-badge-teal); }
.badge-orange    { background-color: var(--st-badge-orange); }
.badge-yellow    { background-color: var(--st-badge-yellow); }

.badge.badge-subtle {
    font-weight: 500;
    transition: background-color var(--st-transition);
}
.badge-subtle-hover:hover {
    cursor: pointer;
}

.badge-primary.badge-subtle {
    background-color: var(--st-badge-primary-bg);
    color: var(--st-badge-primary-fg);
    border: 1px solid var(--st-badge-primary-border);
}
.badge-primary.badge-subtle-hover:hover,
.badge-primary.badge-subtle-hover:focus { background-color: var(--st-badge-primary-hover); }

.badge-secondary.badge-subtle {
    background-color: var(--st-badge-secondary-bg);
    color: var(--st-badge-secondary-fg);
    border: 1px solid var(--st-badge-secondary-border);
}
.badge-secondary.badge-subtle-hover:hover,
.badge-secondary.badge-subtle-hover:focus { background-color: var(--st-badge-secondary-hover); }

.badge-info.badge-subtle {
    background-color: var(--st-badge-info-bg);
    color: var(--st-badge-info-fg);
    border: 1px solid var(--st-badge-info-border);
}
.badge-info.badge-subtle-hover:hover,
.badge-info.badge-subtle-hover:focus { background-color: var(--st-badge-info-hover); }

.badge-warning.badge-subtle {
    background-color: var(--st-badge-warning-bg);
    color: var(--st-badge-warning-fg);
    border: 1px solid var(--st-badge-warning-border);
}
.badge-warning.badge-subtle-hover:hover,
.badge-warning.badge-subtle-hover:focus { background-color: var(--st-badge-warning-hover); }

.badge-danger.badge-subtle {
    background-color: var(--st-badge-danger-bg);
    color: var(--st-badge-danger-fg);
    border: 1px solid var(--st-badge-danger-border);
}
.badge-danger.badge-subtle-hover:hover,
.badge-danger.badge-subtle-hover:focus { background-color: var(--st-badge-danger-hover); }

.badge-success.badge-subtle {
    background-color: var(--st-badge-success-bg);
    color: var(--st-badge-success-fg);
    border: 1px solid var(--st-badge-success-border);
}
.badge-success.badge-subtle-hover:hover,
.badge-success.badge-subtle-hover:focus { background-color: var(--st-badge-success-hover); }

.badge-purple.badge-subtle {
    background-color: var(--st-badge-purple-bg);
    color: var(--st-badge-purple-fg);
    border: 1px solid var(--st-badge-purple-border);
}
.badge-purple.badge-subtle-hover:hover,
.badge-purple.badge-subtle-hover:focus { background-color: var(--st-badge-purple-hover); }

.badge-pink.badge-subtle {
    background-color: var(--st-badge-pink-bg);
    color: var(--st-badge-pink-fg);
    border: 1px solid var(--st-badge-pink-border);
}
.badge-pink.badge-subtle-hover:hover,
.badge-pink.badge-subtle-hover:focus { background-color: var(--st-badge-pink-hover); }

.badge-teal.badge-subtle {
    background-color: var(--st-badge-teal-bg);
    color: var(--st-badge-teal-fg);
    border: 1px solid var(--st-badge-teal-border);
}
.badge-teal.badge-subtle-hover:hover,
.badge-teal.badge-subtle-hover:focus { background-color: var(--st-badge-teal-hover); }

.badge-orange.badge-subtle {
    background-color: var(--st-badge-orange-bg);
    color: var(--st-badge-orange-fg);
    border: 1px solid var(--st-badge-orange-border);
}
.badge-orange.badge-subtle-hover:hover,
.badge-orange.badge-subtle-hover:focus { background-color: var(--st-badge-orange-hover); }

.badge-yellow.badge-subtle {
    background-color: var(--st-badge-yellow-bg);
    color: var(--st-badge-yellow-fg);
    border: 1px solid var(--st-badge-yellow-border);
}
.badge-yellow.badge-subtle-hover:hover,
.badge-yellow.badge-subtle-hover:focus { background-color: var(--st-badge-yellow-hover); }

/* --- Nav & dropdowns --------------------------------------------------- */

.nav-link {
    color: rgb(22, 11, 43) !important;
    margin-right: 0.6em;
    transition: color var(--st-transition);
}
.nav-link:hover {
    color: rgb(77, 36, 153) !important;
}
.navbar-second {
    background-color: var(--st-grey-100) !important;
}
.nav-logo-icon:hover {
    opacity: 0.9;
}

.dropdown-menu {
    font-size: 15px;
    border-radius: var(--st-radius-md);
    border: 1px solid var(--st-border-subtle);
    box-shadow: var(--st-shadow-md);
    padding: 0.35rem;
}
.dropdown-item {
    border-radius: var(--st-radius-sm);
    transition: background-color var(--st-transition), color var(--st-transition);
}
.dropdown-item:hover {
    color: rgb(77, 36, 153) !important;
}
.no-arrow::after {
    display: none;
}

.circle-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    font-weight: 700;
    color: rgb(255, 255, 255) !important;
}
.circle-icon:hover {
    text-decoration: none;
}

/* --- Modals ------------------------------------------------------------ */

.modal-content {
    border-radius: var(--st-radius-md);
    border: none;
    box-shadow: var(--st-shadow-md);
}
.modal-header,
.modal-footer {
    border-color: var(--st-border-subtle);
}

/* --- List group (Settings sidebar) ------------------------------------- */

.list-group-item {
    border-color: var(--st-border-subtle);
    transition: background-color var(--st-transition), color var(--st-transition);
}
.list-group-item:first-child {
    border-top-left-radius: var(--st-radius-md);
    border-top-right-radius: var(--st-radius-md);
}
.list-group-item:last-child {
    border-bottom-left-radius: var(--st-radius-md);
    border-bottom-right-radius: var(--st-radius-md);
}

/* --- Misc widgets ------------------------------------------------------ */

.refferer-link {
    border-bottom: 1.2px dashed var(--st-link-referrer);
    color: var(--st-link-referrer);
}
.refferer-link:hover {
    color: var(--st-link-referrer-hover);
    text-decoration: none;
}

.tooltip-icon:hover {
    cursor: pointer;
}

.copy-container {
    display: flex;
    align-items: center;
}
.unique-id-text {
    margin: 0 10px;
    white-space: nowrap;
    border-bottom: dashed rgb(166, 166, 166) 1px;
}

.fa-grip-vertical:hover {
    cursor: grab;
}

.feedback-icon {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    z-index: 0;
    color: var(--st-surface);
    background-color: var(--st-red);
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--st-shadow-md);
    transition: transform var(--st-transition);
}
.feedback-icon:hover {
    background-color: var(--st-red);
    transform: translateY(-2px);
}

.feedback-form {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 20px;
    background-color: var(--st-surface);
    box-shadow: var(--st-shadow-md);
    padding: 20px;
    border-radius: var(--st-radius-md);
    z-index: 1001;
}
.feedback-form form {
    display: flex;
    flex-direction: column;
}