@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    font-feature-settings: "case" 1;
    src: url("/ui/static/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/ui/static/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: Lexend;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/ui/static/fonts/Lexend.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    /* Colors - Surfaces (light to dark) */
    --go-bg: #f7f8fb;
    --go-surface: #ffffff;
    --go-surface-alt: #f8fafc;
    --go-surface-muted: #f2f5f9;
    --go-border: #e2e8f0;
    --go-border-light: #f1f5f9;

    /* Colors - Text */
    --go-text: #0f172a;
    --go-text-muted: #64748b;
    --go-text-inverse: #ffffff;

    /* Colors - Brand */
    --go-accent: #f97316;
    --go-accent-hover: #fb923c;
    --go-accent-dark: #c2410c;
    --go-accent-soft: #fcd5b8;
    --go-accent-muted: rgba(249, 115, 22, 0.08);
    --go-iris: #0ea5e9;
    --go-iris-dark: #0284c7;
    --go-iris-soft: #bae6fd;
    --go-iris-muted: rgba(14, 165, 233, 0.08);

    /* Colors - Status */
    --go-success: #10b981;
    --go-success-dark: #059669;
    --go-success-light: #d1fae5;
    --go-danger: #ef4444;
    --go-danger-dark: #dc2626;
    --go-danger-light: #fee2e2;
    --go-warning: #f59e0b;
    --go-warning-dark: #d97706;
    --go-warning-light: #fef3c7;

    /* Colors - Status chips (semantic) */
    --go-status-processing: #f5b453;
    --go-status-finished: #3cd69a;
    --go-status-error: #ff6b6b;
    --go-status-started: #5ad8ff;

    /* Spacing */
    --go-space-xs: 0.25rem;
    --go-space-sm: 0.5rem;
    --go-space-md: 0.75rem;
    --go-space-lg: 1rem;
    --go-space-xl: 1.5rem;
    --go-space-2xl: 2rem;
    --go-space-3xl: 3rem;

    /* Font sizes */
    --go-font-xs: 0.6875rem;
    --go-font-sm: 0.75rem;
    --go-font-base: 0.875rem;
    --go-font-md: 0.9375rem;
    --go-font-lg: 1rem;
    --go-font-xl: 1.25rem;
    --go-font-2xl: 1.5rem;
    --go-font-3xl: 2rem;
    --go-font-4xl: 3rem;

    /* Font families */
    --go-font-sans: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --go-font-display: Lexend, InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --go-font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, monospace;

    /* Border radius */
    --go-radius-xl: 20px;
    --go-radius-lg: 16px;
    --go-radius: 12px;
    --go-radius-sm: 8px;
    --go-radius-xs: 6px;
    --go-radius-full: 9999px;

    /* Shadows - subtle and refined */
    --go-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
    --go-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --go-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    --go-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
    --go-shadow-lg: 0 8px 16px -4px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --go-shadow-xl: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
    --go-glow: 0 0 12px rgba(14, 165, 233, 0.08), 0 0 24px rgba(14, 165, 233, 0.04);
    --go-glow-accent: 0 0 12px rgba(249, 115, 22, 0.1), 0 0 24px rgba(249, 115, 22, 0.05);

    /* Transitions - refined easing */
    --go-transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --go-transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --go-transition-spring: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --go-gap: 1.5rem;

    /* Status surfaces — tinted backgrounds for badges, alerts, toasts */
    --go-success-surface: color-mix(in srgb, var(--go-success) 10%, transparent);
    --go-danger-surface: color-mix(in srgb, var(--go-danger) 10%, transparent);
    --go-warning-surface: color-mix(in srgb, var(--go-warning) 10%, transparent);

    /* Status rings — slightly stronger tint for borders */
    --go-success-ring: color-mix(in srgb, var(--go-success) 30%, transparent);
    --go-danger-ring: color-mix(in srgb, var(--go-danger) 30%, transparent);
    --go-warning-ring: color-mix(in srgb, var(--go-warning) 30%, transparent);

    /* Status chip surfaces (distinct palette from main status colors) */
    --go-status-processing-surface: color-mix(in srgb, var(--go-status-processing) 12%, transparent);
    --go-status-processing-ring: color-mix(in srgb, var(--go-status-processing) 35%, transparent);
    --go-status-finished-surface: color-mix(in srgb, var(--go-status-finished) 12%, transparent);
    --go-status-finished-ring: color-mix(in srgb, var(--go-status-finished) 35%, transparent);
    --go-status-error-surface: color-mix(in srgb, var(--go-status-error) 14%, transparent);
    --go-status-error-ring: color-mix(in srgb, var(--go-status-error) 40%, transparent);
    --go-status-started-surface: color-mix(in srgb, var(--go-status-started) 12%, transparent);
    --go-status-started-ring: color-mix(in srgb, var(--go-status-started) 35%, transparent);

    /* Muted — for neutral/gray badges */
    --go-muted: #6b7280;
    --go-muted-surface: color-mix(in srgb, var(--go-muted) 10%, transparent);
    --go-muted-ring: color-mix(in srgb, var(--go-muted) 30%, transparent);

    /* Z-index scale */
    --go-z-table: 2;
    --go-z-sticky: 10;
    --go-z-dropdown: 100;
    --go-z-modal: 1000;
    --go-z-tooltip: 1100;
    --go-z-toast: 1200;

    /* Brand gradients */
    --go-gradient-soft: linear-gradient(135deg, var(--go-iris-soft), var(--go-accent-soft));
    --go-gradient-muted: linear-gradient(135deg, var(--go-iris-muted), var(--go-accent-muted));
    --go-gradient-bold: linear-gradient(135deg, var(--go-iris), var(--go-accent));

    /* Overlays */
    --go-overlay: rgba(15, 23, 42, 0.5);
    --go-overlay-heavy: rgba(15, 23, 42, 0.95);

    /* Focus ring */
    --go-ring: 0 0 0 3px var(--go-iris-soft);

    /* Interactive hover defaults */
    --go-hover-border: var(--go-text-muted);
    --go-hover-bg: var(--go-surface-muted);

    /* Disabled state */
    --go-disabled-opacity: 0.5;

    /* Chart color palette */
    --go-chart-1: #5ad8ff;
    --go-chart-2: #7c7bff;
    --go-chart-3: #3cd69a;
    --go-chart-4: #f97316;
    --go-chart-5: #f5b453;
    --go-chart-6: #ff6b6b;

    /* Chart semantic colors */
    --go-chart-axis: var(--go-text-muted);
    --go-chart-grid: var(--go-border-light);
    --go-chart-label: var(--go-text);

    /* Network graph colors */
    --go-chart-node-active: #0d6efd;
    --go-chart-node-inactive: #ffc107;
    --go-chart-node-stroke: #0a4bb9;
    --go-chart-node-highlight: #20c997;
    --go-chart-link: #334155;
    --go-chart-link-opacity: 0.6;

    --go-provider-email: var(--go-status-started);
    --go-provider-linkedin: var(--go-iris);
    --go-provider-twitter: var(--go-iris-dark);
    --go-provider-facebook: var(--go-iris-dark);
    --go-provider-github: var(--go-text-muted);
    --go-provider-producthunt: var(--go-accent);
}

/* =============================================================================
   STYLE GUIDE — Recipes for building new components
   =============================================================================

   COLOR VARIANTS
   Any component that needs success/danger/warning/info/muted states:

     .component--success {
         background: var(--go-success-surface);
         border-color: var(--go-success-ring);
         color: var(--go-success);
     }
     .component--danger  { /* same pattern with --go-danger-* */ }
     .component--warning { /* same pattern with --go-warning-* */ }
     .component--muted   { /* same pattern with --go-muted-* */ }
     .component--info    {
         background: var(--go-iris-muted);
         border-color: var(--go-iris-soft);
         color: var(--go-iris);
     }

   For stronger/opaque backgrounds (pills, toasts): use --go-*-light instead
   of --go-*-surface.

   INTERACTIVE STATES — Three tiers of hover feedback:

     Tier 1 — Inline elements (chips, badges, small cards, table rows):
         transform: translateY(-1px);
         box-shadow: var(--go-shadow-sm);

     Tier 2 — Prominent cards (stats, queries, feature panels):
         transform: translateY(-2px);
         box-shadow: var(--go-shadow-md);

     Tier 3 — Form controls (inputs, selects, checkboxes):
         border-color: var(--go-hover-border);
         (no lift, no shadow change)

   SURFACE LEVELS — Three card "weights":

     Embedded (nested inside another surface):
         background: var(--go-surface-muted);
         border-radius: var(--go-radius-sm);
         (no shadow)

     Standard:
         background: var(--go-surface);
         border: 1px solid var(--go-border);
         border-radius: var(--go-radius-lg);
         box-shadow: var(--go-shadow-md);

     Prominent:
         background: var(--go-gradient-soft) or var(--go-gradient-muted);
         border-radius: var(--go-radius);
         box-shadow: var(--go-shadow);

   Z-INDEX — Use scale tokens, never raw numbers for new components:
     var(--go-z-table)    — table header stacking
     var(--go-z-sticky)   — sticky elements, floating legends
     var(--go-z-dropdown) — dropdown menus
     var(--go-z-modal)    — modals, loading overlays
     var(--go-z-tooltip)  — tooltips, popovers
     var(--go-z-toast)    — toast notifications

   BRAND GRADIENT — The iris→accent diagonal gradient:
     var(--go-gradient-soft)  — soft tint (backgrounds, hover overlays)
     var(--go-gradient-muted) — very subtle (active states, selections)
     var(--go-gradient-bold)  — full color (primary actions, text gradients)
     For horizontal variants: use the same color tokens with 90deg manually.

   OVERLAYS:
     var(--go-overlay)       — standard backdrop (modals, loading)
     var(--go-overlay-heavy) — opaque backdrop (tooltips on dark bg)

   ============================================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 20% -20%, rgba(14, 165, 233, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 80% -10%, rgba(249, 115, 22, 0.06), transparent),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(14, 165, 233, 0.04), transparent),
        var(--go-bg);
    color: var(--go-text);
    font-family: var(--go-font-sans);
    font-size: var(--go-font-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.page__title,
.stat__value {
    font-family: var(--go-font-display);
    font-feature-settings: "ss01";
}

/* Focus states for accessibility */
:focus-visible {
    outline: 2px solid var(--go-iris);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--go-iris);
    outline-offset: 2px;
}

/* Selection styling */
::selection {
    background: var(--go-iris-soft);
    color: var(--go-text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-xs);
}

::-webkit-scrollbar-thumb {
    background: var(--go-border);
    border-radius: var(--go-radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--go-text-muted);
}

/* Links */
a {
    color: var(--go-accent);
    text-decoration: none;
    transition: color var(--go-transition);
}

a:hover {
    color: var(--go-accent-hover);
}

.text-secondary,
.text-muted {
    color: var(--go-text-muted) !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: var(--go-z-tooltip);
}

.skip-link:focus {
    position: fixed;
    top: var(--go-space-sm);
    left: var(--go-space-sm);
    width: auto;
    padding: var(--go-space-sm) var(--go-space-md);
    background: var(--go-surface);
    color: var(--go-text);
    border: 2px solid var(--go-iris);
    border-radius: var(--go-radius-sm);
    box-shadow: var(--go-shadow-md);
    z-index: var(--go-z-tooltip);
}

.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, var(--go-surface) 0%, var(--go-surface-alt) 100%);
    border-right: 1px solid var(--go-border);
    padding: var(--go-space-xl) var(--go-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--go-space-lg);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--go-shadow-sm);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--go-space-md);
    font-weight: 700;
    font-size: var(--go-font-lg);
    letter-spacing: 0.02em;
    color: var(--go-text);
}

.sidebar__brand-mark {
    width: 38px;
    height: 38px;
    border-radius: var(--go-radius);
    background: var(--go-gradient-muted);
    border: 1px solid var(--go-border);
    display: grid;
    place-items: center;
    color: var(--go-text);
    font-weight: 700;
    box-shadow: var(--go-glow);
    transition: all var(--go-transition-slow);
}

.sidebar__brand:hover .sidebar__brand-mark {
    transform: rotate(5deg) scale(1.05);
    box-shadow: var(--go-shadow-md), var(--go-glow);
}

.sidebar__section-title {
    font-size: var(--go-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--go-text-muted);
    margin: var(--go-space-md) 0 var(--go-space-xs);
    padding: 0 var(--go-space-xs);
}

.sidebar__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    padding: var(--go-space-sm) var(--go-space-md);
    border-radius: var(--go-radius);
    color: var(--go-text);
    border: 1px solid transparent;
    background: transparent;
    transition: all var(--go-transition);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.sidebar__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--go-iris-soft), var(--go-accent-soft));
    transform: scaleY(0);
    transition: transform var(--go-transition-spring);
}

.sidebar__link:hover {
    background: var(--go-iris-muted);
    border-color: var(--go-border);
}

.sidebar__link:hover::before,
.sidebar__link.active::before {
    transform: scaleY(1);
}

