/* ============================================
   CBRN CORe Portal - Enhanced Design System
   Modern Apple/Google-inspired Design
   ============================================ */

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Colors - Light Theme */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f7;
    --color-bg-tertiary: #e8e8ed;
    --color-bg-card: #ffffff;
    --color-bg-hover: rgba(0, 0, 0, 0.04);
    --color-bg-active: rgba(0, 122, 255, 0.1);

    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;
    --color-text-inverse: #ffffff;

    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.12);

    --color-accent: #007aff;
    --color-accent-blue: #007aff;
    --color-accent-green: #34c759;
    --color-accent-orange: #ff9500;
    --color-accent-red: #ff3b30;
    --color-accent-purple: #af52de;
    --color-accent-teal: #5ac8fa;
    --color-accent-yellow: #ffcc00;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;

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

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Layout */
    --header-height: 64px;
    /* Height of the fixed top classification banner. The sticky header and
       sidebar are offset by exactly this value, so banner height and every
       offset MUST come from this one variable — otherwise the banner (higher
       z-index) paints over the header and clips the help "?" (#1994). */
    --classification-banner-height: 24px;
    /* Height of the sticky "Jump to:" nav bar in the Request Account Change
       section (.request-access-section-nav). Default here is a single-row
       estimate - RequestAccess.updateSectionNavHeight() (bundle.js) overwrites
       this with the bar's real measured height right before any jump-to-panel
       scroll, since the bar can wrap to 2 rows on narrow viewports (#2487
       bug #2's flex-wrap fix) and a static value alone can't track that. */
    --section-nav-height: 60px;
    --max-content-width: 1400px;
}

/* Dark Theme */
[data-theme="dark"] {
    --color-bg-primary: #000000;
    --color-bg-secondary: #1c1c1e;
    --color-bg-tertiary: #2c2c2e;
    --color-bg-card: #1c1c1e;
    --color-bg-hover: rgba(255, 255, 255, 0.08);
    --color-bg-active: rgba(0, 122, 255, 0.2);

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-tertiary: #6e6e73;
    --color-text-inverse: #1d1d1f;

    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    min-height: 100vh;
    padding-bottom: 28px; /* Space for fixed bottom classification banner */
}

a {
    color: var(--color-accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover { opacity: 0.8; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select {
    font-family: inherit;
    font-size: inherit;
}

/* Utility Classes */
.hidden { display: none !important; }
.scrollable { overflow-y: auto; max-height: 300px; }

/* ============================================
   Loading Overlay
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition-slow);
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.loader-ring {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

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

/* ============================================
   Command Palette (Global Search)
   ============================================ */
.command-palette {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.command-palette-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.command-palette-content {
    position: relative;
    width: 90%;
    max-width: 720px;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.command-search-wrapper {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.command-search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.command-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    outline: none;
}

.command-input::placeholder {
    color: var(--color-text-tertiary);
}

.command-shortcut {
    display: flex;
    gap: var(--spacing-xs);
}

.command-shortcut kbd, kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: inherit;
    color: var(--color-text-secondary);
}

.command-filters {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.filter-chip {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background: var(--color-bg-hover);
}

.filter-chip.active {
    background: var(--color-accent-blue);
    color: var(--color-text-inverse);
    border-color: var(--color-accent-blue);
}

.command-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-empty {
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.command-empty p {
    margin-bottom: var(--spacing-lg);
}

.keyboard-hints {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.keyboard-hints span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.command-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.command-result-item:hover,
.command-result-item.selected {
    background: var(--color-bg-hover);
}

.command-result-item.selected {
    background: var(--color-bg-active);
}

.command-result-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.command-result-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.command-result-icon img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.command-result-info {
    flex: 1;
    min-width: 0;
}

.command-result-title {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-result-title mark {
    background: var(--color-accent-yellow);
    color: inherit;
    border-radius: 2px;
}

.command-result-path {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-result-type {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.command-result-favorite {
    color: var(--color-accent-yellow);
}

.command-palette-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.command-palette-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.command-palette-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.command-palette-empty svg {
    width: 48px;
    height: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
}

.command-palette-empty p {
    margin: 0;
    font-size: var(--font-size-md);
}

.command-palette-empty-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

.command-footer {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.command-tip {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ============================================
   Context Menu
   ============================================ */
.context-menu {
    position: fixed;
    z-index: 10001;
    min-width: 200px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
    animation: fadeIn 0.15s ease;
}

.context-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-align: left;
    transition: background var(--transition-fast);
}

.context-item:hover {
    background: var(--color-bg-hover);
}

.context-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.context-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-sm) 0;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.success { border-left: 3px solid var(--color-accent-green); }
.toast.error { border-left: 3px solid var(--color-accent-red); }
.toast.info { border-left: 3px solid var(--color-accent-blue); }

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* ============================================
   App Container
   ============================================ */
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   Error Banner (persistent error display)
   ============================================ */
.error-banner-container {
    position: fixed;
    top: 38px; /* Below classification banner */
    left: 0;
    right: 0;
    z-index: 10001;
    padding: var(--spacing-sm) var(--spacing-xl);
    animation: slideDown 0.3s ease;
}

.error-banner-container.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.error-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #f87171;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 1200px;
    margin: 0 auto;
}

[data-theme="dark"] .error-banner {
    background: linear-gradient(135deg, #450a0a, #7f1d1d);
    border-color: #dc2626;
}

.error-banner-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #dc2626;
}

.error-banner-icon svg {
    width: 100%;
    height: 100%;
}

.error-banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.error-banner-message {
    font-weight: 600;
    color: #991b1b;
}

[data-theme="dark"] .error-banner-message {
    color: #fca5a5;
}

.error-banner-details {
    font-size: var(--font-size-sm);
    color: #b91c1c;
}

[data-theme="dark"] .error-banner-details {
    color: #f87171;
}

.error-banner-dismiss {
    flex-shrink: 0;
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.error-banner-dismiss:hover {
    background: rgba(185, 28, 28, 0.1);
}

[data-theme="dark"] .error-banner-dismiss {
    color: #f87171;
}

[data-theme="dark"] .error-banner-dismiss:hover {
    background: rgba(248, 113, 113, 0.1);
}

.error-banner-dismiss svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Header
   ============================================ */
.header {
    height: var(--header-height);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-icon {
    width: 32px;
    height: 32px;
    color: var(--color-accent-blue);
}

.logo-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* "Global Search" label left of the header search box — matches .logo-text style. */
.global-search-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: var(--spacing-sm);
    white-space: nowrap;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    max-width: 900px;
    justify-content: center;
    row-gap: 4px;
}

.nav-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.nav-btn.active {
    background: var(--color-accent-blue);
    color: var(--color-text-inverse);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Search Trigger Button */
.search-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 40px;
    padding: 0 var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
    min-width: 200px;
}

.search-trigger:hover {
    border-color: var(--color-accent-blue);
    background: var(--color-bg-hover);
}

.search-trigger .search-icon {
    width: 16px;
    height: 16px;
}

.search-placeholder {
    flex: 1;
    text-align: left;
    font-size: var(--font-size-sm);
}

.search-kbd {
    font-size: 11px;
    padding: 2px 6px;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.sun-icon { display: block; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.user-menu:hover {
    background: var(--color-bg-hover);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    object-fit: cover;
}

.user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
}

/* ============================================
   Main Content
   ============================================ */
.main-content {
    flex: 1;
    padding: var(--spacing-xl);
    max-width: var(--max-content-width);
    margin: 0 auto;
    width: 100%;
}

/* Welcome Section */
.welcome-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.welcome-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.welcome-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

/* New Users Start Here — prominent CTA button below welcome subtitle */
.onboarding-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    letter-spacing: 0.02em;
}

.onboarding-cta-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.onboarding-cta-btn:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.onboarding-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
}

/* "ASK CORe" top CTA — same shape as the green New-Users CTA, dashboard accent blue. */
.onboarding-cta-btn.ask-core {
    background: linear-gradient(135deg, #007aff, #0a84ff);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}
.onboarding-cta-btn.ask-core:hover {
    background: linear-gradient(135deg, #0a84ff, #0066d6);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}
.onboarding-cta-btn.ask-core:active {
    box-shadow: 0 1px 4px rgba(0, 122, 255, 0.3);
}
/* Place the two welcome CTAs side by side */
.welcome-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.welcome-cta-row .onboarding-cta-btn { margin-top: 12px; }

.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.refresh-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

.refresh-btn.spinning svg {
    animation: spin 1s linear infinite;
}

.refresh-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Refresh Dropdown */
.refresh-dropdown {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.refresh-dropdown .refresh-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.refresh-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-xs);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border-light);
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.refresh-dropdown-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-blue);
}

.refresh-dropdown-toggle svg {
    width: 14px;
    height: 14px;
}

.refresh-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 1000;
    overflow: hidden;
}

.refresh-dropdown-menu.hidden {
    display: none;
}

.refresh-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    text-align: left;
    font-size: var(--font-size-sm);
    transition: background 0.15s ease;
}

.refresh-dropdown-item:hover {
    background: var(--color-bg-hover);
}

.refresh-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light);
}

.refresh-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.refresh-dropdown-item:hover svg {
    color: var(--color-accent-blue);
}

.refresh-dropdown-hint {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.refresh-dropdown-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 4px 0;
}

.refresh-dropdown-item[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Stale cache warning colors */
.last-refresh-time.stale-warning {
    color: var(--color-warning, #f59e0b);
}

.last-refresh-time.stale-error {
    color: var(--color-error, #ef4444);
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
}

.refresh-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.refresh-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
    text-align: right;
}

/* Stats Section */
.stats-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.stat-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
    height: 88px;
    box-sizing: border-box;
    overflow: hidden;
}

.stat-card.clickable {
    cursor: pointer;
}

.stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-blue);
}

/* Stat Card Category Colors (left border) */
.stat-card-work {
    border-left: 4px solid #06b6d4; /* Cyan - Work Items */
}
.stat-card-asset {
    border-left: 4px solid #22c55e; /* Green - Assets */
}
.stat-card-tool {
    border-left: 4px solid #a855f7; /* Purple - Tools */
}

/* Stats Legend */
.stats-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    font-weight: 500;
}
.stats-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    user-select: none;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.stats-legend-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stats-legend-item.active {
    opacity: 1;
    font-weight: 600;
    color: var(--color-text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stats-legend-item:not(.active) {
    opacity: 0.5;
    text-decoration: line-through;
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
}
/* S&T Managers button special styling - looks normal when not active */
.stats-legend-item[data-filter="st-managers"]:not(.active) {
    opacity: 1;
    text-decoration: none;
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 500;
    color: var(--color-text-secondary);
}
.stats-legend-item[data-filter="st-managers"].active {
    font-weight: 700;
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-strong);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--color-text-primary);
}
.stats-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transition: transform 0.2s ease;
}
.stats-legend-item:hover .stats-legend-dot {
    transform: scale(1.2);
}
.stats-legend-dot.work { background: #06b6d4; }
.stats-legend-dot.asset { background: #22c55e; }
.stats-legend-dot.tool { background: #a855f7; }
.stats-legend-dot.st-managers { background: #3b82f6; }

/* Hidden stat cards when category is toggled off */
.stat-card.category-hidden {
    display: none !important;
}

/* Ghosted stat cards (Coming Soon) */
.stat-card-ghosted {
    opacity: 0.5;
    pointer-events: none;
}
.stat-card-ghosted .stat-label {
    font-style: italic;
    color: var(--color-text-tertiary);
}

/* Pending Reviews Badge */
.stat-pending-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: pendingPulse 2s ease-in-out infinite;
}

.stat-pending-badge.hidden {
    display: none !important;
}

@keyframes pendingPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* WORK ITEMS - Cyan (from Data Sets) */
.todos-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.program-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.issues-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* Program Management badge - consistent font sizes */
.stat-card[data-section="program"] .stat-number {
    font-size: var(--font-size-md);
    font-weight: 600;
}
.stat-card[data-section="program"] .stat-label {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--color-text-secondary);
}
.mergerequests-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.issueboards-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.favorites-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* ASSETS - Green (from Groups) */
.inventory-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.groups-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.projects-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.code-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.docs-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.wikis-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.apps-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.models-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.datasets-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.pipelines-icon { background: linear-gradient(135deg, #34c759, #30d158); }
.scanners-icon { background: linear-gradient(135deg, #34c759, #30d158); }

/* TOOLS - Purple (from AI Resources) */
.airesources-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.modelcard-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.modelplayground-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.datacard-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.access-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.requests-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.safe-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.workspaces-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.ekscontainers-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.ecscontainers-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.jupyterhub-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.onboarding-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.support-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.grafana-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.usermanagement-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.cybersecurity-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.search-capabilities-icon { background: linear-gradient(135deg, #64748b, #475569); }

/* Text-based stat number (for labels like SAFE, New, Info) */
.stat-number.stat-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
    white-space: nowrap;
}

/* Stat card links (external links like To-Dos, Workspaces) */
.stat-card-link {
    text-decoration: none;
    color: inherit;
}

.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Flipped stat cards - shows label on top, number below (for numbered cards) */
.stat-card-flipped .stat-content {
    flex-direction: column-reverse;
}

.stat-card-flipped .stat-label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.stat-card-flipped .stat-number {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

/* Content Sections */
.content-section {
    display: none;
    scroll-margin-top: calc(var(--header-height, 64px) + var(--classification-banner-height, 24px));
}

.content-section.active {
    display: block;
    animation: fadeIn var(--transition-normal);
}

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

/* Overview Grid */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.overview-grid .activity-card {
    grid-row: span 2;
}

.overview-grid .favorites-card {
    grid-column: span 2;
}

/* Cards */
.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.card-title svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent-blue);
}

.view-all-btn {
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    font-weight: 500;
    transition: opacity var(--transition-fast);
}

.view-all-btn:hover { opacity: 0.8; }

/* Activity Feed */
.activity-feed {
    max-height: 400px;
    overflow-y: auto;
}

/* Recent Activity filter chips + push-collapse count */
.activity-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
}
.activity-chip {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.activity-chip:hover { color: var(--color-text-primary); border-color: var(--color-border); }
.activity-chip.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.activity-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
}

.activity-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.activity-item:hover {
    background: var(--color-bg-hover);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.commit { background: var(--color-accent-green); }
.activity-icon.issue { background: var(--color-accent-blue); }
.activity-icon.merge { background: var(--color-accent-purple); }
.activity-icon.comment { background: var(--color-accent-orange); }

.activity-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.activity-title a {
    color: var(--color-accent-blue);
}

.activity-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Favorites Quick */
.favorites-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.favorite-item:hover {
    background: var(--color-bg-hover);
    transform: translateY(-1px);
}

.favorite-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.empty-favorites {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-tertiary);
    width: 100%;
}

.empty-favorites svg {
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.empty-favorites p {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.empty-favorites span {
    font-size: var(--font-size-xs);
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.action-btn:hover {
    background: var(--color-bg-hover);
    transform: scale(1.02);
}

.action-btn svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent-blue);
}

.action-btn span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Section Headers */
.section-header {
    margin-bottom: var(--spacing-xl);
    scroll-margin-top: calc(var(--header-height, 64px) + var(--classification-banner-height, 24px));
}

.section-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.section-description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

.role-badge-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.view-btn {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--color-text-primary);
}

.view-btn.active {
    background: var(--color-bg-card);
    color: var(--color-accent-blue);
    box-shadow: var(--shadow-sm);
}

.view-btn svg {
    width: 16px;
    height: 16px;
}

.section-filters {
    display: flex;
    gap: var(--spacing-md);
}

.filter-input {
    flex: 1;
    max-width: 300px;
    height: 40px;
    padding: 0 var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
}

.filter-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
}

.filter-select {
    height: 40px;
    padding: 0 var(--spacing-lg) 0 var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    max-width: 200px;
    min-width: 120px;
    flex-shrink: 1;
    text-overflow: ellipsis;
}

/* ============================================
   SEARCHABLE SELECT COMPONENT
   ============================================ */
.searchable-select {
    position: relative;
    display: inline-block;
    min-width: 320px;
    width: 100%;
    max-width: 400px;
}

.searchable-select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 var(--spacing-sm) 0 var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.searchable-select-display:hover {
    border-color: var(--color-border-hover);
}

.searchable-select.open .searchable-select-display {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

.searchable-select-display.has-value .searchable-select-text {
    color: var(--color-text-primary);
}

.searchable-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-tertiary);
}

.searchable-select-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: var(--spacing-xs);
    color: var(--color-text-tertiary);
    transition: transform 0.2s;
}

.searchable-select.open .searchable-select-arrow {
    transform: rotate(180deg);
}

.searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    max-height: 400px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.searchable-select-dropdown.hidden {
    display: none;
}

.searchable-select-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.searchable-select-search svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.searchable-select-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    outline: none;
}

.searchable-select-input::placeholder {
    color: var(--color-text-tertiary);
}

.searchable-select-options {
    overflow-y: auto;
    max-height: 260px;
}

.searchable-select-option {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-option:hover {
    background: var(--color-bg-hover);
}

.searchable-select-option.selected {
    background: rgba(0, 122, 255, 0.1);
    color: var(--color-accent-blue);
    font-weight: 500;
}

.searchable-select-option.placeholder-option {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.searchable-select-option.hidden {
    display: none;
}

.searchable-select-no-results {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.searchable-select-no-results.hidden {
    display: none;
}

/* Hide original select when searchable is active */
.searchable-select-original {
    display: none !important;
}

/* Searchable select in filter rows - stack vertically */
.issues-search-filters .searchable-select,
.mrs-search-filters .searchable-select,
.search-results-filters .searchable-select,
.wiki-content-search-filters .searchable-select,
.code-search-filters .searchable-select,
.documents-search-filters .searchable-select,
.apps-filters .searchable-select,
.models-filters .searchable-select,
.datasets-filters .searchable-select,
.mrsubmit-filters .searchable-select {
    min-width: 280px;
    max-width: 400px;
}

/* Make dropdown options show full text */
.searchable-select-option {
    white-space: normal;
    word-break: break-word;
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.4;
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
}

.resource-grid.list-view {
    grid-template-columns: 1fr;
}

/* Dependency-graph view (#2055 Wave 2) — read-only, dependency-light HTML/SVG.
   When .graph-view is set, the grid becomes a single full-width column holding
   the rendered graph instead of cards. Styled with the dashboard design tokens. */
.resource-grid.graph-view {
    grid-template-columns: 1fr;
}
.dep-graph {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    overflow-x: auto;
}
.dep-graph-empty {
    color: var(--text-secondary);
    font-size: 13px;
    padding: var(--spacing-md);
}
.dep-graph-legend {
    display: flex; gap: var(--spacing-md); flex-wrap: wrap;
    font-size: 11px; color: var(--text-muted); margin-bottom: var(--spacing-md);
}
.dep-graph-legend .dg-chip { display: inline-flex; align-items: center; gap: 4px; }
.dep-graph-legend .dg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dg-dot.app { background: var(--accent, #4f7df5); }
.dg-dot.model { background: #8b5cf6; }
.dg-dot.dataset { background: #0d9488; }
/* one row per source node: [node] -> linked nodes */
.dg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border, var(--color-border)); }
.dg-row:first-of-type { border-top: none; }
.dg-node {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-card); border: 1px solid var(--border, var(--color-border));
    border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-primary);
    text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
a.dg-node:hover { border-color: var(--accent, #4f7df5); transform: translateY(-1px); }
.dg-node.app { border-left: 3px solid var(--accent, #4f7df5); }
.dg-node.model { border-left: 3px solid #8b5cf6; }
.dg-node.dataset { border-left: 3px solid #0d9488; }
.dg-arrow { color: var(--text-muted); font-size: 13px; }
.dg-edge-label { font-size: 10px; color: var(--text-muted); }

/* Proactive-insights panel (#2055 Wave 3) — surfaces "what needs attention"
   above the models grid; client-side stale-dependency detection (matches the
   proactive_insights tool's layer-a). Dismissible, non-intrusive. */
.insights-panel {
    background: rgba(229,142,40,0.06);
    border: 1px solid var(--accent-orange, #e58e28);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.insights-panel .ip-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.insights-panel .ip-dismiss { margin-left: auto; cursor: pointer; color: var(--text-muted); background: none; border: none; font-size: 16px; line-height: 1; }
.insights-panel .ip-item { font-size: 12px; color: var(--text-primary); padding: 2px 0; }
.insights-panel .ip-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 6px; }

/* Catalog (Model Zoo) — unified cross-type grid (#2055 B3). Reuses the
   dep-graph CSS for its graph view; these rules cover the card grid + the
   type badges + the relationship drill-down. */
#catalog-grid.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-md);
}
#catalog-grid.list-view { grid-template-columns: 1fr; }
#catalog-grid.graph-view { display: block; }
.catalog-card {
    background: var(--bg-card);
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.catalog-card:hover { border-color: var(--accent, #4f7df5); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.catalog-card-app { border-left: 3px solid var(--accent, #4f7df5); }
.catalog-card-model { border-left: 3px solid #8b5cf6; }
.catalog-card-dataset { border-left: 3px solid #0d9488; }
.catalog-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catalog-type-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.catalog-type-app { background: rgba(79,125,245,0.12); color: var(--accent, #4f7df5); }
.catalog-type-model { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.catalog-type-dataset { background: rgba(13,148,136,0.12); color: #0d9488; }
.catalog-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
a.catalog-card-name:hover { color: var(--accent, #4f7df5); text-decoration: underline; }
.catalog-card-project { font-size: 12px; color: var(--text-muted); }
.catalog-card-rels { margin-top: 2px; }
.catalog-rel-badge {
    font-size: 11px; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid var(--border, var(--color-border));
    border-radius: 6px; padding: 3px 8px; cursor: pointer;
}
.catalog-rel-badge:hover { border-color: var(--accent, #4f7df5); color: var(--text-primary); }
.catalog-rel-detail { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border, var(--color-border)); display: flex; flex-direction: column; gap: 3px; }
.catalog-rel-row { font-size: 11px; color: var(--text-secondary); }
.catalog-rel-link { text-decoration: none; font-weight: 500; }
.catalog-rel-link.catalog-type-app { color: var(--accent, #4f7df5); }
.catalog-rel-link.catalog-type-model { color: #8b5cf6; }
.catalog-rel-link.catalog-type-dataset { color: #0d9488; }
a.catalog-rel-link:hover { text-decoration: underline; }

/* Models grid - single column row layout */
#apps-grid,
#models-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Datasets grid - single column row layout (same as models) */
#datasets-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* App card row layout - same as model cards */
.app-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.app-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.app-card-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.app-card-link:hover .app-card-name {
    color: var(--color-accent-blue);
    text-decoration: underline;
}

.app-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-blue), #3b82f6);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.app-card-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.app-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: left;
}

.app-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
    text-align: left;
}

.app-card-project {
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.app-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.app-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.app-action-btn svg {
    width: 14px;
    height: 14px;
}

.app-action-btn.app-open-btn {
    background: linear-gradient(135deg, var(--color-accent-blue), #3b82f6);
    color: white;
}

.app-action-btn.app-open-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Responsive app cards */
@media (max-width: 768px) {
    .app-card {
        flex-wrap: wrap;
    }

    .app-card-info {
        flex: 1 1 calc(100% - 60px);
    }

    .app-card-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/* Resource Cards */
.resource-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent-blue);
}

.resource-card.is-favorite::before {
    content: '';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 8px;
    height: 8px;
    background: var(--color-accent-yellow);
    border-radius: 50%;
}

.resource-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.resource-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.resource-icon img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.resource-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
}

/* Favorites resource-header and resource-star */
.resource-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.resource-star {
    width: 24px;
    height: 24px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.resource-star svg {
    width: 20px;
    height: 20px;
}

.resource-star.active {
    color: #f59e0b;
}

.resource-star:hover {
    transform: scale(1.1);
}

/* Favorites List View */
#favorites-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.favorite-item:hover {
    border-color: var(--color-accent-blue);
    background: var(--color-bg-secondary);
}

.favorite-item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.favorite-item-link:hover .favorite-item-name {
    color: var(--color-accent-blue);
    text-decoration: underline;
}

.favorite-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.favorite-item-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.favorite-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.favorite-item-name {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-item-path {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-item-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.favorite-item-stat {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.favorite-item-star {
    width: 24px;
    height: 24px;
    color: #f59e0b;
    flex-shrink: 0;
}

.favorite-item-star svg {
    width: 20px;
    height: 20px;
}

.resource-icon.wiki-icon {
    background: rgba(139, 92, 246, 0.15);
}

.resource-icon.wiki-icon svg {
    color: #8b5cf6;
}

.resource-info {
    flex: 1;
    min-width: 0;
}

.resource-name {
    display: block;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-path {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.resource-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.resource-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.resource-meta-item svg {
    width: 14px;
    height: 14px;
}

/* List View Styles */
.resource-grid.list-view .resource-card {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
}

.resource-grid.list-view .resource-card:hover {
    transform: none;
}

.resource-grid.list-view .resource-card-header {
    margin-bottom: 0;
    flex: 1;
}

.resource-grid.list-view .resource-description {
    display: none;
}

.resource-grid.list-view .resource-meta {
    margin-left: auto;
}

/* Resource List View (Projects, Groups, Wikis) */
/* When resource-list or wiki-groups is inside resource-grid, span full width */
.resource-grid .resource-list,
.resource-grid .wiki-groups {
    grid-column: 1 / -1;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
}

.resource-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-card);
    text-decoration: none;
    transition: background var(--transition-fast);
    position: relative;
}

.resource-list-item:hover {
    background: var(--color-bg-secondary);
}

.resource-list-item.is-favorite::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-accent-yellow);
}

.resource-list-name {
    flex: 1;
    min-width: 150px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.resource-role-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.resource-list-item:hover .resource-list-name {
    color: var(--color-accent-blue);
}

.resource-list-path {
    flex-shrink: 0;
    max-width: 300px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-list-desc {
    flex-shrink: 0;
    max-width: 400px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-list-fav-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    opacity: 0;
}

.resource-list-item:hover .resource-list-fav-btn {
    opacity: 1;
}

.resource-list-fav-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-accent-yellow);
}

.resource-list-fav-btn.active {
    color: var(--color-accent-yellow);
    opacity: 1;
}

.resource-list-fav-btn svg {
    width: 16px;
    height: 16px;
}

/* Resource List Wrapper for action buttons */
.resource-list-item-wrapper {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: background var(--transition-fast);
}

.resource-list-item-wrapper:hover {
    background: var(--color-bg-secondary);
}

.resource-list-item-wrapper .resource-list-item {
    flex: 1;
    background: transparent;
}

.resource-list-item-wrapper:hover .resource-list-item {
    background: transparent;
}

.resource-list-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.resource-list-item-wrapper:hover .resource-list-actions {
    opacity: 1;
}

.resource-list-analyze-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.resource-list-analyze-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.resource-list-analyze-btn svg {
    width: 14px;
    height: 14px;
}

/* App/Model Cards */
.app-card, .model-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-card:hover, .model-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.app-icon, .model-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    font-size: 28px;
}

.app-icon { background: linear-gradient(135deg, #007aff, #5856d6); }
.model-icon { background: linear-gradient(135deg, #af52de, #bf5af2); }

.app-name, .model-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.app-description, .model-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.app-version, .model-type {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

/* Program Management */
.program-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.program-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.breadcrumb-home {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.breadcrumb-home:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-blue);
}

.breadcrumb-home svg {
    width: 18px;
    height: 18px;
}

.breadcrumb-separator {
    color: var(--color-text-tertiary);
}

.breadcrumb-path {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.program-tree-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.program-category {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.category-header:hover {
    background: var(--color-bg-hover);
}

.expand-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    transition: transform var(--transition-fast);
}

.category-header.expanded .expand-icon {
    transform: rotate(90deg);
}

.category-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent-blue);
}

.category-header span {
    font-weight: 500;
    color: var(--color-text-primary);
}

.item-count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.program-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.program-items.expanded {
    max-height: 2000px;
}

.program-items.collapsed {
    max-height: 0;
}

.program-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    padding-left: calc(var(--spacing-lg) + 36px);
    transition: background var(--transition-fast);
    text-decoration: none;
}

.program-item:hover {
    background: var(--color-bg-hover);
}

.program-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.program-item-icon svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.program-item-icon.folder svg { color: var(--color-accent-orange); }
.program-item-icon.file svg { color: var(--color-accent-blue); }

.program-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.program-item-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-item-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Program Management Search Styles - add after .program-item-desc */

.pm-search-toolbar {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-wrap: wrap;
}

.pm-search-bar {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 250px;
}

.pm-search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.pm-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.pm-search-input {
    width: 100%;
    padding: 8px 36px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.pm-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
}

.pm-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.pm-search-clear:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.pm-search-clear svg {
    width: 14px;
    height: 14px;
}

.pm-search-btn {
    padding: 8px 16px;
    background: var(--color-accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.pm-search-btn:hover {
    background: var(--color-accent-blue-hover);
}

.pm-assessment-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 16px;
    background: var(--color-accent-orange);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit; /* <button> UA style otherwise falls back to a smaller system font */
    font-size: var(--font-size-sm);
    line-height: 1.5; /* match the <a> variants so button height/text match exactly */
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.pm-assessment-btn:hover {
    background: #c4550a;
}

.pm-assessment-btn svg {
    width: 16px;
    height: 16px;
}

.pm-search-results {
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
}

.pm-search-results.hidden {
    display: none;
}

.pm-search-loading,
.pm-search-empty,
.pm-search-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
    text-align: center;
}

.pm-search-loading svg,
.pm-search-empty svg,
.pm-search-error svg {
    color: var(--color-text-tertiary);
}

.pm-search-error svg {
    color: var(--color-accent-red);
}

.pm-search-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.pm-search-header h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.pm-search-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pm-back-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    padding: 6px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pm-back-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.pm-search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pm-result-group {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pm-result-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.pm-result-group-header svg {
    color: var(--color-accent-orange);
}

.pm-result-group-count {
    color: var(--color-text-tertiary);
    font-weight: 400;
}

.pm-result-group-items {
    display: flex;
    flex-direction: column;
}

.pm-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.pm-result-item:hover {
    background: var(--color-bg-hover);
}

.pm-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.pm-result-icon svg {
    width: 16px;
    height: 16px;
}

.pm-result-icon.folder svg {
    color: var(--color-accent-orange);
}

.pm-result-icon.file svg {
    color: var(--color-accent-blue);
}

.pm-result-name {
    flex: 1;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-result-name mark {
    background: rgba(237, 137, 54, 0.3);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
}

/* Auth Error State Styles */
.auth-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
}

.auth-error-icon {
    width: 48px;
    height: 48px;
    color: var(--color-accent-orange);
}

.auth-error-state h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.auth-error-state p {
    margin: 0;
    font-size: var(--font-size-sm);
    max-width: 300px;
}

.auth-error-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 10px 20px;
    background: var(--color-accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-error-btn:hover {
    background: var(--color-accent-blue-hover);
    transform: translateY(-1px);
}

.auth-error-btn svg {
    flex-shrink: 0;
}


/* Onboarding Section */
.onboarding-container {
    padding: var(--spacing-md);
}

.onboarding-loading,
.onboarding-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.onboarding-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.onboarding-card:hover {
    border-color: var(--color-accent-green);
    background: var(--color-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.onboarding-card.key-resource {
    border-left: 3px solid var(--color-accent-green);
}

.onboarding-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.onboarding-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-green);
}

.onboarding-card.key-resource .onboarding-card-icon {
    background: rgba(45, 90, 39, 0.15);
}

.onboarding-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.onboarding-card-title {
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.onboarding-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent-green);
    background: rgba(45, 90, 39, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

/* Onboarding List View */
.onboarding-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.onboarding-list-item.key-resource {
    background: rgba(45, 90, 39, 0.05);
}

.onboarding-list-item.key-resource:hover {
    background: rgba(45, 90, 39, 0.1);
}

.onboarding-list-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.onboarding-list-icon svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-green);
}

.onboarding-list-item.key-resource .onboarding-list-icon {
    background: rgba(45, 90, 39, 0.15);
}

.onboarding-list-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent-green);
    background: rgba(45, 90, 39, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.resource-list-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.resource-list-item:hover .resource-list-arrow {
    transform: translateX(2px);
    color: var(--color-text-secondary);
}

/* List Items */
.list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    text-decoration: none;
}

.list-item:hover {
    background: var(--color-bg-hover);
}

.list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.list-item-icon img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.list-item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
}

.list-item-content {
    flex: 1;
    min-width: 0;
}

.list-item-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-subtitle {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.list-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: right;
}


/* Request Title */
.mar-request-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.mar-card-body:empty {
    display: none;
}

/* Make cards more compact when no resources */
.mar-card-body .mar-resource-counts:empty {
    display: none;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.empty-state h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Secondary hint line under an empty-state heading (#2056 UX polish):
   explains what populates the section / offers a next-action link. */
.empty-state-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
    max-width: 420px;
}
.empty-state-hint a {
    color: var(--color-primary, #007aff);
    text-decoration: none;
    white-space: nowrap;
}
.empty-state-hint a:hover { text-decoration: underline; }
.empty-state-hint code {
    font-size: 0.85em;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--color-bg-tertiary, rgba(127,127,127,0.15));
}

/* Inline Retry affordance for failed loads (#2056 UX polish). */
.retry-action {
    margin-top: var(--spacing-sm);
}
.retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border, rgba(127,127,127,0.3));
    border-radius: 6px;
    background: var(--color-bg-secondary, transparent);
    color: var(--color-text-primary);
    cursor: pointer;
}
.retry-btn:hover { background: var(--color-bg-tertiary, rgba(127,127,127,0.12)); }

/* Discoverability hint toast (#2056 UX polish): one-time, dismissible, bottom-right. */
.core-discovery-hint {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-bg-elevated, #1e1e2e);
    color: var(--color-text-primary, #fff);
    border: 1px solid rgba(249,115,22,0.35);
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    font-size: var(--font-size-sm, 13px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.core-discovery-hint.visible { opacity: 1; transform: translateY(0); }
.core-discovery-hint .cdh-spark { font-size: 16px; line-height: 1; }
.core-discovery-hint .cdh-text { flex: 1; }
.core-discovery-hint a {
    color: #f97316;
    text-decoration: none;
    font-weight: 600;
}
.core-discovery-hint a:hover { text-decoration: underline; }
.core-discovery-hint .cdh-dismiss {
    background: none;
    border: none;
    color: var(--color-text-tertiary, #a1a1aa);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}
.core-discovery-hint .cdh-dismiss:hover { background: rgba(127,127,127,0.18); color: var(--color-text-primary, #fff); }

/* Skeleton Loading */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.skeleton-item {
    height: 56px;
    background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.skeleton-grid.full {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.skeleton-card {
    height: 160px;
    background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-lg);
}

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

/* Footer */
.footer {
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.footer-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.footer-brand {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.footer-separator { opacity: 0.3; }

/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.detail-modal-content {
    max-width: 600px;
    text-align: left;
}

.modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
}

.modal-icon.error {
    background: rgba(255, 59, 48, 0.1);
}

.modal-icon.error svg {
    width: 32px;
    height: 32px;
    color: var(--color-accent-red);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.modal-message {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.modal-btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.modal-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-section {
        grid-template-columns: repeat(3, 1fr);
    }

    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .overview-grid .activity-card {
        grid-row: span 1;
    }

    .overview-grid .favorites-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0 var(--spacing-md);
    }

    .header-nav {
        display: none;
    }

    .search-trigger {
        min-width: auto;
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .search-placeholder,
    .search-kbd {
        display: none;
    }

    .user-name,
    .user-dropdown-icon {
        display: none;
    }

    .main-content {
        padding: var(--spacing-md);
    }

    .welcome-title {
        font-size: var(--font-size-2xl);
    }

    .stats-section {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-grid .favorites-card {
        grid-column: span 1;
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-number {
        font-size: var(--font-size-xl);
    }

    .resource-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-section {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PHASE 1-3 NEW FEATURES
   ============================================ */

/* Classification Banner */
.classification-banner {
    background: #2d5a27;
    color: white;
    text-align: center;
    /* Deterministic height that matches --classification-banner-height so the
       sticky header (offset by that variable) is never overlapped. No vertical
       padding (box-sizing: border-box), single line only — wrapping used to
       grow the banner past its 24px offset and clip the help "?" (#1994). */
    height: var(--classification-banner-height);
    line-height: var(--classification-banner-height);
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1001;
}

.classification-banner a {
    color: white;
    text-decoration: underline;
}

.classification-banner a:hover {
    color: #90EE90;
}

/* L4.2 — Build-freshness banner. Sits directly below the classification
   banner and suggests a hard-reload when the page appears cached. */
.stale-build-banner {
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffecb5;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: var(--classification-banner-height);
    z-index: 1000;
}

.stale-build-banner-dismiss {
    background: transparent;
    border: 0;
    color: #664d03;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.stale-build-banner-dismiss:hover {
    color: #000;
}

.classification-banner-bottom {
    background: #2d5a27;
    color: white;
    text-align: center;
    padding: 4px 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.classification-banner-bottom a {
    color: white;
    text-decoration: underline;
}

.classification-banner-bottom a:hover {
    color: #90EE90;
}

/* Adjust header position for classification banner */
.header {
    top: var(--classification-banner-height);
}

/* Icon Button (Help) */
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Feedback Button */
.feedback-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-accent-green);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.feedback-btn:hover {
    background: #245a1f;
    transform: translateY(-1px);
}

.feedback-btn svg {
    width: 16px;
    height: 16px;
}

/* Footer Link */
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-accent-green);
}

.footer-link svg {
    flex-shrink: 0;
}

/* Features Page */
.features-container {
    padding: var(--spacing-md);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.feature-category {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.feature-category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent-green);
}

.feature-category-title svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent-green);
}

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

.feature-list li {
    padding: var(--spacing-sm) 0;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
    line-height: 1.5;
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li strong {
    color: var(--color-text-primary);
}

.feature-list kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

/* Scope Limitations Section */
.feature-category.scope-limitations {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(245, 158, 11, 0.05));
    border-color: rgba(251, 191, 36, 0.3);
}

.feature-category.scope-limitations .feature-category-title svg {
    color: #f59e0b;
}

.scope-intro {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.scope-list > li {
    padding: var(--spacing-md) 0 !important;
}

.scope-sources {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 var(--spacing-lg);
}

.scope-sources li {
    padding: var(--spacing-xs) 0 !important;
    border-bottom: none !important;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.scope-sources code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.scope-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid #10b981;
}

/* Help Panel */
.help-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: var(--color-bg-card);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    z-index: 10003;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-normal);
}

.help-panel.open {
    right: 0;
}

.help-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.help-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.help-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.help-panel-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.help-panel-header h2 svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-blue);
}

.help-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
}

.help-panel-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.help-panel-close svg {
    width: 18px;
    height: 18px;
}

.help-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.help-section {
    margin-bottom: var(--spacing-xl);
}

.help-section h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.help-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.help-shortcut-keys {
    display: flex;
    gap: var(--spacing-xs);
}

.help-tips {
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.help-tips li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-md);
    position: relative;
}

.help-tips li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent-blue);
}

.help-panel-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.help-tour-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.help-tour-btn:hover {
    background: var(--color-bg-hover);
}

.help-tour-btn svg {
    width: 16px;
    height: 16px;
}

/* Quick Tips Banner */
.tips-banner {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1));
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-xl);
}

.tips-banner-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.tips-icon {
    width: 18px;
    height: 18px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.tips-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.tips-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
}

.tips-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.tips-close svg {
    width: 14px;
    height: 14px;
}

/* Onboarding Tour */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10004;
    backdrop-filter: blur(8px);
}

.onboarding-modal {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.onboarding-header {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-lg);
}

.onboarding-header svg {
    width: 56px;
    height: 56px;
    color: var(--color-accent-blue);
    margin-bottom: var(--spacing-md);
}

.onboarding-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.onboarding-header p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

.onboarding-content {
    padding: 0 var(--spacing-xl);
}

.onboarding-step {
    display: none;
}

.onboarding-step.active {
    display: block;
}

.onboarding-step-content {
    text-align: center;
    padding: var(--spacing-lg);
}

.onboarding-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-blue), #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
}

.onboarding-step-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.onboarding-step h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.onboarding-step p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}

.onboarding-progress {
    display: flex;
    gap: var(--spacing-sm);
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: all var(--transition-fast);
}

.onboarding-dot.active {
    background: var(--color-accent-blue);
    width: 24px;
    border-radius: 4px;
}

.onboarding-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.onboarding-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.onboarding-btn.secondary {
    background: transparent;
    color: var(--color-text-secondary);
}

.onboarding-btn.secondary:hover {
    background: var(--color-bg-hover);
}

.onboarding-btn.primary {
    background: var(--color-accent-blue);
    color: white;
}

.onboarding-btn.primary:hover {
    opacity: 0.9;
}

/* Login Screen */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.login-container {
    max-width: 400px;
    width: 90%;
}

.login-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.login-header svg {
    width: 56px;
    height: 56px;
    color: var(--color-accent-blue);
    margin-bottom: var(--spacing-lg);
}

.login-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.login-header p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-md);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.login-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.login-btn svg {
    width: 20px;
    height: 20px;
}

.login-footer {
    margin-top: var(--spacing-xl);
}

.login-footer p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* User Dropdown */
.user-menu {
    position: relative;
}

.user-avatar-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.user-avatar-btn:hover {
    background: var(--color-bg-hover);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    min-width: 240px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    animation: fadeIn var(--transition-fast);
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
}

.dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.dropdown-user-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.dropdown-user-email {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--color-border);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-align: left;
    transition: background var(--transition-fast);
}

.user-dropdown-item:hover {
    background: var(--color-bg-hover);
}

.user-dropdown-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.user-dropdown-item.logout {
    color: var(--color-accent-red);
}

.user-dropdown-item.logout svg {
    color: var(--color-accent-red);
}

/* ============================================
   LEFT SIDEBAR NAVIGATION
   ============================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--classification-banner-height) + var(--header-height)); /* Classification banner + header */
    bottom: 0;
    width: 220px;
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    z-index: 99;
    padding: var(--spacing-md) 0;
    transition: transform var(--transition-normal);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sidebar-section {
    padding: var(--spacing-sm) var(--spacing-md);
}

.sidebar-section-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    padding: var(--spacing-sm) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    text-align: left;
}

.sidebar-nav-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.sidebar-nav-btn.active {
    background: var(--color-bg-active);
    color: var(--color-accent-blue);
}

.sidebar-nav-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-nav-btn.active svg {
    color: var(--color-accent-blue);
}

.sidebar-nav-btn .nav-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
}

.sidebar-feedback {
    color: var(--color-accent-green);
}

.sidebar-feedback:hover {
    background: rgba(45, 90, 39, 0.1);
    color: var(--color-accent-green);
}

.sidebar-feedback svg {
    color: var(--color-accent-green);
}

/* Adjust main content for sidebar */
.app {
    display: flex;
    flex-direction: column;
}

.main-content {
    margin-left: 220px;
}

.footer {
    margin-left: 220px;
}

/* Responsive - hide sidebar on smaller screens */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .main-content {
        margin-left: 0;
    }

    .footer {
        margin-left: 0;
    }
}

/* ============================================
   FOOTER NAVIGATION
   ============================================ */
.footer {
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.footer-nav-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-nav-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xs);
}

.footer-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Wide section for Resources - spans 2 columns */
.footer-nav-section-wide {
    grid-column: span 2;
}

/* 3-column layout for Resources links */
.footer-nav-links-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs) var(--spacing-lg);
}

.footer-nav-btn {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: left;
    padding: var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.footer-nav-btn:hover {
    color: var(--color-accent-blue);
}

.footer-nav-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.footer-nav-link:hover {
    color: var(--color-accent-green);
}

.footer-bottom {
    padding: var(--spacing-lg) var(--spacing-xl);
}

.footer-bottom .footer-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Responsive footer navigation */
@media (max-width: 768px) {
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .footer-nav {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DOCUMENTS SEARCH SECTION
   ============================================ */
.documents-search-bar {
    margin-top: var(--spacing-lg);
}

.documents-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all var(--transition-fast);
}

.documents-search-input-wrapper:focus-within {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.documents-search-input-wrapper .search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.documents-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    outline: none;
}

.documents-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.documents-search-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.documents-search-btn:hover {
    background: var(--color-accent-blue-hover);
}

.documents-search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.documents-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-sm);
}

.documents-search-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.search-scope-label {
    font-weight: 500;
}

.search-scope-item {
    padding: 2px 8px;
    background: var(--color-bg-active);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.documents-results {
    margin-top: var(--spacing-xl);
    min-height: 200px;
}

.documents-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
    color: var(--color-text-tertiary);
}

.documents-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.documents-empty-state h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.documents-empty-state p {
    max-width: 400px;
    line-height: 1.5;
}

.documents-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
}

.documents-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

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

.documents-loading p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.document-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.document-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.document-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.document-icon svg {
    width: 20px;
    height: 20px;
}

.document-icon.pdf { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.document-icon.doc { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.document-icon.xls { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.document-icon.md { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.document-icon.txt { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.document-icon.default { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

.document-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.document-name {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-path {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-preview {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-preview mark {
    background: rgba(250, 204, 21, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.document-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.document-project {
    padding: 2px 6px;
    background: var(--color-bg-active);
    border-radius: var(--radius-sm);
}

.documents-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.documents-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.documents-results-count strong {
    color: var(--color-text-primary);
}

/* ============================================
   DOCUMENT SEARCH LIST VIEW
   ============================================ */

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* SEND TO AI FEATURE - Wrapper for document result + AI button */
.document-list-item-wrapper {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-card);
}

.document-list-item-wrapper .document-list-item {
    flex: 1;
}

.document-list-item-wrapper .document-send-ai {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    background: var(--color-accent-blue);
    border: none;
    cursor: pointer;
    color: white;
    transition: background var(--transition-fast);
}

.document-list-item-wrapper .document-send-ai:hover {
    background: #0066d6;
}

.document-list-item-wrapper .document-send-ai svg {
    width: 16px;
    height: 16px;
}

.document-list-item {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    transition: background var(--transition-fast);
}

.document-list-item:hover {
    background: var(--color-bg-hover);
}

.document-list-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-primary);
    min-height: 44px;
}

.document-list-type {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    background: var(--color-bg-active);
    color: var(--color-text-secondary);
    min-width: 36px;
    text-align: center;
}

.document-list-type.pdf { background: #fee2e2; color: #dc2626; }
.document-list-type.doc,
.document-list-type.docx { background: #dbeafe; color: #2563eb; }
.document-list-type.md { background: #e0e7ff; color: #4f46e5; }
.document-list-type.txt { background: #f3f4f6; color: #6b7280; }
.document-list-type.js,
.document-list-type.ts { background: #fef3c7; color: #d97706; }
.document-list-type.py { background: #d1fae5; color: #059669; }
.document-list-type.java { background: #fee2e2; color: #dc2626; }
.document-list-type.json { background: #fce7f3; color: #db2777; }
.document-list-type.yaml,
.document-list-type.yml { background: #ede9fe; color: #7c3aed; }

[data-theme="dark"] .document-list-type.pdf { background: rgba(220, 38, 38, 0.2); color: #f87171; }
[data-theme="dark"] .document-list-type.doc,
[data-theme="dark"] .document-list-type.docx { background: rgba(37, 99, 235, 0.2); color: #60a5fa; }
[data-theme="dark"] .document-list-type.md { background: rgba(79, 70, 229, 0.2); color: #a5b4fc; }
[data-theme="dark"] .document-list-type.txt { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

.document-list-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.document-list-name mark {
    background: rgba(250, 204, 21, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Match type indicator for hybrid search */
.document-match-type {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.document-match-type.match-content {
    background: #dbeafe;
    color: #1d4ed8;
}

.document-match-type.match-filename {
    background: #fef3c7;
    color: #d97706;
}

.document-match-type.match-both {
    background: #d1fae5;
    color: #059669;
}

[data-theme="dark"] .document-match-type.match-content {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .document-match-type.match-filename {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .document-match-type.match-both {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

.document-list-path {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-list-project {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    background: var(--color-bg-active);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
}

.document-list-toggle {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.document-list-toggle:hover {
    background: var(--color-bg-active);
    color: var(--color-text-secondary);
}

.document-list-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.document-list-item.expanded .document-list-toggle svg {
    transform: rotate(180deg);
}

.document-list-item {
    position: relative;
}

.document-list-main {
    padding-right: 48px;
}

.document-list-preview {
    display: none;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
}

.document-list-item.expanded .document-list-preview {
    display: block;
}

.document-list-preview mark {
    background: rgba(250, 204, 21, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Responsive adjustments for document list */
@media (max-width: 768px) {
    .document-list-main {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .document-list-path {
        display: none;
    }

    .document-list-name {
        flex-basis: calc(100% - 60px);
    }
}

/* ============================================
   WIKI CONTENT SEARCH (ADVANCED SEARCH)
   ============================================ */

.wiki-content-search-panel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.wiki-content-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.wiki-content-search-header h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.wiki-content-search-header .panel-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent-blue);
}

.advanced-search-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-accent-blue), #5856d6);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wiki-content-search-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.wiki-content-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wiki-content-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.wiki-content-search-input-wrapper .search-icon {
    position: absolute;
    left: var(--spacing-md);
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.wiki-content-search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.wiki-content-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.wiki-content-search-input::placeholder {
    color: var(--color-text-tertiary);
}

/* Wiki Search Results Container */
.wiki-search-results {
    margin-top: var(--spacing-lg);
    min-height: 100px;
}

.wiki-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.wiki-search-empty .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.wiki-search-empty h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.wiki-search-empty p {
    font-size: var(--font-size-sm);
    margin: 0;
}

.wiki-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.wiki-search-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.wiki-search-loading p {
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.wiki-search-header {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

.wiki-search-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wiki-search-count strong {
    color: var(--color-text-primary);
}

/* Wiki Search Result Items */
.wiki-search-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* SEND TO AI FEATURE - Wrapper for wiki result item + AI button */
.wiki-search-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.wiki-search-item-wrapper .wiki-search-item {
    flex: 1;
}

.wiki-search-item {
    display: block;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.wiki-search-item:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.wiki-search-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.wiki-search-item .wiki-icon {
    width: 18px;
    height: 18px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.wiki-search-item-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.wiki-search-item-project {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.wiki-search-item-snippet {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wiki-search-item-snippet mark {
    background: rgba(255, 204, 0, 0.3);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

[data-theme="dark"] .wiki-search-item-snippet mark {
    background: rgba(255, 204, 0, 0.25);
}

/* Wiki List Header */
.wiki-list-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
    .wiki-content-search-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .wiki-search-item-header {
        flex-wrap: wrap;
    }

    .wiki-search-item-project {
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
}

/* ============================================
   WIKI PAGES GROUPED BY PROJECT
   ============================================ */

.wiki-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wiki-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-primary);
}

.wiki-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.wiki-group-header:hover {
    background: var(--color-bg-hover);
}

.wiki-group-chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.wiki-group.expanded .wiki-group-chevron {
    transform: rotate(90deg);
}

.wiki-group-name {
    flex: 1;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    word-break: break-word;
}

.wiki-group-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.wiki-group-content {
    display: none;
    border-top: 1px solid var(--color-border);
}

.wiki-group.expanded .wiki-group-content {
    display: block;
}

.wiki-group-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-md) + 24px);
    text-decoration: none;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}

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

.wiki-group-item:hover {
    background: var(--color-bg-hover);
}

.wiki-item-icon {
    width: 16px;
    height: 16px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.wiki-item-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter styling for grouped wikis */
.wiki-group[style*="display: none"] {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .wiki-group-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .wiki-group-item {
        padding-left: var(--spacing-lg);
    }
}

/* ============================================
   CODE SEARCH SECTION
   ============================================ */

.code-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.code-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.code-search-input-wrapper:focus-within {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.code-search-input-wrapper .search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.code-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    outline: none;
}

.code-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.code-search-btn {
    background: var(--color-accent-blue);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.code-search-btn:hover {
    background: var(--color-accent-blue-hover);
}

.code-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.code-search-filters .filter-select {
    min-width: 140px;
}

/* Code Results */
.code-results {
    margin-top: var(--spacing-lg);
}

.code-empty-state {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--color-text-secondary);
}

.code-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-lg);
}

.code-empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.code-empty-state p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0 auto;
}

.code-search-tips {
    margin-top: var(--spacing-lg);
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.code-search-tips .tips-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    display: block;
    margin-bottom: var(--spacing-sm);
}

.code-search-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.code-search-tips li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) 0;
}

.code-search-tips code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
}

.code-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.code-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.code-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.code-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ROLLBACK: Send to AI button wrapper for code results */
.code-result-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.code-result-item-wrapper .code-result-item {
    flex: 1;
}

.code-result-item {
    display: block;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.code-result-item:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.code-result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}

.code-result-header .code-icon {
    width: 16px;
    height: 16px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.code-result-filename {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.code-result-path {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-result-project {
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.code-result-line {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
}

.code-result-snippet {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    overflow-x: auto;
}

.code-result-snippet pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-result-snippet code {
    color: var(--color-text-primary);
}

.code-result-snippet mark {
    background: rgba(255, 200, 50, 0.4);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

/* Language-specific snippet styling */
.code-result-snippet.lang-javascript code,
.code-result-snippet.lang-typescript code {
    color: #f0db4f;
}

.code-result-snippet.lang-python code {
    color: #3572A5;
}

.code-result-snippet.lang-java code {
    color: #b07219;
}

.code-result-snippet.lang-ruby code {
    color: #701516;
}

.code-result-snippet.lang-go code {
    color: #00ADD8;
}

/* Dark theme overrides for code snippets */
[data-theme="dark"] .code-result-snippet {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .code-result-snippet.lang-javascript code,
[data-theme="dark"] .code-result-snippet.lang-typescript code {
    color: #f0db4f;
}

[data-theme="dark"] .code-result-snippet.lang-python code {
    color: #6fa8dc;
}

/* Responsive */
@media (max-width: 768px) {
    .code-search-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .code-search-filters .filter-select {
        width: 100%;
    }

    .code-result-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .code-result-path {
        width: 100%;
    }
}

/* ============================================
   ISSUES SEARCH SECTION
   ============================================ */

.issues-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.issues-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.issues-search-input-wrapper .search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.issues-search-input-wrapper:focus-within {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.issues-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    outline: none;
}

.issues-search-btn {
    background: var(--color-accent-blue);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.issues-search-btn:hover {
    background: var(--color-accent-blue-hover);
}

.issues-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-sm);
}

/* Go to issue # — jump straight to a specific issue in a new tab */
.issues-goto {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.issues-goto-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.issues-goto-input {
    width: 92px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.issues-goto-input:focus {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.issues-goto-input.issues-goto-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* clean look: drop the number-spinner arrows */
.issues-goto-input::-webkit-outer-spin-button,
.issues-goto-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.issues-goto-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.issues-goto-btn {
    background: var(--color-accent-blue);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.issues-goto-btn:hover {
    background: var(--color-accent-blue-hover);
}

/* Toggle Filter Styles */
.toggle-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    user-select: none;
}

.toggle-filter input {
    display: none;
}

.toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--color-border);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-filter input:checked + .toggle-slider {
    background: var(--color-primary);
}

.toggle-filter input:checked + .toggle-slider::after {
    transform: translateX(16px);
}

.toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.toggle-filter input:checked ~ .toggle-label {
    color: var(--color-primary);
}

/* Label Filter Dropdown Styles */
.label-filter-wrapper {
    position: relative;
}

.label-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.label-filter-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

.label-filter-btn.active {
    background: var(--color-bg-active);
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue);
}

.label-filter-btn .label-icon {
    width: 14px;
    height: 14px;
}

.label-count-badge {
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.label-filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    width: 320px;
    max-height: 400px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.label-dropdown-header {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.label-dropdown-search {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.label-dropdown-search:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.label-dropdown-search::placeholder {
    color: var(--color-text-tertiary);
}

.label-clear-btn {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.label-clear-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.label-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--spacing-xs);
    background: var(--color-bg-card);
}

.label-dropdown-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.label-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.label-dropdown-item:hover {
    background: var(--color-bg-hover);
}

.label-dropdown-item.selected {
    background: var(--color-bg-active);
}

.label-dropdown-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.label-dropdown-item.selected .label-dropdown-checkbox {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

.label-dropdown-checkbox svg {
    width: 10px;
    height: 10px;
    stroke: white;
    stroke-width: 3;
    opacity: 0;
}

.label-dropdown-item.selected .label-dropdown-checkbox svg {
    opacity: 1;
}

.label-dropdown-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.label-dropdown-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-dropdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.label-dropdown-source {
    font-size: 10px;
    color: var(--color-accent-blue);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.label-dropdown-source:hover {
    opacity: 1;
    text-decoration: underline;
}

.label-dropdown-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Selected labels chips below search bar */
.issues-selected-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.selected-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
}

.selected-label-chip .chip-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.selected-label-chip .chip-remove {
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-label-chip .chip-remove:hover {
    opacity: 1;
}

.issues-results {
    margin-top: var(--spacing-lg);
}

.issues-empty-state {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--color-text-secondary);
}

.issues-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    color: var(--color-text-tertiary);
    margin: 0 auto var(--spacing-lg) auto;
    display: block;
}

.issues-empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.issues-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-3xl);
}

.issues-results-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.issues-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.issues-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.issue-result-item {
    display: block;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.issue-result-item:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* SEND TO AI FEATURE - Wrapper for result item + AI button */
.issue-result-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.issue-result-item-wrapper .issue-result-item {
    flex: 1;
}

/* ROLLBACK: Send to AI button - purple AI theme */
.send-to-ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.send-to-ai-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.send-to-ai-btn:active {
    transform: translateY(0);
}

.send-to-ai-btn svg {
    width: 20px;
    height: 20px;
    fill: white;
    stroke: none;
    transition: transform var(--transition-fast);
}

.send-to-ai-btn:hover svg {
    transform: scale(1.1);
}

.issue-result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.issue-state {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.issue-state.state-open {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.issue-state.state-closed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.issue-title {
    flex: 1;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.issue-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: auto;
}

.issue-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.issue-project {
    color: var(--color-accent-blue);
}

.issue-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.issue-label {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 500;
    border: 1px solid #c7d2fe;
}

/* ============================================
   ISSUE BOARDS SECTION
   ============================================ */

.issueboards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.issueboards-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.issueboards-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.issueboards-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.issueboard-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.issueboard-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.issueboard-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.issueboard-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.issueboard-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.issueboard-info {
    flex: 1;
    min-width: 0;
}

.issueboard-name {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    font-size: var(--font-size-md);
}

.issueboard-project {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issueboard-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.issueboard-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.issueboard-meta-item svg {
    width: 14px;
    height: 14px;
}

.issueboard-link {
    margin-left: auto;
    color: var(--color-accent-blue);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.issueboard-link:hover {
    text-decoration: underline;
}

.issueboard-link svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   MANAGE REQUESTS SECTION
   ============================================ */

.managerequests-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.managerequests-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.managerequests-results {
    margin-top: var(--spacing-lg);
}

.managerequests-empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.managerequests-empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
    color: var(--color-text-tertiary);
}

.managerequests-empty-state h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.managerequests-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.managerequests-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

.managerequests-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.managerequests-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.request-result-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.request-result-item-wrapper:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.request-result-item {
    flex: 1;
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.request-result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.request-type-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.request-type-badge.service {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.request-type-badge.access {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.request-state {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.request-state.state-open {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.request-state.state-closed {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.request-title {
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.request-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.request-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.request-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--spacing-xs);
}

.request-label {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.request-result-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
}

/* ============================================
   MERGE REQUESTS SEARCH SECTION
   ============================================ */

.mrs-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.mrs-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mrs-search-input-wrapper .search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.mrs-search-input-wrapper:focus-within {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mrs-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    outline: none;
}

.mrs-search-btn {
    background: var(--color-accent-blue);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mrs-search-btn:hover {
    background: var(--color-accent-blue-hover);
}

.mrs-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-sm);
}

.mrs-results {
    margin-top: var(--spacing-lg);
}

.mrs-empty-state {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--color-text-secondary);
}

.mrs-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    color: var(--color-text-tertiary);
    margin: 0 auto var(--spacing-lg) auto;
    display: block;
}

.mrs-empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.mrs-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-3xl);
}

.mrs-results-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.mrs-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.mrs-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mr-result-item {
    display: block;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mr-result-item:hover {
    border-color: var(--color-accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* SEND TO AI FEATURE - Wrapper for MR result item + AI button */
.mr-result-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mr-result-item-wrapper .mr-result-item {
    flex: 1;
}

.mr-result-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.mr-state {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.mr-state.state-open {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.mr-state.state-merged {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.mr-state.state-closed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.mr-title {
    flex: 1;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.mr-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: auto;
}

.mr-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.mr-project {
    color: var(--color-accent-blue);
}

.mr-branches {
    font-family: var(--font-mono);
}

/* ============================================
   FAVORITES DETAILS MODAL
   ============================================ */

/* Section Header with Details Button */
.section-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.section-info-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.section-info-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.section-info-btn svg {
    width: 16px;
    height: 16px;
}

.section-info-btn.spinning svg {
    animation: spin 1s linear infinite;
}

/* EKS Containers link button with orange theme */
.section-info-btn.eks-containers-link {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.15));
    border-color: rgba(249, 115, 22, 0.3);
    color: #ea580c;
}

.section-info-btn.eks-containers-link:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(234, 88, 12, 0.25));
    border-color: rgba(249, 115, 22, 0.5);
    color: #c2410c;
}

.section-info-btn.eks-containers-link svg {
    color: #f97316;
}

/* Last Refresh Time Display */
.last-refresh-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-right: var(--spacing-sm);
}

.last-refresh-time:empty {
    display: none;
}

/* Data Source Indicator - shows Cached vs Live */
.data-source-indicator {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-source-indicator:empty {
    display: none;
}

/* Routine "Cached (Xm)" / "Live API" pill is hidden to reduce header clutter.
   The orange STALE-CACHE warning below is intentionally kept — it signals
   genuinely outdated data (past TTL / API unreachable) and must stay visible. */
.data-source-indicator.cached,
.data-source-indicator.live {
    display: none;
}

.data-source-indicator.stale {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
}

/* Prominent Details Button - for Favorites */
.section-info-btn.prominent {
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-accent-blue), #5856d6);
    border: none;
    color: white;
    font-size: var(--font-size-md);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.section-info-btn.prominent:hover {
    background: linear-gradient(135deg, #0066d6, #4745c4);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.section-info-btn.prominent svg {
    width: 18px;
    height: 18px;
}

/* Favorites Details Modal Specific Styles */
.favorites-details-content {
    max-width: 700px;
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
}

.favorites-details-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
}

.favorites-details-content .modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.favorites-details-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Details Sections */
.details-section {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.details-section h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.details-section ul,
.details-section ol {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.details-section li {
    margin-bottom: var(--spacing-sm);
}

.details-section li:last-child {
    margin-bottom: 0;
}

.details-section code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
}

.details-section p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Limitations List */
.limitations-list {
    list-style: none;
    padding-left: 0 !important;
}

.limitations-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.limitation-icon {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
}

/* Solutions Table */
.solutions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.solutions-table th,
.solutions-table td {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.solutions-table th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.solutions-table td {
    color: var(--color-text-secondary);
    vertical-align: top;
}

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

.solutions-table strong {
    color: var(--color-text-primary);
}

/* Modal backdrop click target */
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* ============================================
   MR SUBMIT SECTION
   ============================================ */

.mrsubmit-container {
    max-width: 900px;
}

.mrsubmit-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.mrsubmit-step {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.mrsubmit-step-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: 50%;
}

.step-title {
    font-weight: 600;
    color: var(--color-text-primary);
}

.mrsubmit-filters {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.mrsubmit-select {
    min-width: 200px;
    flex: 1;
}

/* Mode Toggle */
.mrsubmit-mode-toggle {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.mode-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.mode-option:hover {
    color: var(--color-text-primary);
}

.mode-option input[type="radio"] {
    accent-color: var(--color-accent-blue);
}

.mode-option input[type="radio"]:checked + span {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Mode Hint (shown in update mode) */
.mrsubmit-mode-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--color-accent-blue-light, rgba(0, 122, 255, 0.1));
    border: 1px solid var(--color-accent-blue);
    border-radius: var(--radius-md);
    color: var(--color-accent-blue);
    font-size: var(--font-size-sm);
}

.mrsubmit-mode-hint svg {
    flex-shrink: 0;
    stroke: var(--color-accent-blue);
}

/* Tree Container */
.mrsubmit-tree-container {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.mrsubmit-tree-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--color-text-tertiary);
    text-align: center;
    gap: var(--spacing-sm);
}

.mrsubmit-tree-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.mrsubmit-tree-placeholder p {
    font-size: var(--font-size-sm);
}

/* Tree Items */
.tree-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}

.tree-item:hover {
    background: var(--color-bg-hover);
}

.tree-item.selected {
    background: var(--color-bg-active);
}

.tree-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tree-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tree-item.folder svg {
    color: var(--color-accent-orange);
}

.tree-item.file svg {
    color: var(--color-text-tertiary);
}

.tree-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-children {
    margin-left: 20px;
    border-left: 1px solid var(--color-border);
    padding-left: 8px;
}

.tree-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.tree-loading .spinner-small {
    width: 14px;
    height: 14px;
}

/* Selected Path */
.mrsubmit-selected-path {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.mrsubmit-selected-path label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.mrsubmit-selected-path span {
    color: var(--color-text-primary);
    font-family: monospace;
}

/* Upload Area */
.mrsubmit-upload-area {
    margin-bottom: var(--spacing-md);
}

.mrsubmit-upload-area .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.mrsubmit-upload-area:hover .upload-content,
.mrsubmit-upload-area.dragover .upload-content {
    border-color: var(--color-accent-blue);
    background: rgba(0, 122, 255, 0.05);
}

.mrsubmit-upload-area .upload-icon,
.mrsubmit-upload-area svg.upload-icon,
#mrsubmit-dropzone .upload-icon,
#mrsubmit-dropzone svg.upload-icon,
.mrsubmit-upload-area .upload-content svg,
#mrsubmit-dropzone .upload-content svg,
#section-mrcreate .upload-icon,
#section-mrcreate .upload-content svg {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

.mrsubmit-upload-area .upload-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.mrsubmit-upload-area .upload-input {
    display: none;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--color-accent-blue);
    background: rgba(0, 122, 255, 0.05);
}

.upload-dropzone svg {
    width: 48px;
    height: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
}

.upload-dropzone p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.upload-browse-btn {
    color: var(--color-accent-blue);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.upload-browse-btn:hover {
    text-decoration: underline;
}

.upload-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* File Info */
.upload-file-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.upload-file-info svg {
    width: 32px;
    height: 32px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-details .file-name {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-details .file-size {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.file-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.file-remove-btn:hover {
    background: var(--color-accent-red);
    color: white;
}

.file-remove-btn svg {
    width: 18px;
    height: 18px;
}

/* Multi-file List */
.mrsubmit-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.mrsubmit-file-list.hidden {
    display: none;
}

.mrsubmit-file-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xs);
}

.mrsubmit-file-list-header .file-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.mrsubmit-clear-all {
    font-size: var(--font-size-xs);
    color: var(--color-accent-red);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.mrsubmit-clear-all:hover {
    background: rgba(239, 68, 68, 0.1);
}

.mrsubmit-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mrsubmit-file-item:hover {
    border-color: var(--color-accent-blue);
    background: var(--color-bg-tertiary);
}

.mrsubmit-file-item .file-icon {
    width: 24px;
    height: 24px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.mrsubmit-file-item .file-icon svg {
    width: 24px;
    height: 24px;
}

.mrsubmit-file-item .file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mrsubmit-file-item .file-name {
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrsubmit-file-item .file-path {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrsubmit-file-item .file-size {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.mrsubmit-file-item .file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.mrsubmit-file-item .file-remove:hover {
    background: var(--color-accent-red);
    color: white;
}

.mrsubmit-file-item .file-remove svg {
    width: 16px;
    height: 16px;
}

/* Word doc notice in VAULT mode */
.mrsubmit-docx-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.mrsubmit-docx-notice.hidden {
    display: none;
}

/* Filename Row */
.mrsubmit-filename-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.mrsubmit-filename-row label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Form Fields */
.mrsubmit-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mrsubmit-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mrsubmit-field label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.mrsubmit-field .required {
    color: var(--color-accent-red);
}

.mrsubmit-input,
.mrsubmit-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-fast);
}

.mrsubmit-input:focus,
.mrsubmit-textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
}

.mrsubmit-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Actions */
.mrsubmit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.mrsubmit-actions .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Word Document Conversion Modal */
.docx-convert-modal-content {
    max-width: 500px;
}

.docx-convert-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.docx-convert-options .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}

.docx-convert-options .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.docx-convert-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

/* Word Document Replacement Modal */
.docx-replace-modal-content {
    max-width: 520px;
}

.docx-replace-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.docx-replace-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.docx-replace-option:hover {
    border-color: var(--color-accent-blue);
    background: var(--color-bg-tertiary);
}

.docx-replace-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.docx-replace-option label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    flex: 1;
}

.docx-replace-option .option-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.docx-replace-option .option-recommended {
    font-size: var(--font-size-sm);
    color: var(--color-accent-green);
    font-weight: 500;
}

.docx-replace-option input[type="radio"]:checked + label {
    color: var(--color-accent-blue);
}

.docx-replace-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: rgba(245, 158, 11, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid #f59e0b;
    margin: var(--spacing-md) 0;
}

.docx-replace-warning svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.docx-replace-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Members Select (Assignees/Reviewers) */
.mrsubmit-members-select {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mrsubmit-members-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    min-height: 28px;
}

.mrsubmit-member-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.mrsubmit-member-tag img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.mrsubmit-member-tag .remove-member {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0 2px;
    font-size: 14px;
    opacity: 0.8;
}

.mrsubmit-member-tag .remove-member:hover {
    opacity: 1;
}

.mrsubmit-members-dropdown-container {
    position: relative;
}

.mrsubmit-members-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    color: var(--color-text);
    font-size: 0.9rem;
}

.mrsubmit-members-search:focus {
    outline: none;
    border-color: var(--color-accent-blue);
}

.mrsubmit-members-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    margin-top: 4px;
}

.mrsubmit-members-dropdown.hidden {
    display: none;
}

.mrsubmit-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.mrsubmit-member-item:hover {
    background: var(--color-bg-hover);
}

.mrsubmit-member-item.selected {
    background: var(--color-accent-blue);
    color: white;
}

.mrsubmit-member-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.mrsubmit-member-info {
    flex: 1;
}

.mrsubmit-member-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.mrsubmit-member-username {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.mrsubmit-member-item.selected .mrsubmit-member-username {
    color: rgba(255, 255, 255, 0.8);
}

.mrsubmit-member-loading {
    padding: 12px;
    text-align: center;
    color: var(--color-text-muted);
}

.mrsubmit-auto-assign {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.mrsubmit-auto-assign input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-blue);
}

/* MR Submit Icon */
.mrsubmit-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

/* MR Create Icon */
.mrcreate-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

/* MR Guide Icon */
.mrguide-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

/* MR Create VAULT Notice */
.mrcreate-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.1), rgba(255, 107, 0, 0.1));
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-left: 4px solid var(--color-accent-orange);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.mrcreate-notice.hidden {
    display: none;
}

.mrcreate-notice .notice-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-accent-orange);
}

.mrcreate-notice .notice-icon svg {
    width: 24px;
    height: 24px;
}

.mrcreate-notice .notice-content {
    flex: 1;
}

.mrcreate-notice .notice-content strong {
    display: block;
    font-size: var(--font-size-md);
    color: var(--color-accent-orange);
    margin-bottom: var(--spacing-xs);
}

.mrcreate-notice .notice-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.mrcreate-notice .notice-content a {
    color: var(--color-accent-blue);
    font-weight: 500;
}

.mrcreate-notice .notice-content .notice-support {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    opacity: 0.85;
}

/* Info variant for docx notice */
.mrcreate-notice.mrcreate-notice-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
}

.mrcreate-notice.mrcreate-notice-info .notice-icon {
    color: var(--color-accent-blue);
}

.mrcreate-notice.mrcreate-notice-info .notice-content strong {
    color: var(--color-accent-blue);
}

/* VAULT Mode Indicator */
.mrcreate-vault-indicator {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    animation: vaultPulse 2s ease-in-out infinite;
}

@keyframes vaultPulse {
    0%, 100% { border-color: rgba(139, 92, 246, 0.5); }
    50% { border-color: rgba(139, 92, 246, 0.8); }
}

.mrcreate-vault-indicator.hidden {
    display: none;
}

.vault-indicator-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.vault-indicator-content svg {
    color: #8b5cf6;
    flex-shrink: 0;
}

.vault-indicator-text {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: #8b5cf6;
}

.vault-indicator-path {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

.vault-indicator-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    padding-left: 28px; /* Align with text after icon */
}

/* ============================================
   MR GUIDE SECTION
   ============================================ */

.mrguide-container {
    max-width: 900px;
    margin: 0 auto;
}

.mrguide-decision {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.mrguide-decision h3 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.mrguide-flowchart {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.mrguide-question {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #007aff, #5856d6);
    border-radius: var(--radius-md);
    color: white;
}

.mrguide-question .question-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.mrguide-branches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.mrguide-branch {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.branch-header {
    padding: var(--spacing-md);
    font-weight: 600;
    font-size: var(--font-size-md);
    text-align: center;
    color: white;
}

.branch-header.new {
    background: linear-gradient(135deg, #34c759, #30d158);
}

.branch-header.existing {
    background: linear-gradient(135deg, #ff9500, #ff6b00);
}

.branch-content {
    padding: var(--spacing-md);
}

.branch-question {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.branch-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.branch-option {
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.branch-option:hover {
    border-color: var(--color-accent-blue);
    box-shadow: var(--shadow-sm);
}

.branch-option .option-type {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    margin-bottom: var(--spacing-xs);
    font-family: monospace;
}

.branch-option .option-action {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.branch-option .option-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.branch-option .option-link:hover {
    text-decoration: underline;
}

.branch-option .option-link::after {
    content: '→';
}

/* MR Guide Links Section */
.mrguide-links {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.mrguide-links h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.mrguide-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.mrguide-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
    text-align: center;
}

.mrguide-link-card:hover {
    border-color: var(--color-accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mrguide-link-card svg {
    width: 32px;
    height: 32px;
    color: var(--color-accent-blue);
}

.mrguide-link-card .link-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.mrguide-link-card .link-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* MR Guide Info Box */
.mrguide-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1));
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.mrguide-info .info-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-accent-blue);
}

.mrguide-info .info-icon svg {
    width: 24px;
    height: 24px;
}

.mrguide-info .info-content {
    flex: 1;
}

.mrguide-info .info-content strong {
    display: block;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.mrguide-info .info-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* MR Guide Responsive */
@media (max-width: 768px) {
    .mrguide-branches {
        grid-template-columns: 1fr;
    }

    .mrguide-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LABELS SECTION
   ============================================ */

.labels-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.labels-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.labels-search-input-wrapper .search-icon {
    position: absolute;
    left: var(--spacing-md);
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.labels-search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 2 + 20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.labels-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.labels-stats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.labels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.labels-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.labels-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.labels-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.labels-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.labels-empty h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* Label Card */
.label-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.label-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.label-color {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.label-info {
    flex: 1;
    min-width: 0;
}

.label-name {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.label-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
}

.label-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.label-source {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.label-source-type {
    padding: 2px 6px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.label-source-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-source-link {
    color: var(--color-accent-blue);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.label-source-link:hover {
    color: var(--color-accent-blue-hover);
    text-decoration: underline;
}

/* ============================================
   INVENTORY SECTION
   ============================================ */

.inventory-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.inventory-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.inventory-search-input-wrapper .search-icon {
    position: absolute;
    left: var(--spacing-md);
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.inventory-search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 2 + 20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.inventory-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.inventory-stats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.inventory-content {
    margin-top: var(--spacing-lg);
}

.inventory-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.inventory-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.inventory-empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.inventory-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.inventory-empty h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* Inventory Group Container */
.inventory-group {
    margin-bottom: var(--spacing-lg);
}

.inventory-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

.inventory-group-header svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent-orange);
}

.inventory-group-path {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Inventory Item Card */
.inventory-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-fast);
}

.inventory-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.inventory-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inventory-item-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.inventory-item-info {
    flex: 1;
    min-width: 0;
}

.inventory-item-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-item-title a {
    color: inherit;
    text-decoration: none;
}

.inventory-item-title a:hover {
    color: var(--color-accent-blue);
}

.inventory-role-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.inventory-item-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.inventory-item-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
}

.inventory-item-path {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* AI STATUS SUMMARY BUTTON - Same blue as Send to AI */
.inventory-ai-status-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent-blue);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    align-self: center;
}

.inventory-ai-status-btn:hover {
    background: #0066d6;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.inventory-ai-status-btn svg {
    width: 14px;
    height: 14px;
}

.inventory-ai-status-btn span {
    white-space: nowrap;
}

/* ============================================
   AI STATUS MODAL - Popup with auto-query results
   ============================================ */

.ai-status-modal-content {
    max-width: 600px;
    text-align: left;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.ai-status-header {
    text-align: center;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
}

.ai-status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007aff, #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
}

.ai-status-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.ai-status-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
}

.ai-status-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-status-body {
    flex: 1;
    overflow-y: auto;
    min-height: 150px;
    max-height: 400px;
}

.ai-status-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.ai-status-loading .spinner {
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-md);
}

.ai-status-loading p {
    margin: 0;
    font-size: var(--font-size-sm);
}

.ai-status-response {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.ai-status-response h2,
.ai-status-response h3,
.ai-status-response h4 {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: var(--color-text-primary);
}

.ai-status-response h2 { font-size: var(--font-size-lg); }
.ai-status-response h3 { font-size: var(--font-size-md); }
.ai-status-response h4 { font-size: var(--font-size-sm); font-weight: 600; }

.ai-status-response p {
    margin: 0 0 var(--spacing-sm);
}

.ai-status-response ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.ai-status-response li {
    margin-bottom: var(--spacing-xs);
}

.ai-status-response strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.ai-status-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.ai-status-error svg {
    color: var(--color-accent-red);
    margin-bottom: var(--spacing-md);
}

.ai-status-error p {
    margin: 0 0 var(--spacing-xs);
}

.ai-status-error-detail {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md) !important;
}

.ai-status-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-lg);
}

.ai-status-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.ai-status-btn.primary {
    background: var(--color-accent-blue);
    color: white;
}

.ai-status-btn.primary:hover {
    background: #0066d6;
}

.ai-status-btn.secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.ai-status-btn.secondary:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.ai-status-btn svg {
    flex-shrink: 0;
}

/* ============================================
   ASSESSMENTS SECTION
   ============================================ */

.assessments-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.assessments-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.assessments-search-input-wrapper .search-icon {
    position: absolute;
    left: var(--spacing-md);
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.assessments-search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 2 + 20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.assessments-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.assessments-stats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.assessments-content {
    margin-top: var(--spacing-lg);
}

.assessments-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.assessments-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.assessments-empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.assessments-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.assessments-empty h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* Assessment Document List */
.assessments-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Assessment List Item */
.assessments-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-card);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.assessments-list-item:hover {
    background: var(--color-bg-secondary);
}

/* Type Badge */
.assessments-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.assessments-type-pdf {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.assessments-type-word {
    background: rgba(43, 87, 154, 0.1);
    color: #2b579a;
}

.assessments-type-markdown {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.assessments-type-text {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.assessments-type-document {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Document Name */
.assessments-item-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assessments-list-item:hover .assessments-item-name {
    color: var(--color-accent-blue);
}

/* Folder Path */
.assessments-item-folder {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   REQUEST ACCESS SECTION
   ============================================ */

/* Master SVG constraint for Request Access section */
#section-request-access svg {
    max-width: 48px !important;
    max-height: 48px !important;
}

#section-request-access .request-access-info-banner svg,
#section-request-access .request-access-panel-title svg,
#section-request-access .request-access-submit-btn svg,
#section-request-access .remove-entry-btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

.request-access-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.request-access-info-banner svg {
    color: var(--color-accent-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.request-access-info-banner a {
    color: var(--color-accent-blue);
    text-decoration: none;
}

.request-access-info-banner a:hover {
    text-decoration: underline;
}

.request-access-section-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    background: linear-gradient(135deg, #1a2a4a, #2c3e6b);
    border: 1px solid rgba(100, 160, 255, 0.3);
    border-radius: var(--radius-md);
    position: sticky;
    top: calc(var(--classification-banner-height) + var(--header-height));
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--spacing-lg);
}

.section-nav-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-nav-btn {
    padding: 8px 18px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.section-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.section-nav-btn-modify {
    background: rgba(59, 130, 246, 0.35);
    border: 1px solid rgba(96, 165, 250, 0.5);
}

.section-nav-btn-modify:hover {
    background: rgba(59, 130, 246, 0.55);
    border-color: rgba(96, 165, 250, 0.8);
}

.section-nav-btn-new {
    background: rgba(16, 185, 129, 0.35);
    border: 1px solid rgba(52, 211, 153, 0.5);
}

.section-nav-btn-new:hover {
    background: rgba(16, 185, 129, 0.55);
    border-color: rgba(52, 211, 153, 0.8);
}

.section-nav-btn-delete {
    background: rgba(239, 68, 68, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.5);
}

.section-nav-btn-delete:hover {
    background: rgba(239, 68, 68, 0.55);
    border-color: rgba(248, 113, 113, 0.8);
}

.request-access-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.request-access-panel {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    /* #2487 bug #7 - without this, scrollIntoView({block:'start'}) lands a
       panel's top edge right under the sticky "Jump to:" bar, hiding it. */
    scroll-margin-top: calc(var(--header-height, 64px) + var(--classification-banner-height, 24px) + var(--section-nav-height, 60px));
}

.request-access-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.request-access-panel-title svg {
    color: var(--color-accent-blue);
}

.request-access-panel-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Compact row-based entry (Modify Existing Access, #2454) */
.acr-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.acr-field {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acr-field.wide {
    flex: 2;
    min-width: 260px;
}

.acr-field label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.acr-field select,
.acr-field input,
.acr-readonly-box {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg-primary);
}

.acr-readonly-box {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    flex: 1;
}

.acr-current-role-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.acr-current-role-row select {
    flex: 1;
    min-width: 0;
}

.acr-role-def-btn {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
}

.acr-role-def-btn:hover {
    background: var(--color-bg-hover);
}

.acr-count-inline {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-tertiary);
}

.acr-add-row-btn {
    background: none;
    border: 1px dashed var(--color-border);
    color: var(--color-accent);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

.acr-add-row-btn:hover {
    background: var(--color-bg-hover);
}

.acr-row-remove-btn {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    align-self: flex-start;
}

.acr-row-remove-btn:hover {
    color: var(--color-accent-red);
}

.modify-row-block {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.modify-row-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.new-resource-row-block {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.new-resource-row-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Search combobox (Request New Resources, #2454) */
.acr-combobox {
    position: relative;
}

.acr-combobox input {
    width: 100%;
}

.acr-combobox-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 180px;
    overflow-y: auto;
    z-index: 50;
    margin-top: 2px;
}

.acr-combobox-option {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.acr-combobox-option:hover {
    background: var(--color-bg-hover);
}

.acr-combobox-empty {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.acr-combobox-error {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    color: var(--color-accent-red);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.acr-combobox-retry {
    background: none;
    border: 1px solid var(--color-accent-red);
    color: var(--color-accent-red);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
}

.acr-combobox-retry:hover {
    background: var(--color-bg-hover);
}

/* #2614 Bug #4 - Inventory Item tree picker (replaces Group Access / */
/* Inventory Item Access / PRI/IL2/IL4 Projects Access). Ported from */
/* mockup-group-tree-picker-v2-search-scoped.html. Uses design-system */
/* variables throughout so it matches light/dark mode automatically - */
/* no hardcoded hex, unlike the standalone mockup file. */

.it-picker {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.it-picker-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.it-picker-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.it-picker-search svg {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}

.it-empty-state {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.it-empty-state svg {
    display: block;
    margin: 0 auto var(--spacing-sm);
    opacity: 0.5;
}

.it-results-meta {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.it-picker-list {
    max-height: 320px;
    overflow-y: auto;
}

.it-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    user-select: none;
}

.it-row:hover {
    background: var(--color-bg-hover);
}

.it-row.selected {
    background: var(--color-bg-active);
}

.it-row.selected .it-row-name {
    font-weight: 600;
    color: var(--color-accent);
}

/* Dimmed = "shown as context, not a direct text match" - NOT "locked".
   Deliberately keeps the normal pointer cursor/hover/click behavior: an
   ancestor row (e.g. the true top-level IL2/PRI group) is still fully
   selectable, and clicking it cascades everything under it, same as any
   other row. Only .auto-selected below is genuinely non-interactive. */
.it-row.ancestor {
    opacity: 0.55;
}

.it-row.ancestor .it-row-meta {
    display: none;
}

.it-row.auto-selected {
    cursor: default;
}

.it-row.auto-selected:hover {
    background: transparent;
}

.it-row.auto-selected .it-row-name {
    color: var(--color-text-tertiary);
}

/* New Resource only - "you already have this," a different reason to be
   locked than auto-selected's "already granted via a parent pick." Same
   non-interactive treatment, distinct enough to tell apart via the
   "You already have access" text shown in place of a role badge. */
.it-row.already-owned {
    cursor: default;
    opacity: 0.7;
}

.it-row.already-owned:hover {
    background: transparent;
}

.it-row.already-owned .it-row-name {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.it-row.already-owned .it-checkbox {
    border-color: var(--color-text-tertiary);
}

.it-badge {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.it-badge.grp { background: color-mix(in srgb, var(--color-accent-red) 18%, transparent); color: var(--color-accent-red); }
.it-badge.sub { background: color-mix(in srgb, var(--color-accent-blue) 18%, transparent); color: var(--color-accent-blue); }
.it-badge.subsub { background: color-mix(in srgb, var(--color-accent-green) 18%, transparent); color: var(--color-accent-green); }
.it-badge.proj { background: color-mix(in srgb, var(--color-accent-yellow) 24%, transparent); color: var(--color-accent-orange); }
.it-badge.bucket { background: color-mix(in srgb, var(--color-accent-purple) 18%, transparent); color: var(--color-accent-purple); }
.it-badge.app-item { background: color-mix(in srgb, var(--color-accent-teal) 24%, transparent); color: var(--color-accent-teal); }

.it-row-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    flex: 1;
}

.it-row-name mark {
    background: color-mix(in srgb, var(--color-accent-yellow) 60%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.it-row-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.it-row-meta svg {
    width: 13px;
    height: 13px;
}

.it-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--color-border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.it-row.selected .it-checkbox {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.it-row.auto-selected .it-checkbox {
    border-color: var(--color-text-tertiary);
    background: var(--color-text-tertiary);
}

.it-checkbox svg {
    width: 10px;
    height: 10px;
    color: var(--color-text-inverse);
    display: none;
}

.it-row.selected .it-checkbox svg,
.it-row.auto-selected .it-checkbox svg {
    display: block;
}

.it-selection-bar {
    display: none;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    background: var(--color-bg-active);
    border-top: 1px solid var(--color-border);
    justify-content: space-between;
    align-items: center;
}

.it-selection-bar.visible {
    display: flex;
}

.it-selection-bar button {
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: underline;
}

.it-depth-1 { padding-left: 38px; }
.it-depth-2 { padding-left: 62px; }
.it-depth-3 { padding-left: 86px; }
.it-depth-4 { padding-left: 110px; }

.request-access-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .request-access-form-grid {
        grid-template-columns: 1fr;
    }
}

.request-access-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.request-access-form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.request-access-form-group .required {
    color: var(--color-accent-red);
}

.request-access-input,
.request-access-select,
.request-access-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.request-access-input:focus,
.request-access-select:focus,
.request-access-textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* S3 Bucket select - prevent overflow with long descriptions */
.s3-bucket-select {
    max-width: 100%;
    text-overflow: ellipsis;
}

.s3-bucket-select option {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Priority selection highlighting */
.priority-select.has-selection {
    border-color: var(--color-accent-blue);
    background-color: rgba(0, 122, 255, 0.05);
    font-weight: 500;
}

.priority-select.priority-low.has-selection {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.priority-select.priority-medium.has-selection {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
}

.priority-select.priority-high.has-selection {
    border-color: #fd7e14;
    background-color: rgba(253, 126, 20, 0.1);
}

.priority-select.priority-urgent.has-selection {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* #2264 issue 6 — priority level definitions shown beneath the dropdown */
.priority-help {
    margin: 8px 0 0 0;
    font-size: var(--font-size-xs, 0.8rem);
    line-height: 1.5;
    color: var(--color-text-tertiary, #6b7280);
}

.priority-help strong {
    color: var(--color-text-secondary, #374151);
}

/* Field Validation Visual Feedback */
.request-access-input.field-valid,
.request-access-select.field-valid {
    border-color: #28a745;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

.request-access-input.field-invalid,
.request-access-select.field-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

/* Lerissa R5 issue 18 polish — inline error hint rendered beneath invalid fields */
.field-error-hint {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.3;
}

/* M4: Phase 3 — generic field-invalid styling for wizard inputs/textareas */
input.field-invalid,
textarea.field-invalid,
select.field-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}
input.field-invalid:focus,
textarea.field-invalid:focus,
select.field-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.request-access-input.field-valid:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.request-access-input.field-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Readonly fields (auto-populated) */
.request-access-input.field-readonly {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    border-style: dashed;
}

.request-access-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Phone Input with Country Code */
.phone-input-wrapper {
    display: flex;
    gap: var(--spacing-xs);
}

.country-code-select {
    width: 100px;
    flex-shrink: 0;
    padding-right: var(--spacing-sm);
}

.phone-number-input {
    flex: 1;
}

/* Resource Categories */
.resource-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dynamic-entry {
    display: grid;
    grid-template-columns: 1fr 150px 1fr auto;
    gap: var(--spacing-sm);
    align-items: start;
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .dynamic-entry {
        grid-template-columns: 1fr;
    }
}

.dynamic-entry-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dynamic-entry-field label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.remove-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 20px;
}

.remove-entry-btn:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--color-accent-red);
}

/* Role Info Button */
.role-field-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.role-field-wrapper select {
    flex: 1;
}

.role-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.role-info-btn:hover {
    background: var(--color-accent-blue-hover, #1a5fb4);
    border-color: var(--color-accent-blue-hover, #1a5fb4);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Form Actions */
/* Validation Message */
.request-validation-message {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .request-validation-message {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #dc2626;
    color: #fca5a5;
}

/* Lerissa R6 issue 14 — sticky UM banner offering one-click return to
   the in-flight Access Request form when the user arrived via "View
   Existing" on the duplicate-warning modal. */
.um-proceed-with-request-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border: 1px solid #facc15;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    color: #713f12;
    font-size: 14px;
    font-weight: 500;
}
.um-proceed-with-request-banner > span { flex: 1; }
.um-proceed-with-request-banner .btn-primary { padding: 8px 14px; }
.um-proceed-dismiss-btn {
    background: transparent;
    border: none;
    color: #713f12;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
}
.um-proceed-dismiss-btn:hover { color: #422006; }
.dark-mode .um-proceed-with-request-banner {
    background: linear-gradient(135deg, #422006 0%, #713f12 100%);
    border-color: #facc15;
    color: #fef9c3;
}
.dark-mode .um-proceed-dismiss-btn { color: #fef9c3; }
.dark-mode .um-proceed-dismiss-btn:hover { color: #fefce8; }

.request-access-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.request-access-cancel-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.request-access-cancel-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.request-access-submit-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent-blue), #0063cc);
    color: white;
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.request-access-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.request-access-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Lerissa R7 issue 18 — visual "invalid" state without HTML disabled.
 * Looks dimmed but stays clickable, so handleSubmit() runs and the
 * iterative-cursor jump-to-field flow can fire. */
.request-access-submit-btn.btn-invalid-state:not(:disabled) {
    opacity: 0.7;
    background: linear-gradient(135deg, #6c8ebf, #506b96);
    cursor: pointer;
}

.request-access-submit-btn.btn-invalid-state:not(:disabled):hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Submit button "ready" pulse — fires after the user clears the last
 * missing field; cues them that Submit is now armed. */
@keyframes submit-ready-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.request-access-submit-btn.submit-ready-pulse {
    animation: submit-ready-pulse 1.1s ease-out 1;
}

/* Missing Fields panel — appears above the Submit button when Submit is
 * clicked on an invalid form. Lists every missing/invalid field as a
 * clickable button; clicking jumps to and focuses that field. Items
 * strike through as the user fills them. Auto-hides when empty. */
.missing-fields-panel {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-left: 4px solid #ef4444;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-height: 360px;
    overflow-y: auto;
}
.missing-fields-panel[hidden] { display: none !important; }

.missing-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: #b91c1c;
}
.missing-fields-header-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.missing-fields-dismiss {
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.missing-fields-dismiss:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-text-primary);
}

.missing-fields-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.missing-fields-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.missing-fields-item:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateX(2px);
}
.missing-fields-item:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 1px;
}

.missing-fields-item-label {
    font-weight: 600;
}
.missing-fields-item-reason {
    color: var(--color-text-tertiary);
    font-weight: 400;
    margin-left: var(--spacing-xs);
}
.missing-fields-item-icon {
    font-size: 14px;
    color: #ef4444;
    flex-shrink: 0;
}

.missing-fields-item.resolved {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.4);
    cursor: default;
    pointer-events: none;
}
.missing-fields-item.resolved .missing-fields-item-label,
.missing-fields-item.resolved .missing-fields-item-reason {
    text-decoration: line-through;
    color: var(--color-text-tertiary);
}
.missing-fields-item.resolved .missing-fields-item-icon {
    color: #22c55e;
}

/* Dark mode */
[data-theme="dark"] .missing-fields-panel,
.dark-mode .missing-fields-panel {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.45);
}
[data-theme="dark"] .missing-fields-header,
.dark-mode .missing-fields-header {
    color: #fca5a5;
}
[data-theme="dark"] .missing-fields-item:hover,
.dark-mode .missing-fields-item:hover {
    background: rgba(239, 68, 68, 0.18);
}

.request-access-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    padding: var(--spacing-md);
    background: rgba(255, 149, 0, 0.08);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.request-access-note strong {
    color: var(--color-accent-orange);
}

/* Request Access Success Modal */
.request-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--spacing-lg);
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.request-success-content {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.request-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    background: rgba(40, 167, 69, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-success-icon svg {
    width: 36px;
    height: 36px;
    color: #28a745;
}

.request-success-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.request-success-content p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.request-success-content p strong {
    color: var(--color-accent-blue);
}

.request-success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.request-success-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-accent-blue), #0063cc);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.request-success-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.request-success-link svg {
    width: 18px;
    height: 18px;
}

.request-success-close {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.request-success-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Submit button spinner */
.request-access-submit-btn .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

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

.dynamic-entry-field-wide .request-access-textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    padding-bottom: 20px;
}

/* Dynamic entry field wide */
.dynamic-entry-field-wide {
    flex: 2;
    min-width: 200px;
    position: relative;
}

/* Character counter for textareas */
.char-counter {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    pointer-events: none;
    background: var(--color-bg-primary);
    padding: 0 4px;
    border-radius: 2px;
}

.char-counter.near-limit {
    color: var(--color-warning, #f59e0b);
}

.char-counter.at-limit {
    color: var(--color-error, #ef4444);
}

/* Role Definitions Table */
.role-definitions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.role-definitions-table th,
.role-definitions-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.role-definitions-table th {
    background: var(--color-bg-secondary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.role-definitions-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.role-definitions-table td:first-child {
    white-space: nowrap;
    color: var(--color-accent-blue);
}

/* Role Definitions Button */
.role-definitions-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.role-definitions-btn svg {
    width: 16px;
    height: 16px;
}

/* Prominent Role Definitions Button */
.role-definitions-btn-prominent {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 2px solid var(--color-accent-blue);
    color: var(--color-accent-blue);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.role-definitions-btn-prominent:hover {
    background: var(--color-accent-blue);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.role-definitions-btn-prominent svg {
    width: 16px;
    height: 16px;
}

/* S3 Modify entries */
#modify-s3-entries .dynamic-entry {
    border-left: 3px solid var(--color-accent-orange);
}

/* ============================================
   DASHBOARD FEEDBACK SECTION
   ============================================ */

/* Master SVG constraint for Feedback section */
#section-feedback svg {
    max-width: 48px !important;
    max-height: 48px !important;
}

#section-feedback .feedback-panel-title svg,
#section-feedback .feedback-submit-btn svg,
#section-feedback .feedback-comment-btn svg,
#section-feedback .btn-secondary svg,
#section-feedback .refresh-btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

.feedback-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 1024px) {
    .feedback-container {
        grid-template-columns: 1fr;
    }
}

.feedback-panel {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

/* Community Feedback panel when viewing is disabled — dimmed and not
   interactive, but the header stays readable so users know it's off
   rather than broken. Submit-side panel is unaffected. */
.feedback-panel.feedback-view-disabled {
    opacity: 0.55;
}

.feedback-panel.feedback-view-disabled .feedback-list {
    pointer-events: none;
}

.feedback-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.feedback-panel-title svg {
    color: var(--color-accent-blue);
}

/* Feedback Form */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feedback-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 600px) {
    .feedback-form-row {
        grid-template-columns: 1fr;
    }
}

.feedback-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.feedback-form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.feedback-form-group .required {
    color: var(--color-accent-red);
}

.feedback-input,
.feedback-select,
.feedback-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.feedback-input:focus,
.feedback-select:focus,
.feedback-textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.feedback-textarea {
    min-height: 120px;
    resize: vertical;
}

.feedback-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--spacing-sm);
}

.feedback-submit-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent-blue), #0063cc);
    color: white;
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.feedback-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Community Feedback List */
.feedback-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.feedback-filter-select {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.feedback-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 500px;
    overflow-y: auto;
}

.feedback-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.feedback-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.feedback-item:hover {
    background: var(--color-bg-hover);
    border-left-color: var(--color-accent-blue);
}

.feedback-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.feedback-item-type {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: uppercase;
}

.feedback-item-type.feature {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.feedback-item-type.bug {
    background: rgba(255, 59, 48, 0.15);
    color: var(--color-accent-red);
}

.feedback-item-type.question {
    background: rgba(0, 122, 255, 0.15);
    color: var(--color-accent-blue);
}

.feedback-item-priority {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.feedback-item-priority.urgent,
.feedback-item-priority.high {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.feedback-item-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
}

.feedback-item-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.feedback-item-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.feedback-author-avatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.feedback-item-comments {
    display: flex;
    align-items: center;
    gap: 4px;
}

.feedback-item-comments svg {
    width: 14px !important;
    height: 14px !important;
}

.feedback-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

/* Feedback Detail Modal */
.feedback-detail-modal-content {
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.feedback-detail-modal-content .modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.feedback-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.feedback-detail-badges {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.feedback-detail-description {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    line-height: 1.6;
}

.feedback-detail-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Comments Section */
.feedback-comments-section {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg);
}

.feedback-comments-section h4 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.feedback-comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
}

.feedback-comment {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.feedback-comment-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.feedback-comment-author {
    font-weight: 600;
    color: var(--color-text-primary);
}

.feedback-comment-date {
    color: var(--color-text-tertiary);
}

.feedback-comment-body {
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.feedback-add-comment {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.feedback-add-comment .feedback-textarea {
    min-height: 80px;
}

.feedback-comment-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-accent-blue);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: all var(--transition-fast);
}

.feedback-comment-btn:hover {
    background: #0063cc;
}

.feedback-no-comments {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* ============================================
   LABELS SELECTION MODAL
   ============================================ */

.labels-selection-modal-content {
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.labels-selection-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.labels-selection-modal-content .modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.labels-selection-modal-content .modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.labels-modal-section {
    margin-bottom: var(--spacing-lg);
}

.labels-modal-filter {
    margin-bottom: var(--spacing-md);
}

.labels-modal-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.labels-modal-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.labels-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    max-height: 250px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.labels-modal-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.labels-modal-item:hover {
    background: var(--color-bg-card);
}

.labels-modal-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-accent-blue);
}

.labels-modal-item .label-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.labels-modal-item .label-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labels-modal-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.labels-clear-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    background: transparent;
    color: var(--color-accent-blue);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.labels-clear-btn:hover {
    text-decoration: underline;
}

.labels-modal-state-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.labels-modal-state-filter label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.labels-state-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    cursor: pointer;
    min-width: 120px;
}

.labels-state-select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.labels-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.labels-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.labels-action-btn svg {
    width: 18px;
    height: 18px;
}

.labels-action-btn.primary {
    background: var(--color-accent-blue);
    color: white;
}

.labels-action-btn.primary:hover {
    background: #0066d6;
}

.labels-action-btn.secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.labels-action-btn.secondary:hover {
    background: var(--color-bg-card);
    border-color: var(--color-border-strong);
}

.labels-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.labels-modal-results {
    min-height: 150px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    overflow: hidden;
}

.labels-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-tertiary);
    text-align: center;
}

.labels-results-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.labels-results-placeholder p {
    font-size: var(--font-size-sm);
    margin: 0;
}

.labels-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.labels-results-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.labels-results-list {
    max-height: 300px;
    overflow-y: auto;
}

.labels-result-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

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

.labels-result-item:hover {
    background: var(--color-bg-secondary);
}

.labels-result-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.labels-result-icon.issue {
    background: linear-gradient(135deg, #28a745, #218838);
}

.labels-result-icon.mr {
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
}

.labels-result-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.labels-result-info {
    flex: 1;
    min-width: 0;
}

.labels-result-title {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.labels-result-title a {
    color: inherit;
    text-decoration: none;
}

.labels-result-title a:hover {
    color: var(--color-accent-blue);
}

.labels-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.labels-result-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.labels-result-label {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

.labels-results-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.labels-results-count {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   PERMISSION NOTES & SCOPE VISIBILITY
   ============================================ */

/* Welcome Permissions Note */
.welcome-permissions-note {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.welcome-permissions-note svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Welcome Session Note */
.welcome-session-note {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    opacity: 0.8;
}

.welcome-session-note svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(88, 86, 214, 0.08));
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.info-banner svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-accent-blue);
}

.info-banner strong {
    color: var(--color-accent-blue);
    font-weight: 600;
}

/* Slim info banner variant */
.info-banner-slim {
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(0, 122, 255, 0.06));
    border-color: rgba(34, 197, 94, 0.15);
}

.info-banner-slim svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-green);
}

.info-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--spacing-md);
    padding: 4px 10px;
    background: var(--color-accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.info-banner-link:hover {
    background: var(--color-accent-blue-hover, #0056b3);
    text-decoration: none;
}

.info-banner-link svg {
    width: 12px;
    height: 12px;
    color: white;
}

/* Two-line info banner (role scope + CAC/PIV & HPC caveat).
   .info-banner is a horizontal flex row, so stacked lines need a column wrapper;
   the shield icon stays vertically centered against both lines. */
.info-banner-stack {
    align-items: center;
}

.info-banner-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.info-banner-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

/* Inline text link inside a banner line — a <button> so it is keyboard-reachable
   and announced as a control, but styled as bold inline text. */
.info-banner-inline-link {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--color-accent-blue);
    text-decoration: underline;
    cursor: pointer;
}

.info-banner-inline-link:hover {
    color: var(--color-accent-blue-hover, #0056b3);
}

.info-banner-inline-link:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* License Status Widget */
.license-status-widget {
    margin: 0 0 var(--spacing-sm) 0;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0.03) 100%);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 8px;
    font-size: 13px;
}
.license-status-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.license-gauge {
    display: flex;
    align-items: center;
    gap: 6px;
}
.license-gauge-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.license-gauge-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}
.license-gauge-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-primary);
}
.license-gauge-limit {
    color: var(--color-text-tertiary);
    font-size: 12px;
}
.license-gauge-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}
.license-status-timestamp {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-style: italic;
}
/* Warning state (near threshold) */
.license-gauge.warning .license-gauge-value {
    color: #d97706;
}
.license-gauge.warning .license-gauge-icon {
    color: #d97706;
}
/* Critical state (over threshold) */
.license-gauge.critical .license-gauge-value {
    color: #dc2626;
    font-weight: 800;
}
.license-gauge.critical .license-gauge-icon {
    color: #dc2626;
}
.license-status-widget.has-breach {
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(220,38,38,0.03) 100%);
    border-color: rgba(220,38,38,0.4);
}
/* Alert toast */
.license-alert-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    background: #dc2626;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    font-size: 13px;
    max-width: 400px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: licenseAlertIn 0.3s ease-out;
}
.license-alert-toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.license-alert-toast-body {
    flex: 1;
}
.license-alert-toast-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.license-alert-toast-dismiss {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 8px;
    opacity: 0.7;
}
.license-alert-toast-dismiss:hover {
    opacity: 1;
}
@keyframes licenseAlertIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Responsive */
@media (max-width: 768px) {
    .license-status-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .license-gauge-divider {
        display: none;
    }
    .license-status-timestamp {
        margin-left: 0;
    }
}

/* Permissions Card */
.permissions-card {
    background: linear-gradient(135deg, var(--color-bg-card), rgba(0, 122, 255, 0.03));
}

.permissions-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.permission-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.permission-role {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 75px;
    text-align: center;
}

.permission-item:nth-child(2) .permission-role {
    background: var(--color-text-tertiary);
}

.permission-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.permissions-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: var(--spacing-sm) 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.permission-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    text-decoration: none;
    font-weight: 500;
    margin-top: var(--spacing-xs);
}

.permission-link:hover {
    text-decoration: underline;
}

/* Section Scope Badge */
.section-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.scope-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.scope-note {
    opacity: 0.8;
    font-style: italic;
}

/* ============================================
   SEARCH CAPABILITIES CARD & MODAL
   ============================================ */

/* Search Capabilities stat card icon */
.search-capabilities-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Special styling for Info text */
.stat-feature {
    font-size: var(--font-size-md) !important;
    color: var(--color-accent-blue);
}

/* Search Capabilities Modal Content */
.search-capabilities-content {
    max-width: 700px;
}

.search-capabilities-content .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Access Requirements modal (HPC vs CBRN CORe IL5). Prose-heavy, so left-align
   (.modal-content is centered by default) and scroll the body. */
.access-requirements-content {
    max-width: 720px;
    text-align: left;
}

.access-requirements-content .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.access-requirements-content .details-section p {
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.55;
}

.access-requirements-content .details-section p:last-child {
    margin-bottom: 0;
}

.access-requirements-content .details-section + .details-section {
    margin-top: var(--spacing-md);
}

.search-powered-by {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.search-powered-by p {
    margin: 0;
    color: #059669;
}

[data-theme="dark"] .search-powered-by p {
    color: #10b981;
}

.searchable-list li,
.not-searchable-list li,
.behavior-list li,
.performance-list li,
.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.check-icon {
    color: #10b981;
    font-weight: bold;
    flex-shrink: 0;
}

.x-icon {
    color: #ef4444;
    font-weight: bold;
    flex-shrink: 0;
}

.info-icon {
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.searchable-list code,
.not-searchable-list code,
.behavior-list code,
.tips-list code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

/* ============================================
   FAVORITES GHOSTING (Temporarily Disabled)
   ============================================ */

/* Favorites stat card ghosting now handled by .stat-card-ghosted class */

/* Ghost favorites nav buttons in header, sidebar, footer */
.nav-btn[data-section="favorites"],
.sidebar-nav-btn[data-section="favorites"],
.footer-nav-btn[data-section="favorites"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Ghost favorites quick access card on Home */
.favorites-card {
    opacity: 0.4;
    pointer-events: none;
}

.favorites-card::before {
    content: "Coming Soon";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    z-index: 10;
}

/* Hide favorite buttons on list items */
.resource-list-fav-btn {
    display: none !important;
}

/* Hide favorite button on resource cards */
.resource-card .favorite-btn {
    display: none !important;
}

/* Hide context menu favorite option */
.context-item[data-action="favorite"] {
    display: none !important;
}

/* Ghost command palette favorites filter */
.filter-chip[data-filter="favorites"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Favorites section is now active - uses GitLab starred projects */
/* Removed ghosting CSS that was hiding the section */

/* ============================================
   AI RESOURCES STYLING
   ============================================ */

/* AI Resources nav button styling */
.nav-btn[data-section="airesources"],
.sidebar-nav-btn[data-section="airesources"],
.footer-nav-btn[data-section="airesources"] {
    color: #8b5cf6;
}

.nav-btn[data-section="airesources"]:hover,
.sidebar-nav-btn[data-section="airesources"]:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

/* AI Resources section grid */
.ai-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}

.ai-resource-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.ai-resource-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.ai-resource-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.ai-resource-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-resource-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.ai-resource-icon.prompts-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.ai-resource-icon.bedrock-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.ai-resource-icon.ai-pipelines-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.ai-resource-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ai-resource-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.ai-resource-status {
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    text-align: center;
}

.ai-resource-status .status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
    color: #8b5cf6;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.ai-resource-status .status-badge.status-available {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
    color: #16a34a;
}

.ai-resource-card.ai-resource-card-clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ai-resource-card.ai-resource-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-accent);
}

.ai-resource-status p {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin: 0;
}


/* ============================================
   DISCOVERY INFO BANNERS
   ============================================ */

.discovery-info-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.04));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.discovery-info-banner svg {
    width: 16px;
    height: 16px;
    color: #3b82f6;
    flex-shrink: 0;
}

.discovery-info-banner span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.discovery-info-banner code {
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: #3b82f6;
}

/* ============================================
   BADGE LEGEND (Apps & Models section)
   ============================================ */

.badge-legend {
    margin-top: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    overflow: hidden;
    transition: all 0.2s ease;
}

.badge-legend-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    user-select: none;
}

.badge-legend-header:hover {
    background: var(--color-bg-hover);
}

.badge-legend-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.badge-legend-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    flex: 1;
}

.badge-legend-chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.badge-legend.collapsed .badge-legend-chevron {
    transform: rotate(-90deg);
}

.badge-legend-content {
    display: flex;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-md) var(--spacing-md);
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.badge-legend.collapsed .badge-legend-content {
    display: none;
}

.badge-legend-section {
    flex: 1;
    min-width: 280px;
}

.badge-legend-section-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xs);
}

.badge-legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.badge-legend-desc {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.badge-legend-validation-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-legend .app-rel-models {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
    color: #6366f1;
}

.badge-legend .app-rel-datasets {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

/* ============================================
   TO-DOS SECTION STYLING
   ============================================ */

/* Stat badge inline label */
.stat-label-inline {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Section toolbar */
.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.toolbar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.toolbar-link:hover {
    background: var(--color-bg-hover);
}

.toolbar-link svg {
    width: 16px;
    height: 16px;
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Todos list container */
.todos-list {
    min-height: 200px;
}

.todos-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.todos-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Todo card */
.todo-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.todo-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.todo-card.todo-done {
    opacity: 0.6;
}

.todo-card.todo-done .todo-title {
    text-decoration: line-through;
}

.todo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.todo-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.todo-content {
    flex: 1;
    min-width: 0;
}

.todo-action {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-accent-blue);
    margin-bottom: 2px;
}

.todo-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.todo-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.todo-project {
    font-weight: 500;
}

.todo-type-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* ============================================
   DATA SETS, PIPELINES, SCANNERS GHOSTING (Coming Soon)
   ============================================ */

/* Stat card ghosting now handled by .stat-card-ghosted class */

/* Ghost nav buttons in header, sidebar, footer */
.nav-btn[data-section="datasets"],
.nav-btn[data-section="pipelines"],
.nav-btn[data-section="scanners"],
.sidebar-nav-btn[data-section="datasets"],
.sidebar-nav-btn[data-section="pipelines"],
.sidebar-nav-btn[data-section="scanners"],
.footer-nav-btn[data-section="datasets"],
.footer-nav-btn[data-section="pipelines"],
.footer-nav-btn[data-section="scanners"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Ghost the sections */
#section-datasets .section-header,
#section-pipelines .section-header,
#section-scanners .section-header {
    opacity: 0.5;
}

/* Coming soon state styling */
.empty-state.coming-soon-state {
    opacity: 0.7;
}

.empty-state.coming-soon-state h3 {
    color: var(--color-text-secondary);
}

.empty-state.coming-soon-state svg {
    opacity: 0.5;
}

/* ============================================
   RECENT ACTIVITY GHOSTING (Temporarily Disabled)
   ============================================ */

/* Ghost Recent Activity card on Home */
.activity-card {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}

.activity-card::before {
    content: "Coming Soon";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    z-index: 10;
}

/* ============================================
   COMMAND PALETTE
   ============================================ */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.command-palette-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.command-palette-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: commandPaletteSlideIn 0.15s ease-out;
}

@keyframes commandPaletteSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.command-palette-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.command-palette-search-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.command-palette-search-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.command-palette-search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    outline: none;
}

.command-palette-input::placeholder {
    color: var(--color-text-tertiary);
}

.command-palette-esc {
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-tertiary);
}

.command-palette-filters {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.command-filter {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.command-filter:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.command-filter.active {
    background: var(--color-primary);
    color: white;
}

.command-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.command-group {
    margin-bottom: var(--spacing-md);
}

.command-group-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.command-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.command-item:hover,
.command-item.selected {
    background: var(--color-bg-hover);
}

.command-item.selected {
    background: var(--color-primary);
    color: white;
}

.command-item.selected .command-item-hint {
    color: rgba(255, 255, 255, 0.7);
}

.command-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}

.command-item.selected svg {
    color: white;
}

.command-item-text {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.command-item-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.command-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.command-palette-footer {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.command-footer-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.command-footer-hint kbd {
    padding: 2px 5px;
    font-size: 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: inherit;
}

/* Search result specific styles */
.command-result-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.command-result-project {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-result-state {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 500;
}

.command-result-state.opened { background: #dcfce7; color: #166534; }
.command-result-state.merged { background: #ddd6fe; color: #5b21b6; }
.command-result-state.closed { background: #fee2e2; color: #991b1b; }

/* Loading state */
.command-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
    gap: var(--spacing-sm);
}

.command-loading .loading-spinner {
    width: 20px;
    height: 20px;
}

/* No results */
.command-no-results {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.command-no-results svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

/* Command result layout */
.command-result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.command-result-icon img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.command-result-icon svg {
    width: 16px;
    height: 16px;
}

.command-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.command-result-favorite {
    color: #f59e0b;
    font-size: var(--font-size-sm);
}

/* Header nav removal - ensure proper spacing */
.header-right {
    margin-left: auto;
}

/* ============================================
   WORKSPACES SECTION
   ============================================ */

/* MASTER SVG CONSTRAINT - Prevent giant icons in Workspaces section */
#section-workspaces svg {
    max-width: 48px !important;
    max-height: 48px !important;
}

#section-workspaces .workspaces-info-banner svg,
#section-workspaces .workspaces-panel-title svg,
#section-workspaces .workspace-btn svg,
#section-workspaces .btn-secondary svg,
#section-workspaces .refresh-btn svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

#section-workspaces .workspaces-empty svg {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* Workspaces Grid Layout */
.workspaces-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

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

/* Workspaces Panel */
/* Workspaces Info Banner */
.workspaces-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(175, 82, 222, 0.08);
    border: 1px solid rgba(175, 82, 222, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.workspaces-info-banner svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    color: var(--color-accent-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

.workspaces-panel {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.workspaces-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.workspaces-panel-title svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    color: var(--color-accent-purple);
    flex-shrink: 0;
}

.workspaces-panel-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.workspaces-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.workspaces-panel-header .workspaces-panel-title {
    margin-bottom: 0;
}

.workspaces-panel-header svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-purple);
}

.workspaces-panel-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* My Workspaces List */
.my-workspaces-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.workspace-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.workspace-item:hover {
    background: var(--color-bg-hover);
    box-shadow: var(--shadow-sm);
}

.workspace-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workspace-icon.running {
    background: linear-gradient(135deg, var(--color-accent-green), #2aa555);
}

.workspace-icon.starting {
    background: linear-gradient(135deg, var(--color-accent-orange), #e88f00);
}

.workspace-icon.stopping {
    background: linear-gradient(135deg, var(--color-accent-orange), #e88f00);
}

.workspace-icon.stopped {
    background: linear-gradient(135deg, var(--color-text-tertiary), #777);
}

.workspace-icon.failed {
    background: linear-gradient(135deg, var(--color-accent-red), #d63026);
}

.workspace-icon.creating {
    background: linear-gradient(135deg, var(--color-accent-blue), #0063cc);
}

.workspace-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.workspace-info {
    flex: 1;
    min-width: 0;
}

.workspace-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-project {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Workspace Item Layout */
.workspace-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
}

.workspace-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.workspace-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.workspace-item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* Workspace State Badges */
.workspace-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.workspace-state.state-running {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.workspace-state.state-starting,
.workspace-state.state-stopping {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.workspace-state.state-stopped {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
}

.workspace-state.state-error,
.workspace-state.state-terminated {
    background: rgba(255, 59, 48, 0.15);
    color: var(--color-accent-red);
}

/* Workspace Action Buttons */
.workspace-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.workspace-btn svg {
    width: 14px;
    height: 14px;
}

.workspace-btn-open {
    background: var(--color-accent-blue);
    color: white;
}

.workspace-btn-open:hover {
    background: #0063cc;
    transform: translateY(-1px);
}

.workspace-btn-stop {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.workspace-btn-stop:hover {
    background: var(--color-accent-orange);
    color: white;
}

.workspace-btn-start {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.workspace-btn-start:hover {
    background: var(--color-accent-green);
    color: white;
}

.workspace-btn-terminate {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    padding: 6px 12px;
    border: 1px solid var(--color-border);
}

.workspace-btn-terminate:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Loading spinner in workspace item */
.workspace-status-pending {
    display: flex;
    align-items: center;
}

.loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.workspace-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.workspace-status.running {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.workspace-status.starting,
.workspace-status.stopping {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.workspace-status.stopped {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
}

.workspace-status.failed {
    background: rgba(255, 59, 48, 0.15);
    color: var(--color-accent-red);
}

.workspace-status.creating {
    background: rgba(0, 122, 255, 0.15);
    color: var(--color-accent-blue);
}

/* Workspace Actions */
.workspace-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.workspace-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.workspace-action-btn:hover {
    background: var(--color-accent-blue);
    color: white;
}

.workspace-action-btn.stop:hover {
    background: var(--color-accent-red);
}

.workspace-action-btn.start:hover {
    background: var(--color-accent-green);
}

.workspace-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Empty State */
.workspaces-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-tertiary);
}

.workspaces-empty svg {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.workspaces-empty p {
    font-size: var(--font-size-sm);
}

/* Loading State */
.workspaces-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
}

.workspaces-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.workspaces-loading span,
.workspaces-loading p {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Launch Workspace Form */
.workspaces-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.workspaces-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.workspaces-form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.workspaces-form-group select,
.workspaces-form-group input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workspaces-form-group select:focus,
.workspaces-form-group input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.workspaces-form-group select:disabled,
.workspaces-form-group input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.workspaces-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.workspaces-panel-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 149, 0, 0.1);
    border-left: 3px solid var(--color-accent-orange);
    border-radius: var(--radius-sm);
}

.workspaces-panel-note strong {
    color: var(--color-accent-orange);
}

/* Devfile Info Panel */
.workspaces-devfile-panel {
    background: linear-gradient(135deg, var(--color-bg-card), rgba(0, 122, 255, 0.03));
}

.workspaces-devfile-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.workspaces-devfile-info p {
    margin-bottom: var(--spacing-sm);
}

.workspaces-devfile-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
}

.workspaces-devfile-info li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
    position: relative;
}

.workspaces-devfile-info li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent-purple);
}

.workspaces-devfile-info code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: var(--font-size-xs);
}

.workspaces-devfile-example {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(175, 82, 222, 0.08);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent-purple);
}

.workspaces-devfile-example a {
    color: var(--color-accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.workspaces-devfile-example a:hover {
    text-decoration: underline;
}

/* Example Devfile Button */
.workspaces-example-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.workspaces-example-btn:hover {
    background: var(--color-accent-blue-hover, #0056b3);
}

/* Example Devfile Modal */
.example-devfile-modal-content {
    max-width: 800px;
    max-height: 80vh;
    text-align: left;
}

.example-devfile-desc {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.example-devfile-desc code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

.example-devfile-code-wrapper {
    position: relative;
}

.copy-devfile-btn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 1;
}

.copy-devfile-btn:hover {
    background: var(--color-accent-blue);
    color: white;
    border-color: var(--color-accent-blue);
}

.copy-devfile-btn.copied {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.copy-devfile-btn svg {
    width: 14px;
    height: 14px;
}

.example-devfile-code {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + 36px);
    overflow: auto;
    max-height: 50vh;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    white-space: pre;
    text-align: left;
    margin: 0;
}

/* Launch Button */
.workspaces-launch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-accent-purple), #9340c7);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.workspaces-launch-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.workspaces-launch-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.workspaces-launch-btn svg {
    width: 18px;
    height: 18px;
}

/* Create Project Button */
.workspaces-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-accent-green), #2aa555);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.workspaces-create-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.workspaces-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.workspaces-create-btn svg {
    width: 18px;
    height: 18px;
}

/* Help Section */
.workspaces-help {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.08), rgba(0, 122, 255, 0.08));
    border: 1px solid rgba(175, 82, 222, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.workspaces-help h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.workspaces-help h4 svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent-purple);
}

.workspaces-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.workspaces-help li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.workspaces-help li:last-child {
    margin-bottom: 0;
}

.workspaces-help li svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Full-width create panel */
.workspaces-panel.full-width {
    grid-column: 1 / -1;
}

/* Notification Toast for Workspaces */
.workspace-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.workspace-toast.success {
    border-left: 4px solid var(--color-accent-green);
}

.workspace-toast.error {
    border-left: 4px solid var(--color-accent-red);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   MODEL CARD EDITOR STYLES
   ============================================ */

/* Schema version badge */
.modelcard-schema-version {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.schema-version-label {
    color: var(--color-text-secondary);
}

.schema-version-value {
    font-weight: 600;
    color: var(--color-accent-purple);
}

/* Info banner */
.modelcard-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-accent-purple);
    margin-top: 1rem;
}

.modelcard-info-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-accent-purple);
}

.modelcard-info-banner span {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Mode tabs */
.modelcard-mode-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 0.25rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    width: fit-content;
}

.modelcard-mode-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modelcard-mode-tab svg {
    width: 18px;
    height: 18px;
}

.modelcard-mode-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-card);
}

.modelcard-mode-tab.active {
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}

/* Panels */
.modelcard-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Filters */
.modelcard-filters {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.modelcard-filters button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.modelcard-filters button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Schema version selector */
.modelcard-version-group {
    position: relative;
}

.schema-tag-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: var(--radius-sm);
}

.modelcard-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

.modelcard-filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.modelcard-filter-group .filter-input {
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.modelcard-filter-group .input-hint {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* Results */
.modelcard-results {
    min-height: 200px;
}

/* Single-column list view (like Models and Data Sets) */
.modelcard-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Search button icon sizing */
#modelcard-search-btn svg {
    width: 20px;
    height: 20px;
}

.modelcard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modelcard-item:hover {
    border-color: var(--color-accent-purple);
    box-shadow: var(--shadow-md);
}

.modelcard-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-purple), #6366f1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.modelcard-item-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.modelcard-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modelcard-item-name {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modelcard-item-project {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modelcard-item-path {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modelcard-item-actions {
    color: var(--color-accent-purple);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Empty state */
.modelcard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.modelcard-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Loading */
.modelcard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--color-text-secondary);
}

/* Create panel */
.modelcard-create-header {
    margin-bottom: 1.5rem;
}

.modelcard-create-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.modelcard-create-header p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.modelcard-create-project-select {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Editor container */
.modelcard-editor-container {
    margin-bottom: 1.5rem;
}

.modelcard-editor {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modelcard-editor-section {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.modelcard-editor-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.required-marker {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--color-text-tertiary);
}

.modelcard-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.modelcard-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modelcard-editor-field-full {
    grid-column: 1 / -1;
}

.modelcard-editor-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.modelcard-editor-field input,
.modelcard-editor-field textarea,
.modelcard-editor-field select {
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    font-family: inherit;
}

.modelcard-editor-field input:focus,
.modelcard-editor-field textarea:focus,
.modelcard-editor-field select:focus {
    outline: none;
    border-color: var(--color-accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.modelcard-editor-field textarea {
    resize: vertical;
    min-height: 60px;
}

/* Editor actions */
.modelcard-editor-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.modelcard-editor-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

.modelcard-editor-actions button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Example panel */
.modelcard-example-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modelcard-example-header h3 {
    margin: 0;
}

.modelcard-example-header p {
    margin: 0.5rem 0 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.modelcard-example-content {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow: auto;
    max-height: 500px;
}

.modelcard-example-rendered {
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    overflow: auto;
    max-height: 600px;
    text-align: left;
}

/* Viewer modal */
.modelcard-viewer-modal-content {
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modelcard-viewer-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--color-border);
}

.modelcard-viewer-tab {
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modelcard-viewer-tab:hover {
    color: var(--color-text-primary);
}

.modelcard-viewer-tab.active {
    color: var(--color-accent-purple);
    border-bottom-color: var(--color-accent-purple);
}

.modelcard-viewer-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.modelcard-viewer-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Rendered view */
.modelcard-rendered {
    text-align: left;
}

.modelcard-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modelcard-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modelcard-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent-purple);
}

.modelcard-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.modelcard-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modelcard-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modelcard-field span,
.modelcard-field p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.modelcard-field-full {
    grid-column: 1 / -1;
}

/* Metrics */
.modelcard-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modelcard-metric {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    min-width: 120px;
}

.metric-name {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent-purple);
}

.metric-ci {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* JSON view */
.modelcard-json {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .modelcard-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .modelcard-filter-group {
        min-width: auto;
    }

    .modelcard-editor-grid {
        grid-template-columns: 1fr;
    }

    .modelcard-field-grid {
        grid-template-columns: 1fr;
    }

    .modelcard-mode-tabs {
        width: 100%;
    }

    .modelcard-mode-tab {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   BEDROCK PLAYGROUND STYLES
   ============================================ */

/* Wrapper section for always-visible playground */
.bedrock-playground-section {
    padding: 0 24px;
    margin-bottom: 24px;
}

.bedrock-playground-card {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 600px;
}

.bedrock-playground-card .card-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}

.bedrock-playground-card .card-title svg {
    color: #22c55e;
}

.bedrock-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bedrock-model-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.bedrock-model-select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
    min-width: 200px;
}

.bedrock-model-select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.bedrock-model-select optgroup {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.bedrock-capabilities-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 4px 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
}

.bedrock-tokens {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.bedrock-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bedrock-action-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.bedrock-action-btn svg {
    width: 18px;
    height: 18px;
}

/* Export button - Blue */
#bedrock-export-btn {
    color: #3b82f6;
}
#bedrock-export-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* Clear button - Red */
#bedrock-clear-btn {
    color: #ef4444;
}
#bedrock-clear-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Collapse/Expand Button - Purple */
.bedrock-collapse-btn {
    margin-left: var(--spacing-sm);
    border-left: 1px solid var(--color-border);
    padding-left: var(--spacing-md) !important;
    color: #8b5cf6;
}
.bedrock-collapse-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.bedrock-collapse-btn .collapse-icon {
    transition: transform 0.2s ease;
}

.bedrock-playground-card.collapsed .bedrock-collapse-btn .collapse-icon {
    transform: rotate(180deg);
}

/* Playground scope disclaimer — compact amber banner between the card
   header and the chat area, plus the ⓘ icon on the title and the modal. */
.bedrock-playground-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.bedrock-playground-info-btn:hover {
    opacity: 1;
    color: var(--color-accent-blue);
}

.bedrock-scope-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 16px 8px;
    font-size: var(--font-size-xs);
    line-height: 1.45;
    color: #664d03;
    background: #fff3cd;
    border: 1px solid #ffecb5;
    border-radius: var(--radius-md);
}

.bedrock-scope-disclaimer svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #b45309;
}

.bedrock-scope-disclaimer strong {
    font-weight: 600;
}

.bedrock-scope-disclaimer-more {
    display: inline;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #7c2d12;
    font-weight: 600;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.bedrock-scope-disclaimer-more:hover {
    color: #92400e;
}

/* Inline link inside the "About the AI Playground" modal (e.g. Access Request Modification) */
.bedrock-playground-info-link {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    color: #2563eb;
    font-weight: 600;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.bedrock-playground-info-link:hover {
    color: #1d4ed8;
}

/* Hide disclaimer when the playground card is collapsed */
.bedrock-playground-card.collapsed .bedrock-scope-disclaimer {
    display: none;
}

/* Modal */
.bedrock-playground-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bedrock-playground-info-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.bedrock-playground-info-box {
    position: relative;
    width: min(560px, 92%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.bedrock-playground-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.bedrock-playground-info-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.bedrock-playground-info-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0 4px;
}

.bedrock-playground-info-close:hover {
    color: var(--color-text-primary);
}

.bedrock-playground-info-body {
    padding: 16px 20px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.bedrock-playground-info-body h4 {
    margin: 16px 0 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.bedrock-playground-info-body p {
    margin: 0 0 8px;
    color: var(--color-text-secondary);
}

.bedrock-playground-info-body ul {
    margin: 0 0 8px;
    padding-left: 20px;
    color: var(--color-text-secondary);
}

.bedrock-playground-info-body li {
    margin-bottom: 4px;
}

.bedrock-playground-info-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
}

.bedrock-playground-info-ok {
    padding: 8px 18px;
    background: var(--color-accent-blue);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.bedrock-playground-info-ok:hover {
    filter: brightness(1.05);
}

/* Collapsed state */
.bedrock-playground-card.collapsed .bedrock-content {
    display: none;
}

.bedrock-playground-card.collapsed {
    min-height: auto;
}

.bedrock-playground-card.collapsed .card-header {
    border-bottom: none;
}

.bedrock-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition: background 0.2s ease, border 0.2s ease;
}

.bedrock-content.drag-over {
    background: rgba(99, 102, 241, 0.08);
    border: 2px dashed var(--color-accent);
    border-radius: 8px;
}

.bedrock-content.drag-over::after {
    content: 'Drop files here (images, PDFs)';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-bg);
    padding: 12px 24px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bedrock-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bedrock-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-secondary);
    height: 100%;
}

.bedrock-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: #22c55e;
    opacity: 0.8;
}

.bedrock-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.bedrock-empty-state p {
    margin: 0;
    font-size: 14px;
    max-width: 400px;
}

.bedrock-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.bedrock-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.bedrock-message.assistant {
    align-self: flex-start;
}

.message-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.bedrock-message.user .message-avatar {
    background: var(--color-accent);
    color: white;
}

.bedrock-message.assistant .message-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.message-content {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.bedrock-message.user .message-content {
    background: var(--color-accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.bedrock-message.assistant .message-content {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}

.message-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
}

.bedrock-message.assistant .message-content code {
    background: var(--color-bg);
}

.message-content pre {
    background: var(--color-bg);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.message-content pre code {
    background: none;
    padding: 0;
}

.message-image {
    margin: 8px 0;
}

.message-image img {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: contain;
}

.message-document {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: 8px;
    margin: 8px 0;
    font-size: 13px;
}

.message-document svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.bedrock-message.animate-in {
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--color-text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.bedrock-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.bedrock-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.bedrock-attach-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent);
}

.bedrock-attach-btn svg {
    width: 20px;
    height: 20px;
}

.bedrock-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 40px;
    max-height: 150px;
    line-height: 1.4;
}

.bedrock-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
}

.bedrock-input::placeholder {
    color: var(--color-text-secondary);
}

.bedrock-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    height: 40px;
    border: none;
    background: var(--color-accent-blue);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-weight: 500;
    font-size: 14px;
}

.bedrock-send-btn:hover:not(:disabled) {
    background: #0066d6;
    transform: scale(1.02);
}

.bedrock-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bedrock-send-btn .btn-text {
    display: inline;
}

.bedrock-send-btn svg {
    width: 16px;
    height: 16px;
}

.bedrock-send-btn .btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Context Panel - shows content sent via "Send to AI" */
.bedrock-context-panel {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    padding: 8px 12px;
}

.context-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.context-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.context-panel-title .context-icon {
    width: 14px;
    height: 14px;
    color: var(--color-accent-blue);
}

.context-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-clear-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.context-clear-btn svg {
    width: 12px;
    height: 12px;
}

.context-panel-preview {
    max-height: 120px;
    overflow-y: auto;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 10px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.context-truncated {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: 11px;
}

.bedrock-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.bedrock-attachment-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 12px;
    max-width: 200px;
}

.bedrock-attachment-preview img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.bedrock-attachment-preview svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-red);
    flex-shrink: 0;
}

.bedrock-attachment-preview .attachment-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bedrock-attachment-preview .attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.bedrock-attachment-preview .attachment-remove:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-red);
}

.bedrock-attachment-preview .attachment-remove svg {
    width: 14px;
    height: 14px;
    color: inherit;
}

/* Responsive adjustments for Bedrock Playground */
@media (max-width: 768px) {
    .bedrock-playground-card {
        min-height: 350px;
        max-height: 500px;
    }

    .bedrock-header-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .bedrock-model-select {
        flex: 1;
        min-width: 150px;
    }

    .bedrock-message {
        max-width: 95%;
    }

    .message-image img {
        max-width: 200px;
    }
}

/* ============================================
   Search Results Section
   ============================================ */

.search-results-container {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

/* Search Input */
.search-results-input-wrapper {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.search-results-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.search-results-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-left: 48px;
    padding-right: 48px;
    font-size: var(--font-size-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.search-results-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.search-results-input::placeholder {
    color: var(--color-text-tertiary);
}

.search-results-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-results-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.search-results-clear:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.search-results-clear.visible {
    display: flex;
}

.search-results-clear svg {
    width: 16px;
    height: 16px;
}

/* Filter Tabs */
.search-results-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.search-results-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.search-results-tab:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.search-results-tab.active {
    background: var(--color-accent-blue);
    color: white;
}

.search-results-tab .tab-count {
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Notice Box */
.search-results-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.search-results-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent-orange);
    margin-top: 1px;
}

/* Results Content */
.search-results-content {
    min-height: 200px;
}

.search-results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-tertiary);
    text-align: center;
}

.search-results-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.search-results-empty p {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

.search-results-empty small {
    font-size: var(--font-size-sm);
}

/* Loading State */
.search-results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.search-results-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.search-results-loading p {
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Result Groups */
.search-results-group {
    margin-bottom: var(--spacing-xl);
}

.search-results-group:last-child {
    margin-bottom: 0;
}

.search-results-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.search-results-group-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-results-group-title svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.search-results-group-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: normal;
}

.search-results-show-all {
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.search-results-show-all:hover {
    background: var(--color-bg-active);
}

/* Result Items */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: var(--transition-fast);
}

.search-result-item:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-hover);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-icon svg {
    width: 18px;
    height: 18px;
}

.search-result-icon.issue {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.search-result-icon.mr {
    background: rgba(175, 82, 222, 0.15);
    color: var(--color-accent-purple);
}

.search-result-icon.doc {
    background: rgba(0, 122, 255, 0.15);
    color: var(--color-accent-blue);
}

.search-result-icon.code {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.search-result-icon.wiki {
    background: rgba(90, 200, 250, 0.15);
    color: var(--color-accent-teal);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.search-result-title a {
    color: inherit;
    text-decoration: none;
}

.search-result-title a:hover {
    color: var(--color-accent-blue);
}

.search-result-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.search-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.search-result-badge.state-opened {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

.search-result-badge.state-closed {
    background: rgba(255, 59, 48, 0.15);
    color: var(--color-accent-red);
}

.search-result-badge.state-merged {
    background: rgba(175, 82, 222, 0.15);
    color: var(--color-accent-purple);
}

.search-result-badge.match-content {
    background: rgba(0, 122, 255, 0.15);
    color: var(--color-accent-blue);
}

.search-result-badge.match-filename {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-accent-orange);
}

.search-result-badge.match-both {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent-green);
}

/* Code snippet preview */
.search-result-code {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    overflow-x: auto;
    white-space: pre;
    max-height: 80px;
}

/* Send to AI button */
.search-result-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Search Send to AI - match purple style of other sections */
.search-result-ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
}

.search-result-ai-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.search-result-ai-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Responsive */
@media (max-width: 768px) {
    .search-results-container {
        padding: var(--spacing-md);
    }

    .search-results-input {
        font-size: var(--font-size-sm);
    }

    .search-result-item {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .search-result-actions {
        align-self: flex-end;
    }
}

/* ============================================
   ISSUE CONTRIBUTE MODAL
   ============================================ */

/* Contribute Button in Issue Results (Solid Orange Pencil) */
.contribute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    flex-shrink: 0;
}

.contribute-btn:hover {
    background: linear-gradient(135deg, #d97706 0%, #c2410c 100%);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.contribute-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

/* Issue Contribute Modal Content */
.issue-contribute-modal-content {
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Make modal header stay at top */
.issue-contribute-modal-content .modal-header {
    flex-shrink: 0;
}

/* Two-column layout - scrollable body area */
.issue-contribute-columns {
    display: flex;
    gap: var(--spacing-lg);
    min-height: 300px;
    max-height: calc(90vh - 180px); /* Leave room for header and footer */
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.issue-contribute-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: var(--spacing-lg);
    border-right: 1px solid var(--color-border);
}

.issue-contribute-right-panel {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-left: var(--spacing-lg);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.panel-header svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent-blue);
    flex-shrink: 0;
}

.panel-header .editor-mode-toggle {
    margin-bottom: 0;
}

.issue-contribute-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.issue-contribute-title-area h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-contribute-view-link {
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
    text-decoration: none;
}

.issue-contribute-view-link:hover {
    text-decoration: underline;
}

/* Required asterisk */
.required {
    color: var(--color-danger);
}

.mention-picker-container {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    padding: var(--spacing-sm);
    min-height: 42px;
}

.mention-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.mention-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.mention-tag-remove {
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mention-tag-remove:hover {
    opacity: 1;
}

.mention-tag-remove svg {
    width: 12px;
    height: 12px;
}

.mention-search-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    outline: none;
}

.mention-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.mention-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: -1px;
    right: -1px;
    background: #ffffff;
    border: 2px solid var(--color-accent-blue);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
}

[data-theme="dark"] .mention-dropdown {
    background: #1e1e1e;
}

.mention-dropdown.hidden {
    display: none;
}

.mention-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.mention-count {
    font-weight: 500;
    color: var(--color-accent-blue);
}

.mention-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.mention-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: var(--transition-fast);
    background: inherit;
}

.mention-item:hover {
    background: #f3f4f6;
}

[data-theme="dark"] .mention-item:hover {
    background: #2d2d2d;
}

.mention-item-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.mention-item-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mention-item-info {
    flex: 1;
    min-width: 0;
}

.mention-item-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 500;
}

.mention-item-username {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.mention-myself-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-background);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.mention-myself-btn:hover {
    border-color: var(--color-accent-blue);
    border-style: solid;
    color: var(--color-accent-blue);
    background: var(--color-surface);
}

.mention-myself-btn svg {
    width: 16px;
    height: 16px;
}

/* Editor Section */

.editor-mode-toggle {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--color-bg-secondary);
    padding: 3px;
    border-radius: var(--radius-md);
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.mode-btn svg {
    width: 14px;
    height: 14px;
}

.mode-btn:hover {
    color: var(--color-text-primary);
}

.mode-btn.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.editor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* Formatting Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.editor-toolbar.hidden {
    display: none;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.toolbar-btn:active {
    background: var(--color-border);
}

.toolbar-btn strong {
    font-size: 14px;
    font-weight: 700;
}

.toolbar-btn em {
    font-size: 14px;
    font-style: italic;
    font-family: Georgia, serif;
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 4px;
}

/* Attachment Button */
.toolbar-btn-attach {
    color: var(--color-accent-blue);
}

.toolbar-btn-attach:hover {
    background: rgba(0, 122, 255, 0.1);
    color: var(--color-accent-blue);
}

/* Upload Status Indicator */
.toolbar-upload-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 122, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
}

.toolbar-upload-status.hidden {
    display: none;
}

.toolbar-upload-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 122, 255, 0.2);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.toolbar-upload-text {
    font-weight: 500;
}

/* Attachment Preview */
.toolbar-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.toolbar-attachments.hidden {
    display: none;
}

.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.attachment-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.attachment-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size {
    color: var(--color-text-tertiary);
    font-size: 10px;
}

.attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.attachment-remove:hover {
    background: var(--color-accent-red);
    color: white;
}

.attachment-error {
    color: var(--color-accent-red);
    font-size: var(--font-size-xs);
    padding: 4px 8px;
}

/* Rich Text Editor Panel */
.editor-richtext-panel {
    flex: 1;
    display: flex;
}

.editor-richtext-panel.hidden {
    display: none;
}

.richtext-editor {
    flex: 1;
    width: 100%;
    min-height: 180px;
    max-height: 300px; /* Prevent infinite growth */
    padding: var(--spacing-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
    text-align: left;
}

.richtext-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.richtext-editor:focus {
    outline: none;
}

/* Rich text formatting styles */
.richtext-editor b, .richtext-editor strong {
    font-weight: 600;
}

.richtext-editor i, .richtext-editor em {
    font-style: italic;
}

.richtext-editor code {
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 0.9em;
}

.richtext-editor pre {
    background: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-sm) 0;
}

.richtext-editor pre code {
    background: none;
    padding: 0;
}

.richtext-editor blockquote {
    border-left: 3px solid var(--color-accent-blue);
    padding-left: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    color: var(--color-text-secondary);
}

.richtext-editor ul, .richtext-editor ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.richtext-editor a {
    color: var(--color-accent-blue);
    text-decoration: underline;
}

/* Markdown Editor Panel */
.editor-markdown-panel {
    flex: 1;
    display: flex;
}

.editor-markdown-panel.hidden {
    display: none;
}

.editor-markdown-panel textarea {
    flex: 1;
    width: 100%;
    min-height: 180px;
    max-height: 300px; /* Match richtext-editor max-height */
    padding: var(--spacing-md);
    border: none;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    overflow-y: auto;
    resize: none;
    outline: none;
    line-height: 1.6;
}

.editor-markdown-panel textarea::placeholder {
    color: var(--color-text-tertiary);
}

.markdown-preview {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
    text-align: left;
}

.markdown-preview em {
    color: var(--color-text-tertiary);
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.markdown-preview p {
    margin-bottom: var(--spacing-sm);
}

.markdown-preview code {
    background: var(--color-background);
    padding: 2px 6px;
    border-radius: var(--border-radius-xs);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.markdown-preview pre {
    background: var(--color-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    margin: var(--spacing-sm) 0;
}

.markdown-preview pre code {
    background: none;
    padding: 0;
}

/* Options Section */
.issue-contribute-options {
    margin-top: var(--spacing-md);
}

.option-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

.option-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-blue);
}

.option-hint {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* AI Status Summary Section */
.ai-status-summary {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.ai-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.ai-status-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent-blue);
}

.ai-status-title svg {
    width: 16px;
    height: 16px;
}

.ai-status-refresh {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-surface);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-status-refresh:hover {
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    background: rgba(59, 130, 246, 0.05);
}

.ai-status-refresh.spinning svg {
    animation: spin 1s linear infinite;
}

.ai-status-refresh svg {
    width: 14px;
    height: 14px;
}

.ai-status-content {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-height: 120px;
    max-height: 220px;
    overflow-y: auto;
    text-align: left;
}

/* AI Status Loading State */
.ai-status-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.ai-status-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* AI Status Result */
.ai-status-result {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
    text-align: left;
}

.ai-status-result .status-section {
    margin-bottom: var(--spacing-sm);
}

.ai-status-result .status-section:last-child {
    margin-bottom: 0;
}

.ai-status-result .status-label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: var(--spacing-xs);
}

.ai-status-result .status-label.status-current {
    color: var(--color-accent-blue);
}

.ai-status-result .status-label.status-latest {
    color: #8b5cf6;
}

.ai-status-result .status-label.status-next {
    color: var(--color-success);
}

.ai-status-result .status-label.status-blockers {
    color: #ef4444;
}

.ai-status-result .status-text {
    color: var(--color-text-secondary);
}

/* AI Status Error State */
.ai-status-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-align: center;
}

.ai-status-error-icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-tertiary);
}

.ai-status-error-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.ai-status-error-text strong {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.ai-status-error-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.ai-status-error-actions a,
.ai-status-error-actions button {
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.ai-status-error-actions a:hover,
.ai-status-error-actions button:hover {
    text-decoration: underline;
}

/* Modal Footer - always visible at bottom */
.issue-contribute-modal-content .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.footer-left {
    flex: 1;
}

.footer-right {
    display: flex;
    gap: var(--spacing-sm);
}

.issue-contribute-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-secondary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-secondary:hover {
    background: var(--color-surface-hover);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-md);
    background: var(--color-accent-blue);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-accent-blue-hover, #0066cc);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-md);
    background: var(--color-accent-red, #ef4444);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger-outline {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-danger-outline:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-danger-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger-outline svg {
    width: 14px;
    height: 14px;
}

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

.btn-sm svg {
    width: 14px !important;
    height: 14px !important;
}

.btn-text {
    display: inline;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn-loading.hidden {
    display: none;
}

.spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Issue Result Actions Layout */
.issue-result-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .issue-contribute-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .issue-contribute-columns {
        flex-direction: column;
        min-height: auto;
        max-height: calc(100vh - 180px); /* Adjust for mobile */
    }

    .issue-contribute-left-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: var(--spacing-lg);
    }

    .issue-contribute-right-panel {
        width: 100%;
        padding-left: 0;
        padding-top: var(--spacing-lg);
    }

    .ai-status-summary {
        margin-top: var(--spacing-md);
    }

    .mention-dropdown {
        max-height: 150px;
    }

    .footer-right {
        flex-direction: column;
    }
}

/* ============================================
   ISSUE CONTRIBUTE CONFIRMATION MODAL
   ============================================ */

.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal.hidden {
    display: none;
}

.confirm-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.confirm-modal-content {
    position: relative;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    animation: confirmSlideIn 0.2s ease-out;
}

@keyframes confirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-bottom: 1px solid var(--color-border);
}

.confirm-modal-header svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent-blue);
}

.confirm-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.confirm-modal-body {
    padding: var(--spacing-lg);
    max-height: 50vh;
    overflow-y: auto;
}

.confirm-section {
    margin-bottom: var(--spacing-lg);
}

.confirm-section:last-child {
    margin-bottom: 0;
}

.confirm-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.confirm-users {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.confirm-user-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--color-accent-blue), #6366f1);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.confirm-user-tag svg {
    width: 12px;
    height: 12px;
}

.confirm-comment {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    max-height: 150px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.confirm-comment em {
    color: var(--color-text-tertiary);
}

.confirm-internal-section {
    margin-top: var(--spacing-md);
}

.confirm-internal-section.hidden {
    display: none;
}

.confirm-internal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-md);
    color: #b45309;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

[data-theme="dark"] .confirm-internal-badge {
    color: #fbbf24;
}

.confirm-internal-badge svg {
    width: 16px;
    height: 16px;
}

.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-primary);
}

.confirm-modal-footer .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.confirm-modal-footer .btn-secondary svg {
    width: 14px;
    height: 14px;
}

.confirm-modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.confirm-modal-footer .btn-primary svg {
    width: 14px;
    height: 14px;
}

.confirm-modal-footer .btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Responsive */
@media (max-width: 480px) {
    .confirm-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .confirm-modal-footer {
        flex-direction: column;
    }

    .confirm-modal-footer button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   EKS CONTAINERS SECTION
   ============================================ */

/* EKS Containers Info Banner */
.ekscontainers-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.08));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ekscontainers-info-banner svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #f97316;
}

/* EKS Panel */
.ekscontainers-panel {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.ekscontainers-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.ekscontainers-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ekscontainers-panel-title svg {
    width: 20px;
    height: 20px;
    color: #f97316;
}

/* EKS Containers Header Actions */
.ekscontainers-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* EKS Admin Toggle */
.ekscontainers-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.ekscontainers-toggle input {
    display: none;
}

.ekscontainers-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ekscontainers-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-text-tertiary);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ekscontainers-toggle input:checked + .ekscontainers-toggle-slider {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-color: #f97316;
}

.ekscontainers-toggle input:checked + .ekscontainers-toggle-slider::before {
    left: 18px;
    background: white;
}

.ekscontainers-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.ekscontainers-toggle:hover .ekscontainers-toggle-slider {
    border-color: #f97316;
}

/* EKS Container Username (admin view) */
.ekscontainer-item-user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.ekscontainer-protected-badge {
    font-size: 11px;
    color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.35);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.ekscontainer-item-user svg {
    width: 12px;
    height: 12px;
}

/* ==========================================
   ECS CONTAINERS SECTION
   ========================================== */

/* ECS Panel */
.ecscontainers-panel {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.ecscontainers-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.ecscontainers-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ecscontainers-panel-title svg {
    width: 20px;
    height: 20px;
    color: #10b981;
}

/* ECS Containers Header Actions */
.ecscontainers-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* ECS Admin Toggle */
.ecscontainers-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.ecscontainers-toggle input {
    display: none;
}

.ecscontainers-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ecscontainers-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-text-tertiary);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ecscontainers-toggle input:checked + .ecscontainers-toggle-slider {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
}

.ecscontainers-toggle input:checked + .ecscontainers-toggle-slider::before {
    left: 18px;
    background: white;
}

.ecscontainers-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.ecscontainers-toggle:hover .ecscontainers-toggle-slider {
    border-color: #10b981;
}

/* ECS Containers Tabs */
.ecscontainers-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.ecscontainers-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ecscontainers-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.ecscontainers-tab.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    color: #10b981;
    border-bottom: 2px solid #10b981;
    margin-bottom: -1px;
}

.ecscontainers-tab svg {
    flex-shrink: 0;
}

.ecscontainers-tab-content {
    display: none;
}

.ecscontainers-tab-content.active {
    display: block;
}

/* HPC section tab strip ("My HPC Jobs" | "Tools") — mirrors the ECS tab pattern with the HPC
   blue accent so the two sections read as siblings. Dedicated classes (not .ecscontainers-*) so
   the global ECS tab JS never cross-wires the HPC tabs. */
.hpc-view-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.hpc-view-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hpc-view-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.hpc-view-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
    color: #3b82f6;
    border-bottom: 2px solid #3b82f6;
    margin-bottom: -1px;
}

.hpc-view-tab svg {
    flex-shrink: 0;
}

.hpc-view-tab-content {
    display: none;
}

.hpc-view-tab-content.active {
    display: block;
}

/* "My HPC Jobs" — active interactive sessions + recent runs */
.hpc-jobs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}
.hpc-jobs-subhead {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.hpc-sessions-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-md);
}
.hpc-session-card {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--color-bg-secondary);
}
.hpc-session-card-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: space-between;
    flex-wrap: wrap;
}
.hpc-session-title {
    font-weight: 600;
    color: var(--color-text-primary);
}
.hpc-session-meta {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
}
.hpc-session-actions {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.hpc-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: capitalize;
}
.hpc-session-pill.is-ready { background: rgba(16,185,129,0.15); color: #10b981; }
.hpc-session-pill.is-running,
.hpc-session-pill.is-starting { background: rgba(59,130,246,0.15); color: #3b82f6; }
.hpc-session-pill.is-queued { background: rgba(107,114,128,0.15); color: #9ca3af; }
.hpc-session-pill.is-expiring { background: rgba(245,158,11,0.15); color: #f59e0b; }
/* Failure / ended states (#2525): red. A genuinely-unknown status stays neutral grey so it is not
   mistaken for a failure. */
.hpc-session-pill.is-expired,
.hpc-session-pill.is-failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.hpc-session-pill.is-unknown { background: rgba(107,114,128,0.15); color: #9ca3af; }

/* Per-card status note under the action row: neutral by default; red for a failed/ended session. */
.hpc-session-note {
    margin-top: 8px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary, #9ca3af);
}
.hpc-session-note.is-failed { color: #ef4444; }

/* ECS Admin tab styling */
.ecscontainers-tab-admin {
    border-left: 2px solid rgba(239, 68, 68, 0.5);
    margin-left: auto;
}

.ecscontainers-tab-admin.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #ef4444;
    border-bottom: 2px solid #ef4444;
}

/* ECS Resource Config specific styling */
.resource-config-section-ecs {
    border-left-color: #10b981;
}

.resource-config-title-ecs svg {
    color: #10b981;
}

.btn-ecs {
    background: linear-gradient(135deg, #10b981, #059669);
}

.btn-ecs:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

/* ECS Container List */
.ecscontainers-list {
    display: grid;
    gap: var(--spacing-md);
}

/* ECS Container Loading State */
.ecscontainers-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

/* Workspaces Admin Toggle - reuses EKS pattern with cyan color */
.workspaces-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.workspaces-toggle input {
    display: none;
}

.workspaces-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.workspaces-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-text-tertiary);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.workspaces-toggle input:checked + .workspaces-toggle-slider {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-color: #06b6d4;
}

.workspaces-toggle input:checked + .workspaces-toggle-slider::before {
    left: 18px;
    background: white;
}

.workspaces-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.workspaces-toggle:hover .workspaces-toggle-slider {
    border-color: #06b6d4;
}

/* Workspace Username (admin view) */
.workspace-item-user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.workspace-item-user svg {
    width: 12px;
    height: 12px;
}

/* EKS Container List */
.ekscontainers-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.ekscontainers-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.ekscontainers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.ekscontainers-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

/* EKS Container Item */
.ekscontainer-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.ekscontainer-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.ekscontainer-item-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.ekscontainer-item-info {
    flex: 1;
    min-width: 0;
}

.ekscontainer-item-name {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ekscontainer-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.ekscontainer-item-url {
    font-size: 11px;
    color: var(--color-accent-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    margin-top: 2px;
}

.ekscontainer-item-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.ekscontainer-item-status.running {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.ekscontainer-item-status.starting,
.ekscontainer-item-status.creating {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.ekscontainer-item-status.pending {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}

.ekscontainer-item-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.ekscontainer-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.ekscontainer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ekscontainer-btn svg {
    width: 14px;
    height: 14px;
}

.ekscontainer-btn-open {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.ekscontainer-btn-open:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.ekscontainer-btn-stop {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.ekscontainer-btn-stop:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.ekscontainer-btn-terminate {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.ekscontainer-btn-terminate:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.ekscontainer-btn-terminate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ekscontainer-btn-terminate.terminating {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* EKS Help */
.ekscontainers-help {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.08));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.ekscontainers-help summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
}

.ekscontainers-help summary::-webkit-details-marker {
    display: none;
}

.ekscontainers-help summary svg {
    width: 18px;
    height: 18px;
    color: #f97316;
}

.ekscontainers-help-content {
    margin-top: var(--spacing-md);
}

.ekscontainers-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ekscontainers-help li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
    position: relative;
}

.ekscontainers-help li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f97316;
}

.ekscontainers-help li:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .ekscontainer-item {
        flex-wrap: wrap;
    }

    .ekscontainer-item-actions {
        width: 100%;
        margin-top: var(--spacing-sm);
    }
}

/* EKS Containers Tabs */
.ekscontainers-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.ekscontainers-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ekscontainers-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.ekscontainers-tab.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.15));
    color: #f97316;
    border-bottom: 2px solid #f97316;
    margin-bottom: -1px;
}

.ekscontainers-tab svg {
    flex-shrink: 0;
}

.ekscontainers-tab-content {
    display: none;
}

.ekscontainers-tab-content.active {
    display: block;
}

/* Security Summary Content */
.security-summary-content {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-md);
}

.security-summary-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.security-summary-title svg {
    color: #22c55e;
}

.security-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-md);
    border-left: 3px solid #f97316;
}

.security-section h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.security-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.security-section li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.security-section li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: #f97316;
}

.security-section li strong {
    color: var(--color-text-primary);
}

.security-section-highlight {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
}

.security-section-highlight li::before {
    content: none;
}

.security-section-highlight li {
    padding-left: 0;
}

/* Security Comparison Table */
.security-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
}

.security-comparison-table th,
.security-comparison-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border: 1px solid var(--color-border);
}

.security-comparison-table th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.security-comparison-table td {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.security-comparison-table tr:hover td {
    background: var(--color-bg-tertiary);
}

.security-comparison-table td:first-child {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ============================================
   RESOURCE CONFIGURATION PANEL (Admin Only)
   ============================================ */

.resource-config-content {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-md);
}

.resource-config-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.resource-config-title svg {
    color: #f97316;
}

.resource-config-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.resource-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.resource-config-section {
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-md);
    border-left: 3px solid #f97316;
}

.resource-config-section-wide {
    grid-column: 1 / -1;
}

.resource-config-section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.resource-config-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.resource-config-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.resource-config-field label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.resource-config-field input {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
}

.resource-config-field input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.resource-config-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Allowed Values Checkboxes */
.resource-config-allowed-values {
    padding: var(--spacing-sm);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
}

.resource-config-allowed-group {
    margin-bottom: var(--spacing-sm);
}

.resource-config-allowed-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.resource-config-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.resource-config-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.15s ease;
}

.resource-config-checkbox:hover {
    background: var(--color-bg-secondary);
}

.resource-config-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f97316;
    cursor: pointer;
}

/* Cost Reference Table */
.resource-config-cost-table {
    overflow-x: auto;
}

.cost-reference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.cost-reference-table th,
.cost-reference-table td {
    padding: 6px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.cost-reference-table th {
    background: var(--color-bg-primary);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.cost-reference-table td:last-child {
    font-family: var(--font-mono);
    color: #22c55e;
}

/* Toggle Switch */
.resource-config-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resource-config-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.resource-config-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f97316;
}

.resource-config-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* Usage Statistics */
.resource-config-usage-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.resource-config-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
    text-align: center;
}

.resource-config-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.resource-config-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

@media (max-width: 768px) {
    .resource-config-usage-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.resource-config-registry-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.resource-config-registry-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
}

.resource-config-registry-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.resource-config-registry-value {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    color: var(--color-text-primary);
}

.resource-config-registry-status {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}

.resource-config-status-enabled {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.resource-config-status-disabled {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.resource-config-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
}

.resource-config-status {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

.resource-config-status.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.resource-config-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.resource-config-status.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.resource-config-exceptions {
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
}

.resource-config-exceptions-list {
    margin: var(--spacing-md) 0;
    max-height: 200px;
    overflow-y: auto;
}

.resource-config-no-exceptions {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.resource-config-exception-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
}

.resource-config-exception-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.resource-config-exception-user {
    font-weight: 500;
    color: var(--color-text-primary);
}

.resource-config-exception-limits {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.resource-config-exception-remove {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.resource-config-exception-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Admin tab styling */
.ekscontainers-tab-admin {
    border-left: 2px solid rgba(239, 68, 68, 0.5);
    margin-left: auto;
}

.ekscontainers-tab-admin.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #ef4444;
    border-bottom: 2px solid #ef4444;
}

/* ============================================
   RESOURCE LIMIT MODAL
   Shown when user exceeds resource limits
   ============================================ */

.resource-limit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.resource-limit-modal {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resource-limit-modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 3px solid #f97316;
    background: var(--color-bg-secondary);
}

.resource-limit-modal-header h3 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.resource-limit-modal-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.resource-limit-modal-close:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.resource-limit-modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: 60vh;
}

.resource-limit-message {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.resource-limit-violations {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.resource-limit-violations strong {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: #ef4444;
}

.resource-limit-violations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-limit-violation {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    font-size: var(--font-size-sm);
}

.resource-limit-violation:last-child {
    border-bottom: none;
}

.resource-limit-field {
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.resource-limit-requested {
    color: #ef4444;
}

.resource-limit-maximum {
    color: var(--color-text-secondary);
}

.resource-limit-info {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.resource-limit-info strong {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.resource-limit-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-limit-info li {
    padding: var(--spacing-xs) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.resource-limit-cost {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.resource-limit-cost-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.resource-limit-cost-value {
    font-weight: 600;
    color: #3b82f6;
}

.resource-limit-cost-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

.resource-limit-cta {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
}

.resource-limit-cta p {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   DOD HPC SECTION
   ============================================ */

/* HPC Icon in stat card */
.hpc-icon {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* Coming Soon Banner */
.hpc-coming-soon-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
}

.hpc-coming-soon-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 50%;
}

.hpc-coming-soon-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.hpc-coming-soon-text h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    /* On the purple gradient banner: white for legible contrast (was #8b5cf6 purple-on-purple). */
    color: #ffffff;
}

.hpc-coming-soon-text p {
    margin: 0;
    font-size: var(--font-size-md);
    /* Near-white for readable contrast on the purple gradient (was gray --color-text-secondary). */
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

/* HPC Integration Grid */
.hpc-integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* HPC Cards */
.hpc-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
}

.hpc-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

.hpc-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.hpc-card-header h3 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hpc-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
}

.hpc-card-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.hpc-card-icon.hpc-outbound {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.hpc-card-icon.hpc-inbound {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

/* HPC Badge */
.hpc-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
}

.hpc-badge-coming {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .hpc-badge-coming {
    color: #fbbf24;
}

/* HPC Card Body */
.hpc-card-body {
    padding: var(--spacing-lg);
}

.hpc-card-desc {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.hpc-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpc-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.hpc-feature-list li:last-child {
    border-bottom: none;
}

.hpc-feature-list li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-success);
    margin-top: 2px;
}

/* HPC Info Panel */
.hpc-info-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.hpc-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.hpc-info-header svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-blue);
}

.hpc-info-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hpc-info-text {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* HPC Access Methods */
.hpc-access-methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.hpc-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    flex: 1;
    min-width: 200px;
}

.hpc-method-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-radius: var(--border-radius-sm);
}

.hpc-method-icon svg {
    width: 18px;
    height: 18px;
    color: #8b5cf6;
}

.hpc-method-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hpc-method-content strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hpc-method-content span {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* HPC Updates Panel */
.hpc-updates-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px dashed rgba(139, 92, 246, 0.3);
    border-radius: var(--border-radius-lg);
}

.hpc-updates-panel p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.hpc-updates-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}

.hpc-updates-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.hpc-updates-btn svg {
    width: 16px;
    height: 16px;
}

/* ===== HPC Execute Task (IN DEVELOPMENT) ===== */
.hpc-exec-task-panel {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}
.hpc-exec-task-panel-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}
.hpc-exec-task-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
}
.hpc-exec-task-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}
.hpc-exec-task-panel-desc {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.hpc-exec-task-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.hpc-exec-task-launch-btn:hover { opacity: 0.9; }

/* Execute HPC Job button row (single primary action, top of My HPC Jobs). */
.hpc-exec-task-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
/* Tools & Dashboards: uniform read-only tiles in an auto-fill grid so the shelf
   stays tidy as buttons are added. Each tile is the neutral (slate) variant,
   full-width in its cell, left-aligned label — overriding the primary gradient. */
.hpc-tools-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.hpc-tools-btn-grid .hpc-exec-task-launch-btn {
    width: 100%;
    margin-left: 0;
    background: #334155;
    justify-content: flex-start;
}

/* Model-manage status line: inline spinner while an on-node verb (load/evict/delete/pull/poll)
   is in flight, and ✓/✕ markers on the verified terminal outcome. */
.hpc-manage-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.12em;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: hpc-manage-spin 0.7s linear infinite;
}
@keyframes hpc-manage-spin { to { transform: rotate(360deg); } }
.hpc-manage-ok { color: #34d399; font-weight: 700; }
.hpc-manage-err { color: #f87171; font-weight: 700; }

.hpc-exec-dev-notes {
    margin-top: var(--spacing-md);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.hpc-exec-dev-notes > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 6px 0;
}
.hpc-exec-dev-notes-body {
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 2px solid var(--color-border);
    margin-top: 6px;
    line-height: 1.5;
}
.hpc-exec-dev-notes-body ul { margin: 6px 0; padding-left: 18px; }
.hpc-exec-dev-notes-body li { margin-bottom: 4px; }
.hpc-exec-dev-notes-body code {
    background: var(--color-bg-card);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Execute Task modal */
.hpc-exec-modal-content {
    max-width: 760px;
    width: 92%;
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
}
.hpc-exec-modal-content .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}
.hpc-exec-modal-content .modal-header h2 { margin: 0; }
.hpc-exec-subtitle {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.hpc-exec-body {
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.hpc-exec-step { display: flex; flex-direction: column; gap: 6px; }
.hpc-exec-label {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hpc-exec-hint {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}
.hpc-exec-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.hpc-exec-key-row { display: flex; gap: 8px; }
.hpc-exec-key-row .hpc-exec-input { flex: 1; }
.hpc-exec-prompt {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 220px;
}
.hpc-exec-prompt[readonly] {
    opacity: 0.85;
    background: var(--color-bg-secondary);
}
.hpc-exec-actions-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hpc-exec-reco { display: flex; flex-direction: column; gap: 8px; }
.hpc-exec-reco-item {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
}
.hpc-exec-reco-item.is-top {
    border-color: #7c3aed;
    box-shadow: 0 0 0 1px #7c3aed33;
}
.hpc-exec-reco-name { font-weight: 600; font-size: 0.9rem; }
.hpc-exec-reco-vendor {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-left: 6px;
}
.hpc-exec-reco-why {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 3px;
}
/* badge shown when the server ranking is grounded in measured on-node benchmarks */
.hpc-exec-reco-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 999px;
    vertical-align: middle;
}
/* ground-truth chips: warm = loaded in VRAM (amber), resident = pulled to disk (slate).
   Both reuse the reco-badge pill shape; only the color signals node state. */
.hpc-exec-reco-badge.hpc-warm-badge { color: #92400e; background: #fef3c7; }
.hpc-exec-reco-badge.hpc-resident-badge { color: #475569; background: #e2e8f0; }
/* Model Status panel (admin) — state pills reuse the warm/resident colors as
   standalone badges; "dim" is the muted off-state. */
.hpc-warm-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.hpc-warm-badge.hpc-warm-badge-loaded { color: #92400e; background: #fef3c7; }
.hpc-warm-badge.hpc-warm-badge-resident { color: #475569; background: #e2e8f0; }
.hpc-model-status-dim { color: #94a3b8; font-size: 0.72rem; }
.hpc-model-status-table th { font-weight: 600; }
.hpc-model-status-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border-color, #eef1f5); }
/* admin model-manager write-verb buttons (load/evict/pull/delete) inside the Model Status panel */
.hpc-manage-btn { padding: 2px 10px; font-size: 0.72rem; border-radius: 6px; }
.hpc-manage-btn-danger { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.hpc-manage-btn-danger:hover { background: #991b1b; }
/* one-line transparency note: what the DSP node had warm at snapshot time */
.hpc-exec-groundtruth { margin-top: 6px; font-size: 0.72rem; color: #64748b; line-height: 1.4; }
/* live launch status panel (Step 5) */
.hpc-exec-status { margin-top: 8px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.hpc-exec-status-head { font-weight: 600; font-size: 0.85rem; color: #1e293b; margin-bottom: 8px; }
.hpc-exec-status-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #334155; }
.hpc-exec-status-row.is-ok { color: #0f766e; }
.hpc-exec-status-row.is-err { color: #b91c1c; }
.hpc-exec-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; }
.hpc-exec-status-row.is-ok .hpc-exec-status-dot { background: #0f766e; }
.hpc-exec-status-row.is-err .hpc-exec-status-dot { background: #b91c1c; }
.hpc-exec-status-dot.spin { background: #0891b2; animation: hpc-exec-pulse 1.1s ease-in-out infinite; }
@keyframes hpc-exec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.hpc-exec-status-msg { margin-top: 6px; font-size: 0.8rem; color: #64748b; }
/* non-silent model fallback: the DSP node ran a resident model instead of the requested one */
.hpc-exec-status-warn {
    margin-top: 8px; padding: 8px 10px; font-size: 0.82rem; line-height: 1.35;
    color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px;
}
.hpc-hist-badge.is-warn { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.hpc-hist-badge.is-ok { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
.hpc-exec-result-link { display: inline-block; margin-top: 10px; font-weight: 600; color: #0f766e; text-decoration: none; }
.hpc-exec-result-link:hover { text-decoration: underline; }
.hpc-exec-pipe-link { display: inline-block; margin-top: 10px; font-size: 0.82rem; color: #64748b; }
/* target / artifact picker (Step 2.5) */
.hpc-exec-input-sm { width: auto; min-width: 130px; flex: 0 0 auto; }
.hpc-exec-label-sub { margin-top: 12px; }
.hpc-exec-target-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 10px;
}
.hpc-exec-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--color-text-primary);
    cursor: pointer;
}
.hpc-exec-target-pane { margin-bottom: 4px; }
.hpc-exec-target-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hpc-exec-target-row .hpc-exec-input { flex: 1 1 180px; }
.hpc-exec-target-summary {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    min-height: 1.1em;
}
.hpc-exec-target-summary.is-set code {
    font-family: var(--font-mono, monospace);
    background: var(--color-bg-secondary);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}
.hpc-exec-target-hint { color: var(--color-text-secondary); font-style: italic; }

/* Upload mode (HPC Execute Job only) — drop zone + status. */
.hpc-exec-upload-hidden { display: none; }
.hpc-exec-upload-drop {
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--color-bg-secondary);
}
.hpc-exec-upload-drop:hover,
.hpc-exec-upload-drop:focus-visible { border-color: var(--color-primary, #2563eb); outline: none; }
.hpc-exec-upload-drop.is-dragover { border-color: var(--color-primary, #2563eb); background: var(--color-bg-tertiary, #eef2ff); }
.hpc-exec-upload-cta { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; color: var(--color-text-primary); }
.hpc-exec-upload-browse { color: var(--color-primary, #2563eb); text-decoration: underline; }
.hpc-exec-upload-status {
    margin-top: 8px;
    font-size: 0.8rem;
    min-height: 1.1em;
    color: var(--color-text-secondary);
}
.hpc-exec-upload-status.is-busy { color: var(--color-text-secondary); }
.hpc-exec-upload-status.is-ok { color: #15803d; }
.hpc-exec-upload-status.is-error { color: #b91c1c; }

.hpc-exec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}
.hpc-exec-summary { font-size: 0.82rem; color: var(--color-text-secondary); }
.hpc-exec-footer > div { display: flex; gap: 8px; }

/* HPC Run History modal (companion to Execute Job) */
.hpc-hist-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hpc-hist-scope { font-size: 0.82rem; color: var(--color-text-secondary); }
.hpc-hist-scope code { font-size: 0.8rem; }
/* HPC backend operational status banner — a persistent green/red comms indicator at the top
   of the HPC section. GREEN when the DSP node inventory snapshot is fresh (backend reachable +
   telemetry flowing); RED when the snapshot is stale or the status route is unreachable (comms
   lost). Colors reuse the existing accent tokens + the fresh/stale palette above. */
.hpc-op-status {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; margin: 0 0 20px; border-radius: 10px;
    border: 1px solid var(--color-border); background: var(--color-bg-secondary, #f5f5f7);
}
.hpc-op-status[hidden] { display: none; }
.hpc-op-status-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; flex: 0 0 auto; background: #94a3b8; }
.hpc-op-status-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hpc-op-status-headline { font-weight: 700; font-size: 0.95rem; }
.hpc-op-status-detail { font-size: 0.82rem; color: var(--color-text-secondary, #6e6e73); }
/* OK / operational */
.hpc-op-status-ok { border-color: rgba(52, 199, 89, 0.35); background: rgba(52, 199, 89, 0.10); }
.hpc-op-status-ok .hpc-op-status-dot { background: var(--color-accent-green); box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); }
.hpc-op-status-ok .hpc-op-status-headline { color: #15803d; }
/* DOWN / comms lost — big and unmistakable */
.hpc-op-status-down { border-color: rgba(255, 59, 48, 0.45); background: rgba(255, 59, 48, 0.12); }
.hpc-op-status-down .hpc-op-status-dot { background: var(--color-accent-red); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.20); animation: hpc-op-pulse 1.6s ease-in-out infinite; }
.hpc-op-status-down .hpc-op-status-headline { color: #b91c1c; }
/* Unknown / still checking */
.hpc-op-status-unknown .hpc-op-status-dot { background: #94a3b8; }
@keyframes hpc-op-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Ground-truth capture timestamp — the freshest live signal behind the verdict, always shown so
   the user can see exactly how current the status is (never a bare colour with no provenance). */
.hpc-op-status-stamp { font-size: 0.72rem; color: var(--color-text-secondary, #6e6e73); opacity: 0.85; margin-top: 2px; }
/* Manual re-check button — mirrors the metrics-modal refresh; sits at the banner's trailing edge. */
.hpc-op-status-refresh {
    flex: 0 0 auto; align-self: flex-start; margin-left: auto;
    border: 1px solid var(--color-border); background: var(--color-bg, #fff);
    color: var(--color-text-secondary, #6e6e73); border-radius: 7px;
    padding: 5px 11px; font-size: 0.76rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background 0.12s, color 0.12s;
}
.hpc-op-status-refresh:hover { background: var(--color-bg-secondary, #f5f5f7); color: var(--color-text, #1d1d1f); }
.hpc-op-status-refresh:disabled { opacity: 0.5; cursor: progress; }

/* Model-Status snapshot freshness stamp — escalates as the cached snapshot ages so an
   admin never mistakes a stale cache for the node's live state. */
.hpc-stamp-fresh { color: #15803d; }
.hpc-stamp-aging { color: #b45309; }
.hpc-stamp-stale { color: #b91c1c; font-weight: 500; }
/* GPU-capacity honesty marker: the GPU total / Free headroom numbers are a known-hardware floor
   (not live telemetry) until the on-node GPU exporter publishes. Amber, matching the aging stamp. */
.hpc-gpu-est { color: #b45309; font-weight: 700; cursor: help; }
.hpc-gpu-est-note { display: block; font-size: 0.66rem; color: #b45309; font-weight: 500; margin-top: 2px; }
/* NL / structured query bar (admins & PMs). Server enforces the role gate; this is additive. */
.hpc-hist-query { margin: 10px 0 4px; }
.hpc-hist-query-bar { display: flex; gap: 8px; align-items: center; }
.hpc-hist-query-bar #hpc-hist-q { flex: 1 1 auto; }
.hpc-hist-q-note { margin-top: 6px; font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.4; }
.hpc-hist-q-facets { font-style: italic; }
.hpc-hist-list { display: flex; flex-direction: column; gap: 10px; }
.hpc-hist-loading, .hpc-hist-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}
.hpc-hist-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}
.hpc-hist-item-main { min-width: 0; flex: 1 1 auto; }
.hpc-hist-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hpc-hist-jobtype { font-weight: 600; font-size: 0.92rem; }
.hpc-hist-status {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-border);
    color: var(--color-text-secondary);
}
.hpc-hist-status.is-ok { background: #16653420; color: #16a34a; }
.hpc-hist-badge {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #1e3a8a20;
    color: #3b82f6;
}
.hpc-hist-item-meta {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}
.hpc-hist-preview {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-family: var(--font-mono, monospace);
}
.hpc-hist-item-actions { flex: 0 0 auto; }

/* HPC Metrics & Totals modal (companion to Run History) — aggregate tiles + breakdown bars.
   Reuses .hpc-hist-filters / .hpc-hist-scope / .hpc-hist-loading / .hpc-hist-empty. */
/* Node-total headline band: the "truth" tier (all on-node LLM activity). Visually dominant so it
   reads as the headline; the CORe tiles below are framed as its subset. */
.hpc-metrics-headline {
    margin: 14px 0 6px;
}
.hpc-metrics-headline:empty { display: none; }
.hpc-metrics-headline-title {
    font-size: 0.9rem; font-weight: 700; color: var(--color-text-primary);
    text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px;
}
.hpc-metrics-headline-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.hpc-metrics-headline-card {
    padding: var(--spacing-md);
    background: var(--color-primary, #1f6feb);
    background: linear-gradient(135deg, var(--color-primary, #1f6feb), var(--color-primary-dark, #1a5fc4));
    border-radius: var(--border-radius-md);
    text-align: center; color: #fff;
}
.hpc-metrics-headline-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.hpc-metrics-headline-label { font-size: 0.78rem; opacity: 0.92; margin-top: 4px; }
.hpc-metrics-headline-note { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 8px; }
/* DSP-node compute band: a SEPARATE meter from LLM tokens. Distinct (teal) card treatment + a top
   rule so the two meters never read as one. Hidden when compute is absent/zero (band emits ''). */
.hpc-metrics-compute-band {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px dashed var(--color-border, #30363d);
}
.hpc-metrics-compute-card {
    background: var(--color-teal, #0d9488);
    background: linear-gradient(135deg, #0d9488, #0f766e);
}
.hpc-metrics-datastaged-band {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px dashed var(--color-border, #30363d);
}
.hpc-metrics-datastaged-card {
    background: var(--color-purple, #7c3aed);
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.hpc-metrics-subset-label { font-size: 0.86rem; color: var(--color-text-primary); margin: 12px 0 2px; }
.hpc-metrics-subset-label:empty { display: none; }
.hpc-metrics-subset-hint { font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 400; }
/* Secondary headline row: input/output split, failures, cost. Smaller/flatter than the primary
   node cards so the hierarchy reads (headline truth first, detail second). */
.hpc-metrics-headline-cards-sub { margin-top: 8px; }
.hpc-metrics-headline-card-sub {
    background: var(--color-bg-secondary, #161b22);
    border: 1px solid var(--color-border, #30363d);
    color: var(--color-text-primary, #e6edf3);
}
.hpc-metrics-headline-card-sub .hpc-metrics-headline-value { font-size: 1.4rem; }
.hpc-metrics-headline-card-sub .hpc-metrics-headline-label { color: var(--color-text-secondary); opacity: 1; }
/* Cost estimate band: node tokens priced across model options (Opus 5 / Sonnet 5 / Haiku) at
   current rates. A distinct sub-band so it reads as an estimate, separate from measured tokens. */
.hpc-metrics-cost-band { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--color-border, #30363d); }
.hpc-metrics-cost-band .hpc-metrics-cost-default { border-color: var(--color-accent, #2f81f7); box-shadow: inset 0 0 0 1px var(--color-accent, #2f81f7); }
/* Per-partition breakdown table: the node total is the sum of disjoint token partitions
   (CORe + HPAC + dsp-llm). Show each so the node figure is auditable, not a black box. */
.hpc-metrics-headline-subtitle { font-size: 0.8rem; color: var(--color-text-secondary); margin: 12px 0 6px; font-weight: 600; }
.hpc-metrics-partition-breakdown { margin-top: 12px; }
.hpc-metrics-part-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hpc-metrics-part-table th {
    text-align: right; padding: 4px 8px; color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border, #30363d); font-weight: 600;
}
.hpc-metrics-part-table th:first-child { text-align: left; }
.hpc-metrics-part-table td { padding: 4px 8px; border-bottom: 1px solid var(--color-border, #21262d); }
.hpc-metrics-part-label { text-align: left; color: var(--color-text-primary); }
.hpc-metrics-part-val { text-align: right; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
/* Data-freshness line: makes a quiet/zero window read as "nothing in THIS window", not "broken". */
.hpc-metrics-freshness { font-size: 0.76rem; color: var(--color-text-secondary); margin-top: 10px; font-style: italic; }
/* "Last refreshed HH:MM:SS" — poll-completion wall-clock next to Refresh; advances on every click. */
.hpc-metrics-refreshed { font-size: 0.72rem; color: var(--color-text-secondary, #6e6e73); opacity: 0.85; margin-left: 8px; font-variant-numeric: tabular-nums; align-self: center; }

/* ===== DTRA "Cluster Hours" allocation modal (HPCAllocations) — reuses .hpc-hist-* helpers ===== */
/* Totals band: three summary tiles (allocated / used / remaining CPU-hours), rendered into
   #hpc-allocations-totals (which carries .hpc-metrics-headline for consistent spacing). */
.hpc-alloc-total-tile {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 10px 16px; margin: 0 12px 8px 0;
    background: linear-gradient(135deg, var(--color-primary, #1f6feb), var(--color-primary-dark, #1a5fc4));
    border-radius: var(--border-radius-md, 8px); color: #fff; min-width: 140px;
}
.hpc-alloc-total-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hpc-alloc-total-lbl { font-size: 0.74rem; opacity: 0.92; margin-top: 2px; }
.hpc-alloc-table {
    width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}
.hpc-alloc-table th, .hpc-alloc-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--color-border, #30363d); text-align: left;
}
.hpc-alloc-table th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--color-text-secondary, #6e6e73); font-weight: 700;
}
.hpc-alloc-table tbody tr:hover { background: var(--color-bg-secondary, rgba(127,127,127,0.06)); }
.hpc-alloc-num { text-align: right; }
.hpc-alloc-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.82rem; }
/* remaining-percent classifiers — a nearly-exhausted grant reads red at a glance */
.hpc-alloc-crit { color: #d1242f; font-weight: 700; }
.hpc-alloc-warn { color: #bf8700; font-weight: 600; }
.hpc-alloc-ok   { color: #1a7f37; }
.hpc-alloc-footnote { font-size: 0.76rem; color: var(--color-text-secondary, #6e6e73); margin-top: 12px; line-height: 1.5; }
/* DSP0434 reservation countdown chip (#2351). A compact pill in the HPC section header; the text
   colour is supplied by the dynamically-added .hpc-alloc-ok|warn|crit class, so it reads green while
   healthy and amber→red as EndTime nears. Left border echoes the same tier colour. */
.hpc-reservation-status {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 8px 0 4px; padding: 6px 12px;
    border: 1px solid var(--color-border, #d2d2d7); border-left-width: 4px;
    border-radius: 8px; font-size: 0.85rem;
    background: var(--color-surface, #fff);
}
.hpc-reservation-status.hpc-alloc-crit { border-left-color: #d1242f; }
.hpc-reservation-status.hpc-alloc-warn { border-left-color: #bf8700; }
.hpc-reservation-status.hpc-alloc-ok   { border-left-color: #1a7f37; }
/* Collection-lifecycle sub-line appended to the "Collected …" freshness stamp (submitted/queued/ran). */
.hpc-alloc-lifecycle { color: var(--color-text-secondary, #6e6e73); font-size: 0.9em; }

.hpc-metrics-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 6px 0 18px;
}
.hpc-metrics-tile {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    text-align: center;
}
.hpc-metrics-tile-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
.hpc-metrics-tile-label { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 4px; }
.hpc-metrics-breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.hpc-metrics-bd-title { font-size: 0.86rem; font-weight: 600; margin: 0 0 8px; color: var(--color-text-primary); }
.hpc-metrics-bd-body { display: flex; flex-direction: column; gap: 6px; }
.hpc-metrics-bd-loading, .hpc-metrics-bd-empty { font-size: 0.82rem; color: var(--color-text-secondary); }
.hpc-metrics-bar-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.hpc-metrics-bar-label {
    flex: 0 0 34%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-text-primary);
}
.hpc-metrics-bar-track { flex: 1 1 auto; height: 10px; background: var(--color-border); border-radius: 5px; overflow: hidden; }
.hpc-metrics-bar-fill { display: block; height: 100%; background: #3b82f6; border-radius: 5px; }
.hpc-metrics-bar-count { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

/* HPC Path Health Probe — green/red matrix. NO YELLOW: is-pass (green) / is-fail (red) /
   is-skip (muted, blocked upstream). Mirrors the .hpc-op-status palette. */
.hpc-probe-verdict { margin: 8px 0 4px; }
.hpc-probe-verdict-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase;
    border: 1px solid transparent;
}
.hpc-probe-verdict-ok { background: rgba(52, 199, 89, 0.10); border-color: rgba(52, 199, 89, 0.35); color: #15803d; }
.hpc-probe-verdict-ok .hpc-op-status-dot { background: var(--color-accent-green); box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); }
.hpc-probe-verdict-down { background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.45); color: #b91c1c; }
.hpc-probe-verdict-down .hpc-op-status-dot { background: var(--color-accent-red); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.20); animation: hpc-op-pulse 1.6s ease-in-out infinite; }

.hpc-probe-h3 { font-size: 0.82rem; font-weight: 600; margin: 14px 0 6px; color: var(--color-text-primary); }
.hpc-probe-shared-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.hpc-probe-shared-cell {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: var(--border-radius-md);
    font-size: 0.8rem; border: 1px solid var(--color-border); background: var(--color-bg-secondary);
}
.hpc-probe-age { color: var(--color-text-secondary); font-size: 0.72rem; }

/* matrix table */
.hpc-probe-matrix-wrap { overflow-x: auto; margin: 6px 0 4px; }
.hpc-probe-matrix { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.hpc-probe-matrix th, .hpc-probe-matrix td {
    border: 1px solid var(--color-border); padding: 8px 10px; text-align: center;
}
.hpc-probe-matrix th { background: var(--color-bg-secondary); font-weight: 600; color: var(--color-text-primary); }
.hpc-probe-th-target, .hpc-probe-td-target { text-align: left; white-space: nowrap; }
.hpc-probe-td-target { font-weight: 600; color: var(--color-text-primary); }
.hpc-probe-cell { font-weight: 700; }
.hpc-probe-mark { font-size: 0.95rem; line-height: 1; }

/* shared-cell + matrix-cell status colors (single source: is-pass / is-fail / is-skip / is-info) */
.is-pass { background: rgba(52, 199, 89, 0.12); color: #15803d; border-color: rgba(52, 199, 89, 0.35); }
.is-fail { background: rgba(255, 59, 48, 0.12); color: #b91c1c; border-color: rgba(255, 59, 48, 0.40); }
.is-skip { background: rgba(148, 163, 184, 0.10); color: var(--color-text-secondary); }
/* informational-only (a fact not queryable at our role): neutral blue — never green OR red,
   so a reader never mistakes it for a health verdict. Does not gate the ALL-GREEN badge. */
.is-info { background: rgba(59, 130, 246, 0.10); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.30); }

.hpc-probe-culprits { margin-top: 12px; font-size: 0.8rem; }
.hpc-probe-culprits ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.hpc-probe-culprits li { color: var(--color-text-secondary); }
.hpc-probe-culprits strong { color: var(--color-text-primary); }
.hpc-probe-legend { margin-top: 10px; font-size: 0.72rem; color: var(--color-text-secondary); }

/* Model-Status: node activity + "who holds the node now" panel (running allocations). */
.hpc-activity-busy { color: #b45309; font-weight: 600; }
.hpc-activity-idle { color: #15803d; }
.hpc-holders-panel { box-sizing: border-box; overflow: hidden; margin-top: 12px; padding: 10px 12px; background: var(--color-surface-2, rgba(148,163,184,0.08)); border: 1px solid var(--color-border, #3f3f46); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.hpc-holders-head { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.hpc-holder-name { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; color: var(--color-text-secondary, #a1a1aa); background: rgba(148,163,184,0.12); padding: 0 5px; border-radius: 4px; margin-left: 2px; }
.hpc-holders-concurrency { font-size: 0.8rem; margin: -2px 0 2px; }

/* HPC Quick Links Section */
.hpc-quick-links-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.hpc-quick-links-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hpc-quick-links-title svg {
    color: #8b5cf6;
}

.hpc-quick-links-desc {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.hpc-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.hpc-links-card {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-fast);
}

.hpc-links-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hpc-links-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.05));
    border-bottom: 1px solid var(--color-border);
}

.hpc-links-card-header svg {
    color: #8b5cf6;
    flex-shrink: 0;
}

.hpc-links-card-header span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hpc-links-list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-sm) 0;
}

.hpc-links-list li {
    margin: 0;
}

.hpc-links-list a {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #6366f1;
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, 0.4);
    text-underline-offset: 2px;
    transition: var(--transition-fast);
}

.hpc-links-list a:hover {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
    text-decoration-color: #8b5cf6;
}

.hpc-links-list a::after {
    content: '↗';
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.7;
}

.hpc-links-list a:hover::after {
    opacity: 1;
}

/* HPC Responsive */
@media (max-width: 768px) {
    .hpc-coming-soon-banner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .hpc-integration-grid {
        grid-template-columns: 1fr;
    }

    .hpc-links-grid {
        grid-template-columns: 1fr;
    }

    .hpc-access-methods {
        flex-direction: column;
    }

    .hpc-method {
        min-width: auto;
    }

    .hpc-updates-panel {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   MODEL RUNNER - Model Cards & Modals
   ============================================ */

/* Model Card - Single Row Layout */
.model-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
    min-width: 0;
    flex-wrap: wrap;
}

.model-card:hover {
    border-color: var(--color-accent-purple);
    background: var(--color-bg-tertiary);
}

/* Clickable link area (icon + info) */
.model-card-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 100%;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.model-card-link:hover .model-card-name {
    color: var(--color-accent-purple);
    text-decoration: underline;
}

.model-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-purple), #6366f1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.model-card-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.model-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: left;
}

.model-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    display: block;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.model-card-project {
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Prebuilt model badge - indicates pre-built container image */
.model-prebuilt-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.model-prebuilt-badge svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Access level badge on model cards + data cards (bug 1.1: data cards now match) */
.model-access-badge,
.dataset-access-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 8px;
    vertical-align: middle;
}

.model-card-prebuilt {
    border-left: 3px solid #10b981;
}

.model-card-prebuilt .model-card-icon svg {
    stroke: #10b981;
}

/* Usage badges - show how many apps use this model/dataset */
.model-usage-badge,
.dataset-usage-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    cursor: help;
}

.model-usage-badge svg,
.dataset-usage-badge svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .model-usage-badge,
[data-theme="dark"] .dataset-usage-badge {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

.model-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    flex: 1 1 100%;
    justify-content: flex-end;
}

.model-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
    min-width: 100px;
    white-space: nowrap;
}

.model-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Run in CORe Button */
.model-run-core-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.model-run-core-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Run Local Button */
.model-run-local-btn {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.model-run-local-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-text-secondary);
}

/* Run in EKS Button (Cloud deployment) */
.model-run-eks-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.model-run-eks-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Run in ECS Button (Fargate deployment) */
.model-run-ecs-btn {
    background: linear-gradient(135deg, #ff6b35, #e55a2b);
    color: white;
}

.model-run-ecs-btn:hover {
    background: linear-gradient(135deg, #e55a2b, #cc4a1f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Model Card Button */
.model-modelcard-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.model-modelcard-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Open Button (for hosted apps) */
.model-open-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    text-decoration: none;
}

.model-open-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    color: white;
}

/* Hosted Badge */
.model-hosted-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Group Badge */
.model-group-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
}

/* Model Card Group Styles */
.model-card-group {
    border-left: 3px solid #8b5cf6;
}

.model-card-group .group-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
}

.model-card-group .group-expand-icon {
    margin-left: auto;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    color: #8b5cf6;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-card-group .group-expand-icon:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #7c3aed;
}

.model-card-group .group-expand-icon svg {
    width: 18px;
    height: 18px;
}

.model-card-group.expanded .group-expand-icon {
    transform: rotate(180deg);
}

/* Group Apps List */
.group-apps-list {
    display: none;
    padding: 0 var(--spacing-md) var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 300px;
    overflow-y: auto;
}

.model-card-group.expanded .group-apps-list {
    display: flex;
}

.group-app-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
}

.group-app-item:hover {
    background: var(--color-bg-hover);
    transform: translateX(4px);
}

.group-app-item .group-app-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.group-app-item svg {
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.group-app-item:hover svg {
    opacity: 1;
    color: var(--color-accent);
}

/* Hosted Model Card */
.model-card-hosted {
    border-left: 3px solid #10b981;
}

/* Model Card Dialog Button (in prompts) */
.modelcard-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modelcard-btn svg {
    width: 16px;
    height: 16px;
}

.modelcard-btn.primary {
    background: var(--color-accent-purple);
    color: white;
    border: none;
}

.modelcard-btn.primary:hover {
    opacity: 0.9;
}

.modelcard-btn.secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.modelcard-btn.secondary:hover {
    background: var(--color-bg-hover);
}

/* Card Save Workflow Modal */
.card-save-modal-content {
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-save-modal-body {
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.card-save-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

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

.card-save-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-save-section h3 svg {
    color: var(--color-accent-purple);
}

.card-save-option-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-save-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: border-color 0.2s, background 0.2s;
}

.card-save-radio:has(input:checked) {
    border-color: var(--color-accent-purple);
    background: rgba(139, 92, 246, 0.05);
}

.card-save-radio input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--color-accent-purple);
}

.card-save-radio .radio-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-save-radio .radio-label strong {
    font-size: 14px;
    color: var(--color-text-primary);
}

.card-save-radio .option-path {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    word-break: break-all;
}

.card-save-different-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.card-save-different-fields .filter-select,
.card-save-different-fields .filter-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
}

.card-save-version-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card-save-version-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-save-version-field label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.version-badge {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    display: inline-block;
}

.version-input {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: var(--font-mono);
}

.version-input:focus {
    outline: none;
    border-color: var(--color-accent-purple);
}

.version-hint {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.version-bump-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.version-bump-btn:hover {
    background: var(--color-accent-purple);
    color: white;
    border-color: var(--color-accent-purple);
}

.card-save-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-primary);
}

.card-save-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent-purple);
}

.card-save-tag-options {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-save-tag-options label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tag-input {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: var(--font-mono);
}

.tag-input:focus {
    outline: none;
    border-color: var(--color-accent-purple);
}

.tag-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.card-save-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
}

.card-save-modal-footer button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.card-save-modal-footer .btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.card-save-modal-footer .btn-secondary:hover {
    background: var(--color-bg-hover);
}

.card-save-modal-footer .btn-primary {
    background: var(--color-accent-purple);
    color: white;
    border: none;
}

.card-save-modal-footer .btn-primary:hover {
    opacity: 0.9;
}

.card-save-modal-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Disabled Save button state for viewers */
#modelcard-viewer-save:disabled,
#datacard-viewer-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#modelcard-viewer-save:disabled:hover,
#datacard-viewer-save-btn:disabled:hover {
    opacity: 0.5;
}

/* Model Run Modal */
.model-run-modal-content {
    max-width: 640px;
    text-align: center;
}

.model-run-header {
    margin-bottom: 24px;
}

.model-run-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--color-text-primary);
}

.model-run-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.model-run-body {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-run-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.model-run-progress p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.model-run-success,
.model-run-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.model-run-success svg {
    width: 48px;
    height: 48px;
    color: var(--color-success);
}

.model-run-error svg {
    width: 48px;
    height: 48px;
    color: var(--color-error);
}

.model-run-success p,
.model-run-error p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-primary);
}

.model-run-instructions {
    margin-top: 20px;
    padding: 16px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    text-align: left;
    width: 100%;
}

.model-run-instructions .model-run-tip {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--color-text-primary);
}

.model-run-instructions ol {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.model-run-instructions li {
    margin-bottom: 8px;
}

.model-run-instructions code {
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-accent-blue);
}

.model-run-instructions .streamlit-link {
    color: var(--color-accent-blue);
    word-break: break-all;
    font-size: 12px;
}

.model-run-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Model Local Modal */
.model-local-modal-content {
    max-width: 600px;
    text-align: left;
}

.model-local-body {
    max-height: 400px;
    overflow-y: auto;
}

.model-local-instructions {
    padding: 0 4px;
}

.model-local-instructions h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px 0;
    color: var(--color-text-primary);
}

.model-local-instructions h3:first-child {
    margin-top: 0;
}

.model-local-instructions ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.model-local-instructions li {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.model-local-instructions .code-block {
    display: flex;
    align-items: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.model-local-instructions .code-block code {
    flex: 1;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--color-text-primary);
    word-break: break-all;
}

.model-local-instructions .copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.model-local-instructions .copy-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.model-local-instructions .copy-btn svg {
    width: 16px;
    height: 16px;
}

.model-local-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.model-local-note a {
    color: var(--color-accent-blue);
    text-decoration: none;
}

.model-local-note a:hover {
    text-decoration: underline;
}
/* HPC Modal Styles */
.model-hpc-modal-content {
    max-width: 600px;
    text-align: left;
}

.model-hpc-body {
    max-height: 400px;
    overflow-y: auto;
}

.model-hpc-instructions {
    padding: 0 4px;
}

.model-hpc-instructions h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px 0;
    color: var(--color-text-primary);
    text-align: left;
}

.model-hpc-instructions h3:first-child {
    margin-top: 0;
}

.model-hpc-instructions ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
    text-align: left;
}

.model-hpc-instructions li {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    text-align: left;
}

.model-hpc-instructions .code-block {
    display: flex;
    align-items: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 12px;
    text-align: left;
}

.model-hpc-instructions .code-block code {
    flex: 1;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--color-text-primary);
    word-break: break-all;
    text-align: left;
}

.model-hpc-instructions .copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.model-hpc-instructions .copy-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.model-hpc-instructions .copy-btn svg {
    width: 16px;
    height: 16px;
}

.model-hpc-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.model-hpc-note a {
    color: var(--color-accent-blue);
    text-decoration: none;
}

.model-hpc-note a:hover {
    text-decoration: underline;
}


/* HPC Button Styling - Teal color for distinction */
.model-run-hpc-btn {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    color: white !important;
    border: none !important;
}

.model-run-hpc-btn:hover {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}



/* Responsive Model Cards */
@media (max-width: 768px) {
    .model-card-actions {
        justify-content: flex-start;
    }

    .model-action-btn {
        min-width: auto;
    }

    .model-local-modal-content {
        max-width: 95vw;
    }
}

/* ============================================
   STAT BADGE LOADING STATE - Animated Gradient Dots
   ============================================ */

.stat-loading {
    color: transparent !important;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #3b82f6);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: loadingGradient 1.5s ease-in-out infinite, loadingPulse 0.6s ease-in-out infinite;
    font-size: 2.6em;
    font-weight: bold;
    letter-spacing: 6px;
}

/* Disable clicks on stat cards while their content is loading */
.stat-card:has(.stat-loading) {
    pointer-events: none;
    cursor: wait;
    opacity: 0.7;
    position: relative;
}

/* Tooltip hint for loading badges */
.stat-card:has(.stat-loading)::after {
    content: "Loading...";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--color-text-tertiary);
    opacity: 0.9;
    white-space: nowrap;
}

@keyframes loadingGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes loadingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ============================================
   AWS AUTH - S3 Authentication Modal
   ============================================ */

/* AWS stat card icon */
.aws-icon {
    background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%) !important;
}

.aws-icon svg {
    width: 24px;
    height: 24px;
}

/* AWS Auth label styling */
.aws-auth-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.aws-auth-label.connected {
    color: var(--color-success);
    opacity: 1;
    font-weight: 500;
}

/* AWS Auth Modal Content */
.aws-auth-modal-content {
    max-width: 480px;
    text-align: left;
}

.aws-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.aws-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aws-auth-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.aws-auth-field input,
.aws-auth-field select {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aws-auth-field input:focus,
.aws-auth-field select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.aws-auth-field input::placeholder {
    color: var(--color-text-tertiary);
    font-family: inherit;
}

/* AWS Auth Status Display */
.aws-auth-status-display {
    display: none;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.aws-auth-status-display.visible {
    display: block;
}

.aws-auth-connected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.aws-auth-connected-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aws-auth-connected-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.95rem;
}

.aws-auth-connected-label svg {
    width: 18px;
    height: 18px;
}

.aws-auth-connected-region {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* AWS Auth Buttons */
.aws-auth-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.aws-auth-btn-primary {
    background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
    color: white;
}

.aws-auth-btn-primary:hover {
    background: linear-gradient(135deg, #ffaa22 0%, #ff7711 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.aws-auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.aws-auth-btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.aws-auth-btn-secondary:hover {
    background: var(--color-bg-secondary);
}

.aws-auth-btn-danger {
    background: var(--color-error);
    color: white;
}

.aws-auth-btn-danger:hover {
    background: #dc2626;
}

/* AWS Auth Error Display */
.aws-auth-error {
    display: none;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.aws-auth-error.visible {
    display: block;
}

/* AWS Auth Security Note */
.aws-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 16px;
}

.aws-auth-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent-blue);
}

/* AWS Auth Modal Footer */
.aws-auth-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Hide form when connected */
.aws-auth-form.hidden {
    display: none;
}

/* Loading spinner for AWS auth button */
.aws-auth-btn .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   S3 Bucket Browser Modal
   ============================================ */
.s3-browser-modal-content {
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.s3-browser-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.s3-browser-title-group {
    flex: 1;
    min-width: 0;
}

.s3-browser-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
}

.s3-browser-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.s3-browser-bucket {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.s3-browser-region-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

.s3-browser-region {
    color: var(--color-text-secondary);
}

.s3-console-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
}

.s3-console-link:hover {
    opacity: 0.8;
}

.s3-browser-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-md);
}

.s3-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}

.s3-breadcrumb-item {
    background: none;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    color: var(--color-accent-blue);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.s3-breadcrumb-item:hover {
    background: var(--color-bg-hover);
}

.s3-breadcrumb-item svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: var(--spacing-xs);
}

.s3-breadcrumb-separator, .s3-breadcrumb-sep {
    color: var(--color-text-tertiary);
}

.s3-browser-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.s3-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.s3-action-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

.s3-action-btn svg {
    width: 16px;
    height: 16px;
}

.s3-download-all-btn {
    background: linear-gradient(135deg, #34c759, #30b350);
    border-color: #30b350;
    color: white;
}

.s3-download-all-btn:hover {
    background: linear-gradient(135deg, #30b350, #2aa348);
    border-color: #2aa348;
}

.s3-browser-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.s3-browser-content {
    min-height: 200px;
}

.s3-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
    color: var(--color-text-secondary);
}

.s3-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.s3-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
    color: var(--color-accent-red);
    text-align: center;
}

.s3-error svg {
    width: 48px;
    height: 48px;
    opacity: 0.6;
}

.s3-error-detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.s3-files-list {
    display: flex;
    flex-direction: column;
}

.s3-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.s3-file-item:hover {
    background: var(--color-bg-hover);
}

.s3-folder {
    cursor: pointer;
}

.s3-file-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.s3-file-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.s3-folder .s3-file-icon {
    background: linear-gradient(135deg, #ff9500, #ff7b00);
}

.s3-folder .s3-file-icon svg {
    color: white;
}

.s3-file-info {
    flex: 1;
    min-width: 0;
}

.s3-file-name {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s3-folder .s3-file-name {
    color: var(--color-accent-orange);
}

.s3-file-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.s3-file-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.s3-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.s3-download-btn:hover {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    color: white;
}

.s3-download-btn svg {
    width: 16px;
    height: 16px;
}

.s3-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
    text-align: center;
}

.s3-empty svg {
    width: 48px;
    height: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
}

.s3-browser-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ---- S3 browser: multi-select bar + file checkboxes ---- */
.s3-selection-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.3);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.s3-selection-actions { display: flex; gap: 8px; }
.s3-file-check {
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px 0 2px; cursor: pointer;
}
.s3-file-check input { width: 16px; height: 16px; cursor: pointer; }

/* ---- S3 browser: download-format chooser + over-limit modal ---- */
.s3-choose-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.s3-choose-dialog {
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-primary, #1d1d1f);
    border-radius: 14px; padding: 22px; width: 100%; max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.s3-choose-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.s3-choose-sub { font-size: 13px; color: var(--color-text-secondary, #6e6e73); margin-bottom: 14px; }
.s3-choose-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.s3-choose-remember-label { font-size: 12px; color: var(--color-text-secondary, #6e6e73); display: flex; align-items: center; gap: 6px; }
.s3-cli-cmd {
    background: var(--color-bg-secondary, #f5f5f7);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 8px; padding: 10px 12px; margin: 0 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; white-space: pre-wrap; word-break: break-all;
    color: var(--color-text-primary, #1d1d1f);
}
.s3-cli-hint { font-size: 11px; color: var(--color-text-muted, #86868b); margin-top: 8px; }

/* ============================================
   Dataset Cards with View/Download Buttons
   ============================================ */
.dataset-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.dataset-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.dataset-card-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dataset-card-link:hover .dataset-card-name {
    color: var(--color-accent-blue);
    text-decoration: underline;
}

.dataset-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.dataset-card-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.dataset-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
}

.dataset-card-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dataset-card-project {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Dataset source type badges */
.dataset-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 3px;
    width: fit-content;
}

.dataset-source-badge svg {
    width: 10px;
    height: 10px;
}

.source-badge-s3 {
    background: linear-gradient(135deg, #ff9900, #ff7700);
    color: white;
}

.source-badge-efs {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.source-badge-rds {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.source-badge-local {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.source-badge-default {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: white;
}

.dataset-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.dataset-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.dataset-action-btn svg {
    width: 16px;
    height: 16px;
}

.dataset-view-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.dataset-view-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dataset-download-btn {
    background: linear-gradient(135deg, #34c759, #30b350);
    color: white;
}

.dataset-download-btn:hover {
    background: linear-gradient(135deg, #30b350, #2aa348);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Data Card button on dataset cards */
.dataset-datacard-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.dataset-datacard-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Responsive for dataset cards */
@media (max-width: 640px) {
    .dataset-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .dataset-card-link {
        width: 100%;
    }

    .dataset-card-actions {
        width: 100%;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border);
        justify-content: stretch;
    }

    .dataset-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   Data Card Editor Styles
   ============================================ */
.datacard-schema-version {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.datacard-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.datacard-info-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-accent-blue);
}

.datacard-mode-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.datacard-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.datacard-mode-tab:hover {
    background: var(--color-bg-hover);
}

.datacard-mode-tab.active {
    background: var(--color-accent-blue);
    color: white;
    border-color: var(--color-accent-blue);
}

.datacard-mode-tab svg {
    width: 18px;
    height: 18px;
}

.datacard-panel {
    padding: var(--spacing-md) 0;
}

.datacard-filters {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.datacard-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.datacard-filter-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.datacard-results {
    min-height: 200px;
}

/* Single-column list view (like Models and Data Sets) */
.datacard-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Search button icon sizing */
#datacard-search-btn svg {
    width: 20px;
    height: 20px;
}

.datacard-empty-state,
.datacard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.datacard-empty-state svg,
.datacard-empty svg {
    width: 64px;
    height: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
}

.datacard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
    color: var(--color-text-secondary);
}

.datacard-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.datacard-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.datacard-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.datacard-item-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.datacard-item-info {
    flex: 1;
    min-width: 0;
}

.datacard-item-name {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datacard-item-project {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datacard-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.datacard-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.datacard-action-btn:hover {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    color: white;
}

.datacard-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Data Card Viewer Modal */
.datacard-viewer-modal-content {
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.datacard-viewer-tabs {
    display: flex;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.datacard-viewer-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.datacard-viewer-tab:hover {
    color: var(--color-text-primary);
}

.datacard-viewer-tab.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
}

.datacard-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.datacard-viewer-content {
    min-height: 200px;
}

.datacard-rendered-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.datacard-section {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.datacard-section h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.datacard-field {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.datacard-field label {
    font-weight: 500;
    color: var(--color-text-secondary);
    min-width: 120px;
    flex-shrink: 0;
}

.datacard-field span {
    color: var(--color-text-primary);
}

.datacard-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.datacard-keyword {
    display: inline-flex;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.datacard-json-editor {
    width: 100%;
    min-height: 400px;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    resize: vertical;
}

.datacard-json-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.datacard-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.datacard-btn svg {
    width: 16px;
    height: 16px;
}

.datacard-viewer-footer {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    justify-content: flex-end;
}

.datacard-btn.primary {
    background: var(--color-accent-blue);
    color: white;
    border: none;
}

.datacard-btn.primary:hover {
    opacity: 0.9;
}

.datacard-btn.secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.datacard-btn.secondary:hover {
    background: var(--color-bg-hover);
}

/* Example Panel */
.datacard-example-header {
    margin-bottom: var(--spacing-lg);
}

.datacard-example-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.datacard-example-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.datacard-example-json {
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    overflow-x: auto;
    white-space: pre;
}

.datacard-create-info {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-secondary);
}

/* Data Card Editor Form */
.datacard-editor {
    padding: var(--spacing-md);
}

.datacard-editor-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.datacard-editor-section h3 {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.datacard-editor-section .required-marker {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-tertiary);
}

.datacard-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.datacard-editor-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.datacard-editor-field-full {
    grid-column: span 2;
}

.datacard-editor-field label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.datacard-editor-field input,
.datacard-editor-field select,
.datacard-editor-field textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.datacard-editor-field input:focus,
.datacard-editor-field select:focus,
.datacard-editor-field textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.datacard-editor-field textarea {
    resize: vertical;
    min-height: 60px;
}

.datacard-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .datacard-editor-grid {
        grid-template-columns: 1fr;
    }

    .datacard-editor-field-full {
        grid-column: span 1;
    }
}

/* Data Card icon color */
.datacard-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}

/* ============================================
   TRANSITION TOOLS SECTION
   ============================================ */

/* Transition Tools icon */
.transition-icon {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

/* Coming Soon Placeholder (generic) */
.coming-soon-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    background: var(--color-bg-secondary);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    min-height: 300px;
}

.coming-soon-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-radius: 50%;
    margin-bottom: var(--spacing-lg);
}

.coming-soon-icon svg {
    width: 40px;
    height: 40px;
    color: #8b5cf6;
}

.coming-soon-placeholder h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

.coming-soon-placeholder p {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    max-width: 400px;
}

.coming-soon-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 20px;
}


/* ============================================
   USER MANAGEMENT ACTIONS STYLES
   ============================================ */

/* Tab Navigation */
.uma-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.uma-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.uma-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.uma-tab.active {
    color: var(--color-accent);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-accent);
}

.uma-tab-badge {
    background: var(--color-accent);
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.uma-tab-content {
    display: none;
}

.uma-tab-content.active {
    display: block;
}

/* ============================================
   UNIFIED USER MANAGEMENT STYLES (um- prefix)
   ============================================ */

.um-container {
    padding: var(--spacing-md);
}

.um-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.um-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.um-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.um-tab.active {
    color: var(--color-accent);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-accent);
}

.um-tab-badge {
    background: var(--color-accent);
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.um-tab-content {
    display: none;
}

.um-tab-content.active {
    display: block;
}

.um-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.um-requests-list, .um-pending-list, .um-provisioning-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.um-completed-note {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.um-completed-note a {
    display: inline-block;
    margin-top: var(--spacing-md);
}

.um-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.um-state-filter {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.um-state-filter:focus {
    outline: none;
    border-color: var(--color-accent);
}

.um-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.um-empty h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.um-empty button {
    margin-top: var(--spacing-md);
}

/* Request Cards */
.uma-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
}

.uma-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.uma-card.sla-overdue {
    border-left: 4px solid var(--color-danger);
}

.uma-card.sla-warning {
    border-left: 4px solid var(--color-warning);
}

.uma-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.uma-requestor-info {
    display: flex;
    flex-direction: column;
}

.uma-requestor {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.uma-priority {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.uma-priority.priority-low { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.uma-priority.priority-medium { background: #FEF3C7; color: #92400E; }
.uma-priority.priority-high { background: #FEE2E2; color: #991B1B; }
.uma-priority.priority-urgent { background: #991B1B; color: white; }

.uma-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.uma-stats {
    display: flex;
    gap: var(--spacing-md);
}

.uma-stat {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.uma-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.uma-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.uma-sla-badge {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-danger);
    color: white;
}

.uma-sla-badge.warning {
    background: var(--color-warning);
    color: #92400E;
}

.uma-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.uma-assign-btn,
.uma-review-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
}

.uma-assign-btn:hover {
    background: var(--color-bg-tertiary);
}

.uma-review-btn {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.uma-review-btn:hover {
    background: var(--color-accent-hover);
}

.uma-gitlab-link {
    padding: var(--spacing-xs);
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.uma-gitlab-link:hover {
    color: var(--color-accent);
}

/* Empty State */
.uma-empty {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--color-text-secondary);
}

.uma-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.uma-empty h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

/* Section Title */
.uma-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

.uma-section-title:first-child {
    margin-top: 0;
}

/* Clickable card styling */
.uma-card.clickable {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.uma-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.uma-header-badges {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.uma-stage-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.uma-stage-badge.stage-admin-review {
    background: #EFF6FF;
    color: #1D4ED8;
}

.uma-stage-badge.stage-customer-review {
    background: #FFF7ED;
    color: #C2410C;
}

.uma-stage-badge.stage-provisioning {
    background: #ECFDF5;
    color: #047857;
}

.uma-own-request {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ============================================
   INLINE REVIEW FORM STYLES
   ============================================ */

.um-error-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin: var(--spacing-md);
}

.um-error-retry-btn {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
}

.um-error-retry-btn:hover {
    opacity: 0.9;
}

/* Revert Button */
.um-revert-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md);
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-revert-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: #d97706;
    color: #d97706;
}

.um-revert-btn svg {
    width: 16px;
    height: 16px;
}

/* Revert Modal */
.um-revert-modal-content {
    max-width: 600px;
}

.um-revert-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.um-revert-section h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.um-revert-section h3 .required {
    color: #ef4444;
}

.um-revert-select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.um-revert-textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    resize: vertical;
    font-family: inherit;
}

.um-revert-textarea:focus,
.um-revert-select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Revert Preview (Phase 2) */
.um-revert-preview {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.um-revert-preview h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.um-revert-diff {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Revert Warning */
.um-revert-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    color: #d97706;
}

.um-revert-warning svg {
    flex-shrink: 0;
}

.um-revert-warning span {
    font-size: var(--font-size-sm);
}

/* Revert Modal Footer */
.um-revert-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.btn-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-warning svg {
    width: 16px;
    height: 16px;
}

.um-review-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.um-review-section {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.um-review-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.um-review-section-title .required {
    color: #EF4444;
}

.um-review-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.um-review-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.um-review-info-item label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.um-review-info-item span {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.um-stage-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.um-stage-badge.stage-admin-review {
    background: #DBEAFE;
    color: #1E40AF;
}

.um-stage-badge.stage-customer-review {
    background: #FFEDD5;
    color: #9A3412;
}

.um-stage-badge.stage-provisioning {
    background: #D1FAE5;
    color: #065F46;
}

.um-stage-badge.stage-needs-more-info {
    background: #FEF3C7;
    color: #92400E;
}

.um-stage-badge.stage-on-hold {
    background: #F3F4F6;
    color: #6B7280;
}

/* Bulk actions */
.um-review-bulk-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.um-bulk-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-bulk-btn svg {
    width: 14px;
    height: 14px;
}

.um-bulk-approve {
    background: #ECFDF5;
    border: 1px solid #10B981;
    color: #059669;
}

.um-bulk-approve:hover {
    background: #10B981;
    color: white;
}

.um-bulk-deny {
    background: #FEF2F2;
    border: 1px solid #EF4444;
    color: #DC2626;
}

.um-bulk-deny:hover {
    background: #EF4444;
    color: white;
}

/* Resource list */
.um-review-resources {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.um-review-resource {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    gap: var(--spacing-md);
}

.um-review-resource-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.um-review-resource-type {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Wave 3: wraps the type tag + changeType badge + classification badge on one
   row, above the resource name - matches mockup-full-flow.html's validated
   openReview() layout. */
.um-review-resource-toprow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Wave 3: changeType badge (modify/new/delete) - pastel-pill palette matching
   the existing .um-audit-action/.um-audit-decision/.uma-priority precedent,
   not the flat --color-accent-* tokens (reserved for solid interactive UI). */
.um-resource-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.um-badge-modify {
    background: #FEF3C7;
    color: #92400E;
}

.um-badge-new {
    background: #D1FAE5;
    color: #065F46;
}

.um-badge-delete {
    background: #FEE2E2;
    color: #991B1B;
}

.um-review-resource-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.um-review-resource-role {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.um-role-value {
    color: var(--color-accent-blue);
    font-weight: 600;
}

/* Wave 3: prefixes the modify role-line ("Change Role: X -> Y") */
.um-role-label-modify {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.um-review-resource-justification {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

.um-review-resource-decision {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.um-review-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.um-review-radio input[type="radio"] {
    accent-color: var(--color-accent);
}

.um-radio-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.um-radio-label.approve {
    color: #059669;
}

.um-radio-label.deny {
    color: #DC2626;
}

.um-radio-label.pending {
    color: var(--color-text-secondary);
}

.um-review-radio input[type="radio"]:checked + .um-radio-label.approve {
    background: #ECFDF5;
}

.um-review-radio input[type="radio"]:checked + .um-radio-label.deny {
    background: #FEF2F2;
}

.um-review-radio input[type="radio"]:checked + .um-radio-label.pending {
    background: var(--color-bg-tertiary);
}

/* Reviewer notes */
.um-reviewer-notes {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    resize: vertical;
    min-height: 80px;
}

.um-reviewer-notes:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

/* Assignee select */
.um-review-hint {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.um-review-select {
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.um-review-select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Action buttons */
.um-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.um-review-cancel-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-review-cancel-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.um-review-submit-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-review-submit-btn:hover {
    background: var(--color-accent-hover);
}

.um-review-submit-btn svg {
    width: 16px;
    height: 16px;
}

/* Audit History Timeline */
.um-audit-history > summary {
    cursor: pointer;
    user-select: none;
}

.um-clickable { cursor: pointer; }

.um-audit-timeline {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}

.um-audit-entry {
    padding: 8px 12px;
    border-left: 3px solid var(--color-border);
    margin-left: 8px;
    margin-bottom: 8px;
}

.um-audit-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.um-audit-action {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.um-audit-action.action-submitted { background: #DBEAFE; color: #1E40AF; }
.um-audit-action.action-decision { background: #FEF3C7; color: #92400E; }
.um-audit-action.action-provisioned { background: #D1FAE5; color: #065F46; }
.um-audit-action.action-revert { background: #FEE2E2; color: #991B1B; }
.um-audit-action.action-on-hold { background: #F3F4F6; color: #6B7280; }
.um-audit-action.action-resumed { background: #D1FAE5; color: #065F46; }
.um-audit-action.action-resource-cancelled { background: #F3F4F6; color: #6B7280; }

.um-audit-version { font-size: 0.7rem; color: var(--color-text-tertiary); }
.um-audit-time { font-size: 0.7rem; color: var(--color-text-tertiary); margin-left: auto; }

.um-audit-entry-actor {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.um-audit-entry-notes {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text-secondary);
}

.um-audit-entry-decisions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.um-audit-decision {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
}
.um-audit-decision.decision-approved { background: #D1FAE5; color: #065F46; }
.um-audit-decision.decision-denied { background: #FEE2E2; color: #991B1B; }
.um-audit-decision.decision-pending { background: #F3F4F6; color: #6B7280; }
.um-audit-decision.decision-needs-info { background: #FEF3C7; color: #D97706; }

/* Conditional approval input */
.um-resource-condition {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

.um-condition-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
}

.um-condition-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Assignee show-all */
.um-assignee-show-all {
    margin-top: 6px;
}
.um-assignee-show-all > summary {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.um-review-hold-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: var(--radius-md);
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-review-hold-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #4b5563;
}

/* ============================================
   APPROVAL MODAL STYLES
   ============================================ */

.uma-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.uma-modal-content {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.uma-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.uma-modal-header h2 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.uma-gitlab-link-header {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-decoration: none;
}

.uma-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--spacing-xs);
}

.uma-modal-close:hover {
    color: var(--color-text-primary);
}

.uma-modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.uma-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* Review Modal (#2454) */
.um-review-modal-content {
    max-width: 900px;
}

.um-review-modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

@media (max-width: 720px) {
    .um-review-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Requestor Panel */
.uma-requestor-panel {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.uma-requestor-panel h3 {
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
}

.uma-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.uma-res-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.uma-classification {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Wave 3 (2026-08-27): recolored from the Wave 1-preserved blue/red to
   green/orange/red per Lerissa's explicit convention - IL2 and PRI share
   green (same tier grouping in her mental model), IL4 is orange, IL5 is red
   (reserved - no IL5 tier exists yet, future enhancement, not built). */
.uma-classification.uma-il2,
.uma-classification.uma-pri {
    background: #D1FAE5;
    color: #065F46;
}

.uma-classification.uma-il4 {
    background: #FFEDD5;
    color: #9A3412;
}

/* .uma-classification.uma-il5 reserved for a future IL5 tier - red
   (#FEE2E2/#991B1B), not built now, no IL5 group exists yet. */

/* Deny Reason */
.uma-deny-reason {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: #FEF2F2;
    border-radius: var(--radius-md);
}

.uma-deny-reason label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--color-danger);
}

.uma-deny-reason-select,
.uma-deny-reason-text {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

/* Modification Detail (mirrors Deny Reason, amber not red) */
.um-modify-detail {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: #FFFBEB;
    border-radius: var(--radius-md);
}

.um-modify-detail label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: #92400E;
}

.um-modify-detail-text {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

/* #2487 Item #13/#14 - Verify Priority + Verify Access Expiry Date, side by
   side. auto-fit/minmax is the SAME technique .um-review-info-grid already
   uses elsewhere in this modal - reused for consistency rather than a
   hand-picked media-query breakpoint. Drops to one-per-row automatically
   below ~600px combined width instead of squishing two fixed-width controls
   into a too-narrow (phone) screen - raised directly by Lerissa, validated
   against mockup-verify-expiry.html v3 before this was written. */
.verify-row-grid {
    margin-top: var(--spacing-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

/* Verify Access Expiry Date - New Resource requests only (Item #14). Same
   box family as Verify Priority below (one row: bold label + control, per
   Lerissa's correction on v1/v2's layout - see mockup-verify-expiry.html's
   own history for why it isn't a two-row title+sub-label structure). */
.verify-expiry-box {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.verify-expiry-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.verify-expiry-date-input {
    flex: 0 1 260px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.verify-expiry-date-input.invalid {
    border-color: var(--color-danger);
}

/* #2487 Item #13 - Verify Priority box. Styled to match the
   .uma-deny-reason/.um-modify-detail "box below the decision row" pattern
   above (same padding/radius), but unconditional (always shown, not gated
   on a specific decision) and neutral-colored since it's a required field,
   not an error/warning state. Validated against Lerissa's real screenshots
   via mockup-verify-priority.html before this was written. margin-top now
   lives on the .verify-row-grid wrapper above, not here (this box is always
   inside that wrapper as of Item #14). */
.verify-priority-box {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.verify-priority-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.required-asterisk {
    color: var(--color-danger);
}

/* Narrowed per Lerissa's visual feedback (2026-09-15, comparing against the
   Verify Access Expiry Date mockup) - was `flex: 1` (fills all remaining row
   width); now a bounded flex-basis so the bolder label above has breathing
   room instead of being crowded against a full-width select. */
.verify-priority-select {
    flex: 0 1 260px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.tooltip-icon .tooltip-content {
    display: none;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.6;
    width: 190px;
    white-space: normal;
    box-shadow: var(--shadow-md);
    z-index: 10;
    text-align: left;
}

.tooltip-icon:hover .tooltip-content,
.tooltip-icon:focus .tooltip-content {
    display: block;
}

/* Modal Buttons */
.uma-cancel-btn,
.uma-submit-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: none;
}

.uma-cancel-btn {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.uma-submit-btn {
    background: var(--color-accent);
    color: white;
}

.uma-submit-btn:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* Assignment Modal (smaller variant) */
.uma-assign-modal-content {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.uma-assign-modal-content .uma-modal-body {
    padding: var(--spacing-lg);
}

.uma-assignee-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.uma-assignee-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.uma-assignee-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.uma-assign-notes {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    resize: vertical;
    min-height: 80px;
    margin-top: var(--spacing-md);
}

.uma-assign-notes:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.uma-assign-notes::placeholder {
    color: var(--color-text-tertiary);
}

.uma-assign-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

.uma-assign-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.uma-assignee-select {
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.uma-assignee-select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ============================================
   PROVISIONING STYLES
   ============================================ */

.uma-prov-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.uma-prov-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.uma-approved-badge {
    background: var(--color-success);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.uma-prov-resources {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.uma-prov-resource {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.uma-prov-resource.provisioned {
    background: #D1FAE5;
}

.uma-prov-resource.ghosted {
    opacity: 0.7;
}

.uma-res-role {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-left: auto;
}

.uma-prov-status {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

.uma-prov-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.uma-prov-btn.ghosted {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* Provisioning states */
.uma-prov-failed {
    font-size: var(--font-size-xs);
    color: #DC2626;
    font-weight: 600;
}

.uma-prov-error {
    font-size: 0.7rem;
    color: #991B1B;
    font-style: italic;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uma-prov-inprogress {
    font-size: var(--font-size-xs);
    color: #2563EB;
    font-weight: 500;
}

.uma-retry-btn {
    background: #DC2626 !important;
}
.uma-retry-btn:hover {
    background: #B91C1C !important;
}

.uma-prov-resource.failed {
    border-left: 3px solid #DC2626;
    padding-left: 8px;
}

.uma-prov-all-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: #059669;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    cursor: pointer;
    margin-left: auto;
}
.uma-prov-all-btn:hover { background: #047857; }

.uma-prov-condition {
    font-size: 0.75rem;
    color: #92400E;
    background: #FEF3C7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
    width: 100%;
}

.uma-coming-soon {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.uma-prov-actions {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.uma-prov-all-btn {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Provisioning Preview Modal */
.uma-prov-preview-content {
    max-width: 600px;
}

.uma-preview-section {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.uma-preview-section h3 {
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

.uma-preview-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.uma-preview-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
}

.uma-preview-details {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.uma-preview-arrow {
    color: var(--color-accent-blue);
    font-size: var(--font-size-lg);
    margin: 0 var(--spacing-xs);
}

.uma-preview-api {
    border-left: 4px solid var(--color-accent-blue);
}

.uma-preview-code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--color-bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-sm) 0 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.uma-preview-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
}

.uma-preview-footer {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}

.uma-preview-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: none;
}

.uma-preview-btn-cancel {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.uma-preview-btn-cancel:hover {
    background: var(--color-bg-hover);
}

.uma-preview-btn-execute {
    background: var(--color-success);
    color: white;
}

.uma-preview-btn-execute:hover {
    background: #16a34a;
}

.uma-preview-btn-execute:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* ============================================
   MY ACCESS REQUESTS STYLES
   ============================================ */

/* ============================================
   ENHANCED SERVICE REQUEST CARDS
   ============================================ */

.mar-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all 0.2s ease;
    border-left: 4px solid #f59e0b; /* Default: pending = amber */
    position: relative;
    overflow: hidden;
}

.mar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mar-card:hover::before {
    opacity: 1;
}

/* Status-based left border colors */
.mar-card[data-status="pending"] {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.03), transparent);
}

.mar-card[data-status="approved"] {
    border-left-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), transparent);
}

.mar-card[data-status="partially-approved"] {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), transparent);
}

.mar-card[data-status="denied"] {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), transparent);
}

.mar-card[data-status="completed"] {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03), transparent);
}

.mar-card.closed {
    opacity: 0.75;
    border-left-color: #6b7280;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.03), transparent);
}

/* Card Header */
.mar-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.mar-request-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.mar-request-id::before {
    content: '📋';
    font-size: 0.9rem;
}

/* Enhanced Status Badges */
.mar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.mar-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.mar-status.pending::before {
    content: '⏳';
}

.mar-status.approved {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.mar-status.approved::before {
    content: '✓';
}

.mar-status.denied {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mar-status.denied::before {
    content: '✗';
}

.mar-status.partial, .mar-status.partially-approved {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.mar-status.partial::before, .mar-status.partially-approved::before {
    content: '◐';
}

.mar-status.completed {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.mar-status.completed::before {
    content: '✓';
}

/* Author with Avatar */
.mar-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-full);
}

.mar-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.mar-time {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

/* Card Body - Resource Counts */
.mar-card-body {
    margin-bottom: var(--spacing-md);
}

.mar-resource-counts {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.mar-resource-counts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.mar-count-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.mar-count-pending::before {
    content: '⏳';
    font-size: 0.75rem;
}

.mar-count-approved {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mar-count-approved::before {
    content: '✓';
    font-size: 0.75rem;
}

.mar-count-denied {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.mar-count-denied::before {
    content: '✗';
    font-size: 0.75rem;
}

.mar-count-provisioned {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.mar-count-provisioned::before {
    content: '🚀';
    font-size: 0.75rem;
}

/* Card Actions */
.mar-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    align-items: center;
}

.mar-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mar-cancel-btn:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    transform: translateY(-1px);
}

.mar-gitlab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mar-gitlab-link:hover {
    background: rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.mar-gitlab-link::after {
    content: '↗';
    font-size: 0.9rem;
}

/* Empty State Enhancement */
.um-empty {
    text-align: center;
    padding: var(--spacing-xxl);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(168, 85, 247, 0.03));
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    margin: var(--spacing-md);
}

.um-empty h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: 1.1rem;
}

.um-empty p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.um-empty button {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.um-empty button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

/* Proxy Request Badge */
.mar-proxy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: var(--radius-sm);
}

.mar-proxy-badge::before {
    content: '👤';
}

/* Needs Info / Action Required badge */
.mar-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    animation: pulse-attention 2s ease-in-out infinite;
}
.mar-action-badge::before { content: '⚠️'; }

/* On Hold badge */
.mar-hold-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: var(--radius-sm);
}
.mar-hold-badge::before { content: '⏸️'; }

/* Needs Info status */
.mar-status.needs-info {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}
.mar-status.needs-info::before { content: '⚠'; margin-right: 4px; }

/* On Hold status */
.mar-status.on-hold {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.3);
}
.mar-status.on-hold::before { content: '⏸'; margin-right: 4px; }

/* Needs info count */
.mar-count-needs-info {
    color: #d97706;
    font-weight: 500;
}
.mar-count-needs-info::before { content: '⚠ '; }

/* Needs Info radio label */
.um-radio-label.needs-info {
    color: #d97706;
}
input[type="radio"]:checked + .um-radio-label.needs-info {
    background: rgba(245, 158, 11, 0.15);
    border-color: #d97706;
    color: #d97706;
}

@keyframes pulse-attention {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Resource Type Icons */
.mar-resource-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    margin-right: 6px;
}


/* Stage Progress Bar */
.mar-progress-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
}

.mar-progress-step {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
}

.mar-progress-step.active {
    color: var(--color-accent);
    background: rgba(0, 122, 255, 0.1);
}

.mar-progress-step.current {
    font-weight: 700;
    background: var(--color-accent);
    color: white;
}

.mar-progress-connector {
    width: 16px;
    height: 2px;
    background: var(--color-border);
    flex-shrink: 0;
}

.mar-progress-connector.active {
    background: var(--color-accent);
}

/* Resource detail rows */
.mar-resource-details {
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.mar-resource-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.8rem;
}

.mar-resource-row:last-child { border-bottom: none; }

.mar-res-name { font-weight: 500; flex: 1; }
.mar-res-role { color: var(--color-text-secondary); }
.mar-res-status { font-weight: 500; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; }
.mar-res-status.status-pending { background: #FEF3C7; color: #92400E; }
.mar-res-status.status-approved { background: #D1FAE5; color: #065F46; }
.mar-res-status.status-denied { background: #FEE2E2; color: #991B1B; }
.mar-res-status.status-needs-info { background: #FEF3C7; color: #D97706; }
.mar-res-status.status-cancelled { background: #F3F4F6; color: #6B7280; text-decoration: line-through; }
.mar-res-prov { color: #059669; font-size: 0.7rem; font-weight: 500; }
.mar-res-denial { color: #DC2626; font-size: 0.7rem; font-style: italic; }

.mar-res-cancel {
    padding: 2px 8px;
    font-size: 0.7rem;
    background: none;
    border: 1px solid #DC2626;
    color: #DC2626;
    border-radius: 4px;
    cursor: pointer;
}
.mar-res-cancel:hover { background: #FEE2E2; }

.mar-toggle-details {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 4px;
}
.mar-toggle-details:hover { text-decoration: underline; }

.mar-count-provisioned { color: #059669; font-weight: 500; }
.mar-count-provisioned::before { content: '✓ '; }

/* Empty State */
.mar-empty {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--color-text-secondary);
}

.mar-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.mar-empty h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.mar-new-btn {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* MAR Modal */
.mar-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.mar-modal-content {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.mar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.mar-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.mar-modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.mar-detail-section {
    margin-bottom: var(--spacing-lg);
}

.mar-detail-section h3 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

.mar-resources-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mar-resource-detail {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
}

.mar-resource-detail.approved {
    border-left: 3px solid var(--color-success);
}

.mar-resource-detail.denied {
    border-left: 3px solid var(--color-danger);
}

.mar-resource-detail.pending {
    border-left: 3px solid var(--color-warning);
}

.mar-res-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mar-res-status {
    margin-left: auto;
    font-size: var(--font-size-xs);
}

.mar-res-status.approved { color: var(--color-success); }
.mar-res-status.denied { color: var(--color-danger); }
.mar-res-status.pending { color: var(--color-warning); }

.mar-res-details {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.mar-denial-reason {
    color: var(--color-danger);
    margin-top: var(--spacing-xs);
}

.mar-provisioned {
    color: var(--color-success);
    margin-top: var(--spacing-xs);
}

.mar-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.mar-gitlab-btn,
.mar-close-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.mar-gitlab-btn {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.mar-close-btn {
    background: var(--color-accent);
    color: white;
}

/* ============================================
   PROXY REQUEST STYLES
   ============================================ */

.proxy-toggle-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.proxy-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 500;
}

.proxy-toggle-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.proxy-panel {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.proxy-search-container {
    position: relative;
}

.proxy-search-container label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.proxy-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.proxy-search-result {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: background 0.2s ease;
}

.proxy-search-result:hover {
    background: var(--color-bg-tertiary);
}

.proxy-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.proxy-user-info {
    display: flex;
    flex-direction: column;
}

.proxy-user-name {
    font-weight: 500;
}

.proxy-user-email {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.proxy-search-empty {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-tertiary);
}

.proxy-selected-container {
    margin-top: var(--spacing-md);
}

.proxy-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.proxy-clear-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: var(--spacing-xs);
}

.proxy-info-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #DBEAFE;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #1E40AF;
}

.proxy-info-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================
   ADMIN-ONLY VISIBILITY
   ============================================ */

.admin-only {
    display: none;
}

body.is-admin .admin-only,
body.is-dtra-pm .admin-only,
body.is-dashboard-admin .admin-only {
    display: flex;
}

body.is-admin .admin-only.stat-card,
body.is-dtra-pm .admin-only.stat-card,
body.is-dashboard-admin .admin-only.stat-card {
    display: flex;
}

body.is-admin section.admin-only,
body.is-dtra-pm section.admin-only,
body.is-dashboard-admin section.admin-only {
    display: block;
}

body.is-admin button.admin-only,
body.is-dtra-pm button.admin-only,
body.is-dashboard-admin button.admin-only {
    display: flex;
}

body.is-admin div.admin-only,
body.is-dtra-pm div.admin-only,
body.is-dashboard-admin div.admin-only {
    display: block;
}

/* Proxy user ID display styles */
.proxy-user-id {
    font-size: 0.85em;
    color: #666;
    font-weight: normal;
}

.proxy-user-id-hint {
    font-size: 0.8em;
    color: #888;
    font-weight: normal;
}


/* Coming Soon buttons */
.coming-soon-btn {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.coming-soon-btn:hover {
    opacity: 0.7;
}

.coming-soon-badge {
    font-size: 0.65em;
    background: #f59e0b;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
    text-transform: uppercase;
}


/* ============================================
   REVOKE ACCESS SECTION STYLES
   ============================================ */

.revoke-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.revoke-step {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.revoke-step-active {
    opacity: 1;
}

.revoke-step-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.revoke-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.revoke-user-search-container {
    position: relative;
}

.revoke-search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.revoke-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.revoke-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.revoke-search-result {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background 0.2s;
}

.revoke-search-result:hover {
    background: var(--color-bg-tertiary);
}

.revoke-search-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
}

.revoke-search-result-info {
    flex: 1;
}

.revoke-search-result-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.revoke-search-result-username {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.revoke-search-result-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ============================================
   Change User License State (User Management, admin)
   ============================================ */
.uls-intro {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.uls-counts-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.uls-counts {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.uls-count-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.uls-count-pill.uls-count-over {
    background: rgba(255, 59, 48, 0.15);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.uls-counts-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.uls-counts-updated {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.uls-refresh-btn {
    padding: 4px 10px;
    font-size: var(--font-size-sm);
}

/* Excluded-from-alert note + collapsible table (Domenix + service accounts) */
.uls-excluded-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-md);
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.uls-excluded-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
}

.uls-excluded-toggle:hover {
    text-decoration: underline;
}

.uls-excluded-table-wrap {
    margin: 0 0 var(--spacing-md);
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.uls-excluded-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

.uls-excluded-table th,
.uls-excluded-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border);
}

.uls-excluded-table th {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.uls-excluded-reason {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
}

.uls-excluded-reason.reason-domenix {
    background: rgba(88, 86, 214, 0.15);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.uls-excluded-reason.reason-service {
    background: rgba(142, 142, 147, 0.18);
    color: var(--color-text-secondary);
}

.uls-search-container {
    position: relative;          /* anchor the absolutely-positioned results box */
    margin-bottom: var(--spacing-md);
}

.uls-user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.uls-search-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background 0.15s;
    font-size: var(--font-size-sm);
}

.uls-search-item:hover {
    background: var(--color-bg-tertiary);
}

.uls-search-empty {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.uls-staged {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.uls-staged-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.uls-staged-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.uls-empty {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.uls-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.uls-chip-x {
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
}

.uls-chip-x:hover {
    color: var(--color-danger);
    background: var(--color-bg-tertiary);
}

.uls-state-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: capitalize;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
.uls-state-active { background: rgba(52, 199, 89, 0.15); color: var(--color-success); }
.uls-state-deactivated { background: rgba(255, 149, 0, 0.15); color: var(--color-warning); }
.uls-state-blocked,
.uls-state-ldap_blocked,
.uls-state-banned { background: rgba(255, 59, 48, 0.15); color: var(--color-danger); }

.uls-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.uls-action-row label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.uls-status {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
.uls-status-running { border-color: var(--color-accent-blue); }
.uls-status-success { border-color: var(--color-success); }
.uls-status-warning { border-color: var(--color-warning); }
.uls-status-error   { border-color: var(--color-danger); }

.uls-results {
    margin-top: var(--spacing-sm);
}

.uls-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.uls-results-table th,
.uls-results-table td {
    text-align: left;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.uls-results-table th {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.revoke-selected-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.revoke-selected-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
}

.revoke-selected-user-info {
    flex: 1;
}

.revoke-selected-user-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.revoke-selected-user-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.revoke-change-user-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.revoke-change-user-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.revoke-select-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.revoke-loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.revoke-resources-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.revoke-resource-category {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.revoke-category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.revoke-category-title svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.revoke-category-count {
    margin-left: auto;
    background: var(--color-accent-blue);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
}

.revoke-resource-list {
    max-height: 200px;
    overflow-y: auto;
}

.revoke-resource-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

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

.revoke-resource-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.revoke-resource-item label {
    flex: 1;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.revoke-resource-access-level {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.revoke-no-access {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.revoke-justification-container {
    margin-bottom: var(--spacing-md);
}

.revoke-justification-container label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--color-text-primary);
}

.revoke-justification-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    resize: vertical;
}

.revoke-justification-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
}

.revoke-summary {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.revoke-summary-title {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.revoke-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.revoke-summary-list li {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.revoke-summary-list li:last-child {
    border-bottom: none;
}

.revoke-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.btn-danger {
    background: var(--color-accent-red);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.revoke-empty-category {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* ============================================
   CYBER SECURITY SECTION
   ============================================ */

.cybersecurity-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}

.cybersecurity-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    cursor: pointer;
}

.cybersecurity-card:hover {
    border-color: var(--color-accent-purple);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.cybersecurity-card-ghosted {
    opacity: 0.6;
    cursor: default;
}

.cybersecurity-card-ghosted:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}

.cybersecurity-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-purple), #6366f1);
    border-radius: var(--radius-md);
}

.cybersecurity-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.cybersecurity-card-content {
    flex: 1;
    min-width: 0;
}

.cybersecurity-card-content h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.cybersecurity-card-content p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.coming-soon-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   PIPELINES SECTION
   ============================================ */

/* Make pipelines section full-width */
#section-pipelines {
    max-width: 100%;
    width: 100%;
}

#section-pipelines .section-header,
#section-pipelines .pipelines-content,
#section-pipelines .pipeline-tab-content {
    max-width: 100%;
    width: 100%;
}

.pipelines-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Pipeline Tabs */
.pipeline-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.pipeline-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pipeline-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.pipeline-tab.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
}

/* Tab Content */
.pipeline-tab-content {
    display: none;
}

.pipeline-tab-content.active {
    display: block;
}

/* Pipeline Header */
.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.pipeline-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.pipeline-filters {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.pipeline-filters select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.pipeline-filters select:hover {
    border-color: var(--color-accent-blue);
}

/* Pipeline Stages Grid */
#pipeline-stages-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.pipeline-stage-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pipeline-stage-card:hover {
    border-color: var(--color-accent-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stage-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-accent-blue), #6366f1);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.stage-name {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.stage-description {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.stage-jobs-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.jobs-icon {
    font-size: 14px;
}

/* Scanners Grid */
#pipeline-scanners-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.scanner-category-group {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.category-header {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.scanners-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.scanner-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all 0.2s ease;
}

.scanner-card:hover {
    border-color: var(--color-accent-green);
    background: var(--color-bg-tertiary);
}

.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xs);
}

.scanner-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.scanner-stage {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.scanner-description {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.scanner-languages {
    font-size: var(--font-size-xs);
    color: var(--color-accent-blue);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.scanner-detects,
.scanner-output,
.scanner-best-for {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.scanner-detects strong,
.scanner-output strong,
.scanner-best-for strong,
.scanner-languages strong {
    color: var(--color-text-primary);
}

.scanner-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.scanner-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.scanner-link:hover {
    color: var(--color-accent-blue);
    background: var(--color-bg-card);
}

.scanner-link svg {
    flex-shrink: 0;
}

/* Stage Card Enhancements */
.stage-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.stage-wiki-link {
    margin-left: auto;
    color: var(--color-text-tertiary);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.stage-wiki-link:hover {
    color: var(--color-accent-blue);
    background: var(--color-bg-tertiary);
}

.stage-importance,
.stage-catches {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.stage-importance strong,
.stage-catches strong {
    color: var(--color-text-primary);
}

.stage-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.stage-job-list {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Jobs List */
#pipeline-jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.job-stage-group {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stage-group-header {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.jobs-table {
    overflow-x: auto;
}

.jobs-table table {
    width: 100%;
    border-collapse: collapse;
}

.jobs-table th,
.jobs-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.jobs-table th {
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-table td {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

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

.jobs-table tr:hover td {
    background: var(--color-bg-tertiary);
}

.job-name {
    font-weight: 500;
    color: var(--color-accent-blue);
}

.job-category {
    color: var(--color-text-secondary);
}

.job-description {
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* Empty State */
.pipelines-content .empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-tertiary);
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.pipelines-content .empty-state.error {
    color: var(--color-accent-red);
    border-color: var(--color-accent-red);
}

/* Wiki Docs Link */
.wiki-docs-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.wiki-docs-link:hover {
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    background: var(--color-bg-tertiary);
}

/* Pipeline Tab Badge */
.pipeline-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-xs);
}

.pipeline-tab.active .pipeline-tab-badge {
    background: var(--color-accent-blue);
    color: white;
}

/* Scanners Filter Bar */
.scanners-filter-bar,
.jobs-filter-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.scanner-filter-select,
.jobs-filter-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-width: 200px;
}

.scanner-filter-select:hover,
.jobs-filter-select:hover {
    border-color: var(--color-accent-blue);
}

/* Scanners Grid Layout */
.scanners-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Pipeline Stages List Container */
.pipeline-stages-container {
    width: 100%;
}

.pipeline-stages-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* Jobs List */
.jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Loading State for Pipelines */
.pipelines-content .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.pipelines-content .loading-state .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

/* Scanners Redirect Section - only show when active */
.scanners-redirect-section {
    display: none;  /* Hidden by default, same as .content-section */
}

.scanners-redirect-section.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.redirect-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.redirect-notice svg {
    color: var(--color-accent-blue);
}

.redirect-notice p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.redirect-notice a {
    color: var(--color-accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.redirect-notice a:hover {
    text-decoration: underline;
}

/* ============================================
   PIPELINE LIST VIEWS (Enhanced)
   ============================================ */

/* Stages List View */
.pipeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    min-width: 800px;  /* Ensure minimum width for all columns */
}

.pipeline-list-header {
    display: grid;
    grid-template-columns: 60px 140px 1fr 100px 140px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pipeline-list-row {
    display: grid;
    grid-template-columns: 60px 140px 1fr 100px 140px;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    align-items: start;
    transition: background 0.15s ease;
    cursor: pointer;
}

/* Column-specific styles for Stages */
.pipeline-list-row .col-order,
.pipeline-list-header .col-order {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-list-row .col-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.pipeline-list-row .col-description {
    min-width: 0;
    overflow: hidden;
}

.pipeline-list-row .col-description .desc-main {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pipeline-list-row .col-description .desc-detail {
    margin: 4px 0 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pipeline-list-row .col-description .detail-label {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pipeline-list-row .col-jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pipeline-list-row .col-jobs .jobs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.pipeline-list-row .col-jobs .jobs-preview {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-list-row .col-links {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.pipeline-list-row:last-child {
    border-bottom: none;
}

.pipeline-list-row:hover {
    background: var(--color-bg-tertiary);
}

/* Stage Number Badge */
.stage-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-sm);
    background: var(--stage-color, var(--color-accent-blue));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.row-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.row-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.row-jobs {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
}

.row-links {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

/* Scanners List View */
.scanner-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    min-width: 800px;  /* Ensure minimum width for all columns */
}

.scanner-list-header {
    display: grid;
    grid-template-columns: 160px 160px 1fr 100px 160px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scanner-list-row {
    display: grid;
    grid-template-columns: 160px 160px 1fr 100px 160px;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    align-items: start;
    transition: background 0.15s ease;
}

.scanner-list-row:last-child {
    border-bottom: none;
}

.scanner-list-row:hover {
    background: var(--color-bg-tertiary);
}

/* Column-specific styles for Scanners */
.scanner-list-row .col-category {
    display: flex;
    align-items: flex-start;
}

.scanner-list-row .col-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scanner-list-row .col-name strong {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.scanner-list-row .col-description {
    min-width: 0;
    overflow: hidden;
}

.scanner-list-row .col-description .desc-main {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scanner-list-row .col-description .desc-detail {
    margin: 4px 0 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scanner-list-row .col-description .detail-label {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.scanner-list-row .col-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.scanner-list-row .col-links {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Category Badge */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
}

.category-badge .cat-icon {
    font-size: 14px;
}

/* Language Tags */
.lang-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lang-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    background: var(--color-bg-tertiary);
    color: var(--color-accent-blue);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* Stage Tags */
.stage-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
}

/* Colorful Link Badges */
.link-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.link-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Docs - Green */
.link-docs {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.link-docs:hover {
    background: rgba(16, 185, 129, 0.25);
    color: #047857;
}

/* Template - Purple */
.link-template {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.link-template:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #6d28d9;
}

/* Wiki - Blue */
.link-wiki {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.link-wiki:hover {
    background: rgba(59, 130, 246, 0.25);
    color: #1d4ed8;
}

/* Jobs List View (Enhanced with Colors) */
.jobs-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    min-width: 800px;  /* Ensure minimum width for all columns */
}

.jobs-list-header {
    display: grid;
    grid-template-columns: 60px 180px 120px 1fr 80px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-list-row {
    display: grid;
    grid-template-columns: 60px 180px 120px 1fr 80px;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.jobs-list-row:last-child {
    border-bottom: none;
}

.jobs-list-row:hover {
    background: var(--color-bg-tertiary);
}

.jobs-list-row.expanded {
    background: var(--color-bg-secondary);
    border-bottom-color: transparent;
}

/* Stage Badge in Jobs */
.stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    color: white;
    background: var(--stage-color, var(--color-accent-blue));
    white-space: nowrap;
}

.job-name-cell {
    font-weight: 600;
    color: var(--color-accent-blue);
    font-size: var(--font-size-sm);
}

.job-category-cell {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.job-desc-cell {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
}

.jobs-list-row:hover .job-expand-icon {
    background: var(--color-accent-blue);
    color: white;
}

.jobs-list-row.expanded .job-expand-icon {
    transform: rotate(180deg);
    background: var(--color-accent-blue);
    color: white;
}

/* Job Detail Panel - Enhanced */
.job-detail-panel {
    display: none;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-card));
    border-bottom: 1px solid var(--color-border);
    margin-left: 4px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.job-detail-panel.visible {
    display: block;
}

.job-detail-content {
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.job-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.job-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
}

.job-detail-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-detail-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.job-detail-full {
    grid-column: 1 / -1;
}

.job-detail-links {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

/* Colorful row enhancements */
.stage-row-colorful,
.job-row-colorful {
    transition: all 0.2s ease;
}

.stage-row-colorful:hover,
.job-row-colorful:hover {
    background: linear-gradient(90deg, var(--stage-color, #6b7280)08, transparent) !important;
    transform: translateX(2px);
}

.job-row-colorful.expanded {
    background: linear-gradient(90deg, var(--stage-color, #6b7280)15, transparent) !important;
}

.job-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.job-row-colorful.expanded .job-expand-icon {
    transform: rotate(90deg);
}

.job-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

/* Stage Colors for Jobs */
.stage-color-0 { --stage-color: #3b82f6; }  /* Build - Blue */
.stage-color-1 { --stage-color: #8b5cf6; }  /* Linting - Purple */
.stage-color-2 { --stage-color: #06b6d4; }  /* Unit Test - Cyan */
.stage-color-3 { --stage-color: #10b981; }  /* Security - Green */
.stage-color-4 { --stage-color: #f59e0b; }  /* Packaging - Orange */
.stage-color-5 { --stage-color: #ef4444; }  /* Deploy - Red */
.stage-color-6 { --stage-color: #ec4899; }  /* Integration - Pink */
.stage-color-7 { --stage-color: #6366f1; }  /* Smoke Test - Indigo */
.stage-color-8 { --stage-color: #14b8a6; }  /* Performance - Teal */
.stage-color-9 { --stage-color: #f97316; }  /* Release - Deep Orange */
.stage-color-10 { --stage-color: #84cc16; } /* Cleanup - Lime */

/* Scanner Category Colors */
.cat-sast { --category-color: #ef4444; }
.cat-dependency { --category-color: #f59e0b; }
.cat-container { --category-color: #06b6d4; }
.cat-secret { --category-color: #8b5cf6; }
.cat-linter { --category-color: #10b981; }
.cat-cpd { --category-color: #6366f1; }
.cat-iac { --category-color: #3b82f6; }
.cat-antivirus { --category-color: #ec4899; }
.cat-other { --category-color: #64748b; }

/* Pipeline Filter Bar */
.pipeline-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.pipeline-search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    transition: all 0.2s ease;
}

.pipeline-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.pipeline-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.pipeline-export-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-show-flow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-flow:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.btn-show-flow svg {
    width: 14px;
    height: 14px;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--color-accent-blue), #2563eb);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-export svg {
    width: 14px;
    height: 14px;
}

/* Job Dependencies Visualization */
.job-dependencies-container {
    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-card));
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
}

.dependencies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.dependencies-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.btn-close-deps {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 18px;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
}

.btn-close-deps:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.dependencies-flow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: var(--spacing-md) 0;
}

.dependency-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    position: relative;
}

.dependency-stage-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: white;
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dependency-stage-number {
    font-size: var(--font-size-xs);
    font-weight: 700;
    opacity: 0.8;
}

.dependency-stage-icon {
    font-size: 24px;
}

.dependency-stage-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    word-break: break-word;
}

.dependency-stage-jobs {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.dependency-job {
    padding: 6px 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--stage-color, #6b7280);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dependency-job-more {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.dependency-no-jobs {
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.dependency-arrow {
    position: absolute;
    right: -16px;
    top: 40px;
    font-size: 24px;
    color: var(--color-text-tertiary);
    font-weight: bold;
}

.dependencies-legend {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.dependencies-legend p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Responsive adjustments for list views */
@media (max-width: 1024px) {
    .pipeline-list-header,
    .pipeline-list-row {
        grid-template-columns: 40px 100px 1fr 60px;
    }

    .pipeline-list-header .col-links,
    .pipeline-list-row .row-links {
        display: none;
    }

    .scanner-list-header,
    .scanner-list-row {
        grid-template-columns: 50px 120px 1fr 100px;
    }

    .scanner-list-header .col-links,
    .scanner-list-row .row-links {
        display: none;
    }

    .jobs-list-header,
    .jobs-list-row {
        grid-template-columns: 50px 150px 1fr 60px;
    }

    .jobs-list-header .col-category,
    .jobs-list-row .job-category-cell {
        display: none;
    }
}

@media (max-width: 768px) {
    .pipeline-list-header,
    .scanner-list-header,
    .jobs-list-header {
        display: none;
    }

    .pipeline-list-row,
    .scanner-list-row,
    .jobs-list-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .stage-number-badge,
    .category-badge,
    .stage-badge {
        margin-bottom: var(--spacing-xs);
    }
}

/* ========================================
   UNIFIED PIPELINE VIEW (Jan 2026)
   ======================================== */

/* Pipeline Flow Visualization - Snake Layout */
.pipeline-flow-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.03), rgba(59, 130, 246, 0.03));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
}

/* Each row in the snake layout */
.pipeline-flow-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: flex-start;
}

/* All rows left-justified - no special treatment for reversed */

/* Connector between rows (down arrow) */
.pipeline-flow-row-connector {
    display: flex;
    padding: var(--spacing-sm) 0;
    color: #3b82f6;
}

.pipeline-flow-row-connector.connector-right {
    justify-content: flex-start;
    padding-left: 280px; /* Align with end of row (4 stages * ~70px) */
}

.pipeline-flow-row-connector.connector-left {
    justify-content: flex-start;
    padding-left: 70px; /* Align with first stage */
}

.pipeline-flow-row-connector svg {
    width: 36px;
    height: 36px;
    stroke-width: 3;
}

/* Horizontal connectors (arrows between stages) */
.pipeline-flow-connector {
    display: flex;
    align-items: center;
    color: #3b82f6;
    padding: 0 var(--spacing-sm);
}

.pipeline-flow-connector svg {
    width: 32px;
    height: 32px;
    stroke-width: 3;
}

/* Stage boxes */
.pipeline-flow-stage {
    flex: 0 0 auto;
    width: 140px;
    padding: var(--spacing-md);
    background: white;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pipeline-flow-stage:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.pipeline-flow-stage.active {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.08));
}

.flow-stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.flow-stage-icon {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
}

.flow-stage-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    word-break: break-word;
    line-height: 1.2;
}

.flow-stage-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.flow-stage-count .scanner-indicator {
    color: #8b5cf6;
    margin-left: var(--spacing-xs);
}

/* Pipeline Toolbar */
.pipeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.pipeline-search-container {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    position: relative;
}

.pipeline-search-container input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: white;
    transition: border-color var(--transition-fast);
}

.pipeline-search-container input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.pipeline-search-container svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

.pipeline-filter-group {
    display: flex;
    gap: var(--spacing-sm);
}

.pipeline-filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pipeline-filter-btn:hover {
    background: var(--surface-secondary);
    border-color: rgba(59, 130, 246, 0.3);
}

.pipeline-filter-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border-color: #3b82f6;
    color: #2563eb;
}

.pipeline-filter-btn.scanner-filter.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
    border-color: #8b5cf6;
    color: #7c3aed;
}

.pipeline-expand-controls {
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.pipeline-expand-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.pipeline-expand-btn:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.pipeline-expand-btn svg {
    width: 14px;
    height: 14px;
}

/* Pipeline Stats Bar */
.pipeline-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.pipeline-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Stat buttons - clearly visible as buttons */
.pipeline-stat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pipeline-stat-btn .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e40af;
}

.pipeline-stat-btn .stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pipeline-stat-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.pipeline-stat-btn.stat-scanners {
    border-color: #c4b5fd;
}

.pipeline-stat-btn.stat-scanners .stat-value {
    color: #7c3aed;
}

.pipeline-stat-btn.stat-scanners:hover {
    background: #f5f3ff;
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.pipeline-stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
}

.pipeline-stat-icon svg {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}

.pipeline-stat-icon.scanner-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
}

.pipeline-stat-icon.scanner-icon svg {
    color: #8b5cf6;
}

.pipeline-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pipeline-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Shared Links Bar */
.pipeline-shared-links {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.pipeline-shared-links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
    color: #059669;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.pipeline-shared-links a:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.pipeline-shared-links svg {
    width: 14px;
    height: 14px;
}

/* Stage Accordion */
.stages-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stage-accordion-item {
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stage-accordion-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.stage-accordion-item.expanded {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.stage-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    border-left: 4px solid transparent;
}

.stage-header:hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left-color: #3b82f6;
}

.stage-accordion-item.expanded .stage-header {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left-color: #3b82f6;
}

.stage-expand-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    transition: all var(--transition-fast);
}

.stage-accordion-item:hover .stage-expand-icon {
    background: #2563eb;
    transform: scale(1.05);
}

.stage-accordion-item.expanded .stage-expand-icon {
    background: #2563eb;
}

/* Stage header layout */
.stage-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.stage-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.stage-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-xs);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
}

.stage-icon {
    font-size: 1.25rem;
}

.stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-xs);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.stage-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stage-badges {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.stage-job-count {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.stage-scanner-count {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.stage-scanner-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.stage-wiki-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.stage-wiki-link:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.1);
}

/* Stage Description */
.stage-description {
    padding: var(--spacing-sm) var(--spacing-lg);
    padding-left: calc(var(--spacing-lg) + 32px); /* Align with content after expand icon */
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.stage-description p {
    margin: 0;
}

/* Stage Jobs Container */
.stage-jobs {
    display: none;
    padding: var(--spacing-lg);
    background: #fafbfc;
    border-top: 2px solid #e2e8f0;
}

.stage-accordion-item.expanded .stage-jobs {
    display: block;
}

.stage-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

/* Job Cards */
.job-card {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    transition: all var(--transition-fast);
}

.job-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.job-card.scanner {
    border-left: 3px solid #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.03), rgba(124, 58, 237, 0.03));
}

.job-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.job-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.job-type-badge {
    flex-shrink: 0;
    padding: 2px var(--spacing-xs);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.job-type-badge.scanner-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.job-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.job-inherited-from {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
}

.job-inherited-from code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.job-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.job-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.job-link:hover {
    background: var(--surface-secondary);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.job-link svg {
    width: 12px;
    height: 12px;
}

.job-link.template-link:hover {
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}

.job-link.wiki-link:hover {
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.job-link.docs-link:hover {
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

/* Empty State */
.pipeline-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.pipeline-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--text-tertiary);
}

/* Responsive Adjustments for Unified View */
@media (max-width: 1024px) {
    .pipeline-flow-container {
        padding: var(--spacing-md);
    }

    .pipeline-flow-stage {
        width: 120px;
        padding: var(--spacing-sm);
    }

    .flow-stage-name {
        font-size: 0.75rem;
    }

    .flow-stage-count {
        font-size: 0.65rem;
    }

    .pipeline-flow-row-connector.connector-right,
    .pipeline-flow-row-connector.connector-left {
        padding-left: 50px;
        padding-right: 50px;
    }

    .pipeline-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pipeline-search-container {
        max-width: none;
    }

    .pipeline-expand-controls {
        margin-left: 0;
        justify-content: center;
    }

    .stage-jobs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pipeline-stats-bar {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .stage-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .stage-badges {
        flex-wrap: wrap;
    }

    .job-card {
        padding: var(--spacing-sm);
    }

    .pipeline-shared-links {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* Dark Mode Support for Unified View */
[data-theme="dark"] .pipeline-flow-container {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.08), rgba(59, 130, 246, 0.08));
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .pipeline-flow-stage {
    background: var(--surface-secondary);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .pipeline-flow-stage:hover {
    background: var(--surface-tertiary);
}

[data-theme="dark"] .pipeline-toolbar {
    background: var(--surface-tertiary);
}

[data-theme="dark"] .pipeline-search-container input {
    background: var(--surface-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pipeline-filter-btn {
    background: var(--surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .pipeline-expand-btn {
    background: var(--surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .pipeline-stats-bar {
    background: var(--surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .stage-accordion-item {
    background: var(--surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .stage-header {
    background: var(--surface-tertiary);
}

[data-theme="dark"] .stage-jobs {
    background: var(--surface-secondary);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .job-card {
    background: var(--surface-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .job-link {
    background: var(--surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .pipeline-shared-links {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border-color: rgba(16, 185, 129, 0.3);
}

/* ========================================
   APPS & MODELS SECTION BUTTONS (Jan 2026)
   ======================================== */

/* Refresh button - Blue theme */
.section-info-btn.refresh-action-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.section-info-btn.refresh-action-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
    border-color: rgba(59, 130, 246, 0.5);
    color: #1d4ed8;
}

.section-info-btn.refresh-action-btn svg {
    color: #3b82f6;
}

/* Create App/Model button - Green theme */
.section-info-btn.create-action-btn {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

.section-info-btn.create-action-btn:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.25));
    border-color: rgba(34, 197, 94, 0.5);
    color: #15803d;
}

.section-info-btn.create-action-btn svg {
    color: #22c55e;
}

/* Harden button - Purple theme (coming soon) */
.section-info-btn.harden-action-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
    border-color: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
    opacity: 0.7;
}

.section-info-btn.harden-action-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.15));
    border-color: rgba(139, 92, 246, 0.3);
}

.section-info-btn.harden-action-btn svg {
    color: #8b5cf6;
}

.section-info-btn .coming-soon-badge {
    font-size: 9px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Architecture Button */
.section-info-btn.architecture-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border-color: rgba(59, 130, 246, 0.2);
    color: #2563eb;
}

.section-info-btn.architecture-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.4);
}

.section-info-btn.architecture-btn svg {
    color: #3b82f6;
}

/* Architecture Modal */
.architecture-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    animation: archModalFadeIn 0.2s ease;
}

.architecture-modal-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes archModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.architecture-modal {
    width: 95vw;
    height: 92vh;
    background: #0a0f1a;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.architecture-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #111827;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    flex-shrink: 0;
}

.architecture-modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

.architecture-modal-close {
    background: #243049;
    border: 1px solid #2a3a52;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.architecture-modal-close:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.architecture-modal iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* ========================================
   SEARCHABLE GROUP SELECTOR (Jan 2026)
   ======================================== */

.searchable-group-select {
    position: relative;
    width: 100%;
}

.searchable-group-select .group-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.searchable-group-select .group-search-input:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.searchable-group-select .group-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: 4px;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    display: none;
}

.searchable-group-select .group-dropdown.show {
    display: block;
}

.searchable-group-select .group-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

.searchable-group-select .group-item:last-child {
    border-bottom: none;
}

.searchable-group-select .group-item:hover {
    background: var(--color-bg-hover);
}

.searchable-group-select .group-item.selected {
    background: rgba(0, 122, 255, 0.1);
    color: var(--color-accent-blue);
}

.searchable-group-select .group-item .group-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
}

.searchable-group-select .group-item .group-name {
    flex: 1;
    font-weight: 500;
}

.searchable-group-select .group-item .group-path {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.searchable-group-select .group-item .subgroup-indicator {
    color: var(--color-accent-blue);
    font-size: 12px;
}

.searchable-group-select .group-item.subgroup {
    padding-left: 28px;
}

.searchable-group-select .group-item.subgroup-level-2 {
    padding-left: 44px;
}

.searchable-group-select .no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-style: italic;
}

.searchable-group-select .loading-groups {
    padding: 16px;
    text-align: center;
    color: var(--color-text-tertiary);
}

/* ============================================
   BEDROCK USAGE SECTION STYLES
   ============================================ */
.bedrock-usage-section {
    margin-bottom: var(--spacing-lg);
}

.bedrock-usage-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.bedrock-usage-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.bedrock-usage-card .card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.bedrock-usage-card .card-title svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
}

.bedrock-usage-content {
    padding: var(--spacing-lg);
}

.bedrock-usage-loading,
.bedrock-usage-error {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-secondary);
}

.bedrock-usage-error {
    color: var(--color-error);
}

.bedrock-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .bedrock-usage-grid {
        grid-template-columns: 1fr;
    }
}

.bedrock-usage-stat {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-surface-hover);
    border-radius: var(--border-radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bedrock-usage-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bedrock-usage-stat.usage-stat-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.usage-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.usage-stat-highlight .usage-stat-value {
    color: var(--color-primary);
}

.usage-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.usage-stat-detail {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

.bedrock-usage-footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-md);
}

/* ===== JupyterHub Section Styles ===== */
.jupyterhub-overview {
    margin-bottom: var(--spacing-lg);
}

.jupyterhub-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
}

.jupyterhub-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-md);
    color: #8b5cf6;
}

.jupyterhub-info-icon svg {
    width: 24px;
    height: 24px;
}

.jupyterhub-info-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.jupyterhub-info-content p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.jupyterhub-urls-panel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.jupyterhub-panel-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.jupyterhub-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.jupyterhub-panel-title svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

.jupyterhub-table-container {
    overflow-x: auto;
}

.jupyterhub-urls-table {
    width: 100%;
    border-collapse: collapse;
}

.jupyterhub-urls-table th,
.jupyterhub-urls-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.jupyterhub-urls-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-bg-tertiary);
}

.jupyterhub-urls-table td {
    color: var(--color-text-primary);
}

.jupyterhub-urls-table code {
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.jupyterhub-urls-table tr:hover {
    background: var(--color-bg-tertiary);
}

.jupyterhub-urls-table tr.admin-row {
    background: rgba(239, 68, 68, 0.05);
}

.jupyterhub-urls-table tr.admin-row:hover {
    background: rgba(239, 68, 68, 0.1);
}

.access-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.access-all {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.access-auth {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.access-admin {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.access-api {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.access-owner {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.jupyterhub-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.jupyterhub-action-btn:hover {
    background: var(--color-accent-hover);
    transform: translateX(2px);
}

.jupyterhub-admin-btn {
    background: #dc2626;
}

.jupyterhub-admin-btn:hover {
    background: #b91c1c;
}

.jupyterhub-note {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

.jupyterhub-quick-actions {
    margin-bottom: var(--spacing-lg);
}

.jupyterhub-actions-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.jupyterhub-actions-title svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

.jupyterhub-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}

.jupyterhub-quick-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.jupyterhub-quick-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.jupyterhub-admin-card {
    border-color: rgba(239, 68, 68, 0.3);
}

.jupyterhub-admin-card:hover {
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.jupyterhub-quick-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: white;
}

.jupyterhub-quick-icon svg {
    width: 22px;
    height: 22px;
}

.jupyterhub-quick-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jupyterhub-quick-title {
    font-weight: 600;
    color: var(--color-text-primary);
}

.jupyterhub-quick-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.jupyterhub-admin-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
}

.jupyterhub-admin-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-md);
    color: #dc2626;
}

.jupyterhub-admin-info-icon svg {
    width: 24px;
    height: 24px;
}

.jupyterhub-admin-info-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.jupyterhub-admin-info-content p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Dark mode adjustments */
[data-theme="dark"] .jupyterhub-info-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.04));
}

[data-theme="dark"] .jupyterhub-admin-info {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
}

[data-theme="dark"] .access-all {
    background: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .access-auth {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .access-admin {
    background: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .access-api {
    background: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .access-owner {
    background: rgba(139, 92, 246, 0.2);
}


/* ============================================ */
/* TOKEN FRESHNESS & REAUTH BANNER STYLES      */
/* ============================================ */
.reauth-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 1rem;
    transition: all 0.2s ease;
}

.reauth-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ============================================ */
/* ASSESSMENT REPORTS FILTER BAR               */
/* ============================================ */
.pm-assessment-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 10;
}

.pm-filter-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.pm-assessment-filter input {
    flex: 1;
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pm-assessment-filter input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

.pm-assessment-filter input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.pm-filter-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.pm-filter-clear {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pm-filter-clear:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(var(--danger-rgb), 0.1);
}

/* Cache badge */
.pm-cache-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Refresh button */
.pm-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-refresh-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}

.pm-refresh-btn:active {
    transform: rotate(180deg);
}

/* Highlight marks in filter results */
.pm-result-name mark {
    background: rgba(var(--warning-rgb), 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}


/* Version info display */
.version-info {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    opacity: 0.7;
}


/* Assessment Report Action Buttons */
.pm-result-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.pm-result-item-row .pm-result-item {
    flex: 1;
    min-width: 0;
}

.pm-result-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.pm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pm-action-btn svg {
    flex-shrink: 0;
}

.pm-summary-btn {
    background: var(--color-accent-blue, #4299e1);
    border-color: var(--color-accent-blue, #4299e1);
    color: white;
}

.pm-summary-btn:hover {
    background: #3182ce;
    border-color: #3182ce;
}

.pm-sendai-btn {
    background: var(--color-accent-orange, #ed8936);
    border-color: var(--color-accent-orange, #ed8936);
    color: white;
}

.pm-sendai-btn:hover {
    background: #dd6b20;
    border-color: #dd6b20;
}

/* Assessment Summary Modal */
.assessment-summary-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.assessment-summary-modal.show {
    opacity: 1;
    visibility: visible;
}

.assessment-summary-content {
    background: var(--color-bg-primary, white);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    max-height: 80vh;
    width: 90%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.assessment-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.assessment-summary-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.assessment-summary-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-secondary, #666);
    padding: 0;
    line-height: 1;
}

.assessment-summary-close:hover {
    color: var(--color-text-primary, #333);
}

.assessment-summary-doc {
    padding: 0.75rem 1.25rem;
    background: var(--color-bg-secondary, #f6f8fa);
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666);
    border-bottom: 1px solid var(--color-border, #e1e4e8);
}

.assessment-summary-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.assessment-summary-body h2, .assessment-summary-body h3, .assessment-summary-body h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.assessment-summary-body h2:first-child, .assessment-summary-body h3:first-child, .assessment-summary-body h4:first-child {
    margin-top: 0;
}

.assessment-summary-body ul, .assessment-summary-body ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.assessment-summary-body li {
    margin: 0.25rem 0;
}

.assessment-summary-body strong {
    color: var(--color-text-primary, #333);
}

.assessment-summary-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border, #e1e4e8);
    text-align: right;
}

.assessment-summary-footer small {
    color: var(--color-text-tertiary, #999);
    font-size: 0.75rem;
}

.assessment-summary-loading {
    padding: 3rem 1.25rem;
    text-align: center;
}

.assessment-summary-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border, #e1e4e8);
    border-top-color: var(--color-accent-blue, #4299e1);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 1s linear infinite;
}

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

.assessment-summary-loading p {
    margin: 0;
    color: var(--color-text-secondary, #666);
}

.assessment-summary-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--color-danger, #e53e3e);
}

.assessment-summary-error svg {
    margin-bottom: 0.5rem;
}

.assessment-summary-error p {
    margin: 0 0 0.25rem;
    font-weight: 500;
}

.assessment-summary-error small {
    color: var(--color-text-tertiary, #999);
}

/* ============================================
   USE CASES SECTION STYLES
   ============================================ */

.usecases-container {
    max-width: 1400px;
    margin: 0 auto;
}

.usecases-intro {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(168, 85, 247, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.usecases-intro h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.usecases-intro p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.usecases-stats {
    display: flex;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.usecase-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    min-width: 100px;
}


.usecase-stat .stat-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.usecase-stat .stat-label {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

.usecases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

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

.usecase-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.usecase-card-header {
    padding: var(--spacing-lg);
    color: white;
}

/* Role-specific header colors */
.stm-header { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.developer-header { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.analyst-header { background: linear-gradient(135deg, #0891b2, #0e7490); }
.aiml-header { background: linear-gradient(135deg, #ea580c, #c2410c); }
.assessor-header { background: linear-gradient(135deg, #16a34a, #15803d); }
.pm-header { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.usecase-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.usecase-icon svg {
    width: 28px;
    height: 28px;
}

.usecase-card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.usecase-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
}

.usecase-card-body {
    padding: var(--spacing-lg);
}

.usecase-card-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.usecase-card-body h4:first-child {
    margin-top: 0;
}

.usecase-challenges {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
}

.usecase-challenges li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.usecase-challenges li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent-red);
}

.usecase-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.usecase-feature {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.usecase-feature strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.usecase-feature p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.usecase-workflow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.step-number {
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* CTA Section */
.usecases-cta {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
}

.usecases-cta h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.usecases-cta p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cta-btn svg {
    width: 18px;
    height: 18px;
}

.cta-btn.primary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
}

.cta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

.cta-btn.secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.cta-btn.secondary:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-accent);
}

/* ========================================
   Pipeline Tabs (Current vs DRAFT)
   ======================================== */

.pipeline-tabs-nav {
    display: flex;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.pipeline-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6e6e73;
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.pipeline-tab-btn:hover {
    color: #1a1a1c;
    background: rgba(0, 0, 0, 0.03);
}

.pipeline-tab-btn.active {
    color: #1a1a1c;
    border-bottom-color: #2563eb;
}

.draft-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pipeline-tab-content {
    display: none;
}

.pipeline-tab-content.active {
    display: block;
}

/* Font contrast fixes for better visibility */
.section-title {
    font-weight: 800;
    color: #1a1a1c;
}

.btn-secondary {
    color: #1a1a1c;
    font-weight: 600;
}

[data-theme="dark"] .pipeline-tab-btn {
    color: #a1a1a6;
}

[data-theme="dark"] .pipeline-tab-btn:hover,
[data-theme="dark"] .pipeline-tab-btn.active {
    color: #f5f5f7;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .btn-secondary {
    color: #f5f5f7;
}

/* Pipeline section header enhancements */
#section-pipelines .section-title {
    font-weight: 900;
    font-size: 28px;
    color: #0a0a0b;
}

#section-pipelines .section-description {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a1c;
}

/* Pipeline action buttons - more colorful */
#pipeline-wiki-link {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

#pipeline-wiki-link:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

#pipeline-config-link {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
}

#pipeline-config-link:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}

.section-header-actions button[onclick="Pipelines.exportAll()"] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

.section-header-actions button[onclick="Pipelines.exportAll()"]:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

/* SVG icons in buttons should be white */
#pipeline-wiki-link svg,
#pipeline-config-link svg,
.section-header-actions button[onclick="Pipelines.exportAll()"] svg {
    stroke: white;
}

/* Dark mode adjustments */
[data-theme="dark"] #section-pipelines .section-title {
    color: #f5f5f7;
}

[data-theme="dark"] #section-pipelines .section-description {
    color: #e5e5e7;
}

/* Hide stats boxes in DRAFT tab only */
.pipeline-tab-content[data-tab-content="draft"] .pipeline-stats-bar {
    display: none;
}

/* Fix button spacing in header */
.section-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.section-header-actions .btn-secondary,
.section-header-actions a {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Style the View Wiki button */
.stage-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 18px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white !important;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.stage-view-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
    color: white !important;
}

.stage-view-btn:active {
    transform: translateY(0);
}

[data-theme="dark"] .stage-view-btn {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

[data-theme="dark"] .stage-view-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* ============================================
   TOKEN EXPIRY MODAL
   ============================================ */

.expiry-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: fadeIn 0.3s ease;
}

.expiry-modal.hidden {
    display: none;
}

.expiry-modal-content {
    background: #ffffff;
    border-radius: 12px;
    padding: 48px;
    max-width: 540px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

.expiry-icon {
    font-size: 72px;
    margin-bottom: 24px;
    animation: pulse 2s ease infinite;
}

.expiry-modal h2 {
    margin: 0 0 20px 0;
    font-size: 32px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.3;
}

.expiry-modal p {
    margin: 0 0 36px 0;
    font-size: 18px;
    color: #333333;
    line-height: 1.7;
}

.expiry-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.expiry-btn-primary {
    background: #28a745;
    color: white;
    border: none;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.expiry-btn-primary:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.expiry-btn-primary:active {
    transform: translateY(0);
}

.expiry-btn-secondary {
    background: transparent;
    color: #666666;
    border: 2px solid #dddddd;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.expiry-btn-secondary:hover {
    background: #f5f5f5;
    border-color: #999999;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.expiry-btn-secondary:active {
    transform: translateY(0);
}

.expiry-countdown {
    margin-top: 28px;
    font-size: 16px;
    color: #666666;
}

.expiry-countdown span {
    font-weight: 600;
    color: #28a745;
    font-size: 18px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .expiry-modal-content {
        padding: 32px 24px;
        max-width: 100%;
    }

    .expiry-icon {
        font-size: 48px;
    }

    .expiry-modal h2 {
        font-size: 24px;
    }
}

/* ============================================
   STM DASHBOARD STYLES
   S&T Manager Dashboard - Glanceable View
   ============================================ */

.stm-dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Cards */
.stm-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.stm-card-header h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stm-total {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stm-view-all {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-decoration: none;
}

.stm-view-all:hover {
    text-decoration: underline;
}

/* Action Items */
.stm-action-items .stm-action-header {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

[data-theme="dark"] .stm-action-items .stm-action-header {
    background: #450a0a;
    border-bottom-color: #7f1d1d;
}

.stm-action-group {
    padding: var(--spacing-md) var(--spacing-lg);
}

.stm-action-group + .stm-action-group {
    border-top: 1px solid var(--color-border);
}

.stm-action-group h4 {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.stm-action-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.stm-action-card:last-child {
    margin-bottom: 0;
}

.stm-action-card.stm-action-ard {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

[data-theme="dark"] .stm-action-card.stm-action-ard {
    background: #451a03;
}

.stm-action-info {
    flex: 1;
    min-width: 0;
}

.stm-action-title {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* #2218 — type badge distinguishing User Management reviews from SAAR requests
   in the STM Dashboard action list. */
.stm-action-type-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    border: 1px solid rgba(0, 122, 255, 0.3);
    vertical-align: middle;
}

.stm-action-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stm-action-link {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.stm-action-link:hover {
    background: #0056b3;
    color: white;
}

/* Phase Distribution */
.stm-phase-chart {
    padding: var(--spacing-lg);
}

.stm-phase-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.stm-phase-label {
    width: 180px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.stm-phase-bar-container {
    flex: 1;
    height: 28px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stm-phase-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #3b82f6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--spacing-sm);
    min-width: 30px;
    transition: width 0.3s ease;
}

/* #2315 (Tanner): a phase with zero items must render a truly EMPTY bar — no
   blue stub. The default min-width/padding paints a 30px nub even at width:0%,
   so an empty phase gets this modifier which strips the fill entirely. */
.stm-phase-bar.stm-phase-empty {
    background: none;
    min-width: 0;
    padding: 0;
}

.stm-phase-bar.stm-phase-none {
    background: var(--color-text-tertiary);
}

/* #2315 developer reminder banner — plain informational note (no hazard styling).
   Reminds developers to activate STM email notifications once review is complete. */
.stm-alpha-review-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 10px 16px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.stm-alpha-review-text {
    line-height: 1.35;
}

.stm-phase-count {
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* Status Filters */
.stm-status-filters {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.stm-status-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stm-status-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.stm-status-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* Inventory List */
.stm-inventory-list {
    padding: var(--spacing-md) var(--spacing-lg);
}

.stm-inventory-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-fast);
}

.stm-inventory-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.stm-inventory-card.stm-highlighted {
    animation: stm-highlight-pulse 2s ease-in-out;
}

@keyframes stm-highlight-pulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(59, 130, 246, 0.1); }
}

.stm-inventory-header {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.stm-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.stm-status-dot.stm-status-progress {
    background: #22c55e;
}

.stm-status-dot.stm-status-standby {
    background: #f59e0b;
}

.stm-status-dot.stm-status-notstarted {
    background: #9ca3af;
}

.stm-status-dot.stm-status-ard {
    background: #ef4444;
}

.stm-inventory-title-block {
    flex: 1;
    min-width: 0;
}

.stm-inventory-title {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    display: block;
}

.stm-inventory-title:hover {
    text-decoration: underline;
}

.stm-inventory-phase {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stm-inventory-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.stm-label {
    padding: 2px var(--spacing-xs);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.stm-label-security {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stm-inventory-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* #2315: inline scan-results download control on each inventory card. */
.stm-inventory-actions {
    margin-top: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-sm);
}

.stm-artifact-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-accent);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.stm-artifact-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent);
}

.stm-artifact-btn:disabled,
.stm-artifact-btn.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.stm-artifact-btn svg {
    flex-shrink: 0;
}

.stm-load-more {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: none;
    border-top: 1px solid var(--color-border);
    color: var(--color-accent);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.stm-load-more:hover {
    background: var(--color-bg-tertiary);
}

/* Quick Actions */
.stm-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

@media (max-width: 768px) {
    .stm-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stm-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    color: inherit;
}

.stm-quick-btn:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stm-quick-btn svg {
    width: 32px;
    height: 32px;
    color: var(--color-accent);
}

.stm-quick-btn span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Collapsible All Tools */
.stm-collapsible-header {
    cursor: pointer;
    user-select: none;
}

.stm-collapsible-header:hover {
    background: var(--color-bg-tertiary);
}

.stm-expand-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-normal);
}

.stm-collapsible.expanded .stm-expand-icon {
    transform: rotate(90deg);
}

.stm-collapse-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.stm-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.stm-collapsible.expanded .stm-collapsible-content {
    max-height: 5000px;
    padding: var(--spacing-lg);
}

.stm-tools-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1200px) {
    .stm-tools-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .stm-tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .stm-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Empty & Info States */
.stm-empty-state,
.stm-info-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.stm-empty-icon,
.stm-info-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    color: var(--color-accent-green);
}

.stm-info-icon {
    color: var(--color-accent);
}

.stm-empty-state h4 {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-primary);
}

.stm-loading {
    padding: var(--spacing-xl);
    text-align: center;
}

.stm-loading .spinner {
    margin: 0 auto var(--spacing-md);
}

/* Role Banners */
.stm-role-banner {
    padding: var(--spacing-sm) var(--spacing-lg);
}

.stm-role-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.stm-role-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stm-admin-badge {
    background: #7c3aed;
    color: white;
}

.stm-pm-badge {
    background: #0891b2;
    color: white;
}

.stm-role-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stm-admin-banner {
    border-left: 4px solid #7c3aed;
}

.stm-pm-banner {
    border-left: 4px solid #0891b2;
}

/* Impersonation Mode */
.stm-impersonation-banner {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.05));
}

.stm-impersonation-badge {
    background: #f59e0b;
    color: white;
}

.stm-role-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.stm-impersonation-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stm-impersonate-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.stm-impersonate-dropdown {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    min-width: 180px;
    cursor: pointer;
}

.stm-impersonate-dropdown:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.stm-exit-impersonation-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: none;
    background: #dc2626;
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.stm-exit-impersonation-btn:hover {
    background: #b91c1c;
}

.stm-exit-impersonation-btn svg {
    width: 14px;
    height: 14px;
}

/* Nav Badge */
#stm-action-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* Refresh Button Spinning */
#stm-refresh-btn.spinning svg {
    animation: spin 1s linear infinite;
}

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

/* ========================================
   USER ACCOUNTING MODAL
   ======================================== */

.user-accounting-modal-content {
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.user-accounting-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.user-accounting-modal-content .modal-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-subtitle {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 400;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-accounting-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header for user accounting - centered content */
.user-accounting-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.user-accounting-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    text-align: center;
    width: 100%;
}

.user-accounting-header .user-accounting-badges {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.user-accounting-header .modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

/* Tabs - same width as filter boxes */
.user-accounting-tabs {
    display: flex;
    gap: 0;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
    margin: 0 var(--spacing-lg);
    padding: 0 var(--spacing-lg);
    background: var(--color-bg-secondary);
}

.user-accounting-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition-fast);
}

.user-accounting-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.user-accounting-tab.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
    background: var(--color-surface);
}

.user-accounting-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.user-accounting-tab.active .user-accounting-tab-badge {
    background: var(--color-accent-blue);
    color: white;
}

/* Tab actions - buttons on the right side */
.user-accounting-tab-actions {
    margin-left: auto;
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.user-accounting-regenerate-btn {
    padding: var(--spacing-sm);
    min-width: auto;
}

.user-accounting-regenerate-btn svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Tab Content */
.user-accounting-tab-content {
    display: none;
    flex: 1;
    overflow: auto;
    padding: var(--spacing-lg);
}

.user-accounting-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Filters */
/* Main filters container - stack groups vertically */
.user-accounting-filters {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-md) * 2); /* Two carriage returns worth of spacing */
    margin-bottom: var(--spacing-lg);
    padding: 0; /* No horizontal padding - let filter groups extend to tabs width */
}

/* Individual filter group with prominent bounding box */
.user-accounting-search-group,
.user-accounting-filter-group {
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0; /* No margin - tab-content padding provides alignment with tabs bar */
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Group label styling */
.filter-group-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

/* Controls container within each group */
.filter-group-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    align-items: center;
}

/* Search box styling - takes more space */
.user-accounting-search {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.user-accounting-search:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.user-accounting-filter {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.user-accounting-regex-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.user-accounting-regex-label input[type="checkbox"] {
    cursor: pointer;
}

/* Responsive design for filter groups */
@media (max-width: 768px) {
    .filter-group-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .user-accounting-search {
        min-width: 100%;
    }

    .user-accounting-filter,
    .user-accounting-regex-label {
        width: 100%;
    }
}

/* Summary Card */
.user-accounting-summary-card {
    margin: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-accounting-summary-card h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.summary-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    border: 2px solid;
    transition: var(--transition-fast);
}

.summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-active {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.summary-deactivated {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ff9800;
}

.summary-blocked {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-color: #f44336;
}

.summary-service {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #2196f3;
}

.summary-total {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-color: #9c27b0;
}

.summary-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.summary-detail {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Status Badges - Compact horizontal summary */
.user-accounting-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.user-accounting-badges .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.user-accounting-badges .status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.user-accounting-badges .badge-active {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #1b5e20;
    border: 1px solid #4caf50;
}

.user-accounting-badges .badge-deactivated {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
    border: 1px solid #ff9800;
}

.user-accounting-badges .badge-blocked {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #b71c1c;
    border: 1px solid #f44336;
}

.user-accounting-badges .badge-service {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #0d47a1;
    border: 1px solid #2196f3;
}

.user-accounting-badges .badge-total {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: #4a148c;
    border: 1px solid #9c27b0;
}

.user-accounting-timestamps {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-style: italic;
    text-align: center;
    width: 100%;
    padding: 4px 0 0 0;
    line-height: 1.5;
}

.user-accounting-badges .badge-loading {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* Dark mode support for badges */
[data-theme="dark"] .user-accounting-badges .badge-active {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color: #a5d6a7;
}

[data-theme="dark"] .user-accounting-badges .badge-deactivated {
    background: linear-gradient(135deg, #e65100 0%, #f57c00 100%);
    color: #ffcc80;
}

[data-theme="dark"] .user-accounting-badges .badge-blocked {
    background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%);
    color: #ef9a9a;
}

[data-theme="dark"] .user-accounting-badges .badge-service {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
    color: #90caf9;
}

[data-theme="dark"] .user-accounting-badges .badge-total {
    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
    color: #ce93d8;
}

/* Dark mode support for summary card */
[data-theme="dark"] .user-accounting-summary-card {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .summary-active {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
}

[data-theme="dark"] .summary-deactivated {
    background: linear-gradient(135deg, #e65100 0%, #f57c00 100%);
}

[data-theme="dark"] .summary-blocked {
    background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%);
}

[data-theme="dark"] .summary-service {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
}

[data-theme="dark"] .summary-total {
    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
}

/* Table */
.user-accounting-table-wrapper {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.user-accounting-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.user-accounting-table thead {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    z-index: 10;
}

.user-accounting-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.user-accounting-table th:hover {
    color: var(--color-accent-blue);
    background: var(--color-bg-hover);
}

.user-accounting-table th[data-sort] {
    position: relative;
    transition: var(--transition-fast);
}

.sort-icon {
    margin-left: var(--spacing-xs);
    color: var(--color-text-tertiary);
    font-size: 14px;
    transition: var(--transition-fast);
}

/* Show sorting icon more prominently on hover */
.user-accounting-table th[data-sort]:hover .sort-icon {
    color: var(--color-accent-blue);
    transform: scale(1.1);
}

/* Active sort column styling */
.user-accounting-table th[data-sort-dir] {
    color: var(--color-accent-blue);
    font-weight: 700;
    background: rgba(59, 130, 246, 0.05);
}

.user-accounting-table th[data-sort-dir="asc"] .sort-icon::before {
    content: '↑';
    color: var(--color-accent-blue);
    font-weight: bold;
}

.user-accounting-table th[data-sort-dir="desc"] .sort-icon::before {
    content: '↓';
    color: var(--color-accent-blue);
    font-weight: bold;
}

.user-accounting-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.user-accounting-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.user-accounting-table td {
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    vertical-align: top;
    text-align: left;
}

.user-accounting-table td:nth-child(5) {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.loading-cell {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: var(--transition-fast);
}

.status-badge.status-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.status-badge.status-deactivated {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

.status-badge.status-blocked {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.bot-badge {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-size: 1.1em;
    opacity: 0.8;
    cursor: help;
}

.gitlab-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.gitlab-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

body.dark-theme .gitlab-link {
    color: #60a5fa;
}

body.dark-theme .gitlab-link:hover {
    color: #93c5fd;
}

/* Dark theme adjustments */
body.dark-theme .status-badge.status-active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.5);
}

body.dark-theme .status-badge.status-deactivated {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.5);
}

body.dark-theme .status-badge.status-blocked {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.5);
}

/* Pagination */
.user-accounting-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Summary Grid */
.user-accounting-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.summary-card {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.summary-card h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.summary-stat:last-child {
    border-bottom: none;
}

.summary-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.summary-stat-value {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.summary-stat-value.highlight {
    color: var(--color-accent-blue);
}

.summary-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.summary-stat.warning {
    background: rgba(239, 68, 68, 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

.summary-stat.warning .summary-stat-value {
    color: #ef4444;
}

/* Alert-capacity card — visually distinct from the GitLab billing cards so the
   75/75 contract number is never confused with GitLab's purchased-seat license. */
.summary-card-alert {
    border-color: var(--color-accent-blue);
    box-shadow: inset 3px 0 0 var(--color-accent-blue);
}

.summary-card-alert h3 {
    color: var(--color-accent-blue);
}

/* Alert Status column badges in the User Access Report table */
.alert-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.alert-status-counted {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.alert-status-domenix {
    background: rgba(88, 86, 214, 0.15);
    color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
}

.alert-status-service {
    background: rgba(142, 142, 147, 0.18);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* Collapsible Access Column */
.access-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.access-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: fit-content;
    font-family: inherit;
}

.access-toggle:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-accent-blue);
}

/* Color-coded button variants for Access */
.access-toggle-has-access {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}

.access-toggle-has-access:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.8);
}

.access-toggle-has-access .access-summary {
    color: var(--color-success);
    font-weight: 600;
}

.access-toggle-no-access {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.5);
}

.access-toggle-no-access:hover {
    background: rgba(148, 163, 184, 0.25);
    border-color: rgba(148, 163, 184, 0.8);
}

.access-toggle-no-access .access-summary {
    color: rgb(148, 163, 184);
    font-weight: 600;
}

.access-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.access-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.access-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-xs);
}

.access-item {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    padding: var(--spacing-xs);
    line-height: 1.4;
}

.access-item:before {
    content: '•';
    color: var(--color-accent-blue);
    margin-right: var(--spacing-xs);
}

/* Tokens Column Styles */
.tokens-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tokens-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: fit-content;
    font-family: inherit;
}

.tokens-toggle:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-accent-green);
}

/* Color-coded button variants for Tokens */
.tokens-toggle-has-tokens {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}

.tokens-toggle-has-tokens:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.8);
}

.tokens-toggle-has-tokens .tokens-summary {
    color: var(--color-success);
    font-weight: 600;
}

.tokens-toggle-no-tokens {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.5);
}

.tokens-toggle-no-tokens:hover {
    background: rgba(251, 146, 60, 0.25);
    border-color: rgba(251, 146, 60, 0.8);
}

.tokens-toggle-no-tokens .tokens-summary {
    color: rgb(251, 146, 60);
    font-weight: 600;
}

.token-icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.tokens-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.tokens-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-xs);
    max-height: 400px;
    overflow-y: auto;
}

.tokens-loading,
.tokens-error,
.tokens-empty {
    padding: var(--spacing-sm);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.tokens-error {
    color: var(--color-error);
}

.token-item {
    padding: var(--spacing-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.token-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.token-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    word-break: break-word;
}

.token-status {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.token-status-active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.token-status-inactive {
    background: rgba(234, 179, 8, 0.1);
    color: var(--color-warning);
}

.token-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.scope-badge {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-accent-blue);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.scope-more {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: 2px 4px;
}

.token-dates {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

/* User Detail Modal */
.user-detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9998;
    animation: fadeIn 0.2s ease-out;
}

.user-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.user-detail-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.user-detail-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.user-detail-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.user-detail-modal-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.user-detail-modal-user-info {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.user-info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.user-info-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.user-info-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-border);
}

.user-detail-modal-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.user-detail-tab {
    background: none;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.user-detail-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.user-detail-tab.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
}

.user-detail-modal-content {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.modal-token-item {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.modal-token-item:last-child {
    margin-bottom: 0;
}

.modal-access-item {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.modal-access-item:last-child {
    margin-bottom: 0;
}

.modal-access-item:hover {
    background: var(--color-bg-hover);
}

/* Dark mode */
[data-theme="dark"] .user-accounting-modal-content {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .user-accounting-table thead {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .summary-card {
    background: var(--color-bg-secondary);
}

/* App relationship badges - show associated models and datasets */
.app-relationships {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.app-rel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: help;
    transition: all 0.2s ease;
}

.app-rel-badge:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-accent-blue);
    color: var(--color-text-primary);
}

.app-rel-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.app-rel-models {
    border-color: rgba(99, 102, 241, 0.3);
}

.app-rel-models:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
    color: #6366f1;
}

.app-rel-datasets {
    border-color: rgba(16, 185, 129, 0.3);
}

.app-rel-datasets:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

/* Dark mode adjustments */
[data-theme="dark"] .app-rel-badge {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
}

[data-theme="dark"] .app-rel-badge:hover {
    background: var(--color-bg-secondary);
}

/* Schema validation badges */
.validation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    cursor: help;
    flex-shrink: 0;
}

.validation-badge svg {
    width: 12px;
    height: 12px;
}

.validation-valid {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.validation-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

.validation-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

/* Animation for validation badges */
.validation-badge {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .validation-valid {
    background: linear-gradient(135deg, #059669, #047857);
}

[data-theme="dark"] .validation-warning {
    background: linear-gradient(135deg, #d97706, #b45309);
}

[data-theme="dark"] .validation-error {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Validation History Badges (on model/dataset cards) */
.validation-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}
.vh-approved {
    background: rgba(34, 165, 102, 0.12);
    color: #22a566;
    border: 1px solid rgba(34, 165, 102, 0.3);
}
.vh-conditional {
    background: rgba(229, 142, 40, 0.12);
    color: #e58e28;
    border: 1px solid rgba(229, 142, 40, 0.3);
}
.vh-failed {
    background: rgba(220, 74, 84, 0.12);
    color: #dc4a54;
    border: 1px solid rgba(220, 74, 84, 0.3);
}
.vh-pending {
    background: rgba(79, 125, 245, 0.12);
    color: #4f7df5;
    border: 1px solid rgba(79, 125, 245, 0.3);
}

/* R4 Lifecycle chip (on model/dataset cards). Color tone matches
   MetricsHelpers.LIFECYCLE_CRITICALITY — production=hot, prototype=cool. */
.lifecycle-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 600;
    margin-left: 4px; white-space: nowrap;
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.3);
}
.lifecycle-production   { background: rgba(34,165,102,0.12);  color:#22a566; border-color: rgba(34,165,102,0.3); }
.lifecycle-staging      { background: rgba(79,125,245,0.12);  color:#4f7df5; border-color: rgba(79,125,245,0.3); }
.lifecycle-testing      { background: rgba(147,112,219,0.12); color:#9370db; border-color: rgba(147,112,219,0.3); }
.lifecycle-development  { background: rgba(229,142,40,0.12);  color:#e58e28; border-color: rgba(229,142,40,0.3); }
.lifecycle-prototype    { background: rgba(229,142,40,0.08);  color:#e58e28; border-color: rgba(229,142,40,0.2); }
.lifecycle-deprecated,
.lifecycle-retired      { background: rgba(220,74,84,0.12);   color:#dc4a54; border-color: rgba(220,74,84,0.3); }

/* Validation History Metric Chips (in viewer timeline) */
.vh-metric-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8b949e;
}
.vh-metric-chip strong {
    color: #e6edf3;
}

/* App quick actions - Run/View buttons for associated resources */
.app-quick-actions {
    border-top: 1px solid var(--color-border);
    padding: 12px;
    background: var(--color-bg-secondary);
    margin-top: 8px;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-quick-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-quick-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.app-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

.app-quick-action:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue);
    transform: translateX(2px);
}

.app-quick-action svg {
    flex-shrink: 0;
}

.app-quick-action span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-quick-missing {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-secondary);
}

.app-quick-missing:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    transform: none;
}

/* App card adjustments for quick actions */
.app-card {
    overflow: visible;
}

/* Dark mode adjustments */
[data-theme="dark"] .app-quick-actions {
    background: var(--color-bg-tertiary);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .app-quick-action {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .app-quick-action:hover {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .app-quick-missing {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .app-quick-missing:hover {
    background: var(--color-bg-tertiary);
}

/* Batch operation buttons for quick actions */
.app-quick-batch {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white !important;
    font-weight: 600;
    border: 2px solid #7c3aed !important;
    margin-bottom: 8px;
}

.app-quick-batch:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border-color: #6d28d9 !important;
    transform: translateX(3px) scale(1.02);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.app-quick-batch svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

[data-theme="dark"] .app-quick-batch {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important;
    border-color: #8b5cf6 !important;
}

[data-theme="dark"] .app-quick-batch:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Health indicators for quick actions */
.health-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    flex-shrink: 0;
}

.health-valid {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.health-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.health-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* Adjust quick action button layout for health indicators */
.app-quick-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .health-valid {
    background: linear-gradient(135deg, #34d399, #10b981);
}

[data-theme="dark"] .health-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

[data-theme="dark"] .health-error {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

/* ===================================
   DATASET WIZARD STYLES
   =================================== */

.wizard-modal-content {
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.wizard-content {
    padding: 1.5rem;
}

.wizard-beta-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 1.5rem;
    padding: 0.875rem 1rem;
    background: #fff8e1;
    border: 2px solid #f59e0b;
    border-left-width: 6px;
    border-radius: 6px;
    color: #78350f;
    font-size: 0.9rem;
    line-height: 1.4;
}

.wizard-beta-icon {
    font-size: 1.25rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.wizard-beta-text strong {
    display: inline;
    color: #78350f;
    font-weight: 700;
    margin-right: 0.25rem;
}

body.dark-mode .wizard-beta-banner,
[data-theme="dark"] .wizard-beta-banner {
    background: #3a2a08;
    border-color: #f59e0b;
    color: #fde68a;
}

body.dark-mode .wizard-beta-text strong,
[data-theme="dark"] .wizard-beta-text strong {
    color: #fde68a;
}

/* Per-role Quick-Start checklist (#2056 6.6) */
.quickstart-panel { margin-bottom: 1.25rem; }
.quickstart-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 16px 18px;
}
.quickstart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quickstart-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.quickstart-role { color: var(--color-primary); }
.quickstart-blurb { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 10px; }
.quickstart-dismiss {
    font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-tertiary);
    border: 1px solid transparent; border-radius: 12px; padding: 3px 10px; cursor: pointer;
}
.quickstart-dismiss:hover { color: var(--color-text-primary); border-color: var(--color-border); }
.quickstart-reopen {
    font-size: 13px; color: var(--color-primary); background: var(--color-bg-secondary);
    border: 1px dashed var(--color-primary); border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.quickstart-progress-bar {
    height: 6px; background: var(--color-bg-tertiary); border-radius: 3px; overflow: hidden; margin-bottom: 4px;
}
.quickstart-progress-bar > span { display: block; height: 100%; background: var(--color-accent-green); transition: width .3s; }
.quickstart-progress-label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; }
.quickstart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quickstart-item { display: flex; align-items: center; gap: 10px; }
.quickstart-item.done .quickstart-link { text-decoration: line-through; color: var(--color-text-muted); }
.quickstart-check input { width: 16px; height: 16px; cursor: pointer; }
.quickstart-link { color: var(--color-text-primary); text-decoration: none; font-size: 14px; }
.quickstart-link:hover { color: var(--color-primary); text-decoration: underline; }

/* Guided Setup (dataset → model → app orchestrator) */
.guided-flow-modal-content { max-width: 640px; }
.guided-flow-step { display: flex; flex-direction: column; gap: 1.25rem; }
.guided-flow-sub { color: var(--color-text-secondary); font-size: 14px; margin: 0; }
.guided-flow-progress {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-text-secondary);
}
.gf-trail-node { padding: 2px 8px; border-radius: 12px; background: var(--color-bg-tertiary); }
.gf-trail-node.current { background: var(--color-primary); color: #fff; font-weight: 600; }
.gf-trail-node.done { color: var(--color-accent-green); }
.gf-trail-node.skipped { opacity: 0.5; text-decoration: line-through; }
.gf-trail-sep { color: var(--color-text-muted); }
.guided-flow-choices { display: flex; flex-direction: column; gap: 10px; }
.guided-flow-choice {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 14px 16px; border-radius: 8px;
    background: var(--color-bg-tertiary); border: 2px solid transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.guided-flow-choice:hover { border-color: var(--color-primary); background: var(--color-bg-hover); }
.guided-flow-choice .gfc-icon { font-size: 20px; }
.guided-flow-choice .gfc-title { font-weight: 600; color: var(--color-text-primary); margin-top: 4px; }
.guided-flow-choice .gfc-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.gf-existing-option {
    padding: 10px 12px; margin-bottom: 6px; border-radius: 6px; cursor: pointer;
    background: var(--color-bg-tertiary); border: 2px solid transparent;
}
.gf-existing-option:hover { border-color: var(--color-primary); }
.gf-existing-option small { display: block; color: var(--color-text-secondary); font-size: 12px; }
.guided-flow-cta {
    background: var(--color-bg-info); border-left: 3px solid var(--color-info);
    border-radius: 6px; padding: 14px 16px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 10px; font-size: 14px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wizard-step h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text-primary);
}

.wizard-step > p {
    margin: 0;
    color: var(--color-text-secondary);
}

.dataset-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.dataset-type-card {
    padding: 1.5rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: var(--color-bg-secondary);
}

.dataset-type-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.dataset-type-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-faded);
}

.dataset-type-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.dataset-type-name {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.dataset-type-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.storage-type-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-bg-secondary);
}

.radio-card:hover {
    border-color: var(--color-primary);
}

.radio-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-faded);
}

.radio-card input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.associated-models-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    min-height: 100px;
}

.no-models-msg {
    text-align: center;
    color: var(--color-text-secondary);
    margin: auto 0;
}

.associated-model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.model-select-item {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.2s;
}

.model-select-item:hover {
    background: var(--color-bg-secondary);
}

.model-select-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
}

.model-select-item small {
    color: var(--color-text-secondary);
}

.wizard-review {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-section {
    padding: 1rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.review-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.review-item {
    padding: 0.5rem 0;
    color: var(--color-text-primary);
}

.review-item strong {
    color: var(--color-text-secondary);
    margin-right: 0.5rem;
}

.wizard-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.wizard-error {
    padding: 1rem;
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 6px;
    color: #c00;
}

[data-theme="dark"] .wizard-error {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* User Accounting button - outlined style for better contrast */
#um-user-accounting-btn {
    border: 1.5px solid var(--color-accent-blue);
    color: var(--color-accent-blue);
    background: transparent;
    font-weight: 600;
}

#um-user-accounting-btn:hover {
    background: var(--color-accent-blue);
    color: white;
}

#um-user-accounting-btn:hover svg {
    stroke: white;
}

#um-user-accounting-btn svg {
    stroke: var(--color-accent-blue);
}

/* ============================================================
   Workflow Guide Button & Flowchart Modal
   ============================================================ */

/* --- Trigger button --- */
.workflow-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.workflow-guide-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
    background: linear-gradient(135deg, #0070ee 0%, #4e4cc9 100%);
}

.workflow-guide-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 122, 255, 0.2);
}

.workflow-guide-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.workflow-guide-btn:hover svg {
    transform: translateX(2px);
}

/* #2487 - dev-in-progress indicator next to the workflow guide button.
   Same padding/margin-top/inline-flex as .workflow-guide-btn so it sits at
   the same height and on the same line, just to its right. */
.beta-testing-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    margin-left: 10px;
    padding: 10px 20px;
    background: #1b5e20;
    color: #ff9500;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 8px;
}

/* --- Modal overrides --- */
.workflow-guide-content {
    max-width: 860px;
    width: 95vw;
    max-height: 90vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.workflow-guide-header {
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    color: #fff;
    padding: 28px 32px 24px;
    border-bottom: none;
    position: relative;
}

.workflow-guide-header h2 {
    color: #fff;
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
}

.workflow-guide-header .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #fff;
}

.workflow-guide-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.workflow-guide-header .modal-close svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.workflow-guide-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

.workflow-guide-body {
    padding: 28px 32px 32px;
    overflow-y: auto;
    flex: 1;
    text-align: left;
}

/* --- Step layout --- */
.wf-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.wf-step-number {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Step number colors per stage */
.wf-step-submit .wf-step-number  { background: #007aff; }
.wf-step-admin .wf-step-number   { background: #ff9500; }
.wf-step-customer .wf-step-number { background: #af52de; }
.wf-step-provision .wf-step-number { background: #5ac8fa; }
.wf-step-complete .wf-step-number {
    background: #34c759;
}
.wf-step-complete .wf-step-number svg {
    stroke: #fff;
}

/* --- Step card --- */
.wf-step-card {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.wf-step-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Card header with accent stripe */
.wf-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.wf-step-submit .wf-step-header  { border-left: 4px solid #007aff; }
.wf-step-admin .wf-step-header   { border-left: 4px solid #ff9500; }
.wf-step-customer .wf-step-header { border-left: 4px solid #af52de; }
.wf-step-provision .wf-step-header { border-left: 4px solid #5ac8fa; }
.wf-step-complete .wf-step-header { border-left: 4px solid #34c759; }

.wf-step-header svg {
    flex-shrink: 0;
    stroke: #6b7280;
}

.wf-step-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Card body */
.wf-step-body {
    padding: 16px 18px;
}

.wf-step-body > p {
    margin: 0 0 12px;
    color: #4b5563;
    font-size: 13.5px;
    line-height: 1.55;
}

/* --- Detail grid --- */
.wf-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-detail {
    font-size: 13px;
    line-height: 1.45;
}

.wf-detail strong {
    color: #374151;
    white-space: nowrap;
}

.wf-detail span {
    color: #6b7280;
}

/* --- Role & SLA tags --- */
.wf-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #e0f2fe;
    color: #0369a1;
}

.wf-role-admin {
    background: #fff3e0;
    color: #e65100;
}

.wf-role-customer {
    background: #f3e8ff;
    color: #7c3aed;
}

.wf-role-you {
    background: #dcfce7;
    color: #15803d;
}

.wf-sla-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
}

/* --- Outcomes grid --- */
.wf-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 18px 16px;
}

.wf-outcome {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.wf-outcome-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.wf-outcome strong {
    font-size: 13px;
    color: #111827;
    display: block;
    margin-bottom: 2px;
}

.wf-outcome p {
    margin: 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

.wf-outcome-approve .wf-outcome-icon { background: #34c759; }
.wf-outcome-deny .wf-outcome-icon    { background: #ff3b30; }
.wf-outcome-info .wf-outcome-icon    { background: #007aff; }
.wf-outcome-hold .wf-outcome-icon    { background: #ff9500; font-size: 10px; }

.wf-outcome-approve { border-color: #bbf7d0; }
.wf-outcome-deny    { border-color: #fecaca; }
.wf-outcome-info    { border-color: #bfdbfe; }
.wf-outcome-hold    { border-color: #fed7aa; }

/* --- Connector lines between steps --- */
.wf-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    margin-left: 18px;
}

.wf-connector-line {
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, #d1d5db, #9ca3af);
    border-radius: 1px;
}

.wf-connector-label {
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 500;
    padding: 4px 12px;
    background: #f3f4f6;
    border-radius: 10px;
    margin: 4px 0;
    white-space: nowrap;
}

.wf-connector-final .wf-connector-line {
    background: linear-gradient(to bottom, #9ca3af, #34c759);
}

/* --- Provisioning methods --- */
.wf-provision-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.wf-provision-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.wf-method-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-method-auto {
    background: #dcfce7;
}

.wf-method-auto svg {
    stroke: #15803d;
}

.wf-method-manual {
    background: #fff3e0;
}

.wf-method-manual svg {
    stroke: #e65100;
}

.wf-provision-method strong {
    font-size: 13px;
    color: #111827;
    display: block;
    margin-bottom: 2px;
}

.wf-provision-method p {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}

/* --- Audit trail section --- */
.wf-audit-section {
    margin-top: 28px;
    padding: 24px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
}

.wf-audit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.wf-audit-header svg {
    stroke: #1e40af;
    flex-shrink: 0;
}

.wf-audit-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1e3a5f;
}

.wf-audit-intro {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.55;
}

/* Audit layers (hash chain, snapshots, history) */
.wf-audit-layers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.wf-audit-layer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.wf-audit-layer-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.wf-audit-layer-hash {
    background: #fef3c7;
}

.wf-audit-layer-hash svg {
    stroke: #92400e;
}

.wf-audit-layer-snapshot {
    background: #e0e7ff;
}

.wf-audit-layer-snapshot svg {
    stroke: #3730a3;
}

.wf-audit-layer-history {
    background: #dcfce7;
}

.wf-audit-layer-history svg {
    stroke: #15803d;
}

.wf-audit-layer strong {
    display: block;
    font-size: 13.5px;
    color: #111827;
    margin-bottom: 3px;
}

.wf-audit-layer p {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* "What you can verify" examples list */
.wf-audit-examples {
    margin-bottom: 14px;
}

.wf-audit-examples > strong {
    display: block;
    font-size: 13.5px;
    color: #1e3a5f;
    margin-bottom: 8px;
}

.wf-audit-examples ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.wf-audit-examples li {
    position: relative;
    padding: 6px 0 6px 0;
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.5;
}

.wf-audit-examples li::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #007aff;
}

.wf-audit-examples li strong {
    color: #111827;
}

/* Bottom info note */
.wf-audit-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.wf-audit-note svg {
    flex-shrink: 0;
    stroke: #9ca3af;
    margin-top: 1px;
}

.wf-audit-note span {
    flex: 1;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .workflow-guide-content {
        width: 100vw;
        max-width: 100vw;
        border-radius: 12px 12px 0 0;
        max-height: 95vh;
    }

    .workflow-guide-header {
        padding: 20px 20px 18px;
    }

    .workflow-guide-body {
        padding: 20px;
    }

    .wf-outcomes {
        grid-template-columns: 1fr;
    }

    .wf-step-header {
        flex-wrap: wrap;
    }

    .wf-connector-label {
        white-space: normal;
        text-align: center;
    }
}

/* ============================================
   SCHEMA GUIDE MODAL
   ============================================ */
.schema-guide-modal-content {
    max-width: 800px;
    width: 92%;
    max-height: 85vh;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.schema-guide-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    flex-shrink: 0;
}

.schema-guide-modal-content .modal-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.schema-guide-modal-content .modal-body {
    overflow-y: auto;
    padding: var(--spacing-lg) 0;
    flex: 1;
    min-height: 0;
}

.schema-guide-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.schema-guide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.schema-guide-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.schema-guide-section p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.schema-guide-section code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
}

.schema-guide-section ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.schema-guide-section li {
    margin-bottom: var(--spacing-xs);
}

.schema-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
}

.schema-guide-table th,
.schema-guide-table td {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.schema-guide-table th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    color: var(--color-text-primary);
    position: sticky;
    top: 0;
}

.schema-guide-table td {
    color: var(--color-text-secondary);
    vertical-align: top;
}

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

.schema-guide-migration {
    background: rgba(255, 204, 0, 0.06);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.schema-guide-enum-section summary {
    cursor: pointer;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

.schema-guide-enum-section summary:hover {
    color: var(--color-accent-blue);
}

@media (max-width: 640px) {
    .schema-guide-modal-content {
        width: 98%;
        max-height: 90vh;
    }

    .schema-guide-table {
        font-size: var(--font-size-xs);
    }

    .schema-guide-table th,
    .schema-guide-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ============================================
   REFERENCE LIBRARY MODAL
   ============================================ */
.reflib-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    letter-spacing: 0.01em;
}

.reflib-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
}

.reflib-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.reflib-modal-content {
    max-width: 900px;
    width: 94%;
    max-height: 88vh;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.reflib-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    flex-shrink: 0;
}

.reflib-modal-content .modal-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.reflib-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
}

.reflib-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.reflib-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.reflib-tab.active {
    color: var(--color-accent-blue);
    border-bottom-color: var(--color-accent-blue);
}

.reflib-modal-content .modal-body {
    overflow-y: auto;
    padding: var(--spacing-lg) var(--spacing-sm);
    flex: 1;
    min-height: 0;
}

.reflib-section {
    margin-bottom: var(--spacing-xl);
}

.reflib-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.reflib-section p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.reflib-section ol {
    margin: 0;
    padding-left: var(--spacing-xl);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.reflib-section li {
    margin-bottom: var(--spacing-xs);
}

.reflib-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.reflib-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    min-width: 100px;
}

.reflib-stat-num {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-accent-blue);
}

.reflib-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.reflib-domain {
    margin-bottom: var(--spacing-md);
}

.reflib-domain summary {
    cursor: pointer;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

.reflib-domain summary:hover {
    color: var(--color-accent-blue);
}

.reflib-example {
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.reflib-example summary {
    cursor: pointer;
    padding: var(--spacing-md);
    color: var(--color-text-primary);
}

.reflib-example summary:hover {
    background: var(--color-bg-hover);
}

.reflib-example-body {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.reflib-json {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: var(--font-size-xs);
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

@media (max-width: 640px) {
    .reflib-modal-content {
        width: 98%;
        max-height: 92vh;
    }

    .reflib-stats {
        gap: var(--spacing-sm);
    }

    .reflib-stat {
        min-width: 70px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .reflib-tab {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Tag Filter — faceted tag filtering for models/datasets grids
   ═══════════════════════════════════════════════════════════════ */
.tag-filter-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.tag-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tag-filter-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tag-filter-clear {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.tag-filter-clear:hover { background: rgba(79,125,245,0.1); }
.tag-filter-category {
    margin-bottom: 6px;
}
.tag-filter-category-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tag-filter-category-label .cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.tag-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}
.tag-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.tag-chip.active {
    background: rgba(79,125,245,0.15);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.tag-chip .chip-count {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.6;
}
.tag-filter-active-summary {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    display: none;
}
.tag-filter-active-summary.visible { display: block; }

/* ═══════════════════════════════════════════════════════════════
   TagPicker — multi-select chip component for wizards (R4)
   ═══════════════════════════════════════════════════════════════ */
.tag-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.tag-picker-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tag-picker-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary, var(--text-muted, #86868b));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-picker-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-border, var(--border-color, rgba(0,0,0,0.08)));
    background: transparent;
    color: var(--color-text-secondary, var(--text-secondary, #6e6e73));
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}
.tag-picker-chip:hover:not(:disabled) {
    border-color: var(--color-accent, var(--primary, #007aff));
    color: var(--color-accent, var(--primary, #007aff));
}
.tag-picker-chip:focus-visible {
    outline: 2px solid var(--color-accent, var(--primary, #007aff));
    outline-offset: 2px;
}
.tag-picker-chip.selected {
    background: var(--color-bg-active, rgba(0,122,255,0.1));
    border-color: var(--color-accent, var(--primary, #007aff));
    color: var(--color-accent, var(--primary, #007aff));
    font-weight: 600;
}
.tag-picker-chip:disabled,
.tag-picker-chip[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}
@media (max-width: 640px) {
    .tag-picker { gap: 10px; }
    .tag-picker-chip { font-size: 11px; padding: 3px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   Version History — commit timeline and JSON diff viewer
   ═══════════════════════════════════════════════════════════════ */
.version-history-container {
    padding: 16px;
}
.version-history-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}
.vh-commit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.vh-commit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.1s;
}
.vh-commit-item:hover { background: rgba(79,125,245,0.04); }
.vh-commit-item:last-child { border-bottom: none; }
.vh-commit-item.selected {
    background: rgba(79,125,245,0.08);
    border-left: 3px solid var(--primary);
}
.vh-commit-sha {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    color: var(--primary);
    min-width: 70px;
}
.vh-commit-info { flex: 1; }
.vh-commit-message { font-size: 13px; font-weight: 500; }
.vh-commit-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.vh-compare-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
}
.vh-compare-bar .sha { font-family: monospace; color: var(--primary); font-weight: 600; }
.vh-compare-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}
.vh-compare-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.vh-diff-container {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}
.vh-diff-header {
    padding: 8px 14px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
}
.vh-diff-line {
    padding: 2px 14px;
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.vh-diff-line:last-child { border-bottom: none; }
.vh-diff-line .line-content { flex: 1; white-space: pre-wrap; word-break: break-all; }
.vh-diff-line .line-prefix { width: 16px; text-align: center; color: var(--text-muted); user-select: none; }

.vh-diff-added { background: rgba(34,165,102,0.1); }
.vh-diff-added .line-prefix { color: #22a566; }
.vh-diff-removed { background: rgba(220,74,84,0.1); }
.vh-diff-removed .line-prefix { color: #dc4a54; }

.vh-diff-stats {
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
}
.vh-diff-stats .stat-added { color: #22a566; }
.vh-diff-stats .stat-removed { color: #dc4a54; }

.vh-no-history {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   MetricsPanel — Platform leaderboard and usage analytics
   ═══════════════════════════════════════════════════════════════ */
.metrics-grid { padding: 4px 0; }
.metrics-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.metrics-stat { flex: 1; text-align: center; }
.metrics-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.metrics-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.metrics-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.metrics-column { min-width: 0; }
.metrics-column-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}
.metrics-list { display: flex; flex-direction: column; gap: 4px; }
.metrics-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    transition: background 0.1s;
}
.metrics-list-item:hover { background: rgba(255,255,255,0.03); }
.metrics-rank {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    color: var(--primary);
}
.metrics-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.metrics-item-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.metrics-compliance { display: flex; flex-direction: column; gap: 4px; }
.metrics-compliance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 8px;
}
.metrics-compliance-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.metrics-compliance-count {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-primary);
}
.metrics-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px;
    font-style: italic;
}
.metrics-collapsed .card-content { display: none; }
@media (max-width: 768px) {
    .metrics-columns { grid-template-columns: 1fr; }
    .metrics-summary { flex-wrap: wrap; }
}

/* ─── R4 expansion — lifecycle bar + attention list ─── */
:root {
    --lifecycle-production: #22a566;
    --lifecycle-staging: #4f7df5;
    --lifecycle-testing: #38b3d0;
    --lifecycle-development: #e58e28;
    --lifecycle-prototype: #8896a8;
    --lifecycle-deprecated: #dc4a54;
    --lifecycle-retired: #4a4f5c;
    --lifecycle-unknown: #b8c0cc;
}
.metrics-lifecycle-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--lifecycle-unknown);
    margin: 6px 0 8px;
}
.metrics-lifecycle-segment {
    height: 100%;
    transition: width 300ms ease-in-out;
}
.metrics-lc-production  { background: var(--lifecycle-production); }
.metrics-lc-staging     { background: var(--lifecycle-staging); }
.metrics-lc-testing     { background: var(--lifecycle-testing); }
.metrics-lc-development { background: var(--lifecycle-development); }
.metrics-lc-prototype   { background: var(--lifecycle-prototype); }
.metrics-lc-deprecated  { background: var(--lifecycle-deprecated); }
.metrics-lc-retired     { background: var(--lifecycle-retired); }
.metrics-lc-unknown     { background: var(--lifecycle-unknown); }
.metrics-lifecycle-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}
.metrics-lifecycle-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.metrics-lifecycle-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.metrics-attention-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 3px solid #dc4a54;
    padding-left: 8px;
}

/* ─── R4 expansion — horizontal bar charts (Technique & Domain Mix) ─── */
.metrics-subcategory-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}
.metrics-bar-row {
    display: grid;
    grid-template-columns: 30% 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}
.metrics-bar-label {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metrics-bar-track {
    display: block;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
}
.metrics-bar-fill {
    display: block;
    height: 100%;
    background: #4f7df5;
    border-radius: 5px;
    transition: width 300ms ease-in-out;
}
.metrics-bar-count {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-muted);
    min-width: 28px;
}

/* ─── R4 expansion — Churn & Freshness card ─── */
.metrics-churn-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .metrics-churn-columns { grid-template-columns: 1fr; }
}
.metrics-churn-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    background: rgba(79, 125, 245, 0.15);
    color: #4f7df5;
    border-radius: 10px;
    white-space: nowrap;
}
.metrics-loading-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 8px;
    font-style: italic;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.02) 100%);
    background-size: 200% 100%;
    animation: metrics-loading-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes metrics-loading-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Cookbook ─── */
.cookbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 4px 0;
}
.cookbook-card {
    background: var(--bg-secondary, #1e2a3a);
    border: 1px solid var(--border-color, #2a3a4a);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cookbook-card:hover {
    border-color: var(--accent-color, #4ea8de);
    box-shadow: 0 2px 12px rgba(78, 168, 222, 0.1);
}
.cookbook-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cookbook-type-badge, .cookbook-diff-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cookbook-type-model { background: rgba(78, 168, 222, 0.15); color: #4ea8de; }
.cookbook-type-dataset { background: rgba(34, 165, 102, 0.15); color: #22a566; }
.cookbook-type-app { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.cookbook-diff-beginner { background: rgba(34, 165, 102, 0.15); color: #22a566; }
.cookbook-diff-intermediate { background: rgba(229, 142, 40, 0.15); color: #e58e28; }
.cookbook-diff-advanced { background: rgba(220, 74, 84, 0.15); color: #dc4a54; }
.cookbook-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    margin: 0;
}
.cookbook-card-desc {
    font-size: 13px;
    color: var(--text-secondary, #a0aec0);
    margin: 0;
    line-height: 1.45;
    flex: 1;
}
.cookbook-card-today {
    font-size: 12px;
    color: var(--text-secondary, #a0aec0);
    margin: 0;
    line-height: 1.4;
    padding: 6px 8px;
    background: rgba(29, 111, 184, 0.08);
    border-left: 3px solid var(--color-accent, #1d6fb8);
    border-radius: 3px;
}
.cookbook-today-label {
    font-weight: 600;
    color: var(--color-accent, #1d6fb8);
}
.cookbook-card-note {
    font-size: 10px;
    color: var(--text-muted, #718096);
    margin: 0;
    line-height: 1.35;
    font-style: italic;
}
.cookbook-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #a0aec0);
}
.cookbook-disclaimer-icon {
    font-size: 16px;
    line-height: 1.3;
    color: #eab308;
    flex-shrink: 0;
}
.cookbook-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cookbook-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-tertiary, #2a3a4a);
    color: var(--text-secondary, #a0aec0);
}
.cookbook-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #2a3a4a);
}
.cookbook-domain {
    font-size: 11px;
    color: var(--text-muted, #718096);
    text-transform: capitalize;
}
.cookbook-use-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    background: var(--accent-color, #4ea8de);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.cookbook-use-btn:hover { background: #3a8fc0; }
.cookbook-filters { margin-bottom: 12px; }
.cookbook-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.cookbook-filter-label {
    font-size: 12px;
    color: var(--text-muted, #718096);
    margin-right: 4px;
}
.cookbook-filter-sep {
    font-size: 12px;
    color: var(--border-color, #2a3a4a);
    margin: 0 2px;
}
.cookbook-filter-chip {
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid var(--border-color, #2a3a4a);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: capitalize;
}
.cookbook-filter-chip:hover { border-color: var(--accent-color, #4ea8de); color: var(--accent-color, #4ea8de); }
.cookbook-filter-chip.active { background: var(--accent-color, #4ea8de); color: #fff; border-color: var(--accent-color, #4ea8de); }
.cookbook-clear-btn { color: #dc4a54; border-color: rgba(220, 74, 84, 0.3); }
.cookbook-clear-btn:hover { border-color: #dc4a54; }
@media (max-width: 768px) {
    .cookbook-grid { grid-template-columns: 1fr; }
}

/* ============================================
   core-cli reference page (developer docs)
   ============================================ */
.corecli-meta-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.corecli-meta-badge {
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
    background: rgba(139, 92, 246, 0.12); color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
    font-family: "SF Mono", Menlo, Consolas, monospace;
}
body.dark-mode .corecli-meta-badge {
    background: rgba(167, 139, 250, 0.15); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35);
}
.corecli-page { max-width: 960px; margin: 16px 0; line-height: 1.55; }
.corecli-page p { margin: 10px 0; }
.corecli-page code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em; padding: 1px 5px; border-radius: 3px;
    background: rgba(139, 92, 246, 0.08); color: #5b21b6;
}
body.dark-mode .corecli-page code { background: rgba(167, 139, 250, 0.15); color: #d8b4fe; }
.corecli-section-header {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; letter-spacing: 0.12em; font-weight: 700;
    color: #4c1d95; margin: 32px 0 8px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.25);
}
body.dark-mode .corecli-section-header { color: #c4b5fd; border-bottom-color: rgba(167, 139, 250, 0.35); }
.corecli-term {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.5;
    background: #0f172a; color: #e2e8f0;
    padding: 12px 14px; border-radius: 6px;
    overflow-x: auto; white-space: pre; margin: 8px 0;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.corecli-code-wrap { position: relative; }
.corecli-code-wrap .corecli-term { padding-right: 72px; }
.corecli-copy-btn {
    position: absolute; top: 10px; right: 10px;
    font-size: 11px; padding: 3px 10px;
    background: rgba(226, 232, 240, 0.1); color: #e2e8f0;
    border: 1px solid rgba(226, 232, 240, 0.3); border-radius: 4px;
    cursor: pointer; font-family: "SF Mono", Menlo, Consolas, monospace;
    transition: background 0.12s;
}
.corecli-copy-btn:hover { background: rgba(139, 92, 246, 0.25); border-color: rgba(167, 139, 250, 0.6); }
.corecli-aside {
    font-size: 13px; padding: 10px 14px;
    background: rgba(250, 204, 21, 0.08);
    border-left: 3px solid #eab308;
    border-radius: 0 4px 4px 0; color: #713f12;
}
body.dark-mode .corecli-aside { background: rgba(250, 204, 21, 0.12); color: #fde68a; }
.corecli-cmd-list dt {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700; font-size: 14px; margin-top: 18px; color: #4c1d95;
}
body.dark-mode .corecli-cmd-list dt { color: #c4b5fd; }
.corecli-cmd-list dd { margin: 6px 0 12px 0; }
.corecli-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.corecli-table th, .corecli-table td {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25); vertical-align: top;
}
.corecli-table th { font-weight: 700; color: #4c1d95; background: rgba(139, 92, 246, 0.05); }
body.dark-mode .corecli-table th { color: #c4b5fd; background: rgba(167, 139, 250, 0.1); }
.corecli-faq dt { font-weight: 600; margin-top: 14px; color: #1e293b; }
body.dark-mode .corecli-faq dt { color: #e2e8f0; }
.corecli-faq dd { margin: 4px 0 0 0; color: #475569; font-size: 14px; }
body.dark-mode .corecli-faq dd { color: #cbd5e1; }
.corecli-refs { margin: 8px 0; padding-left: 20px; }
.corecli-refs li { margin: 4px 0; }
.corecli-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
@media (max-width: 768px) {
    .corecli-page { max-width: 100%; }
    .corecli-term { font-size: 12px; padding: 10px; }
}

/* ============================================
   Bedrock Playground — Visualize toggle + artifacts
   ============================================ */
.bedrock-viz-toggle {
    width: auto;
    padding: 0 10px;
    gap: 6px;
}
.bedrock-viz-label {
    font-size: 12px;
    font-weight: 500;
}
.bedrock-viz-toggle.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
}
.bedrock-viz-toggle.active:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.bedrock-viz-artifact {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.05);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.bedrock-viz-artifact-label {
    font-size: 12px;
    color: #7c3aed;
    margin-right: auto;
}
body.dark-mode .bedrock-viz-artifact-label { color: #c4b5fd; }
.bedrock-viz-btn {
    padding: 5px 12px;
    font-size: 12px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.bedrock-viz-btn:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.bedrock-viz-btn.secondary {
    background: transparent;
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.4);
}
body.dark-mode .bedrock-viz-btn.secondary { color: #c4b5fd; }
.bedrock-sample-wrap { position: relative; display: inline-block; }
.bedrock-sample-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 280px;
    z-index: 50;
}
body.dark-mode .bedrock-sample-menu {
    background: #1e293b;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}
.bedrock-sample-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
}
.bedrock-sample-option:hover { background: rgba(139, 92, 246, 0.08); }
.bedrock-sample-option span { font-size: 11px; color: #64748b; }
body.dark-mode .bedrock-sample-option span { color: #94a3b8; }
.bedrock-sample-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 10px 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 4px;
}
.bedrock-sample-section:first-child { border-top: none; margin-top: 0; }
body.dark-mode .bedrock-sample-section { border-top-color: rgba(255,255,255,0.08); }

/* Source picker modals reuse .modal-overlay from other RequestAccess/S3
   modals. New styles for the list of objects to pick from. */
.bedrock-picker-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 10002;
}
.bedrock-picker-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    max-width: 640px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
body.dark-mode .bedrock-picker-box {
    background: #1e293b;
    color: #e2e8f0;
}
.bedrock-picker-box h3 { margin: 0; font-size: 16px; }
.bedrock-picker-controls { display: flex; gap: 8px; }
.bedrock-picker-controls select,
.bedrock-picker-controls input[type="text"] {
    flex: 1; padding: 6px 10px; font-size: 13px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    background: inherit; color: inherit;
}
.bedrock-picker-list {
    flex: 1;
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 4px;
    padding: 4px;
}
.bedrock-picker-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
}
.bedrock-picker-item:hover { background: rgba(139, 92, 246, 0.08); }
.bedrock-picker-item.is-dir { color: #7c3aed; font-weight: 600; }
body.dark-mode .bedrock-picker-item.is-dir { color: #c4b5fd; }
.bedrock-picker-item .size { margin-left: auto; font-size: 11px; color: #64748b; }
body.dark-mode .bedrock-picker-item .size { color: #94a3b8; }
.bedrock-picker-crumb {
    font-size: 12px; color: #64748b;
    padding: 0 4px 4px;
    word-break: break-all;
}
body.dark-mode .bedrock-picker-crumb { color: #94a3b8; }
.bedrock-picker-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.bedrock-viz-panel {
    margin-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    padding-top: 12px;
}
.bedrock-viz-panel summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c3aed;
    padding: 4px 0;
}
body.dark-mode .bedrock-viz-panel summary { color: #c4b5fd; }
.bedrock-viz-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px;
}
.bedrock-viz-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 5px;
}
body.dark-mode .bedrock-viz-row {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(167, 139, 250, 0.25);
}
.bedrock-viz-row-info {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.bedrock-viz-row-info strong { font-size: 13px; font-family: "SF Mono", Menlo, Consolas, monospace; }
.bedrock-viz-row-info .size { font-size: 11px; color: #64748b; }
body.dark-mode .bedrock-viz-row-info .size { color: #94a3b8; }
.bedrock-viz-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bedrock-viz-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-top: 1px dashed rgba(139, 92, 246, 0.25);
}
.bedrock-viz-chip {
    padding: 4px 12px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.06);
    color: #7c3aed;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}
body.dark-mode .bedrock-viz-chip { color: #c4b5fd; }
.bedrock-viz-chip:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: #7c3aed;
}

/* ============================================
   STM Dashboard — Access Request Review Modal (Issue #2056)
   ============================================ */

.stm-action-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stm-review-btn {
    cursor: pointer;
    border: none;
    font: inherit;
}

.stm-action-gitlab-link {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-md);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 1;
}

.stm-action-gitlab-link:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.stm-access-request-modal .stm-access-modal-content {
    max-width: 920px;
    width: 92%;
    max-height: 90vh;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.stm-modal-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.stm-modal-title {
    margin: 0 0 4px 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

.stm-modal-issue-link {
    font-size: var(--font-size-sm);
    color: var(--color-accent-blue);
    text-decoration: none;
}

.stm-modal-issue-link:hover { text-decoration: underline; }

.stm-modal-body {
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.stm-modal-section {
    margin-bottom: var(--spacing-xl);
}

.stm-modal-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: 6px;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-accent-blue);
}

.stm-modal-section h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    color: var(--color-text-secondary);
}

.stm-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.stm-modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stm-modal-field-wide { grid-column: 1 / -1; }

.stm-modal-field label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stm-modal-field span {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.stm-modal-empty {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.stm-modal-justification {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-left: 3px solid var(--color-accent-blue);
    border-radius: var(--radius-sm);
    line-height: 1.5;
    white-space: pre-wrap;
}

.stm-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}

.stm-modal-table th {
    text-align: left;
    background: var(--color-bg-secondary);
    padding: 8px 10px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.stm-modal-table td {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.stm-modal-il-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stm-modal-il-chip {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.stm-modal-pdf-link {
    display: inline-block;
    padding: 8px 14px;
    background: var(--color-accent-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
}

.stm-modal-pdf-link:hover { opacity: 0.9; }

.stm-modal-response {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.stm-modal-response label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.stm-modal-response textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-md);
    resize: vertical;
    min-height: 80px;
}

.stm-modal-response-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-sm);
}

.stm-modal-footer {
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.stm-modal-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stm-modal-btn-approve { background: #4caf50; color: #fff; }
.stm-modal-btn-approve:hover { background: #43a047; }
.stm-modal-btn-deny { background: #f44336; color: #fff; }
.stm-modal-btn-deny:hover { background: #e53935; }
.stm-modal-btn-modify { background: #ff9800; color: #fff; }
.stm-modal-btn-modify:hover { background: #fb8c00; }
.stm-modal-btn-cancel { background: var(--color-bg-secondary); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.stm-modal-btn-cancel:hover { background: var(--color-bg-hover); }
.stm-modal-btn-submit { background: var(--color-accent-blue); color: #fff; }
.stm-modal-btn-submit:hover { opacity: 0.9; }

.stm-modal-status {
    margin-top: var(--spacing-md);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    display: none;
}

.stm-modal-status:not(:empty) { display: block; }
.stm-modal-status-pending { background: rgba(74, 144, 226, 0.1); color: var(--color-accent-blue); }
.stm-modal-status-success { background: rgba(76, 175, 80, 0.12); color: #2e7d32; }
.stm-modal-status-error { background: rgba(244, 67, 54, 0.12); color: #c62828; }

@media (max-width: 720px) {
    .stm-modal-grid { grid-template-columns: 1fr; }
    .stm-access-request-modal .stm-access-modal-content { width: 96%; max-height: 95vh; }
}

/* ==========================================================================
   #2581 — Inventory: Items | STM Coverage toggle + coverage view
   Uses the existing design tokens so it inherits light/dark automatically.
   ========================================================================== */
.inv-view-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    overflow: hidden;
    margin-left: auto;
    margin-right: 0.75rem;
}
.inv-view-btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.inv-view-btn + .inv-view-btn { border-left: 1px solid var(--color-border); }
.inv-view-btn:hover { background: var(--color-border); }
.inv-view-btn.active {
    background: var(--color-accent, #0071e3);
    color: #fff;
    font-weight: 600;
}

.stm-coverage { padding: 0.5rem 0 1.5rem; }
.stm-coverage-header { margin-bottom: 1rem; }
.stm-coverage-summary { font-size: 0.95rem; margin: 0 0 0.35rem; }
.stm-coverage-note {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0.6rem;
}
.stm-coverage-panel {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--color-surface, transparent);
}
.stm-coverage-panel h4 {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stm-coverage-count {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text-secondary);
}
.stm-coverage-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stm-coverage-table th,
.stm-coverage-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.stm-coverage-table th { color: var(--color-text-secondary); font-weight: 600; }
.stm-coverage-table code {
    font-size: 0.78rem;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--color-border);
}
.stm-coverage-num { text-align: right; font-variant-numeric: tabular-nums; }
.stm-coverage-list { margin: 0.3rem 0 0; padding-left: 1.15rem; font-size: 0.85rem; }
.stm-coverage-list li { margin-bottom: 0.25rem; }
.stm-coverage-dim { color: var(--color-text-secondary); font-size: 0.78rem; }
.stm-coverage-empty {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0.3rem 0 0;
    font-style: italic;
}

/* ===== #2606 DSP-vs-Bedrock decision panel (Execute HPC Job, step 4) =====
   Additive: new classes only, scoped under .hpc-decide. Uses the existing design
   tokens so it inherits light/dark with the rest of the dashboard. */
.hpc-decide {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    padding: var(--spacing-md);
}
.hpc-decide-head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); }
.hpc-decide-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.hpc-decide-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--color-accent-blue); font-size: 0.8rem; text-decoration: underline;
}
.hpc-decide-form { margin-top: var(--spacing-sm); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.hpc-decide-q > label { display: block; font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: 4px; }
.hpc-decide-row { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.hpc-decide-row > * { flex: 1 1 140px; min-width: 0; }
.hpc-decide-btn {
    align-self: flex-start; padding: 6px 14px; cursor: pointer;
    border: 1px solid var(--color-accent-blue); border-radius: var(--radius-md);
    background: var(--color-accent-blue); color: #fff; font-size: 0.82rem; font-weight: 600;
}
.hpc-decide-result:empty { display: none; }
.hpc-decide-loading, .hpc-decide-warn {
    margin-top: var(--spacing-sm); font-size: 0.82rem; color: var(--color-text-secondary);
}
.hpc-decide-warn { color: #b45309; }
.hpc-decide-card {
    margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border); border-left-width: 4px;
    border-radius: var(--radius-md); background: var(--color-bg-card);
}
.hpc-decide-card.is-dsp  { border-left-color: #0f766e; }
.hpc-decide-card.is-bed  { border-left-color: #7c3aed; }
.hpc-decide-card.is-even { border-left-color: #64748b; }
.hpc-decide-card.is-unk  { border-left-color: #b45309; }
.hpc-decide-verdict { font-size: 0.95rem; color: var(--color-text-primary); }
.hpc-decide-conf {
    float: right; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 10px; background: var(--color-bg-secondary);
    color: var(--color-text-secondary); border: 1px solid var(--color-border);
}
.hpc-decide-conf-high { color: #0f766e; border-color: #0f766e; }
.hpc-decide-conf-low  { color: #b45309; border-color: #b45309; }
.hpc-decide-costs {
    display: flex; gap: var(--spacing-lg); flex-wrap: wrap;
    margin-top: 6px; font-size: 0.85rem; color: var(--color-text-secondary);
}
.hpc-decide-costs strong { color: var(--color-text-primary); }
.hpc-decide-costs em { font-style: normal; font-size: 0.75rem; color: var(--color-text-tertiary); }
.hpc-decide-egress {
    margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-md);
    background: #b4530915; color: #b45309; font-size: 0.82rem; font-weight: 600;
}
.hpc-decide-why { margin: 8px 0 6px; padding-left: 18px; }
.hpc-decide-why li { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 3px; }
.hpc-decide-unk { color: #b45309; font-style: italic; }
.hpc-decide-detail { margin-top: var(--spacing-sm); }
.hpc-decide-detail h4 {
    margin: var(--spacing-md) 0 4px; font-size: 0.82rem; color: var(--color-text-primary);
}
.hpc-decide-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.hpc-decide-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.hpc-decide-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hpc-decide-basis { color: var(--color-text-tertiary); font-size: 0.72rem; }
.hpc-decide-total td { font-weight: 700; color: var(--color-text-primary); border-bottom: none; }
.hpc-decide-note { font-size: 0.76rem; color: var(--color-text-secondary); margin: 4px 0; }
.hpc-decide-svg { width: 100%; max-width: 420px; height: auto; }
.hpc-decide-svg-label { font-size: 10px; fill: var(--color-text-secondary); }
.hpc-decide-svg-val   { font-size: 10px; fill: var(--color-text-secondary); }
.hpc-decide-svg-bar   { fill: #7c3aed; }
.hpc-decide-svg-bar.is-dsp { fill: #0f766e; }