.sidebar__link.active {
    background: var(--go-gradient-muted);
    border-color: var(--go-border);
    box-shadow: var(--go-glow);
    color: var(--go-text);
}

.sidebar__link i {
    font-size: var(--go-font-lg);
    color: var(--go-accent);
}

.sidebar__footer {
    margin-top: auto;
    padding: var(--go-space-md);
    border-radius: var(--go-radius);
    border: 1px solid var(--go-border);
    background: var(--go-surface-alt);
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
    line-height: 1.4;
}

.content {
    padding: var(--go-space-xl) var(--go-space-2xl) var(--go-space-2xl);
    min-height: 100vh;
    max-width: none;
    width: 100%;
    color: var(--go-text);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--go-space-md);
    margin-bottom: var(--go-space-md);
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    color: var(--go-text-muted);
    font-size: var(--go-font-base);
}

.breadcrumbs a {
    color: var(--go-text);
}

.breadcrumbs__current {
    color: var(--go-text);
    font-weight: 700;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-sm);
    padding: var(--go-space-sm) var(--go-space-md);
    border-radius: var(--go-radius-full);
    background: var(--go-surface-alt);
    border: 1px solid var(--go-border);
    color: var(--go-text);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--go-transition);
}

.user-chip:hover {
    background: var(--go-surface-muted);
    border-color: var(--go-iris);
    box-shadow: var(--go-shadow-sm), var(--go-glow);
}

.user-chip.dropdown-toggle::after {
    display: none;
}

.user-chip__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--go-radius-full);
    background: var(--go-gradient-soft);
    color: var(--go-text);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.user-chip--spoofed {
    border-color: var(--go-warning);
    background: color-mix(in srgb, var(--go-warning) 10%, var(--go-surface-alt));
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-full);
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    color: var(--go-text);
    font-size: var(--go-font-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: var(--go-shadow-xs);
    transition: all var(--go-transition);
}

.pill--accent {
    background: var(--go-gradient-soft);
    border-color: var(--go-border);
    color: var(--go-text);
    font-weight: 600;
}

.pill--muted {
    background: var(--go-surface-muted);
    border-color: var(--go-border);
    color: var(--go-text-muted);
}

.pill--danger {
    background: var(--go-danger-light);
    border-color: var(--go-danger);
    color: var(--go-danger-dark);
    font-weight: 600;
}

.pill--success {
    background: var(--go-success-light);
    border-color: var(--go-success);
    color: var(--go-success-dark);
    font-weight: 600;
}

.pill--warning {
    background: var(--go-warning-light);
    border-color: var(--go-warning);
    color: var(--go-warning-dark);
    font-weight: 600;
}

.pill--info {
    background: var(--go-iris-muted);
    border-color: var(--go-iris-soft);
    color: var(--go-iris-dark);
    font-weight: 600;
}

/* Interactive pill (button style) */
button.pill {
    cursor: pointer;
}

button.pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--go-shadow-sm);
}

button.pill:active {
    transform: translateY(0);
}

.surface h5,
.surface h6 {
    color: var(--go-text);
    font-weight: 700;
}

.page {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    color: var(--go-text);
}

.page__content {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-md);
}

.page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--go-space-md);
    margin-bottom: var(--go-space-lg);
}

.page__title {
    font-size: var(--go-font-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--go-text);
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.page__title--gradient {
    background: linear-gradient(135deg, var(--go-text) 0%, var(--go-text-muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page__desc {
    color: var(--go-text-muted);
    margin-top: var(--go-space-xs);
    font-size: var(--go-font-md);
}

.page__actions {
    display: flex;
    gap: var(--go-space-sm);
    align-items: center;
}

.unauth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--go-space-2xl) var(--go-space-lg);
    background: var(--go-bg);
}

.unauth-card {
    max-width: 720px;
    width: 100%;
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xl);
    box-shadow: var(--go-shadow);
    padding: var(--go-space-2xl);
    color: var(--go-text);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--go-space-sm);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-sm) var(--go-space-lg);
    font-weight: 500;
    font-size: var(--go-font-base);
    cursor: pointer;
    color: var(--go-text);
    background: var(--go-surface);
    box-shadow: var(--go-shadow-sm);
    transition: all var(--go-transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--go-shadow-md);
    border-color: var(--go-hover-border);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--go-shadow-xs);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--go-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* Button loading state */
.btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn--loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--go-radius-full);
    animation: spin 0.6s linear infinite;
}

.btn--loading.btn--primary::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-right-color: transparent;
    border-top-color: var(--go-text-inverse);
}

.btn--primary {
    background: linear-gradient(135deg, var(--go-iris-soft) 0%, var(--go-accent-soft) 100%);
    color: var(--go-text);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow-md);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--go-iris) 0%, var(--go-accent) 100%);
    color: var(--go-text-inverse);
    box-shadow: var(--go-shadow-lg), var(--go-glow);
}

.btn--ghost {
    background: var(--go-surface-alt);
    color: var(--go-text);
    border: 1px solid var(--go-border);
}

.btn--ghost:hover {
    background: var(--go-hover-bg);
    border-color: var(--go-hover-border);
}

.btn--danger {
    background: var(--go-danger-light);
    color: var(--go-danger);
    border: 1px solid var(--go-danger);
}

.btn--danger:hover {
    background: var(--go-danger);
    border-color: var(--go-danger-dark);
    color: var(--go-text-inverse);
}

.btn--success {
    background: var(--go-success-light);
    color: var(--go-success);
    border: 1px solid var(--go-success);
}

.btn--success:hover {
    background: var(--go-success);
    border-color: var(--go-success-dark);
    color: var(--go-text-inverse);
}

.btn--outline {
    background: transparent;
    color: var(--go-text);
    border: 1px solid var(--go-border);
}

.btn--outline:hover {
    background: var(--go-hover-bg);
    border-color: var(--go-hover-border);
}

/* Icon-only button */
.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--go-radius-sm);
}

.btn--icon.btn--sm {
    width: 28px;
    height: 28px;
}

.btn--sm {
    padding: var(--go-space-xs) var(--go-space-sm);
    font-size: var(--go-font-sm);
}

.btn--lg {
    padding: var(--go-space-md) var(--go-space-xl);
    font-size: var(--go-font-md);
}

/* =============================================================================
   Card Base - shared styles for all card components
   ============================================================================= */
:is(.card-base, .token-card, .role-card, .sync-stat-card, .job-card, .message-card, .connection-card, .works-for-card) {
    padding: var(--go-space-md);
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
}

:is(.card-base, .token-card, .role-card, .job-card, .message-card, .connection-card, .works-for-card) {
    margin-bottom: var(--go-space-sm);
}

:is(.card-base, .token-card, .role-card, .job-card, .message-card, .connection-card, .works-for-card):last-child {
    margin-bottom: 0;
}

/* Card hover states for interactive cards */
:is(.token-card, .role-card, .job-card, .works-for-card) {
    transition: all var(--go-transition);
    position: relative;
}

:is(.token-card, .role-card, .job-card, .works-for-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--go-transition);
    background: var(--go-gradient-muted);
    pointer-events: none;
}

:is(.token-card, .role-card, .job-card, .works-for-card):hover {
    border-color: var(--go-border);
    transform: translateY(-1px);
    box-shadow: var(--go-shadow-sm);
}

:is(.token-card, .role-card, .job-card, .works-for-card):hover::after {
    opacity: 1;
}

/* Card header pattern */
:is(.card-base__header, .token-card__header, .job-card__header, .connection-card__header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--go-space-xs);
}

/* =============================================================================
   Flex Utilities
   ============================================================================= */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.flex-start { align-items: flex-start; }
.gap-xs { gap: var(--go-space-xs); }
.gap-sm { gap: var(--go-space-sm); }
.gap-md { gap: var(--go-space-md); }
.gap-lg { gap: var(--go-space-lg); }

/* =============================================================================
   Shared Text Patterns
   ============================================================================= */
/* Label - small uppercase text for labels */
.label,
.stat__label,
.sync-stat-card__label,
.action-toolbar__label,
.section-label {
    font-size: var(--go-font-xs);
    font-weight: 600;
    color: var(--go-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Meta - small muted text for secondary info */
.meta,
.stat__meta,
.token-card__detail,
.job-card__timing,
.role-card__dates,
.sync-stat-card__meta,
.works-for-card__meta {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

/* Title - bold text for names/titles */
.title,
.role-card__title,
.connection-card__name,
.user-card__name,
.job-card__process,
.token-card__email {
    font-weight: 600;
    color: var(--go-text);
}

/* =============================================================================
   Tag Base - shared styles for badge/pill/chip/status elements
   ============================================================================= */
.badge,
.pill,
.chip,
.status-chip,
.meta-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--go-border);
}

/* =============================================================================
   Flex List - shared styles for flex wrap containers
   ============================================================================= */
.status-badges,
.meta-badges,
.sync-counts,
.connection-card__stats {
    display: flex;
    flex-wrap: wrap;
}

/* =============================================================================
   Monospace - shared font-family for code/email text
   ============================================================================= */
.mono,
.token-card__email,
.user-card__email,
.profile-email {
    font-family: var(--go-font-mono);
}

/* =============================================================================
   Profile Actions Bar
   ============================================================================= */
.profile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--go-space-sm);
}

.profile-actions__nav,
.profile-actions__tools {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    flex-wrap: wrap;
}

/* =============================================================================
   Action Toolbar (User Profile)
   ============================================================================= */
.action-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--go-space-md);
    flex-wrap: wrap;
}

.action-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
}

.action-toolbar__label {
    margin-right: var(--go-space-xs);
}

.action-toolbar__divider {
    width: 1px;
    height: 1.5rem;
    background: var(--go-border);
    margin: 0 var(--go-space-xs);
}

.surface {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-lg);
    padding: var(--go-space-xl);
    box-shadow: var(--go-shadow-md);
    transition: box-shadow var(--go-transition), border-color var(--go-transition);
}

.surface:hover {
    box-shadow: var(--go-shadow-lg);
}

.no-shadow {
    box-shadow: none;
    border: 1px solid transparent;
    background: transparent;
}

.grid {
    display: grid;
    gap: var(--go-gap);
}

.grid.cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.stat__value {
    font-size: var(--go-font-2xl);
    font-weight: 700;
    color: var(--go-text);
}

.stat--link {
    cursor: pointer;
    transition: border-color var(--go-transition), box-shadow var(--go-transition);
}
.stat--link:hover {
    border-color: var(--go-accent);
    box-shadow: var(--go-shadow-sm);
}
.stat--link .stat__value {
    color: var(--go-accent);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-xs);
    font-size: var(--go-font-sm);
    font-weight: 500;
    color: var(--go-text);
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
}

.empty-state {
    text-align: center;
    padding: var(--go-space-2xl) var(--go-space-lg);
    color: var(--go-text-muted);
    position: relative;
    background: linear-gradient(180deg, var(--go-surface-muted) 0%, transparent 100%);
    border-radius: var(--go-radius-lg);
}

.empty-state::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, var(--go-iris-muted), transparent 50%),
        radial-gradient(circle at 70% 80%, var(--go-accent-muted), transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}

.empty-state__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--go-radius-lg);
    display: grid;
    place-items: center;
    background: var(--go-gradient-muted);
    border: 1px solid var(--go-border);
    margin: 0 auto var(--go-space-md);
    color: var(--go-accent);
    box-shadow: var(--go-shadow-md), var(--go-glow);
    animation: float 3s ease-in-out infinite;
    position: relative;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.empty-state__title {
    color: var(--go-text);
    font-weight: 700;
    margin-bottom: var(--go-space-xs);
}

.empty-state__text {
    color: var(--go-text-muted);
}

.footer {
    margin-top: var(--go-space-lg);
    display: flex;
    justify-content: space-between;
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
}

.htmx-indicator {
    display: none;
    position: fixed;
    right: var(--go-space-xl);
    bottom: var(--go-space-xl);
    padding: var(--go-space-sm) var(--go-space-md);
    border-radius: var(--go-radius);
    background: var(--go-text);
    color: var(--go-surface);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
}

.htmx-request .htmx-indicator,
.htmx-indicator.active {
    display: inline-flex;
    gap: var(--go-space-sm);
    align-items: center;
}

.table-shell {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--go-radius-lg);
    border: 1px solid var(--go-border);
    background: var(--go-surface);
    box-shadow: var(--go-shadow);
    position: relative;
}

/* Scroll fade indicators for horizontal overflow */
.table-shell::before,
.table-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--go-transition);
    z-index: var(--go-z-table);
}

.table-shell::before {
    left: 0;
    background: linear-gradient(to right, var(--go-surface), transparent);
}

.table-shell::after {
    right: 0;
    background: linear-gradient(to left, var(--go-surface), transparent);
}

.table-shell.can-scroll-left::before {
    opacity: 1;
}

.table-shell.can-scroll-right::after {
    opacity: 1;
}

.table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: var(--go-z-table);
    width: var(--table-column-width, auto);
    background: var(--go-surface-muted);
    color: var(--go-text-muted);
    font-weight: 600;
    padding: var(--go-space-md) var(--go-space-lg);
    border-bottom: 1px solid var(--go-border);
    text-transform: uppercase;
    font-size: var(--go-font-xs);
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
    transition: box-shadow var(--go-transition);
}

/* Sticky header shadow when scrolled */
.table-shell.is-scrolled .table thead th {
    box-shadow: var(--go-shadow-md);
}

.table thead th:last-child {
    text-align: right;
}

.table tbody tr {
    background: var(--go-surface);
    transition: all var(--go-transition);
}

.table tbody td {
    padding: var(--go-space-md) var(--go-space-lg);
    vertical-align: middle;
    color: var(--go-text);
    border-bottom: 1px solid var(--go-border);
}

.table tbody td:last-child {
    text-align: right;
}

.table tbody tr:hover {
    background: linear-gradient(90deg, var(--go-iris-muted), var(--go-accent-muted));
}

.table tbody tr:hover td {
    background: transparent;
}

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

/* Table row selection state */
.table tbody tr.selected td {
    background: var(--go-iris-muted);
    border-color: var(--go-iris-soft);
}

.table tbody tr.selected td:first-child {
    border-left: 3px solid var(--go-iris);
    padding-left: calc(var(--go-space-lg) - 3px);
}

.table tbody tr.table-row--subtle {
    background: var(--go-surface-alt);
}

.table-cell-flush {
    padding: 0;
}

/* Numeric columns - right align */
.table td.text-end,
.table th.text-end {
    text-align: right;
}

/* Truncate long text */
.table .truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state row */
.table .empty-row td {
    text-align: center;
    padding: var(--go-space-3xl) var(--go-space-lg);
    color: var(--go-text-muted);
}

.table .empty-row:hover td {
    background: var(--go-surface);
}

/* Sortable column headers */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: calc(var(--go-space-lg) + 1rem);
}

.table thead th.sortable::after {
    content: "";
    position: absolute;
    right: var(--go-space-lg);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--go-text-muted);
    opacity: 0.3;
    transition: opacity var(--go-transition), transform var(--go-transition);
}

.table thead th.sortable:hover::after {
    opacity: 0.6;
}

.table thead th.sortable.sort-asc::after {
    opacity: 1;
    border-top: none;
    border-bottom: 5px solid var(--go-iris);
}

.table thead th.sortable.sort-desc::after {
    opacity: 1;
    border-top: 5px solid var(--go-iris);
}

/* Focus states for keyboard navigation */
.table tbody tr:focus-within {
    outline: 2px solid var(--go-iris);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

.table tbody tr:focus-within td {
    background: transparent;
}

/* Loading skeleton for tables - reuses skeleton-shimmer animation */
.table.table-loading tbody tr td {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.table.table-loading tbody tr td::after {
    content: "";
    position: absolute;
    inset: var(--go-space-sm);
    background: linear-gradient(
        90deg,
        var(--go-border) 0%,
        var(--go-surface-muted) 20%,
        var(--go-border) 40%,
        var(--go-border) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--go-radius-sm);
}

.table.table-loading tbody tr:hover {
    background: var(--go-surface);
}

/* Alternating row backgrounds */
.table tbody tr:nth-child(even) {
    background: var(--go-surface-alt);
}

/* Hover indicator on first cell */
.table tbody tr:hover td:first-child {
    border-left: 2px solid var(--go-iris);
    padding-left: calc(var(--go-space-lg) - 2px);
}

/* Clickable rows */
.table tbody tr.clickable-row {
    cursor: pointer;
}

/* Dense table variant */
.table-dense thead th {
    padding: var(--go-space-sm) var(--go-space-md);
}

.table-dense tbody td {
    padding: var(--go-space-sm) var(--go-space-md);
}

.multi-select__trigger {
    border: 1px solid var(--go-border);
    background: var(--go-surface-muted);
    color: var(--go-text);
    font-weight: 600;
}

.multi-select__menu {
    min-width: 260px;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--go-border);
}

.multi-select__options {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.multi-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    text-align: left;
}

/* =============================================================================
   Form elements - base styling
   ============================================================================= */
input,
textarea,
select {
    color: var(--go-text);
    font-family: inherit;
    font-size: var(--go-font-base);
}

.form-control,
.form-select {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-sm) var(--go-space-md);
    color: var(--go-text);
    box-shadow: var(--go-shadow-xs);
    transition: border-color var(--go-transition), box-shadow var(--go-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--go-iris);
    box-shadow: var(--go-shadow-sm), 0 0 0 2px var(--go-border-light);
    outline: none;
}

.form-control::placeholder {
    color: var(--go-text-muted);
    opacity: 0.7;
}

/* Active filter highlight — applied when a filter control has a non-default value */
.form-control.filter--active,
.form-select.filter--active {
    border-color: var(--go-accent);
    box-shadow: var(--go-shadow-xs), 0 0 0 2px rgba(249, 115, 22, 0.15);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--go-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Form validation states */
.form-control.is-valid {
    border-color: var(--go-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--go-space-md) center;
    background-size: 1rem;
    padding-right: calc(var(--go-space-md) * 2 + 1rem);
}

.form-control.is-valid:focus {
    border-color: var(--go-success);
    box-shadow: var(--go-shadow-sm), 0 0 0 2px var(--go-success-light);
}

.form-control.is-invalid {
    border-color: var(--go-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3e%3ccircle cx='6' cy='6' r='4.5' stroke='%23ef4444' stroke-width='1.5'/%3e%3cpath stroke='%23ef4444' stroke-width='1.5' d='M4 8l4-4M8 8L4 4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--go-space-md) center;
    background-size: 1rem;
    padding-right: calc(var(--go-space-md) * 2 + 1rem);
}

.form-control.is-invalid:focus {
    border-color: var(--go-danger);
    box-shadow: var(--go-shadow-sm), 0 0 0 2px var(--go-danger-light);
}

.valid-feedback {
    display: none;
    font-size: var(--go-font-sm);
    color: var(--go-success);
    margin-top: var(--go-space-xs);
}

.invalid-feedback {
    display: none;
    font-size: var(--go-font-sm);
    color: var(--go-danger);
    margin-top: var(--go-space-xs);
}

.is-valid ~ .valid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Form input hover state */
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--go-hover-border);
}

/* Checkbox and radio styling */
.form-check-input {
    width: 1rem;
    height: 1rem;
    background: var(--go-surface);
    border: 1.5px solid var(--go-border);
    transition: all var(--go-transition);
    cursor: pointer;
}

.form-check-input:hover {
    border-color: var(--go-iris);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 2px var(--go-border-light);
    border-color: var(--go-iris);
}

.form-label {
    font-weight: 600;
    color: var(--go-text);
    margin-bottom: var(--go-space-xs);
    font-size: var(--go-font-base);
}

.form-text {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    margin-top: var(--go-space-xs);
}

.location-results table td {
    color: var(--go-text);
}

.status-chip {
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-full);
    font-weight: 600;
    font-size: var(--go-font-base);
}

.status-chip.processing { color: var(--go-status-processing); background: var(--go-status-processing-surface); border-color: var(--go-status-processing-ring); }
.status-chip.finished { color: var(--go-status-finished); background: var(--go-status-finished-surface); border-color: var(--go-status-finished-ring); }
.status-chip.error { color: var(--go-status-error); background: var(--go-status-error-surface); border-color: var(--go-status-error-ring); }
.status-chip.started { color: var(--go-status-started); background: var(--go-status-started-surface); border-color: var(--go-status-started-ring); }

.meta-badges { gap: var(--go-space-xs); }
.meta-pill {
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-sm);
    background: var(--go-surface-muted);
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
}

/* Hamburger toggle — hidden on desktop */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    background: var(--go-surface);
    color: var(--go-text);
    cursor: pointer;
    font-size: var(--go-font-xl);
    flex-shrink: 0;
    transition: all var(--go-transition);
}

.sidebar-toggle:hover {
    background: var(--go-surface-muted);
    border-color: var(--go-hover-border);
}

/* Overlay backdrop — hidden by default, sits just below modal layer */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--go-overlay);
    z-index: calc(var(--go-z-modal) - 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================================
   Tablet breakpoint — sidebar becomes off-canvas drawer
   ============================================================================= */
@media (max-width: 1100px) {
    .sidebar-toggle {
        display: flex;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        z-index: var(--go-z-modal);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--go-shadow-xl);
    }

    .sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .content {
        padding: var(--go-space-lg) var(--go-space-xl);
    }
}

/* =============================================================================
   Mobile breakpoint — tighter spacing, stacking layouts
   ============================================================================= */
@media (max-width: 768px) {
    .content {
        padding: var(--go-space-md);
    }

    /* Topbar: stack breadcrumbs and actions */
    .topbar {
        flex-wrap: wrap;
    }

    /* Page header: stack title and actions */
    .page__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page__title {
        font-size: var(--go-font-xl);
    }

    /* Profile header: stack avatar and info */
    .profile-header {
        flex-direction: column;
        gap: var(--go-space-md);
    }

    /* Profile actions: stack nav and tools */
    .profile-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Action toolbar: wrap and left-align */
    .action-toolbar {
        justify-content: flex-start;
    }

    /* Surface: reduce padding */
    .surface {
        padding: var(--go-space-md);
        border-radius: var(--go-radius);
    }

    /* Tabs: horizontal scroll instead of wrap */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Stat grid: single column */
    .grid.cols-2 {
        grid-template-columns: 1fr;
    }

    /* Filter grid: single column */
    .filters {
        grid-template-columns: 1fr;
    }

    /* Sidebar link touch targets */
    .sidebar__link {
        padding: var(--go-space-md);
        min-height: 44px;
    }

    /* Pagination: tighter */
    .pagination-controls {
        flex-wrap: wrap;
        gap: var(--go-space-xs);
    }
}

/* =============================================================================
   Chip - inline tag component
   ============================================================================= */
.chip {
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-sm);
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-full);
    font-size: var(--go-font-base);
    color: var(--go-text);
    transition: all var(--go-transition);
}

.chip:hover {
    background: var(--go-surface-alt);
    border-color: var(--go-iris);
    transform: translateY(-1px);
}

.chip i {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

/* =============================================================================
   Section component
   ============================================================================= */
.section__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--go-space-sm);
    font-size: var(--go-font-lg);
    font-weight: 600;
    margin-bottom: var(--go-space-md);
    color: var(--go-text);
}

.section__title-left {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.section__title i {
    color: var(--go-text-muted);
}

.section__count {
    font-weight: 400;
    color: var(--go-text-muted);
}

.section__title-actions {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
}

.section__copy-btn,
.section__refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--go-radius-xs);
    background: transparent;
    color: var(--go-text-muted);
    cursor: pointer;
    transition: all var(--go-transition-slow);
    flex-shrink: 0;
    opacity: 0;
    font-size: var(--go-font-md);
}

.section:hover .section__copy-btn,
.section:hover .section__refresh-btn,
.card-panel:hover .section__copy-btn,
.section:focus-within .section__copy-btn,
.section:focus-within .section__refresh-btn,
.card-panel:focus-within .section__copy-btn {
    opacity: 0.6;
}

.section__copy-btn:hover,
.section__refresh-btn:hover {
    opacity: 1;
    background: var(--go-accent-muted);
    color: var(--go-accent);
    transform: scale(1.1);
}

.section__copy-btn:active,
.section__refresh-btn:active {
    transform: scale(0.95);
}

.section__copy-btn.copied {
    opacity: 1;
    background: var(--go-success-surface);
    color: var(--go-success);
    transform: scale(1);
}

.section__refresh-btn.htmx-request {
    opacity: 1;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.section__updated {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    opacity: 0;
    transition: opacity var(--go-transition-slow);
    margin-left: var(--go-space-sm);
}

.section:hover .section__updated {
    opacity: 0.7;
}

/* =============================================================================
   Status badges
   ============================================================================= */
.status-badges {
    gap: var(--go-space-xs);
}

.badge--muted {
    background: var(--go-muted-surface);
    border-color: var(--go-muted-ring);
    color: var(--go-text-muted);
}

.badge--success {
    background: var(--go-success-surface);
    border-color: var(--go-success-ring);
    color: var(--go-success);
}

.badge--danger {
    background: var(--go-danger-surface);
    border-color: var(--go-danger-ring);
    color: var(--go-danger);
}

.badge--warning {
    background: var(--go-warning-surface);
    border-color: var(--go-warning-ring);
    color: var(--go-warning);
}

.badge--info {
    background: var(--go-iris-muted);
    border-color: var(--go-iris-soft);
    color: var(--go-iris);
}

/* =============================================================================
   Identity list
   ============================================================================= */
.identity-list {
    display: grid;
    gap: var(--go-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.identity-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--go-space-md);
    padding: var(--go-space-sm) var(--go-space-md);
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    transition: transform var(--go-transition), box-shadow var(--go-transition), border-color var(--go-transition);
}

.identity-item:hover {
    border-color: var(--go-border);
    box-shadow: var(--go-shadow-sm);
    transform: translateY(-1px);
}

.identity-item__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--go-radius-xs);
    background: var(--go-surface);
    border: 1px solid var(--go-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--go-text-muted);
}

.identity-item__icon i {
    font-size: var(--go-font-md);
}

.identity-item__content {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
    min-width: 0;
}

.identity-item__provider {
    font-size: var(--go-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--go-text-muted);
}

.identity-item__id {
    font-size: var(--go-font-md);
    color: var(--go-text);
    overflow-wrap: anywhere;
}

.identity-item__id a {
    color: var(--go-text);
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
}

.identity-item__id a:hover {
    color: var(--go-accent);
}

.identity-item__id i {
    color: var(--go-text-muted);
}

.identity-empty {
    padding: var(--go-space-md);
    border: 1px dashed var(--go-border);
    border-radius: var(--go-radius-sm);
    background: var(--go-surface-alt);
}

/* =============================================================================
   Token card
   ============================================================================= */
.token-card__email {
    font-family: var(--go-font-mono);
    font-size: var(--go-font-md);
}

.token-card__provider {
    font-size: var(--go-font-base);
    color: var(--go-text-muted);
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.token-card__detail {
    margin-top: var(--go-space-xs);
}

.token-card__scope-table {
    min-width: auto;
    margin-top: var(--go-space-xs);
}

.token-card__scope-cell {
    text-align: center;
}

.token-card__scope-cell--read,
.token-card__scope-cell--write {
    color: var(--go-text-muted);
}

.token-card__scope-cell--granted {
    color: var(--go-success);
}

.token-card__scope-conflict {
    color: var(--go-danger);
    font-weight: 600;
    margin-top: var(--go-space-xs);
}

.token-card__details {
    margin-top: var(--go-space-xs);
}

.token-card__details summary {
    cursor: pointer;
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
}

.token-card__details-body {
    margin-top: var(--go-space-xs);
    font-size: var(--go-font-sm);
}

/* =============================================================================
   Role card (work history)
   ============================================================================= */
.role-card__company {
    color: var(--go-text);
    margin-top: var(--go-space-xs);
}

.role-card__dates {
    margin-top: var(--go-space-xs);
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

/* =============================================================================
   Sync stat grid
   ============================================================================= */
.sync-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--go-space-md);
}

.sync-stat-card__label {
    margin-bottom: var(--go-space-xs);
}

.sync-stat-card__value {
    font-size: var(--go-font-xl);
    font-weight: 700;
    color: var(--go-text);
}

.sync-stat-card__meta {
    margin-top: var(--go-space-xs);
}

/* =============================================================================
   Job card (sync jobs)
   ============================================================================= */
.job-card__process {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.job-card__process i {
    color: var(--go-text-muted);
}

.job-card__status {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
}

.job-card__message {
    margin-top: var(--go-space-xs);
    color: var(--go-text);
}

/* =============================================================================
   Login item
   ============================================================================= */
.login-item {
    padding: var(--go-space-sm) 0;
    border-bottom: 1px solid var(--go-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-item:last-child {
    border-bottom: none;
}

/* =============================================================================
   User card
   ============================================================================= */
.user-card {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.user-card__email {
    font-size: var(--go-font-base);
    color: var(--go-text-muted);
}

.user-card__auth0 {
    font-size: var(--go-font-xs);
}

/* =============================================================================
   Profile header
   ============================================================================= */
.profile-header {
    display: flex;
    gap: var(--go-space-xl);
    align-items: flex-start;
    margin-bottom: var(--go-space-xl);
}

.profile-avatar {
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: var(--go-font-2xl);
    font-weight: 700;
    margin-bottom: var(--go-space-xs);
    color: var(--go-text);
}

.profile-email {
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-sm);
}

/* =============================================================================
   Sync counts
   ============================================================================= */
.sync-counts {
    gap: var(--go-space-sm);
}

/* =============================================================================
   Archive badges
   ============================================================================= */
.archive-badges {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

/* =============================================================================
   Pagination controls
   ============================================================================= */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

/* =============================================================================
   Two-column grid layout
   ============================================================================= */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--go-space-lg);
}

@media (max-width: 992px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Text utilities
   ============================================================================= */
.text-mono {
    font-family: var(--go-font-mono);
}

.text-token-success { color: var(--go-success); }
.text-token-warning { color: var(--go-warning); }
.text-token-danger { color: var(--go-danger); }
.text-token-muted { color: var(--go-text-muted); }
.text-token-accent { color: var(--go-accent); }

.pre-wrap {
    white-space: pre-wrap;
}

.select-none {
    user-select: none;
}

.is-hidden {
    display: none !important;
}

.is-invisible {
    visibility: hidden !important;
}

.inline-summary {
    cursor: pointer;
    user-select: none;
}

.jump-page-input {
    width: calc(var(--go-space-3xl) + var(--go-space-sm));
}

.text-micro {
    font-size: var(--go-font-sm);
}

.text-nano {
    font-size: var(--go-font-xs);
}

.text-tiny {
    font-size: 0.6rem;
}

.chart-panel {
    min-height: calc(var(--go-space-3xl) * 5);
}

.search-dropdown {
    position: relative;
}

.search-dropdown__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(var(--go-space-3xl) * 9.375);
    overflow-y: auto;
    z-index: var(--go-z-dropdown);
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow-md);
    margin-top: var(--go-space-xs);
}

.input--narrow {
    max-width: calc(var(--go-space-3xl) * 3.75);
}

.scroll-region {
    overflow-y: auto;
}

.scroll-region--sm {
    max-height: calc(var(--go-space-3xl) * 6.25);
}

.scroll-region--md {
    max-height: calc(var(--go-space-3xl) * 9.375);
}

.truncate--6 { max-width: 6rem; }
.truncate--xs { max-width: 10rem; }
.truncate--sm { max-width: 12rem; }
.truncate--14 { max-width: 14rem; }
.truncate--md { max-width: 15rem; }
.truncate--16 { max-width: 16rem; }
.truncate--150 { max-width: 150px; }
.truncate--180 { max-width: 180px; }
.truncate--200 { max-width: 200px; }
.truncate--lg { max-width: 20rem; }
.truncate--xl { max-width: 100%; }

.min-w-seq {
    min-width: calc(var(--go-space-lg) + var(--go-space-xs));
}

.ms-icon-offset {
    margin-left: calc(var(--go-space-lg) + var(--go-space-sm));
}

/* =============================================================================
   Filters grid
   ============================================================================= */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--go-space-lg);
    align-items: flex-end;
}

/* Form control sizes */
.form-control-lg,
.form-select-lg {
    padding: var(--go-space-md) var(--go-space-lg);
    font-size: var(--go-font-md);
}

.form-control-sm,
.form-select-sm {
    padding: var(--go-space-xs) var(--go-space-sm);
    font-size: var(--go-font-sm);
}

/* =============================================================================
   Message card - for LinkedIn/Twitter messages
   ============================================================================= */
.message-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--go-space-xs);
}

.message-card__participants {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--go-space-xs);
}

.message-card__subject {
    margin-bottom: var(--go-space-xs);
}

.message-card__content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* =============================================================================
   Connection card - for connection strength info
   ============================================================================= */
.connection-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--go-transition);
}

.connection-card:hover {
    border-color: var(--go-accent);
    text-decoration: none;
    color: inherit;
}

.connection-card__stats {
    align-items: center;
    gap: var(--go-space-sm);
}

/* =============================================================================
   Works for card - for current employment
   ============================================================================= */
.works-for-card__role {
    color: var(--go-text);
}

.works-for-card__org {
    color: var(--go-text);
    margin-top: var(--go-space-xs);
}

.works-for-card__meta {
    margin-top: var(--go-space-xs);
}

/* =============================================================================
   Modal
   ============================================================================= */
.modal {
    position: fixed;
    inset: 0;
    background: var(--go-overlay);
    z-index: var(--go-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--go-space-lg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal.show {
    display: flex;
}

.modal__dialog {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-lg);
    box-shadow: var(--go-shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modal-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal__header {
    padding: var(--go-space-lg) var(--go-space-xl);
    border-bottom: 1px solid var(--go-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal__title {
    margin: 0;
    font-size: var(--go-font-lg);
    font-weight: 600;
}

.modal__close {
    background: none;
    border: none;
    color: var(--go-text-muted);
    cursor: pointer;
    font-size: var(--go-font-xl);
    padding: var(--go-space-xs);
    line-height: 1;
    border-radius: var(--go-radius-xs);
    transition: all var(--go-transition);
}

.modal__close:hover {
    color: var(--go-text);
    background: var(--go-surface-muted);
}

.modal__body {
    padding: var(--go-space-xl);
    overflow-y: auto;
    flex: 1;
}

.modal__footer {
    padding: var(--go-space-lg) var(--go-space-xl);
    border-top: 1px solid var(--go-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--go-space-sm);
    flex-shrink: 0;
}

/* =============================================================================
   Skeleton loader animation
   ============================================================================= */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.skeleton-stat {
    flex: 1;
    min-width: 0;
}

.skeleton-stat--fixed {
    width: calc(var(--go-space-3xl) * 2.5);
}

.skeleton-line {
    height: var(--go-space-lg);
    background: linear-gradient(
        90deg,
        var(--go-border) 0%,
        var(--go-surface-muted) 20%,
        var(--go-border) 40%,
        var(--go-border) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--go-radius-xs);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line--short { width: 60%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--long { width: 80%; }
.skeleton-line--xl { width: 90%; }
.skeleton-line--lg-height { height: var(--go-space-xl); }
.skeleton-line--sm-height {
    height: var(--go-space-md);
    margin-top: var(--go-space-xs);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================================
   Utility animations
   ============================================================================= */
.spin {
    animation: spin 1s linear infinite;
}

details summary i {
    transition: transform 0.2s;
}

details[open] summary i {
    transform: rotate(90deg);
}

/* =============================================================================
   Stats card - for dashboard/stats pages
   ============================================================================= */
.stats-card {
    background: linear-gradient(135deg, var(--go-surface) 0%, var(--go-surface-alt) 100%);
    border-radius: var(--go-radius);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
    padding: var(--go-space-xl);
    margin-bottom: var(--go-space-lg);
    transition: transform var(--go-transition), box-shadow var(--go-transition);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--go-iris-muted) 0%, transparent 70%);
    pointer-events: none;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--go-shadow-md);
}

.stats-header {
    text-align: center;
    margin-bottom: var(--go-space-2xl);
}

.stats-value {
    font-size: var(--go-font-4xl);
    font-weight: 700;
    margin: var(--go-space-lg) 0;
    line-height: 1;
    background: var(--go-gradient-bold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-label,
.stat-label {
    font-size: var(--go-font-lg);
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--go-space-sm);
}

.stats-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--go-space-sm);
    color: var(--go-success);
    font-weight: 500;
}

.stat-value {
    font-size: var(--go-font-3xl);
    font-weight: 600;
    color: var(--go-accent);
}

.stat-percentage {
    font-size: var(--go-font-base);
    color: var(--go-success);
}

/* =============================================================================
   Filter card/section - for pages with filters
   ============================================================================= */
.filter-card {
    background: var(--go-surface);
    border-radius: var(--go-radius);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
    transition: box-shadow var(--go-transition);
}

.feed-filters {
    position: sticky;
    top: var(--go-space-lg);
    z-index: var(--go-z-sticky);
}

.filter-section {
    border-bottom: 1px solid var(--go-border);
    padding: var(--go-space-lg);
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-label {
    font-size: var(--go-font-md);
    font-weight: 600;
    color: var(--go-text);
    margin-bottom: var(--go-space-sm);
}

.custom-checkbox {
    margin: var(--go-space-sm) 0;
    color: var(--go-text);
}

.custom-checkbox .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
}

.custom-checkbox .form-check-label {
    font-size: var(--go-font-md);
    padding-left: var(--go-space-sm);
}

/* Toggle/Switch styling */
.form-switch .form-check-input {
    width: 2rem;
    height: 1.1rem;
    border-radius: var(--go-radius-full);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2364748b'/%3e%3c/svg%3e");
    background-position: left center;
    background-size: contain;
}

.form-switch .form-check-input:checked {
    background-color: var(--go-iris);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    background-position: right center;
}

.event-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--go-radius-xs);
    margin-right: var(--go-space-sm);
}

/* =============================================================================
   Loading overlay
   ============================================================================= */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--go-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--go-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--go-transition-slow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--go-border);
    border-top-color: var(--go-iris);
    border-radius: var(--go-radius-full);
    animation: spin 0.8s linear infinite;
}

/* =============================================================================
   Tooltip for D3 charts
   ============================================================================= */
.tooltip-d3 {
    position: fixed;
    background: var(--go-overlay-heavy);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xs);
    box-shadow: var(--go-shadow);
    padding: var(--go-space-md);
    pointer-events: none;
    max-width: 300px;
    z-index: var(--go-z-tooltip);
    font-size: var(--go-font-base);
    line-height: 1.4;
    color: var(--go-text-inverse);
    white-space: pre-line;
    word-wrap: break-word;
}

.tooltip-header {
    font-weight: 600;
    color: var(--go-accent);
    margin-bottom: var(--go-space-sm);
    font-size: var(--go-font-lg);
}

.tooltip-content {
    font-size: var(--go-font-base);
    color: var(--go-text-muted);
}

/* Tooltip with arrow */
.tooltip-arrow {
    position: relative;
}

.tooltip-arrow::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--go-surface);
}

.tooltip-arrow::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: var(--go-border);
    margin-bottom: 1px;
}

/* Arrow positions */
.tooltip-arrow--top::after,
.tooltip-arrow--top::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
}

.tooltip-arrow--top::after {
    border-top-color: var(--go-surface);
}

.tooltip-arrow--top::before {
    border-top-color: var(--go-border);
    margin-bottom: 0;
    margin-top: 1px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--go-space-sm);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--go-radius-full);
    margin-right: var(--go-space-sm);
}

.legend-text {
    font-size: var(--go-font-base);
    color: var(--go-text-muted);
}

/* =============================================================================
   Query/Search card
   ============================================================================= */
.search-container {
    background: var(--go-surface);
    border-radius: var(--go-radius);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
}

.query-card {
    height: 100%;
    background: var(--go-surface);
    border-radius: var(--go-radius);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
    transition: transform var(--go-transition);
}

.query-card:hover {
    transform: translateY(-2px);
}

.query-content {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-xs);
    font-family: var(--go-font-mono);
    font-size: var(--go-font-base);
    max-height: 200px;
    overflow-y: auto;
}

/* =============================================================================
   Provider/Process chips (for sync jobs page)
   ============================================================================= */
.provider-chip,
.process-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
    padding: var(--go-space-xs) var(--go-space-md);
    border-radius: var(--go-radius-full);
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
    font-weight: 600;
    color: var(--go-text);
    font-size: var(--go-font-sm);
}

.provider-chip i,
.process-chip i {
    color: var(--go-text-muted);
}

/* =============================================================================
   Job summary (for sync jobs table)
   ============================================================================= */
.job-summary {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

/* Pagination controls are defined in the main pagination-controls section */

/* =============================================================================
   Admin login form
   ============================================================================= */
.admin-login-card {
    max-width: 520px;
    width: 100%;
    background: var(--go-surface);
    border-color: var(--go-border);
    color: var(--go-text);
}

.admin-login-label {
    color: var(--go-text);
    font-weight: 600;
}

.admin-login-input {
    background: var(--go-surface);
    color: var(--go-text);
    border: 1px solid var(--go-border);
}

.admin-login-input:focus {
    border-color: var(--go-accent);
    box-shadow: 0 0 0 0.2rem var(--go-accent-muted);
}

/* =============================================================================
   Info footer (for public pages)
   ============================================================================= */
.info-footer {
    text-align: center;
    background: var(--go-surface);
    border-radius: var(--go-radius);
    padding: var(--go-space-xl);
    border: 1px solid var(--go-border);
    box-shadow: var(--go-shadow);
}

.info-text {
    font-size: var(--go-font-lg);
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-lg);
}

/* =============================================================================
   Utility classes
   ============================================================================= */

/* Text utilities */
.text-accent { color: var(--go-accent); }
.text-iris { color: var(--go-iris); }
.text-success { color: var(--go-success); }
.text-danger { color: var(--go-danger); }
.text-warning { color: var(--go-warning); }
.text-sm { font-size: var(--go-font-sm); }
.text-xs { font-size: var(--go-font-xs); }
.text-lg { font-size: var(--go-font-lg); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Background utilities */
.bg-surface-muted { background: var(--go-surface-muted); }
.bg-surface-subtle { background: color-mix(in srgb, var(--go-surface-muted) 65%, transparent); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--go-space-sm); }
.mb-sm { margin-bottom: var(--go-space-sm); }
.mt-md { margin-top: var(--go-space-md); }
.mb-md { margin-bottom: var(--go-space-md); }
.mt-lg { margin-top: var(--go-space-lg); }
.mb-lg { margin-bottom: var(--go-space-lg); }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inline-form { display: inline; }
.flex-1 { flex: 1 1 0; }
.flex-2 { flex: 2 1 0; }
.min-w-0 { min-width: 0; }
.min-w-xs { min-width: 10rem; }
.min-w-sm { min-width: 12rem; }
.min-w-md { min-width: 14rem; }
.min-w-150 { min-width: 150px; }
.min-w-lg { min-width: 200px; }
.min-w-login { min-width: calc(var(--go-space-3xl) * 8.75); }
.min-h-half { min-height: 50vh; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.w-modal-md { width: 28rem; max-width: 95vw; }
.surface--compact { padding: var(--go-space-md); }
.surface--toolbar { padding: var(--go-space-md) var(--go-space-lg); }
.surface--warning { border-left: var(--go-space-xs) solid var(--go-warning); }
.no-margin { margin: 0; }
.list-reset { margin: 0; padding-left: var(--go-space-xl); }
.inline-stack { display: flex; flex-direction: column; gap: var(--go-space-sm); }
.wrap-gap-xs { display: flex; flex-wrap: wrap; gap: var(--go-space-xs); }
.text-block { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.break-anywhere { word-break: break-all; overflow-wrap: anywhere; }
.pe-none { pointer-events: none; }
.opacity-muted { opacity: 0.6; }
.opacity-faint { opacity: 0.4; }
.opacity-subtle { opacity: 0.3; }
.icon-dot { font-size: var(--go-font-xs); }
.chart-dot--active { color: var(--go-chart-node-active); }
.chart-dot--inactive { color: var(--go-chart-node-inactive); }
.icon-xl { font-size: var(--go-font-4xl); }
.icon-lg { font-size: var(--go-font-2xl); }
.icon-md { font-size: var(--go-font-xl); }
.legend-gap { margin-left: var(--go-space-sm); }
.legend-outline-dot {
    border: 1px dashed var(--go-danger);
    border-radius: var(--go-radius-full);
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -0.1rem;
}
.identity-edge-row {
    border-left: 3px solid var(--identity-edge-color, var(--go-warning));
}
.identity-edge-row--success { --identity-edge-color: var(--go-success); }
.identity-edge-row--warning { --identity-edge-color: var(--go-warning); }
.identity-edge-row--danger { --identity-edge-color: var(--go-danger); }
.modal-backdrop-panel {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--go-overlay);
    z-index: var(--go-z-modal);
    align-items: center;
    justify-content: center;
}

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Disabled state utilities */
.disabled,
[disabled],
[aria-disabled="true"] {
    opacity: var(--go-disabled-opacity);
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Allow pointer events for tooltips on disabled elements */
.disabled-wrapper {
    position: relative;
    cursor: not-allowed;
}

.disabled-wrapper > * {
    pointer-events: none;
}

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   Alerts / Notifications
   ============================================================================= */
.alert {
    padding: var(--go-space-md) var(--go-space-lg);
    border-radius: var(--go-radius);
    border: 1px solid;
    margin-bottom: var(--go-space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--go-space-sm);
}

.alert--success {
    background: var(--go-success-surface);
    border-color: var(--go-success-ring);
    color: var(--go-success);
}

.alert--danger {
    background: var(--go-danger-surface);
    border-color: var(--go-danger-ring);
    color: var(--go-danger);
}

.alert--warning {
    background: var(--go-warning-surface);
    border-color: var(--go-warning-ring);
    color: var(--go-warning);
}

.alert--info {
    background: var(--go-iris-muted);
    border-color: var(--go-iris-soft);
    color: var(--go-iris);
}

/* =============================================================================
   Smooth transitions for HTMX swaps
   ============================================================================= */
.htmx-swapping {
    opacity: 0;
    transition: opacity var(--go-transition);
}

.htmx-settling {
    opacity: 1;
    transition: opacity var(--go-transition-slow);
}

.htmx-added {
    opacity: 0;
    transform: translateY(4px);
}

.htmx-settling .htmx-added {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--go-transition-slow), transform var(--go-transition-slow);
}

/* =============================================================================
   Progress bar
   ============================================================================= */
.progress {
    height: 8px;
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-full);
    overflow: hidden;
}

.progress--sm {
    height: calc(var(--go-space-xs) + 2px);
}

.progress--xs {
    height: var(--go-space-sm);
}

.progress-bar {
    width: var(--progress-width, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--go-iris-soft), var(--go-accent-soft), var(--go-iris-soft));
    background-size: 200% 100%;
    border-radius: var(--go-radius-full);
    transition: width var(--go-transition-slow);
    animation: progress-shimmer 2s linear infinite;
}

@keyframes progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.progress-bar--success {
    background: var(--go-success);
}

.progress-bar--danger {
    background: var(--go-danger);
}

.progress-bar--warning {
    background: var(--go-warning);
}

.metric-bar {
    display: flex;
    height: var(--metric-bar-height, 1.75rem);
    border-radius: var(--go-radius-xs);
    overflow: hidden;
    background: var(--go-surface-muted);
}

.metric-bar--sm {
    --metric-bar-height: calc(var(--go-space-lg) + var(--go-space-sm));
}

.metric-bar--xs {
    --metric-bar-height: calc(var(--go-space-md) + var(--go-space-sm));
}

.metric-bar__segment {
    width: var(--segment-width, auto);
    min-width: var(--segment-min-width, 0);
    flex: var(--segment-flex, 0 0 auto);
    background: var(--segment-color, var(--go-accent));
    color: var(--go-text-inverse);
}

.metric-bar__segment--success { --segment-color: var(--go-success); }
.metric-bar__segment--info { --segment-color: var(--go-iris); }
.metric-bar__segment--muted { --segment-color: var(--go-text-muted); }
.metric-bar__segment--warning { --segment-color: var(--go-warning); }
.metric-bar__segment--danger { --segment-color: var(--go-danger); }

.evidence-chart {
    height: calc(var(--go-space-3xl) + var(--go-space-lg));
    width: 100%;
}

.identity-graph-wrap {
    position: relative;
}

.identity-graph {
    height: calc(var(--go-space-3xl) * 12.5);
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.org-image-sm {
    width: var(--go-space-xl);
    height: var(--go-space-xl);
    border-radius: var(--go-radius-xs);
    object-fit: contain;
}

.org-mark {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    background: var(--go-surface);
    color: var(--go-text-muted);
}

.org-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.org-mark img.error {
    display: none;
}

.org-mark__fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--go-surface-alt);
    font-size: var(--go-font-lg);
}

.org-mark__fallback:only-child,
.org-mark img.error + .org-mark__fallback {
    display: flex;
}

.team-header-title {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.team-header-title__mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

/* =============================================================================
   Dropdown menu
   ============================================================================= */
.dropdown-menu {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow-lg);
    padding: var(--go-space-xs);
    min-width: 180px;
    animation: dropdown-in 0.12s ease-out;
    transform-origin: top right;
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    padding: var(--go-space-sm) var(--go-space-md);
    border-radius: var(--go-radius-xs);
    color: var(--go-text);
    font-size: var(--go-font-base);
    text-decoration: none;
    transition: all var(--go-transition);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, var(--go-iris-muted), transparent);
    color: var(--go-text);
}

.dropdown-item:active {
    background: var(--go-iris-muted);
}

.dropdown-item:hover i {
    color: var(--go-iris);
}

.dropdown-item i {
    color: var(--go-text-muted);
    width: 1rem;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background: var(--go-border);
    margin: var(--go-space-xs) 0;
}

/* =============================================================================
   Avatar
   ============================================================================= */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--go-radius-full);
    background: var(--go-surface);
    border: 2px solid var(--go-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--go-text-muted);
    overflow: hidden;
    flex-shrink: 0;
    transition:
        border-color var(--go-transition),
        box-shadow var(--go-transition),
        transform var(--go-transition);
    position: relative;
}

.avatar:hover {
    border-color: var(--go-iris-soft);
    box-shadow: 0 0 0 3px var(--go-iris-muted);
    transform: scale(1.02);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--go-radius-full);
}

.avatar img.error {
    display: none;
}

.avatar__fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--go-gradient-soft);
    color: var(--go-text);
    font-weight: 600;
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Show fallback when no image or image error */
.avatar__fallback:only-child,
.avatar img.error + .avatar__fallback {
    display: flex;
}

.avatar--sm {
    width: 32px;
    height: 32px;
    font-size: var(--go-font-sm);
}

.avatar--lg {
    width: 56px;
    height: 56px;
    font-size: var(--go-font-xl);
}

.avatar--xl {
    width: 80px;
    height: 80px;
    font-size: var(--go-font-2xl);
}

.avatar-label {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.avatar-label__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avatar group */
.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    margin-left: -8px;
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

/* =============================================================================
   Connection paths
   ============================================================================= */
.relationship-strength {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.375rem;
    min-height: 23px;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--go-radius-full);
    font-size: var(--go-font-sm);
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.relationship-strength__icon {
    flex: 0 0 auto;
}

.relationship-strength__bar {
    fill: currentColor;
    opacity: 0.16;
}

.relationship-strength__bar--filled {
    opacity: 0.7;
}

.relationship-strength--strong {
    color: var(--go-success);
    background: var(--go-success-surface);
    border-color: var(--go-success-ring);
}

.relationship-strength--intro,
.relationship-strength--medium {
    color: var(--go-warning);
    background: var(--go-warning-surface);
    border-color: var(--go-warning-ring);
}

.relationship-strength--weak {
    color: var(--go-text-muted);
    background: var(--go-surface-alt);
    border-color: var(--go-border);
}

.relationship-strength--none,
.relationship-strength--unknown {
    color: var(--go-text-muted);
    background: var(--go-surface);
    border-color: var(--go-border);
}

.relationship-strength--unknown {
    border-style: dashed;
}

.connection-person {
    color: var(--go-text);
    width: 11rem;
    min-height: 1.75rem;
    padding: 0 var(--go-space-xs) 0 0;
    border: 1px solid color-mix(in srgb, var(--go-text) 5%, transparent);
    border-radius: var(--go-radius-full);
    background: var(--go-surface);
    overflow: hidden;
}

.connection-person:hover {
    color: var(--go-text);
    border-color: color-mix(in srgb, var(--go-text) 10%, transparent);
}

.connection-person .avatar-label__text {
    font-size: var(--go-font-sm);
    font-weight: 500;
}

.connection-person .avatar--sm {
    width: 24px;
    height: 24px;
    border-width: 1px;
}

.connection-path-graph {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    min-width: 0;
    max-width: 100%;
}

.connection-path-node {
    display: grid;
    flex: 0 1 11rem;
    min-width: 0;
}

.connection-path-node--contact {
    flex-basis: 11rem;
}

.connection-path-edge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
    min-width: 4rem;
}

.connection-path-edge__line {
    flex: 1 1 0;
    min-width: 0.75rem;
    height: 1px;
    background: color-mix(in srgb, var(--go-text-muted) 55%, transparent);
}

@media (max-width: 900px) {
    .connection-path-graph {
        align-items: stretch;
        flex-direction: column;
    }

    .connection-path-node,
    .connection-path-node--contact {
        flex-basis: auto;
    }

    .connection-path-edge {
        align-self: flex-start;
        flex-direction: column;
        min-width: 0;
        min-height: 3rem;
        margin-left: 0.75rem;
    }

    .connection-path-edge__line {
        width: 1px;
        min-width: 0;
        min-height: 0.75rem;
    }
}

/* =============================================================================
   Company path detail
   ============================================================================= */
.company-path-detail {
    max-width: 86rem;
}

.company-path-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--go-space-md);
}

.company-path-detail__identity {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    min-width: 0;
}

.company-path-detail__title {
    margin: 0;
    color: var(--go-text);
    font-size: var(--go-font-xl);
    font-weight: 750;
}

.company-path-detail__actions,
.company-path-detail__metrics,
.company-path-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-sm);
}

.company-path-detail__metrics {
    padding-top: var(--go-space-md);
    margin-top: var(--go-space-md);
    border-top: 1px solid var(--go-border);
}

.company-path-detail__metric {
    min-width: 8rem;
}

.company-path-detail__metric-value {
    color: var(--go-text);
    font-size: var(--go-font-lg);
    font-weight: 700;
}

.company-path-detail__metric-label {
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
}

/* =============================================================================
   Tabs
   ============================================================================= */
.tabs {
    display: flex;
    gap: var(--go-space-xs);
    border-bottom: 1px solid var(--go-border);
    margin-bottom: var(--go-space-lg);
}

.tab {
    padding: var(--go-space-sm) var(--go-space-md);
    font-weight: 600;
    color: var(--go-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--go-transition);
    position: relative;
}

.tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--go-iris-soft), var(--go-accent-soft));
    transition: all var(--go-transition-spring);
    transform: translateX(-50%);
}

.tab:hover {
    color: var(--go-text);
}

.tab:hover::after {
    width: 60%;
}

.tab.active {
    color: var(--go-accent);
    border-bottom-color: transparent;
}

.tab.active::after {
    width: 100%;
}

.tab i {
    margin-right: var(--go-space-xs);
    font-size: 0.85em;
}

/* =============================================================================
   Breadcrumb separator
   ============================================================================= */
.breadcrumbs__separator {
    color: var(--go-text-muted);
    margin: 0 var(--go-space-xs);
}

/* =============================================================================
   Card with hover glow
   ============================================================================= */
.surface--interactive {
    transition: all var(--go-transition);
    cursor: pointer;
}

.surface--interactive:hover {
    border-color: var(--go-iris-soft);
    box-shadow: var(--go-shadow), var(--go-glow);
}

/* =============================================================================
   Link variants
   ============================================================================= */
a.link--subtle {
    color: var(--go-text);
}

a.link--subtle:hover {
    color: var(--go-accent);
}

a.link--muted {
    color: var(--go-text-muted);
}

a.link--muted:hover {
    color: var(--go-text);
}

/* Modal enhancements are defined in the main modal section */

/* =============================================================================
   Input with icon prefix styling
   ============================================================================= */
.input-group {
    position: relative;
}

.input-group .input-icon {
    position: absolute;
    left: var(--go-space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--go-text-muted);
    pointer-events: none;
    transition: color var(--go-transition);
}

.input-group .form-control {
    padding-left: calc(var(--go-space-md) * 2 + 1rem);
}

.input-group:focus-within .input-icon {
    color: var(--go-iris);
}

/* =============================================================================
   Surface glow effect for important content
   ============================================================================= */
.surface--glow {
    position: relative;
}

.surface--glow::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--go-gradient-soft);
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    transition: opacity var(--go-transition-slow);
}

.surface--glow:hover::before {
    opacity: 0.3;
}

/* =============================================================================
   Notification toast
   ============================================================================= */
.toast {
    animation: toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid;
    border-radius: var(--go-radius);
    backdrop-filter: blur(8px);
}

.toast--error {
    background: var(--go-danger-light);
    border-color: var(--go-danger);
    color: var(--go-danger-dark);
}

.toast--success {
    background: var(--go-success-light);
    border-color: var(--go-success);
    color: var(--go-success-dark);
}

.toast--warning {
    background: var(--go-warning-light);
    border-color: var(--go-warning);
    color: var(--go-warning-dark);
}

.toast--info {
    background: var(--go-iris-muted);
    border-color: var(--go-iris-soft);
    color: var(--go-iris);
}

.toast .btn-close {
    filter: none;
    opacity: 0.6;
}

.toast .btn-close:hover {
    opacity: 1;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =============================================================================
   Smooth scroll behavior
   ============================================================================= */
html {
    scroll-behavior: smooth;
}

/* =============================================================================
   Enhanced scrollbar for sidebar
   ============================================================================= */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--go-iris-soft);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--go-iris);
}

/* =============================================================================
   Gradient text utility
   ============================================================================= */
.text-gradient {
    background: var(--go-gradient-bold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================================
   Card panel styling (for profile sections)
   ============================================================================= */
.card-panel {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-lg);
    padding: var(--go-space-lg);
    margin-bottom: var(--go-space-md);
    transition: all var(--go-transition);
}

.card-panel:hover {
    box-shadow: var(--go-shadow-md);
}

/* =============================================================================
   Section divider with gradient
   ============================================================================= */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--go-border), transparent);
    margin: var(--go-space-lg) 0;
}

/* =============================================================================
   Subtle pulse animation for live indicators
   ============================================================================= */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--go-radius-full);
    background: var(--go-success);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--go-success) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--go-success) 0%, transparent);
    }
}

/* =============================================================================
   Hover lift utility
   ============================================================================= */
.hover-lift {
    transition: transform var(--go-transition), box-shadow var(--go-transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--go-shadow-lg);
}

/* =============================================================================
   Focus ring for interactive elements
   ============================================================================= */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--go-ring);
}

/* =============================================================================
   Animated border gradient
   ============================================================================= */
.border-gradient {
    position: relative;
    background: var(--go-surface);
    border-radius: var(--go-radius);
}

.border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--go-gradient-soft);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* =============================================================================
   Keyboard shortcut styling
   ============================================================================= */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: var(--go-space-xs) var(--go-space-sm);
    font-family: var(--go-font-mono);
    font-size: var(--go-font-xs);
    font-weight: 600;
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xs);
    box-shadow: 0 2px 0 var(--go-border);
    color: var(--go-text-muted);
}

/* =============================================================================
   Code/pre styling
   ============================================================================= */
code {
    font-family: var(--go-font-mono);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-xs);
    color: var(--go-accent-dark);
}

pre {
    font-family: var(--go-font-mono);
    font-size: var(--go-font-sm);
    padding: var(--go-space-lg);
    background: var(--go-surface-muted);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    overflow-x: auto;
    line-height: 1.5;
}

pre code {
    padding: 0;
    background: transparent;
}

/* =============================================================================
   Textarea styling
   ============================================================================= */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* =============================================================================
   Link with animated underline
   ============================================================================= */
.link--animated {
    position: relative;
    color: var(--go-text);
    text-decoration: none;
}

.link--animated::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--go-iris-soft), var(--go-accent-soft));
    transition: width var(--go-transition-spring);
}

.link--animated:hover {
    color: var(--go-accent);
}

.link--animated:hover::after {
    width: 100%;
}

/* Checkbox pop animation (styles merged into form-check-input section) */
@keyframes check-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =============================================================================
   Number input styling (remove spinners)
   ============================================================================= */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* =============================================================================
   Charts & Data Visualization
   ============================================================================= */

/* Chart container */
.chart-container {
    position: relative;
    width: 100%;
    min-height: 400px;
}

.chart-container svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Chart axis styling */
.chart-axis path,
.chart-axis line {
    stroke: var(--go-chart-grid);
    shape-rendering: crispEdges;
}

.chart-axis text {
    font-size: var(--go-font-sm);
    fill: var(--go-chart-axis);
    font-weight: 500;
}

.chart-axis-label {
    font-size: var(--go-font-base);
    fill: var(--go-chart-label);
    font-weight: 600;
}

/* Chart tooltip */
.chart-tooltip {
    position: fixed;
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-md);
    font-size: var(--go-font-sm);
    max-width: 320px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--go-shadow-lg);
    z-index: var(--go-z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--go-transition);
}

.chart-tooltip.visible {
    opacity: 1;
}

.chart-tooltip__header {
    font-weight: 600;
    color: var(--go-text);
    margin-bottom: var(--go-space-sm);
    padding-bottom: var(--go-space-sm);
    border-bottom: 1px solid var(--go-border-light);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
}

.chart-tooltip__count {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    font-weight: 500;
}

.chart-tooltip__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chart-tooltip__list li {
    padding: var(--go-space-xs) 0;
    color: var(--go-text-muted);
    font-family: var(--go-font-mono);
    font-size: var(--go-font-xs);
    border-bottom: 1px solid var(--go-border-light);
}

.chart-tooltip__list li:last-child {
    border-bottom: none;
}

.chart-tooltip__empty {
    color: var(--go-text-muted);
    font-style: italic;
}

/* Chart legend */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-md);
    margin-top: var(--go-space-md);
}

.chart-legend--inline {
    position: absolute;
    top: var(--go-space-md);
    right: var(--go-space-md);
    background: var(--go-surface);
    padding: var(--go-space-sm) var(--go-space-md);
    border-radius: var(--go-radius-sm);
    box-shadow: var(--go-shadow-sm);
}

.chart-legend__item {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

.chart-legend__color {
    width: 12px;
    height: 12px;
    border-radius: var(--go-radius-xs);
    flex-shrink: 0;
}

.chart-legend__label {
    font-weight: 500;
}

/* Chart goal/reference line */
.chart-goal-line {
    stroke: var(--go-text);
    stroke-width: 2.5;
    stroke-dasharray: 8, 4;
}

.chart-goal-label {
    font-size: var(--go-font-sm);
    fill: var(--go-text);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--go-surface);
    stroke-width: 4px;
    stroke-linejoin: round;
}

/* Network graph specific styles */
.network-container {
    position: relative;
    background: var(--go-surface);
    border-radius: var(--go-radius);
    overflow: hidden;
}

.network-header {
    padding: var(--go-space-lg);
    border-bottom: 1px solid var(--go-border-light);
}

.network-viz {
    min-height: 600px;
    position: relative;
}

.network-node {
    cursor: pointer;
    transition: all var(--go-transition);
}

.network-node:hover {
    stroke-width: 3px;
}

.network-link {
    transition: all var(--go-transition);
}

.network-link:hover {
    stroke-opacity: 1;
}

.network-label {
    font-size: var(--go-font-xs);
    fill: var(--go-text-muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--go-transition-slow);
}

.show-labels .network-label {
    opacity: 1;
}

/* Graph legend (compact, bottom-right corner) */
.graph-legend {
    position: absolute;
    bottom: var(--go-space-md);
    right: var(--go-space-md);
    background: color-mix(in srgb, var(--go-surface) 92%, transparent);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-sm);
    box-shadow: var(--go-shadow-sm);
    z-index: var(--go-z-sticky);
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-xs) var(--go-space-md);
}

.graph-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    white-space: nowrap;
}

.graph-legend .legend-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.graph-legend .legend-text {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
}

/* Tooltip card (for network graph) */
.tooltip-card {
    position: fixed;
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-md);
    box-shadow: var(--go-shadow-lg);
    z-index: var(--go-z-tooltip);
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--go-transition);
}

.tooltip-card.visible {
    opacity: 1;
    visibility: visible;
}

.tooltip-card .tooltip-header {
    font-weight: 600;
    color: var(--go-text);
    margin-bottom: var(--go-space-sm);
}

.tooltip-card .tooltip-content {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

/* =============================================================================
   Dark mode — driven by data-bs-theme attribute (set by JS toggle or OS pref)
   ============================================================================= */
[data-bs-theme=dark] {
    /* Surfaces — dark slate palette */
    --go-bg: #0f1219;
    --go-surface: #1a1f2e;
    --go-surface-alt: #141824;
    --go-surface-muted: #1e2433;
    --go-border: #2a3040;
    --go-border-light: #222838;

    /* Text — light on dark */
    --go-text: #e2e8f0;
    --go-text-muted: #94a3b8;
    --go-text-inverse: #0f172a;

    /* Brand — slightly brighter for dark bg legibility */
    --go-accent: #fb923c;
    --go-accent-hover: #fdba74;
    --go-accent-dark: #f97316;
    --go-accent-soft: rgba(249, 115, 22, 0.2);
    --go-accent-muted: rgba(249, 115, 22, 0.1);
    --go-iris: #38bdf8;
    --go-iris-dark: #0ea5e9;
    --go-iris-soft: rgba(56, 189, 248, 0.2);
    --go-iris-muted: rgba(56, 189, 248, 0.08);

    /* Status — tuned for dark backgrounds */
    --go-success: #34d399;
    --go-success-dark: #10b981;
    --go-success-light: rgba(52, 211, 153, 0.15);
    --go-danger: #f87171;
    --go-danger-dark: #ef4444;
    --go-danger-light: rgba(248, 113, 113, 0.15);
    --go-warning: #fbbf24;
    --go-warning-dark: #f59e0b;
    --go-warning-light: rgba(251, 191, 36, 0.15);

    /* Muted */
    --go-muted: #94a3b8;

    /* Shadows — darker, more spread on dark bg */
    --go-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --go-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --go-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --go-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --go-shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --go-shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
    --go-glow: 0 0 12px rgba(56, 189, 248, 0.15), 0 0 24px rgba(56, 189, 248, 0.08);
    --go-glow-accent: 0 0 12px rgba(249, 115, 22, 0.15), 0 0 24px rgba(249, 115, 22, 0.08);

    /* Gradients — adjusted for dark surfaces */
    --go-gradient-soft: linear-gradient(135deg, var(--go-iris-soft), var(--go-accent-soft));
    --go-gradient-muted: linear-gradient(135deg, var(--go-iris-muted), var(--go-accent-muted));
    --go-gradient-bold: linear-gradient(135deg, var(--go-iris), var(--go-accent));

    /* Overlays */
    --go-overlay: rgba(0, 0, 0, 0.6);
    --go-overlay-heavy: rgba(0, 0, 0, 0.95);

    /* Focus ring */
    --go-ring: 0 0 0 3px var(--go-iris-soft);

    /* Network graph — brighter for dark bg */
    --go-chart-link: #94a3b8;
    --go-chart-link-opacity: 0.4;

    /* Bootstrap root overrides */
    --bs-body-bg: var(--go-bg);
    --bs-body-color: var(--go-text);
    --bs-emphasis-color: var(--go-text);
    --bs-secondary-color: var(--go-text-muted);
    --bs-tertiary-color: var(--go-text-muted);
    --bs-border-color: var(--go-border);
    --bs-heading-color: var(--go-text);
    --bs-link-color: var(--go-accent);
    --bs-link-hover-color: var(--go-accent-hover);
    --bs-code-color: var(--go-iris);
}

/* Brand mark — clean on dark surfaces */
[data-bs-theme=dark] .sidebar__brand-mark {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

[data-bs-theme=dark] .sidebar__brand:hover .sidebar__brand-mark {
    box-shadow: none;
}

/* Scrollbar — dark variant */
[data-bs-theme=dark] ::-webkit-scrollbar-track {
    background: var(--go-bg);
}

[data-bs-theme=dark] ::-webkit-scrollbar-thumb {
    background: var(--go-border);
}

[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover {
    background: var(--go-text-muted);
}

/* Bootstrap component overrides for dark mode */
[data-bs-theme=dark] .form-check-input {
    background-color: var(--go-surface-muted);
    border-color: var(--go-border);
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--go-iris);
    border-color: var(--go-iris);
}

[data-bs-theme=dark] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme=dark] ::selection {
    background: var(--go-iris-soft);
    color: var(--go-text);
}

[data-bs-theme=dark] .dropdown-header {
    color: var(--go-text-muted);
}

[data-bs-theme=dark] .table {
    --bs-table-bg: var(--go-surface);
    --bs-table-color: var(--go-text);
    --bs-table-border-color: var(--go-border);
    --bs-table-striped-bg: var(--go-surface-alt);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--go-text);
}

[data-bs-theme=dark] .table thead th {
    background: var(--go-surface-muted);
    color: var(--go-text-muted);
}

[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-bg: var(--go-surface);
    --bs-dropdown-color: var(--go-text);
    --bs-dropdown-border-color: var(--go-border);
    --bs-dropdown-link-color: var(--go-text);
    --bs-dropdown-link-hover-bg: var(--go-surface-muted);
    --bs-dropdown-link-hover-color: var(--go-text);
    --bs-dropdown-divider-bg: var(--go-border);
}

[data-bs-theme=dark] .nav-tabs {
    border-bottom-color: var(--go-border);
}

[data-bs-theme=dark] .nav-tabs .nav-link {
    color: var(--go-text-muted);
}

[data-bs-theme=dark] .nav-tabs .nav-link.active {
    background: var(--go-surface);
    border-color: var(--go-border) var(--go-border) var(--go-surface);
    color: var(--go-text);
}

[data-bs-theme=dark] .avatar img {
    border-color: var(--go-border);
}

/* =============================================================================
   Reduced motion preferences
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* =============================================================================
   Print styles
   ============================================================================= */
@media print {
    .sidebar,
    .topbar,
    .profile-actions,
    .btn,
    .htmx-indicator {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .content {
        padding: 0;
    }

    .surface {
        box-shadow: none;
        border: 1px solid var(--go-border);
    }

    /* Reset animations for print */
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* =============================================================================
   Activity Heatmap
   ============================================================================= */

.heatmap-container {
    overflow-x: clip;
    overflow-y: visible;
}

.heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    grid-auto-columns: 14px;
    grid-auto-flow: column;
    gap: 2px;
}

.heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    cursor: default;
    position: relative;
}

.heatmap-cell[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    padding: 4px 8px;
    background: var(--go-text);
    color: var(--go-text-inverse);
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: var(--go-radius-xs);
    white-space: nowrap;
    z-index: var(--go-z-sticky);
    pointer-events: none;
}

/* Intensity levels — aligned with backoffice iris palette */
.heatmap-level-0 { background: var(--go-surface-muted); }
.heatmap-level-1 { background: var(--go-iris-muted); }
.heatmap-level-2 { background: var(--go-iris-soft); }
.heatmap-level-3 { background: var(--go-iris); }
.heatmap-level-4 { background: var(--go-iris-dark); }

/* Month labels row */
.heatmap-months {
    display: grid;
    grid-auto-columns: 14px;
    grid-auto-flow: column;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-xs);
}

.heatmap-month-label {
    grid-column: var(--heatmap-month-column);
    white-space: nowrap;
}

/* Day-of-week labels — padding-top aligns with grid (below month row) */
.heatmap-day-labels {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 2px;
    font-size: 0.65rem;
    color: var(--go-text-muted);
    margin-right: var(--go-space-xs);
    padding-top: calc(0.7rem + var(--go-space-xs));
    align-items: center;
}

/* Section labels */
.heatmap-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--go-text-muted);
}

/* Legend */
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--go-text-muted);
}

.heatmap-legend-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

/* Toggle buttons */
.heatmap-toggles {
    display: flex;
    gap: var(--go-space-xs);
    flex-wrap: wrap;
}

.heatmap-platform-filters {
    display: flex;
    gap: var(--go-space-xs);
    flex-wrap: wrap;
}

.heatmap-toggle {
    padding: 2px var(--go-space-sm);
    font-size: 0.7rem;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xs);
    background: transparent;
    color: var(--go-text-muted);
    cursor: pointer;
    transition: var(--go-transition);
}

.heatmap-toggle:hover:not(:disabled) {
    background: var(--go-surface-muted);
    color: var(--go-text);
}

.heatmap-toggle:disabled {
    opacity: 0.4;
    cursor: default;
}

.heatmap-toggle--active {
    background: var(--go-accent);
    color: var(--go-text-inverse);
    border-color: var(--go-accent);
}

.heatmap-toggle--active:hover {
    background: var(--go-accent-hover);
    border-color: var(--go-accent-hover);
    color: var(--go-text-inverse);
}

/* Week/month bucket: single-row grid */
.heatmap-grid--bucket {
    grid-template-rows: 14px;
}

.heatmap-container .heatmap-months--bucket {
    grid-auto-columns: 32px;
}

/* Per-platform color palettes (applied when single platform selected) */
.heatmap--email .heatmap-level-1 { background: var(--go-iris-muted); }
.heatmap--email .heatmap-level-2 { background: var(--go-iris-soft); }
.heatmap--email .heatmap-level-3 { background: var(--go-iris); }
.heatmap--email .heatmap-level-4 { background: var(--go-iris-dark); }

.heatmap--calendar .heatmap-level-1 { background: var(--go-success-light); }
.heatmap--calendar .heatmap-level-2 { background: var(--go-success); }
.heatmap--calendar .heatmap-level-3 { background: var(--go-success); }
.heatmap--calendar .heatmap-level-4 { background: var(--go-success-dark); }

.heatmap--linkedin .heatmap-level-1 { background: var(--go-accent-muted); }
.heatmap--linkedin .heatmap-level-2 { background: var(--go-accent-soft); }
.heatmap--linkedin .heatmap-level-3 { background: var(--go-accent); }
.heatmap--linkedin .heatmap-level-4 { background: var(--go-accent-dark); }

.heatmap--twitter .heatmap-level-1 { background: var(--go-danger-light); }
.heatmap--twitter .heatmap-level-2 { background: var(--go-danger); }
.heatmap--twitter .heatmap-level-3 { background: var(--go-danger); }
.heatmap--twitter .heatmap-level-4 { background: var(--go-danger-dark); }

/* =========================================================================
   Celery Tasks Dashboard
   ========================================================================= */

/* Task stepper - horizontal timeline */
.task-stepper {
    display: flex;
    align-items: flex-start;
    gap: var(--go-space-xs);
    padding: var(--go-space-sm) 0;
    overflow-x: auto;
}

.task-step {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    white-space: nowrap;
}

.task-step__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--go-radius-full);
    flex-shrink: 0;
    background: var(--go-text-muted);
}

.task-step__dot--success { background: var(--go-success); }
.task-step__dot--failure { background: var(--go-danger); }
.task-step__dot--retry   { background: var(--go-warning); }
.task-step__dot--started { background: var(--go-iris); }
.task-step__dot--received { background: var(--go-iris); }
.task-step__dot--pending { background: var(--go-text-muted); }
.task-step__dot--revoked { background: var(--go-text-muted); }

.task-step__dot--active {
    animation: stepper-pulse 1.5s ease-in-out infinite;
}

@keyframes stepper-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.task-step__label {
    display: flex;
    flex-direction: column;
    font-size: var(--go-font-sm);
}

.task-step__state { font-weight: 500; }
.task-step__time  { color: var(--go-text-muted); font-size: 0.75rem; }

.task-step__line {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    padding: 0 var(--go-space-xs);
}

.task-step__line::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--go-border);
}

.task-step__duration {
    font-family: var(--go-font-mono);
    font-size: 0.7rem;
    color: var(--go-text-muted);
}

/* Failure group */
.failure-group { border: 1px solid var(--go-border); }
.failure-group[open] { border-color: var(--go-danger); }

.failure-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--go-space-sm) var(--go-space-md);
    cursor: pointer;
    list-style: none;
}

.failure-group__header::-webkit-details-marker { display: none; }

.failure-group__body {
    padding: 0 var(--go-space-md) var(--go-space-md);
    border-top: 1px solid var(--go-border-light);
}

.failure-item {
    padding: var(--go-space-sm) 0;
    border-bottom: 1px solid var(--go-border-light);
}

.failure-item:last-child { border-bottom: none; }

.failure-item__trace {
    max-height: 300px;
    overflow-y: auto;
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-sm);
    font-size: 0.75rem;
    margin: var(--go-space-xs) 0 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Workflow card */
.workflow-card {
    padding: var(--go-space-md);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    transition: var(--go-transition);
    color: var(--go-text);
}

.workflow-card:hover {
    border-color: var(--go-iris);
    box-shadow: var(--go-shadow-sm);
}

.workflow-card__root-id {
    max-width: 8rem;
}

/* Task duration - monospace + tabular nums for ticking counters */
.task-duration {
    font-family: var(--go-font-mono);
    font-variant-numeric: tabular-nums;
}

.task-duration--warn { color: var(--go-warning); }
.task-duration--danger { color: var(--go-danger); }

/* Auto-refresh dropdown */
.poll-select {
    font-size: var(--go-font-sm);
    padding: var(--go-space-xs) var(--go-space-sm);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    background: var(--go-surface);
    color: var(--go-text);
    cursor: pointer;
}

.poll-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--go-radius-full);
    background: var(--go-success);
    display: inline-block;
    animation: stepper-pulse 1.5s ease-in-out infinite;
}

/* Workflow detail tree boxes */
.wf-task-box {
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-sm) var(--go-space-md);
    background: var(--go-surface);
    min-width: 140px;
    text-align: center;
}

.wf-task-box--failed {
    background: var(--go-danger-light);
    border-color: var(--go-danger);
}

.wf-task-box--slowest {
    border-color: var(--go-warning);
    border-width: 2px;
}

.wf-group-container {
    border: 2px dashed var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-sm);
    justify-content: center;
}

.wf-connector {
    display: flex;
    justify-content: center;
    padding: var(--go-space-sm) 0;
    color: var(--go-text-muted);
}

.wf-chain-arrow {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    color: var(--go-text-muted);
    font-size: 1.25rem;
}

/* =========================================================================
   GoCharts: Sparkline
   ========================================================================= */
.sparkline { display: inline-block; vertical-align: middle; }

/* =========================================================================
   GoCharts: Distribution bar
   ========================================================================= */
.go-distribution { display: flex; flex-direction: column; gap: var(--go-space-xs); }

.go-distribution__bar {
    display: flex;
    border-radius: var(--go-radius-sm);
    overflow: hidden;
    background: var(--go-surface-muted);
}

.go-distribution__segment {
    transition: opacity var(--go-transition);
    cursor: default;
}

.go-distribution__segment:hover { opacity: 0.8; }

.go-distribution__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-xs) var(--go-space-md);
    font-size: var(--go-font-sm);
}

.go-distribution__legend-item {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
}

.go-distribution__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--go-radius-full);
    flex-shrink: 0;
}

/* =========================================================================
   GoCharts: Comparison bars
   ========================================================================= */
.go-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.go-comparison__row {
    display: grid;
    grid-template-columns: 8rem 1fr 4rem;
    gap: var(--go-space-sm);
    align-items: center;
}

.go-comparison__label {
    font-size: var(--go-font-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.go-comparison__sublabel {
    display: block;
    font-size: 0.7rem;
    color: var(--go-text-muted);
}

.go-comparison__bar-wrap {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-sm);
    overflow: hidden;
}

.go-comparison__bar-fill {
    border-radius: var(--go-radius-sm);
    transition: width 0.3s ease;
}

.go-comparison__value {
    font-size: var(--go-font-sm);
    text-align: end;
    white-space: nowrap;
}

/* =========================================================================
   Health insights row (sparklines + distribution + top tasks)
   ========================================================================= */
.health-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--go-space-md);
    margin-top: var(--go-space-md);
}

.health-insights__card {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-sm);
    padding: var(--go-space-md);
}

.health-insights__card h6 {
    margin: 0 0 var(--go-space-sm);
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ── Code block ────────────────────────────────────────────────────────────── */

.code-block {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-sm);
    overflow: hidden;
}

.code-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--go-space-xs) var(--go-space-sm);
    border-bottom: 1px solid var(--go-border-light);
}

.code-block__label {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

.code-block__copy {
    background: none;
    border: none;
    color: var(--go-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--go-radius-sm);
    font-size: var(--go-font-sm);
}

.code-block__copy:hover {
    color: var(--go-text);
    background: var(--go-border-light);
}

.code-block__content {
    max-height: var(--code-block-max-height, none);
    margin: 0;
    padding: var(--go-space-sm);
    overflow-y: auto;
    font-size: var(--go-font-sm);
    white-space: pre-wrap;
    word-break: break-word;
}


/* ── Task params ───────────────────────────────────────────────────────────── */

.task-params {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

.task-param {
    display: flex;
    align-items: baseline;
    gap: var(--go-space-sm);
}

.task-param__label {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    min-width: 6rem;
    flex-shrink: 0;
}

.task-param__value {
    font-size: var(--go-font-sm);
    word-break: break-all;
}

.task-param__value--link {
    color: var(--go-iris);
    text-decoration: none;
}

.task-param__value--link:hover {
    text-decoration: underline;
}

/* Compact mode — inline chips for table cells */
.task-params-compact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.task-param-chip {
    display: inline-block;
    font-size: var(--go-font-sm);
    font-family: var(--go-font-mono);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.task-param-chip--entity {
    color: var(--go-iris);
    text-decoration: none;
}

.task-param-chip--entity:hover {
    text-decoration: underline;
}

.task-param-chip--badge {
    background: var(--go-surface-muted);
    padding: 1px 6px;
    border-radius: var(--go-radius-sm);
    color: var(--go-text-muted);
}

.task-param-chip--muted {
    color: var(--go-text-muted);
}


/* ── Traceback block ───────────────────────────────────────────────────────── */

.traceback-block {
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-sm);
    overflow: hidden;
    border-left: 3px solid var(--go-danger);
}

.traceback-block__actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--go-space-xs) var(--go-space-sm) 0;
}

.traceback-block__exception {
    padding: var(--go-space-sm);
    color: var(--go-danger);
    font-weight: 600;
    font-size: var(--go-font-sm);
    word-break: break-word;
}

.traceback-block__frames {
    border-top: 1px solid var(--go-border-light);
}

.traceback-block__toggle {
    padding: var(--go-space-xs) var(--go-space-sm);
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    cursor: pointer;
    list-style: none;
}

.traceback-block__toggle::-webkit-details-marker { display: none; }
.traceback-block__toggle::before {
    content: "\25b6\00a0";
    font-size: 0.6em;
    transition: transform var(--go-transition);
}
details[open] > .traceback-block__toggle::before {
    transform: rotate(90deg);
}

.traceback-block__content {
    margin: 0;
    padding: var(--go-space-sm);
    max-height: 300px;
    overflow-y: auto;
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* =============================================================================
   Detail rows — key-value pairs for detail/profile pages
   ============================================================================= */

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--go-space-sm) 0;
    border-bottom: 1px solid var(--go-border);
    gap: var(--go-space-md);
}
.detail-row:last-child { border-bottom: none; }
.detail-row__label {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    flex-shrink: 0;
}
.detail-row__value {
    font-size: var(--go-font-sm);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* =============================================================================
   Confidence / score micro-bar
   ============================================================================= */

.confidence-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--go-space-xs);
}
.confidence-bar__track {
    width: 60px;
    height: 4px;
    background: var(--go-surface-muted);
    border-radius: 2px;
    overflow: hidden;
}
.confidence-bar__fill {
    width: var(--confidence-width, 0%);
    height: 100%;
    border-radius: 2px;
    transition: width var(--go-transition-slow);
}
.confidence-bar__fill--high { background: var(--go-success); }
.confidence-bar__fill--mid  { background: var(--go-warning); }
.confidence-bar__fill--low  { background: var(--go-danger); }
.confidence-bar__fill--accent { background: var(--go-accent); }

/* =============================================================================
   Evidence icons — compact inline row for connection evidence
   ============================================================================= */

.evidence-icons {
    display: flex;
    gap: var(--go-space-sm);
    align-items: center;
    font-size: var(--go-font-sm);
    font-variant-numeric: tabular-nums;
}
.evidence-icons i {
    font-size: 0.85rem;
}
.evidence-icons .active  { color: var(--go-text); }
.evidence-icons .absent  { color: var(--go-text-muted); opacity: 0.3; }

/* =============================================================================
   Anomaly row highlights
   ============================================================================= */

.anomaly-row--warning {
    border-left: 3px solid var(--go-warning) !important;
    background: var(--go-warning-surface) !important;
}
.anomaly-row--danger {
    border-left: 3px solid var(--go-danger) !important;
    background: var(--go-danger-surface) !important;
}

/* =============================================================================
   Edge Pair Card — unified identity edge / potential edge display.
   Supports two modes: "card" (standalone) and "timeline" (vertical story).
   ============================================================================= */

/* ---- Shared base ---- */
.edge-pair-card {
    font-size: var(--go-font-sm);
}
.edge-pair-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--go-space-sm);
    font-weight: 600;
    margin-bottom: var(--go-space-xs);
}
.edge-pair-card__pair,
.edge-pair-card__origins {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-xs);
    opacity: 0.7;
}
.edge-pair-card__date {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    white-space: nowrap;
}
.edge-pair-card__date-standalone {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    margin-bottom: var(--go-space-xs);
}
.edge-pair-card__status {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--go-space-xs);
}
.edge-pair-card__tag {
    font-size: var(--go-font-xs);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.edge-pair-card__tag--success { color: var(--go-success); }
.edge-pair-card__tag--warning { color: var(--go-warning); }
.edge-pair-card__detail-hint {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    opacity: 0.7;
    margin-left: auto;
}
.edge-pair-card__origin {
    font-size: var(--go-font-sm);
    font-weight: 500;
    color: var(--go-text-muted);
    background: var(--go-surface-muted);
    padding: var(--go-space-xs) var(--go-space-sm);
    border-radius: var(--go-radius-xs);
    border: 1px solid var(--go-border);
}
.edge-pair-card__details {
    display: flex;
    gap: var(--go-space-sm);
    flex-wrap: wrap;
    margin-top: var(--go-space-xs);
}
.edge-pair-card__detail-toggle {
    cursor: pointer;
    color: var(--go-text-muted);
    user-select: none;
}
.edge-pair-card__detail-toggle:hover { color: var(--go-text); }
.edge-pair-card__detail-body {
    margin-top: var(--go-space-xs);
    margin-left: var(--go-space-lg);
}
.edge-pair-card__audit-row,
.edge-pair-card__vote-row {
    display: flex;
    gap: var(--go-space-sm);
    align-items: center;
    padding: var(--go-space-xs) 0;
    border-bottom: 1px solid var(--go-border-light);
}
.edge-pair-card__audit-row:last-child,
.edge-pair-card__vote-row:last-child {
    border-bottom: none;
}

/* ---- Card mode ---- */
.edge-pair-card--card {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-left: 3px solid var(--go-border);
    border-radius: var(--go-radius);
    padding: var(--go-space-md);
    margin-bottom: var(--go-space-sm);
}
.edge-pair-card--card.edge-pair-card--applied  { border-left-color: var(--go-success); }
.edge-pair-card--card.edge-pair-card--pending  { border-left-color: var(--go-warning); }
.edge-pair-card--card.edge-pair-card--negative { border-left-color: var(--go-danger); }

/* ---- Timeline mode ---- */
.edge-pair-card--timeline {
    position: relative;
    padding: var(--go-space-sm) var(--go-space-md) var(--go-space-md) var(--go-space-xl);
    border-left: 2px solid var(--go-border);
    margin-left: var(--go-space-sm);
}
.edge-pair-card--timeline:last-child { border-left-color: transparent; }
.edge-pair-card--timeline::before {
    content: "";
    position: absolute;
    left: -5px;
    top: calc(var(--go-space-sm) + 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--go-border);
}
.edge-pair-card--timeline.edge-pair-card--applied::before  { background: var(--go-success); }
.edge-pair-card--timeline.edge-pair-card--pending::before  { background: var(--go-warning); }
.edge-pair-card--timeline.edge-pair-card--negative::before { background: var(--go-danger); }

/* =============================================================================
   Graph zoom controls — floating button strip over the D3 graph
   ============================================================================= */

.graph-controls {
    position: absolute;
    top: var(--go-space-sm);
    right: var(--go-space-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
}
.graph-controls__btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xs);
    color: var(--go-text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s, border-color 0.15s;
}
.graph-controls__btn:hover {
    color: var(--go-text);
    border-color: var(--go-accent);
}

/* =============================================================================
   Pipeline stepper — horizontal stages for witnessed identifiers
   ============================================================================= */

.pipeline-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
}
.pipeline-stage {
    flex: 1;
    text-align: center;
    position: relative;
    padding: var(--go-space-sm) var(--go-space-md);
    min-width: 120px;
}
.pipeline-stage::after {
    content: "→";
    position: absolute;
    right: -8px;
    top: var(--go-space-sm);
    color: var(--go-text-muted);
    font-size: var(--go-font-lg);
}
.pipeline-stage:last-child::after { content: ""; }
.pipeline-stage__count {
    font-size: var(--go-font-xl);
    font-weight: 700;
}
.pipeline-stage__label {
    font-size: var(--go-font-xs);
    color: var(--go-text-muted);
    margin-top: var(--go-space-xs);
}
.pipeline-stage__drop {
    font-size: var(--go-font-xs);
    color: var(--go-warning);
    margin-top: var(--go-space-xs);
}