/* J4C Portal - Modern UI/UX Styles */

:root {
    /* Colors */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #22d3ee;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: #475569;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Border */
    --border-color: #334155;
    --border-light: #475569;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);

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

    /* Spacing */
    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;
    --header-height: 64px;
    --topnav-height: 60px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
}

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

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* =============================================================================
   TOP NAVIGATION BAR
   ============================================================================= */

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.topnav-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.topnav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.topnav-logo i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.topnav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topnav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
}

.topnav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.topnav-item.active {
    background: var(--primary);
    color: white;
}

.topnav-item i:first-child {
    font-size: 1rem;
}

.topnav-item .fa-chevron-down {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    transition: transform var(--transition-fast);
}

/* Dropdown Menu */
.topnav-dropdown {
    position: relative;
}

.topnav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: 1001;
}

.topnav-dropdown:hover .topnav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.topnav-dropdown:hover .fa-chevron-down {
    transform: rotate(180deg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

/* Right Side */
.topnav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topnav-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.topnav-search:focus-within {
    border-color: var(--primary);
    background: var(--bg-primary);
}

.topnav-search i {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.topnav-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 180px;
}

.topnav-search input::placeholder {
    color: var(--text-muted);
}

.topnav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.topnav-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--success);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

.status-dot.offline {
    background: var(--danger);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.topnav-user {
    display: flex;
    align-items: center;
    position: relative;
}

/* Google Login Button */
.login-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #4285f4, #34a853);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.login-btn:hover {
    background: linear-gradient(135deg, #3367d6, #2d8e47);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.login-btn i {
    font-size: 1rem;
}

/* User Menu (when logged in) */
.user-menu {
    position: relative;
}

.user-avatar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-btn span {
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar-btn i {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.user-avatar-btn:hover i {
    color: var(--primary);
}

/* User Dropdown */
.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.user-menu:hover .user-dropdown,
.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.user-info .user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-info .user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.user-info .user-role {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

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

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

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

.user-dropdown-item i {
    width: 1rem;
    text-align: center;
}

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

.user-dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Auth Error Toast */
.auth-error-toast {
    position: fixed;
    top: calc(var(--topnav-height) + 1rem);
    right: 1rem;
    padding: 1rem 1.5rem;
    background: var(--danger);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

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

/* Domain restriction notice */
.domain-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.domain-notice i {
    color: var(--primary);
}

/* Mobile Menu Toggle */
.topnav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.25rem;
}

/* Main Content with Top Nav Layout */
.main-content.topnav-layout {
    margin-left: 0;
    margin-top: var(--topnav-height);
    padding: 1.5rem;
    min-height: calc(100vh - var(--topnav-height));
}

/* Hide sidebar when using topnav */
body:has(.topnav) .sidebar {
    display: none;
}

body:has(.topnav) .main-content {
    margin-left: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .topnav-search {
        width: 150px;
    }

    .topnav-search input {
        width: 100px;
    }
}

@media (max-width: 992px) {
    .topnav-links {
        display: none;
    }

    .topnav-mobile-toggle {
        display: flex;
    }

    .topnav-search {
        display: none;
    }

    .topnav-status span {
        display: none;
    }
}

@media (max-width: 576px) {
    .topnav {
        padding: 0 1rem;
    }

    .topnav-right {
        gap: 0.5rem;
    }
}

/* Sidebar - Hidden by default with topnav */
.sidebar {
    display: none;
}
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--transition-normal);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sidebar.collapsed .logo-text {
    display: none;
}

.sidebar-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

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

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 1.5rem;
}

.nav-section-title {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar.collapsed .nav-section-title {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    position: relative;
}

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

.nav-item.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-light);
    border-left-color: var(--primary);
}

.nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.nav-badge {
    margin-left: auto;
    background: var(--primary);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-badge {
    display: none;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.server-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-indicator.online {
    background: var(--success);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.status-info {
    display: flex;
    flex-direction: column;
}

.status-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.status-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}

.version-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.sidebar.collapsed .sidebar-footer {
    padding: 1rem 0.5rem;
    text-align: center;
}

.sidebar.collapsed .status-info,
.sidebar.collapsed .version-info {
    display: none;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-normal);
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed);
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb i {
    font-size: 0.7rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    width: 280px;
}

.search-box i {
    color: var(--text-muted);
}

.search-box input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.header-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.user-menu {
    margin-left: 0.5rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}

/* Page Container */
.page-container {
    padding: 1.5rem;
}

.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

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

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-card.gradient-purple::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.stat-card.gradient-cyan::before { background: linear-gradient(90deg, var(--secondary), #67e8f9); }
.stat-card.gradient-green::before { background: linear-gradient(90deg, var(--success), #34d399); }
.stat-card.gradient-orange::before { background: linear-gradient(90deg, var(--warning), #fbbf24); }

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

.gradient-purple .stat-icon { background: rgba(99, 102, 241, 0.15); color: var(--primary-light); }
.gradient-cyan .stat-icon { background: rgba(34, 211, 238, 0.15); color: var(--secondary); }
.gradient-green .stat-icon { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.gradient-orange .stat-icon { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.stat-content {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

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

.stat-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.stat-trend.up {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

/* Cards */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.card-title i {
    color: var(--primary-light);
}

.card-body {
    padding: 1.25rem;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

/* Charts */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.chart-card .card-body {
    height: 300px;
}

.chart-card.full-width {
    grid-column: 1 / -1;
}

.chart-filter {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

/* Info Row */
.info-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Health Grid */
.health-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.health-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.health-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.health-icon.success { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.health-icon.info { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.health-icon.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.health-info {
    display: flex;
    flex-direction: column;
}

.health-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.health-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Uptime Bar */
.uptime-bar-container {
    margin-top: 1rem;
}

.uptime-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.uptime-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.uptime-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--secondary));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
}

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

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

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

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

.activity-title {
    font-weight: 500;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Quick Actions */
.quick-actions {
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.action-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.action-icon.gradient-purple { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.action-icon.gradient-cyan { background: linear-gradient(135deg, var(--secondary), #67e8f9); }
.action-icon.gradient-green { background: linear-gradient(135deg, var(--success), #34d399); }
.action-icon.gradient-orange { background: linear-gradient(135deg, var(--warning), #fbbf24); }

.action-label {
    font-weight: 500;
    color: var(--text-primary);
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--text-secondary);
}

/* Models Page */
.models-filter {
    margin-bottom: 1.5rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-tab {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-tab:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.model-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.model-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.model-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.model-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.model-card-info {
    flex: 1;
}

.model-name {
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.model-category {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

.model-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Reasoning Page */
.reasoning-content {
    display: grid;
    gap: 1.5rem;
}

.strategies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.strategy-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
    transition: all var(--transition-fast);
}

.strategy-card:hover {
    transform: translateY(-2px);
    background: var(--bg-hover);
}

.strategy-icon {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.25rem;
    color: var(--primary-light);
}

.strategy-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.strategy-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.types-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.type-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.type-badge {
    width: 24px;
    height: 24px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

/* Analytics Page */
.analytics-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analytics-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}

.analytics-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-light);
}

.analytics-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.endpoints-table {
    width: 100%;
}

.endpoint-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.endpoint-row:last-child {
    border-bottom: none;
}

.endpoint-path {
    font-family: monospace;
    color: var(--secondary);
}

.endpoint-count {
    color: var(--text-secondary);
}

/* Reports Page */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.report-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}

.report-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.report-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.report-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

/* API Explorer */
.api-endpoints {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.endpoint-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.endpoint-card:hover {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.endpoint-card:hover .fa-play {
    color: var(--primary-light);
}

.endpoint-method {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.endpoint-method.get {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.endpoint-method.post {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.endpoint-info {
    flex: 1;
}

.endpoint-info .endpoint-path {
    font-family: monospace;
    font-weight: 500;
    display: block;
    margin-bottom: 0.125rem;
}

.endpoint-info .endpoint-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.endpoint-card .fa-play {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

#apiResponse pre,
#reportData {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

.response-meta {
    display: flex;
    gap: 1rem;
}

.response-status {
    padding: 0.25rem 0.75rem;
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

.response-time {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Documentation Page */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.doc-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.doc-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.doc-icon {
    width: 40px;
    height: 40px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
    margin-bottom: 0.75rem;
}

.doc-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.doc-path {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.markdown-body {
    line-height: 1.7;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-body p {
    margin-bottom: 1rem;
}

.markdown-body code {
    background: var(--bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.markdown-body pre {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    background: var(--primary-dark);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

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

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

/* Toast */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1000;
}

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

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

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--info); }

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1.5rem;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

/* Documentation Page Styles */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

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

.doc-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}

.doc-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.doc-info p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.doc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.doc-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 1rem;
    color: var(--text-secondary);
}

.doc-meta i {
    color: var(--text-muted);
}

/* Gradient colors for doc icons */
.gradient-pink {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
}

/* Quick Reference Styles */
#quickRefContent {
    margin-top: 2rem;
}

#quickRefBody {
    font-size: 0.9rem;
}

#quickRefBody h4 {
    color: var(--secondary);
    margin: 1.5rem 0 0.75rem;
    font-size: 1rem;
}

#quickRefBody h4:first-child {
    margin-top: 0;
}

#quickRefBody table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

#quickRefBody th,
#quickRefBody td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#quickRefBody th {
    background: var(--bg-tertiary);
    color: var(--secondary);
    font-weight: 500;
}

#quickRefBody tr:hover {
    background: var(--bg-tertiary);
}

#quickRefBody code {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', monospace;
    font-size: 0.8rem;
    color: var(--secondary);
}

#quickRefBody pre {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 1rem 0;
}

#quickRefBody pre code {
    background: none;
    padding: 0;
}

#quickRefBody ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
    color: var(--text-secondary);
}

#quickRefBody li {
    margin: 0.25rem 0;
}

.model-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.badge-analytical { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.badge-creative { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.badge-decision { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.badge-risk { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
.badge-systems { background: rgba(34, 211, 238, 0.2); color: #22d3ee; }
.badge-human { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.badge-strategic { background: rgba(236, 72, 153, 0.2); color: #f472b6; }

/* Responsive */
@media (max-width: 1200px) {
    .charts-row {
        grid-template-columns: 1fr;
    }

    .info-row {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

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

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

    .mobile-menu-btn {
        display: flex;
    }

    .search-box {
        display: none;
    }

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

    .analytics-stats {
        grid-template-columns: 1fr;
    }

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

/* =============================================================================
   GNN RECOMMENDATIONS PAGE STYLES
   ============================================================================= */

/* GNN Stats Grid */
.gnn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gnn-stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
}

.gnn-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.gnn-stat-content {
    display: flex;
    flex-direction: column;
}

.gnn-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

/* GNN Tool Card */
.gnn-tool-card {
    margin-bottom: 2rem;
}

.gnn-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-row .full-width {
    grid-column: span 2;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-control {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* GNN Engine Badge */
.gnn-engine-badge {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* GNN Recommendations Results */
.gnn-recommendation-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.gnn-recommendation-card:hover {
    border-color: var(--primary);
}

.rec-rank {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-content {
    flex: 1;
}

.rec-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.rec-model {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rec-category {
    background: var(--bg-hover);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.rec-score {
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success);
}

.rec-explanation {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.rec-synergies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.synergy-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.synergy-tag {
    background: var(--bg-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--primary-light);
    border: 1px solid var(--primary);
}

.synergy-tag.used {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* GNN Context Info */
.gnn-context-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gnn-context-info span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gnn-context-info i {
    color: var(--primary);
}

/* GNN Combinations */
.combo-title {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.gnn-combo-card {
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.combo-rank {
    font-weight: 600;
    color: var(--text-primary);
}

.combo-score {
    background: var(--success);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.combo-models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.combo-model {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.combo-model-name {
    font-weight: 600;
    color: var(--text-primary);
}

.combo-model-category {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.combo-plus {
    color: var(--primary);
    font-size: 1rem;
}

/* Chain Grid */
.chain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.chain-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.chain-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.chain-icon {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.75rem;
}

.chain-card h4 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.chain-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Chain Results */
.chain-explanation {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary);
}

.chain-explanation i {
    color: var(--warning);
    font-size: 1.25rem;
}

.chain-explanation p {
    color: var(--text-secondary);
    font-style: italic;
}

.chain-models-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chain-model-step {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.step-number {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-content {
    flex: 1;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.step-model {
    font-weight: 600;
    color: var(--text-primary);
}

.step-category {
    background: var(--bg-hover);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.step-score {
    margin-left: auto;
    color: var(--success);
    font-weight: 600;
}

.step-explanation {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* GNN Graph Categories */
.graph-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

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

.graph-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: white;
    font-weight: 600;
}

.graph-category-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.graph-category-models {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.graph-model-tag {
    background: var(--bg-secondary);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* API Explorer Enhancements */
.endpoint-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    border-top: 1px solid var(--border-color);
}

/* Nav Badge New */
.nav-badge.new {
    background: linear-gradient(135deg, #10b981, #22d3ee);
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

/* Additional Gradient Colors */
.gradient-pink {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
}

.gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

/* Responsive GNN Page */
@media (max-width: 1200px) {
    .gnn-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-row .full-width {
        grid-column: span 1;
    }

    .form-actions {
        flex-direction: column;
    }

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

    .rec-header {
        flex-wrap: wrap;
    }

    .rec-score {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
}

/* =============================================================================
   SPARC PROJECT MANAGEMENT STYLES
   ============================================================================= */

/* SPARC Stats */
.sparc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sparc-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    transition: var(--transition-normal);
}

.sparc-stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.sparc-stat-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sparc-stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* SPARC Board */
.sparc-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    min-height: 500px;
}

.sparc-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sparc-column-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sparc-column-title {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sparc-column-count {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* SPARC Phase Colors */
.sparc-column.specification .sparc-column-header {
    border-left: 3px solid #3b82f6;
}
.sparc-column.pseudocode .sparc-column-header {
    border-left: 3px solid #8b5cf6;
}
.sparc-column.architecture .sparc-column-header {
    border-left: 3px solid #ec4899;
}
.sparc-column.refinement .sparc-column-header {
    border-left: 3px solid #f59e0b;
}
.sparc-column.completion .sparc-column-header {
    border-left: 3px solid #10b981;
}

.sparc-column-content {
    flex: 1;
    padding: 0.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* SPARC Task Cards */
.sparc-task {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sparc-task:hover {
    border-color: var(--primary);
    transform: translateX(2px);
}

.sparc-task-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.sparc-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sparc-task-points {
    background: var(--primary);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.sparc-task-status {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sparc-task-status.done {
    color: var(--success);
}

.sparc-task-status.in_progress {
    color: var(--warning);
}

/* SPARC Gantt Chart */
.gantt-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    overflow-x: auto;
}

.gantt-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.gantt-task-column {
    min-width: 200px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gantt-timeline {
    display: flex;
    flex: 1;
    gap: 0;
}

.gantt-day {
    min-width: 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.gantt-day.today {
    color: var(--primary);
    font-weight: 600;
}

.gantt-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.gantt-task-name {
    min-width: 200px;
    font-size: 0.875rem;
    padding-right: 1rem;
}

.gantt-bar-container {
    display: flex;
    flex: 1;
    position: relative;
    height: 24px;
}

.gantt-bar {
    position: absolute;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    color: white;
    font-weight: 500;
}

.gantt-bar.completed {
    background: linear-gradient(135deg, var(--success), #34d399);
}

.gantt-bar.in-progress {
    background: linear-gradient(135deg, var(--warning), #fbbf24);
}

.gantt-milestone {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--danger);
    transform: rotate(45deg);
    top: 6px;
}

/* SPARC Spatial View */
.spatial-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    min-height: 500px;
    position: relative;
}

.spatial-node {
    position: absolute;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-width: 150px;
    cursor: pointer;
    transition: var(--transition-normal);
    z-index: 10;
}

.spatial-node:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    z-index: 20;
}

.spatial-node-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.spatial-node-phase {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.125rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 9999px;
    display: inline-block;
}

.spatial-edge {
    position: absolute;
    background: var(--border-color);
    height: 2px;
    transform-origin: left center;
    z-index: 5;
}

.spatial-edge.active {
    background: var(--primary);
    height: 3px;
}

/* SPARC Charts */
.sparc-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.sparc-chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.sparc-chart-title {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.sparc-chart-container {
    height: 250px;
}

/* =============================================================================
   SPRINT PLANNING STYLES
   ============================================================================= */

/* Sprint Stats */
.sprint-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sprint-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
}

.sprint-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

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

/* Sprint Kanban Board */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 500px;
}

.kanban-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kanban-column-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-column.todo .kanban-column-header {
    border-left: 3px solid var(--text-muted);
}
.kanban-column.in-progress .kanban-column-header {
    border-left: 3px solid var(--info);
}
.kanban-column.review .kanban-column-header {
    border-left: 3px solid var(--warning);
}
.kanban-column.done .kanban-column-header {
    border-left: 3px solid var(--success);
}

.kanban-column-title {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.kanban-column-points {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.kanban-column-content {
    flex: 1;
    padding: 0.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Kanban Cards */
.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    cursor: grab;
    transition: var(--transition-fast);
}

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

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kanban-card-points {
    background: var(--primary);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.kanban-card-assignee {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kanban-card-assignee i {
    font-size: 0.625rem;
}

/* Burndown Chart */
.burndown-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.burndown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.burndown-title {
    font-weight: 600;
    font-size: 1.125rem;
}

.burndown-legend {
    display: flex;
    gap: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.ideal {
    background: var(--text-muted);
}

.legend-dot.actual {
    background: var(--primary);
}

.burndown-chart {
    height: 300px;
}

/* Velocity Chart */
.velocity-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.velocity-bars {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.velocity-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.velocity-bars-container {
    display: flex;
    gap: 0.25rem;
    align-items: flex-end;
    height: 200px;
}

.velocity-bar {
    width: 30px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: var(--transition-normal);
}

.velocity-bar.planned {
    background: var(--bg-tertiary);
}

.velocity-bar.completed {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.velocity-bar:hover {
    opacity: 0.8;
}

.velocity-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Backlog View */
.backlog-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.backlog-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backlog-title {
    font-weight: 600;
}

.backlog-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.backlog-list {
    max-height: 500px;
    overflow-y: auto;
}

.backlog-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.backlog-item:hover {
    background: var(--bg-tertiary);
}

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

.backlog-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.backlog-item-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.backlog-item-priority.high {
    background: var(--danger);
}

.backlog-item-priority.medium {
    background: var(--warning);
}

.backlog-item-priority.low {
    background: var(--success);
}

.backlog-item-title {
    font-size: 0.875rem;
}

.backlog-item-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.backlog-item-points {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Sprint History */
.sprint-history {
    margin-top: 2rem;
}

.sprint-history-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.sprint-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sprint-history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sprint-history-name {
    font-weight: 500;
}

.sprint-history-dates {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprint-history-stats {
    display: flex;
    gap: 1.5rem;
}

.sprint-history-stat {
    text-align: center;
}

.sprint-history-stat-value {
    font-weight: 600;
    color: var(--primary);
}

.sprint-history-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Project List */
.project-list {
    margin-top: 2rem;
}

.project-list-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.project-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: var(--transition-normal);
}

.project-card:hover {
    border-color: var(--primary);
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.project-card-title {
    font-weight: 600;
    font-size: 1rem;
}

.project-card-phase {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    font-weight: 500;
}

.project-card-phase.specification {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}
.project-card-phase.pseudocode {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}
.project-card-phase.architecture {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}
.project-card-phase.refinement {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}
.project-card-phase.completion {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.project-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.project-card-progress {
    margin-bottom: 0.75rem;
}

.project-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.project-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.project-card-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.project-card-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Responsive SPARC/Sprint */
@media (max-width: 1400px) {
    .sparc-board {
        grid-template-columns: repeat(3, 1fr);
    }

    .sparc-column:nth-child(4),
    .sparc-column:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 1200px) {
    .sparc-stats,
    .sprint-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .sparc-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sparc-stats,
    .sprint-stats {
        grid-template-columns: 1fr;
    }

    .sparc-board,
    .kanban-board {
        grid-template-columns: 1fr;
    }

    .gantt-container {
        overflow-x: scroll;
    }

    .velocity-bars {
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .project-card-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .backlog-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .backlog-item-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* =============================================================================
   TEAMS MANAGEMENT PAGE
   ============================================================================= */

.team-org-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.org-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.org-logo {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.org-details h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.org-details p {
    opacity: 0.9;
}

.org-stats {
    display: flex;
    gap: 2rem;
}

.org-stat {
    text-align: center;
}

.org-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.org-stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.team-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.team-filters {
    display: flex;
    gap: 1rem;
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.team-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-normal);
    cursor: pointer;
}

.team-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.team-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.team-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.team-card-title {
    font-weight: 600;
    font-size: 1.125rem;
}

.team-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.team-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.team-stat {
    text-align: center;
}

.team-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.team-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.team-lead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.team-lead-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
}

.team-sprint-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.team-sprint-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* =============================================================================
   DEVELOPERS MANAGEMENT PAGE
   ============================================================================= */

.dev-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dev-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dev-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.dev-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
}

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

.dev-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dev-filters {
    display: flex;
    gap: 1rem;
}

.filter-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    width: 200px;
}

.filter-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
}

.developers-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.developers-table {
    width: 100%;
    border-collapse: collapse;
}

.developers-table th,
.developers-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.developers-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.developers-table tr:hover {
    background: var(--bg-tertiary);
}

.dev-cell-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dev-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.dev-avatar.agent {
    background: var(--secondary);
}

.dev-name {
    font-weight: 600;
}

.dev-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dev-role-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
}

.dev-role-badge.admin {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.dev-role-badge.team_lead {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.dev-role-badge.developer {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dev-role-badge.agent {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dev-role-badge.viewer {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.dev-teams-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dev-team-tag {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.dev-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 200px;
}

.dev-skill-tag {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.dev-workload {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.workload-bar {
    width: 80px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 9999px;
    overflow: hidden;
}

.workload-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.workload-fill.low { background: #10b981; }
.workload-fill.medium { background: #f59e0b; }
.workload-fill.high { background: #ef4444; }

.workload-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dev-stats-cell {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dev-stats-cell span {
    display: block;
}

.dev-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active { background: #10b981; }
.status-dot.away { background: #f59e0b; }
.status-dot.offline { background: #6b7280; }

.dev-actions {
    display: flex;
    gap: 0.5rem;
}

.dev-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.dev-action-btn:hover {
    background: var(--primary);
    color: white;
}

/* Top Contributors */
.top-contributors-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.top-contributors-section h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--accent-yellow);
}

.contributors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.contributor-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contributor-rank {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-yellow);
    width: 30px;
}

.contributor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.contributor-info {
    flex: 1;
}

.contributor-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.contributor-stats {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Modal Styles for Forms */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.checkbox-group label:hover {
    background: var(--primary);
    color: white;
}

.checkbox-group input[type="checkbox"] {
    display: none;
}

.checkbox-group input[type="checkbox"]:checked + label,
.checkbox-group label:has(input:checked) {
    background: var(--primary);
    color: white;
}

/* =============================================================================
   PROJECT ASSETS PAGE
============================================================================= */

/* Project Selector */
.assets-project-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.selector-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.selector-header label {
    font-weight: 600;
    color: var(--text-secondary);
}

.selector-header select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    min-width: 300px;
    cursor: pointer;
}

.selector-header select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Assets Summary Cards */
.assets-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.asset-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-fast);
}

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

.asset-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.asset-summary-info {
    display: flex;
    flex-direction: column;
}

.asset-summary-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.asset-summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Assets Content */
.assets-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Asset Section */
.asset-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.asset-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.asset-section-header:hover {
    background: rgba(102, 126, 234, 0.1);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.section-title i {
    color: var(--primary);
    font-size: 1.1rem;
}

.section-count {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.section-toggle {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.asset-section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.asset-section.collapsed .asset-section-content {
    display: none;
}

.asset-section-content {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Assets List */
.assets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Asset Card */
.asset-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.asset-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.asset-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.asset-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.asset-card-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    font-weight: 600;
}

.asset-card-status.active {
    background: rgba(72, 187, 120, 0.2);
    color: #48bb78;
}

.asset-card-status.inactive {
    background: rgba(160, 174, 192, 0.2);
    color: #a0aec0;
}

.asset-card-status.deprecated {
    background: rgba(245, 101, 101, 0.2);
    color: #f56565;
}

.asset-card-status.development {
    background: rgba(237, 137, 54, 0.2);
    color: #ed8936;
}

.asset-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.asset-card-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asset-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.asset-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.asset-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.asset-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
}

/* Empty State */
.assets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon i {
    font-size: 2rem;
    color: var(--text-secondary);
}

.assets-empty h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.assets-empty p {
    color: var(--text-secondary);
    max-width: 300px;
}

/* Asset Details Modal */
.asset-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.asset-detail-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.asset-detail-title h4 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.asset-detail-type {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.asset-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.asset-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.asset-detail-item label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asset-detail-item span {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.asset-detail-item a {
    color: var(--primary);
    text-decoration: none;
}

.asset-detail-item a:hover {
    text-decoration: underline;
}

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

@media (max-width: 768px) {
    .assets-project-selector {
        flex-direction: column;
        gap: 1rem;
    }

    .selector-header {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .selector-header select {
        min-width: 100%;
    }

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

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

    .asset-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .team-org-banner {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .org-info {
        flex-direction: column;
    }

    .org-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

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

    .dev-filters {
        flex-wrap: wrap;
    }

    .developers-table-container {
        overflow-x: auto;
    }

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

/* =============================================================================
   INFRASTRUCTURE PAGE STYLES
   ============================================================================= */

/* Infrastructure Summary Grid */
.infra-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.infra-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.infra-summary-card:hover {
    border-color: var(--accent-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
}

.infra-summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.infra-summary-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.infra-summary-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.infra-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.infra-summary-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.infra-summary-status.online {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.infra-summary-status.running {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.infra-summary-status.active {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.infra-summary-status.healthy {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

/* Infrastructure Actions */
.infra-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.infra-filter select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.infra-filter select:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.infra-last-updated {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Infrastructure Sections */
.infra-section {
    margin-bottom: 2rem;
}

.infra-section .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.infra-section .card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.infra-section .card-title i {
    color: var(--accent-purple);
}

.section-badge {
    background: var(--accent-purple);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Infrastructure Table */
.infra-table-container {
    overflow-x: auto;
}

.infra-table {
    width: 100%;
    border-collapse: collapse;
}

.infra-table th,
.infra-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.infra-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
}

.infra-table tbody tr {
    transition: background 0.2s ease;
}

.infra-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Status Indicators */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.offline {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.status-dot.warning {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.status-dot.unknown {
    background: #6b7280;
}

/* Resource Usage Bars */
.resource-bar {
    width: 80px;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.resource-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.resource-bar-fill.low {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.resource-bar-fill.medium {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.resource-bar-fill.high {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.resource-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Environment Tags */
.env-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.env-tag.local {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.env-tag.remote {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.env-tag.production {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.env-tag.staging {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.env-tag.development {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

/* Server Type Tags */
.server-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.server-type-tag i {
    font-size: 0.7rem;
}

/* Action Buttons */
.infra-actions-cell {
    display: flex;
    gap: 0.5rem;
}

.infra-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.infra-action-btn:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.1);
}

.infra-action-btn.danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.service-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
}

.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.service-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-name i {
    color: var(--accent-cyan);
    font-size: 1.25rem;
}

.service-name h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.service-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.service-status.running {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.service-status.stopped {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.service-status.error {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.service-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.service-detail {
    display: flex;
    justify-content: space-between;
}

.service-detail-label {
    color: var(--text-muted);
}

.service-detail-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Containers Grid */
.containers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.container-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.container-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}

.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.container-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.container-name i {
    color: #2496ed;
    font-size: 1.5rem;
}

.container-name h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.container-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.container-status.running {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.container-status.exited {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.container-status.created {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.container-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.container-detail {
    display: flex;
    flex-direction: column;
}

.container-detail-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.container-detail-value {
    color: var(--text-primary);
    font-family: 'Monaco', 'Consolas', monospace;
}

/* Databases Grid */
.databases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.database-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.database-card:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15);
}

.database-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.database-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.database-name i {
    color: var(--accent-orange);
    font-size: 1.25rem;
}

.database-name h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.database-type {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.database-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.database-stat {
    text-align: center;
}

.database-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.database-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

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

.infra-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.infra-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.infra-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.infra-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.infra-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Responsive Infrastructure */
@media (max-width: 1200px) {
    .infra-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .infra-summary-grid {
        grid-template-columns: 1fr;
    }

    .infra-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .infra-last-updated {
        margin-left: 0;
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .containers-grid,
    .databases-grid {
        grid-template-columns: 1fr;
    }

    .container-details {
        grid-template-columns: 1fr;
    }

    .database-stats {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   API METRICS & ALERTS
   ============================================================================= */

.api-metrics-section {
    margin-top: 1.5rem;
}

.metrics-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
    color: white;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value.good { color: var(--success); }
.metric-value.moderate { color: var(--warning); }
.metric-value.warning { color: var(--warning); }
.metric-value.danger { color: var(--error); }

/* Alerts Container */
.alerts-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.no-alerts-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--success);
    font-size: 0.95rem;
}

.no-alerts-message i {
    font-size: 1.25rem;
}

.alert-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-left: 4px solid var(--warning);
}

.alert-card.alert-latency { border-left-color: var(--warning); }
.alert-card.alert-errorRate { border-left-color: var(--error); }
.alert-card.alert-memory { border-left-color: #f97316; }
.alert-card.alert-cpu { border-left-color: #dc2626; }

.alert-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--warning-rgb), 0.1);
    border-radius: 8px;
    color: var(--warning);
}

.alert-card.alert-errorRate .alert-icon {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
}

.alert-content {
    flex: 1;
}

.alert-message {
    font-weight: 500;
    color: var(--text-primary);
}

.alert-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.alert-endpoint {
    font-family: monospace;
    background: var(--background);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.alert-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.alert-dismiss:hover {
    background: var(--background);
    color: var(--error);
}

/* Slow Endpoints Table */
.instr-table td.warning { color: var(--warning); font-weight: 500; }
.instr-table td.danger { color: var(--error); font-weight: 500; }

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-400,
.status-badge.status-401,
.status-badge.status-403,
.status-badge.status-404 { background: rgba(251, 191, 36, 0.2); color: var(--warning); }

.status-badge.status-500,
.status-badge.status-502,
.status-badge.status-503 { background: rgba(239, 68, 68, 0.2); color: var(--error); }

.error-row {
    background: rgba(239, 68, 68, 0.05);
}

/* Responsive API Metrics */
@media (max-width: 1200px) {
    .metrics-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metrics-overview-grid {
        grid-template-columns: 1fr;
    }

    .alert-card {
        flex-wrap: wrap;
    }

    .alert-content {
        width: 100%;
    }
}

/* =============================================================================
   DOCUMENT COMPLIANCE UI
   ============================================================================= */

.compliance-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.compliance-score-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex: 1;
}

.score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.score-circle.score-good { background: linear-gradient(135deg, #10b981, #059669); }
.score-circle.score-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.score-circle.score-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }

.score-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.score-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

.score-details h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
}

.score-breakdown {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.score-item {
    display: flex;
    flex-direction: column;
}

.score-item-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.score-item-value {
    font-size: 1rem;
    font-weight: 600;
}

.compliance-status {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compliance-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.compliance-actions select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
}

/* Compliance Alerts */
.compliance-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.compliance-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.compliance-alert.alert-missing {
    border-left: 4px solid var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.compliance-alert.alert-warning {
    border-left: 4px solid var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.compliance-alert.alert-critical {
    border-left: 4px solid #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.compliance-alert .alert-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.25rem;
}

.alert-missing .alert-icon { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.alert-warning .alert-icon { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
.alert-critical .alert-icon { color: #dc2626; background: rgba(220, 38, 38, 0.15); }

.compliance-alert .alert-content {
    flex: 1;
}

.compliance-alert .alert-content strong {
    display: block;
    margin-bottom: 0.25rem;
}

.compliance-alert .alert-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Documents Grid */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.document-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.document-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-card.status-compliant { border-left: 4px solid var(--success); }
.document-card.status-present { border-left: 4px solid var(--info); }
.document-card.status-missing { border-left: 4px solid var(--error); opacity: 0.7; }

.document-card .doc-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border-radius: 8px;
    font-size: 1.25rem;
    color: var(--primary);
}

.document-card .doc-info {
    flex: 1;
    min-width: 0;
}

.document-card .doc-type {
    font-weight: 600;
    text-transform: capitalize;
}

.document-card .doc-path {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-card .doc-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.document-card .doc-status {
    font-size: 1.25rem;
}

/* Phase Requirements */
.phase-requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.phase-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.phase-docs {
    font-size: 0.85rem;
}

.phase-doc-section {
    margin-bottom: 0.5rem;
}

.phase-doc-section .label {
    color: var(--text-muted);
    font-size: 0.75rem;
    display: block;
}

.phase-doc-section .docs {
    color: var(--text-primary);
}

/* Document Detail Modal */
.doc-detail-section {
    margin-bottom: 1.5rem;
}

.doc-detail-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.doc-detail-grid .detail-item {
    display: flex;
    flex-direction: column;
}

.doc-detail-grid .detail-item.full-width {
    grid-column: 1 / -1;
}

.doc-detail-grid .detail-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.doc-detail-grid .detail-item .value {
    font-weight: 500;
}

.doc-detail-grid .detail-item .value code {
    background: var(--background);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.alternatives-list {
    margin: 0;
    padding-left: 1.5rem;
}

.alternatives-list li {
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .compliance-header {
        flex-direction: column;
    }

    .compliance-score-card {
        flex-direction: column;
        text-align: center;
    }

    .score-breakdown {
        justify-content: center;
    }

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

    .phase-requirements-grid {
        grid-template-columns: 1fr;
    }

    .doc-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   LINK DOCUMENT MODAL
   ============================================================================= */

.link-doc-info {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.link-doc-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.link-doc-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    gap: 1rem;
}

.link-doc-divider::before,
.link-doc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.link-doc-divider span {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.create-doc-options h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.create-doc-options h4 i {
    color: var(--primary);
    margin-right: 0.5rem;
}

.create-option-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.create-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.create-option-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
    transform: translateY(-2px);
}

.create-option-card i {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.create-option-card span {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.create-option-card small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.form-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.required {
    color: var(--error);
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-missing {
    color: var(--error);
    font-style: italic;
}

.document-card.status-missing {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.document-card.status-missing:hover {
    border-color: var(--error);
}

/* =============================================================================
   CLAUDE CODE GENERATION MODAL
   ============================================================================= */

.claude-gen-info {
    margin-bottom: 1.5rem;
}

.claude-gen-info .info-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(34, 211, 238, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-md);
}

.claude-gen-info .info-card i {
    color: var(--primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.claude-gen-info .info-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.gen-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-md);
    color: var(--warning);
}

.gen-status i {
    font-size: 1.25rem;
}

.gen-result {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.gen-success {
    text-align: center;
}

.gen-success i {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: 1rem;
}

.gen-success h4 {
    color: var(--success);
    margin-bottom: 0.5rem;
}

.gen-success p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.gen-success .task-info {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.gen-success .task-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.gen-success .command-block {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.85rem;
    color: var(--cyan);
    margin-top: 0.5rem;
    overflow-x: auto;
    text-align: left;
}

.gen-error {
    text-align: center;
}

.gen-error i {
    font-size: 3rem;
    color: var(--error);
    margin-bottom: 1rem;
}

.gen-error h4 {
    color: var(--error);
    margin-bottom: 0.5rem;
}

.gen-error p {
    color: var(--text-secondary);
}

/* =============================================================================
   AI MODEL ORCHESTRATION VISUALIZATION
   ============================================================================= */

.orchestration-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
    overflow: hidden;
}

.orchestration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(34, 211, 238, 0.1));
    border-bottom: 1px solid var(--border-color);
}

.orchestration-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.orchestration-header h3 i {
    color: var(--primary);
}

.orchestration-controls {
    display: flex;
    gap: 0.5rem;
}

.orch-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.orch-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.orch-view {
    display: none;
    padding: 1.5rem;
}

.orch-view.active {
    display: block;
}

/* Synergy Graph View */
.graph-container {
    position: relative;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    height: 400px;
    overflow: hidden;
}

.synergy-svg {
    width: 100%;
    height: 100%;
}

.graph-legend {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.9);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(10px);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.analytical { background: #6366f1; }
.legend-dot.creative { background: #22d3ee; }
.legend-dot.decision { background: #f59e0b; }
.legend-dot.risk { background: #ef4444; }
.legend-dot.systems { background: #10b981; }
.legend-dot.human { background: #ec4899; }
.legend-dot.strategic { background: #8b5cf6; }

.graph-info {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.info-card {
    flex: 1;
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.info-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Cause-Effect Flow View */
.flow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.flow-stage {
    flex: 1;
    min-width: 180px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.flow-stage:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.flow-stage.trigger {
    border-color: #f59e0b;
}

.flow-stage.trigger .stage-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    color: #f59e0b;
}

.flow-stage.cause {
    border-color: #6366f1;
}

.flow-stage.cause .stage-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
    color: #6366f1;
}

.flow-stage.effect {
    border-color: #22d3ee;
}

.flow-stage.effect .stage-header {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.1));
    color: #22d3ee;
}

.flow-stage.outcome {
    border-color: #10b981;
}

.flow-stage.outcome .stage-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: #10b981;
}

.stage-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.stage-content {
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 60px;
}

.flow-arrow {
    color: var(--text-muted);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.flow-model-select {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.flow-model-select label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.flow-model-select select {
    flex: 1;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.flow-model-select select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Pipeline View */
.pipeline-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.pipeline-input,
.pipeline-output {
    flex-shrink: 0;
}

.pipeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
}

.pipeline-node.input {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.2));
    border: 2px solid #f59e0b;
    color: #f59e0b;
}

.pipeline-node.output {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 211, 238, 0.2));
    border: 2px solid #10b981;
    color: #10b981;
}

.pipeline-node i {
    font-size: 1.5rem;
}

.pipeline-stage {
    flex: 1;
    min-width: 200px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.pipeline-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    text-align: center;
}

.pipeline-models {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pipeline-model {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.pipeline-model:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

.pipeline-model.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary);
    color: var(--primary);
}

.pipeline-connector {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--border-color), var(--primary), var(--border-color));
    flex-shrink: 0;
}

.pipeline-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.pipeline-stats .stat-item {
    text-align: center;
}

.pipeline-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.pipeline-stats .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

/* SVG Graph Nodes and Edges */
.graph-node {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.graph-node:hover circle {
    filter: brightness(1.2);
    stroke-width: 3px;
}

.graph-node text {
    font-size: 10px;
    fill: var(--text-primary);
    pointer-events: none;
}

.graph-edge {
    stroke: var(--border-color);
    stroke-width: 1;
    opacity: 0.5;
}

.graph-edge.highlighted {
    stroke: var(--primary);
    stroke-width: 2;
    opacity: 1;
}

/* Responsive */
@media (max-width: 1024px) {
    .orchestration-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .orchestration-controls {
        width: 100%;
        overflow-x: auto;
    }

    .flow-container {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .pipeline-container {
        flex-direction: column;
    }

    .pipeline-connector {
        width: 2px;
        height: 20px;
        background: linear-gradient(180deg, var(--border-color), var(--primary), var(--border-color));
    }

    .graph-info {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .orch-btn span {
        display: none;
    }

    .orch-btn {
        padding: 0.5rem;
    }

    .flow-stage {
        min-width: 150px;
    }

    .pipeline-stats {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ========================================
   GitHub Projects Page Styles
======================================== */

.github-status-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.github-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.github-status-item i {
    color: var(--primary);
}

.github-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: center;
    color: var(--text-primary);
}

.action-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.action-card i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.action-card span {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.action-card small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.github-section {
    margin-bottom: 2rem;
}

.github-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.github-section .section-title .badge {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.repo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.repo-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: var(--transition-normal);
}

.repo-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.repo-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.repo-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.repo-card-title a {
    color: inherit;
    text-decoration: none;
}

.repo-card-title a:hover {
    text-decoration: underline;
}

.repo-visibility {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.repo-visibility.private {
    background: var(--warning);
    color: black;
}

.repo-visibility.public {
    background: var(--success);
    color: white;
}

.repo-card-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.repo-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.repo-last-active {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.repo-last-active i {
    font-size: 0.7rem;
}

.repo-card-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.repo-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Repo Actions */
.repo-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

.btn-sm.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-sm.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-sm.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-sm.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
}

/* Analysis Results */
.analysis-results {
    padding: 1rem;
}

.analysis-summary {
    margin-bottom: 1.5rem;
}

.analysis-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.summary-stats {
    display: flex;
    gap: 2rem;
}

.summary-stat {
    text-align: center;
}

.summary-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

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

.analysis-issues h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.issue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--border-color);
}

.issue-item.open {
    border-left-color: var(--success);
}

.issue-item.closed {
    border-left-color: var(--text-muted);
}

.issue-number {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.85rem;
}

.issue-title {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.issue-state {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.issue-state.open {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.issue-state.closed {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
}

.no-issues, .more-issues {
    text-align: center;
    color: var(--text-muted);
    padding: 1rem;
    font-style: italic;
}

/* Analysis Details */
.analysis-details {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.analysis-details h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-value {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Planning Detail Panel with Slide Animation */
.planning-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
    /* Slide animation */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.planning-detail-panel.visible {
    transform: translateX(0);
    visibility: visible;
}

.planning-detail-panel.sliding-out {
    transform: translateX(100%);
}

/* Overlay backdrop for detail panel */
.detail-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detail-panel-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.detail-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.detail-panel-header .back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.detail-panel-header .back-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.detail-panel-header h3 {
    flex: 1;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-panel-body {
    padding: 1.5rem;
}

.repo-stat i {
    font-size: 0.9rem;
}

.repo-stat.language i {
    color: #f1e05a;
}

.repo-stat.stars i {
    color: #ffc107;
}

.repo-stat.issues i {
    color: var(--success);
}

.repo-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.repo-action-btn {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.8rem;
}

.repo-action-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.repo-action-btn.analyze {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.repo-action-btn.analyze:hover {
    background: var(--primary-dark);
}

/* Issue Analysis Styles */
.analysis-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.summary-stat {
    text-align: center;
    padding: 1rem;
}

.summary-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.summary-stat-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.issue-analysis-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.issue-analysis-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.issue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.issue-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.issue-title a {
    color: inherit;
    text-decoration: none;
}

.issue-title a:hover {
    color: var(--primary);
}

.issue-number {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.issue-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.analysis-item {
    display: flex;
    flex-direction: column;
}

.analysis-item-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.analysis-item-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.j4c-recommendations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.model-badge .score {
    background: rgba(255,255,255,0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.suggested-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.suggested-actions-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.suggested-actions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggested-actions li {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggested-actions li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--success);
    font-size: 0.7rem;
}

/* Org Insights Styles */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.insight-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.insight-card-title {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-card-title i {
    color: var(--primary);
}

.insight-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.insight-detail {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    gap: 1rem;
}

.loading-placeholder i {
    font-size: 2rem;
    color: var(--primary);
}

/* Responsive adjustments for GitHub page */
@media (max-width: 768px) {
    .github-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

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

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

/* =============================================================================
   INTERACTIVE MENTAL MODELS STYLES
   ============================================================================= */

/* Model Playground Section */
.model-playground-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.playground-header {
    margin-bottom: 1.5rem;
}

.playground-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.playground-header h3 i {
    color: var(--primary);
}

.playground-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.playground-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.playground-input {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.playground-input label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.playground-input textarea {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: var(--transition-fast);
}

.playground-input textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.playground-input textarea::placeholder {
    color: var(--text-muted);
}

.playground-options {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.playground-options select {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.playground-options select:focus {
    outline: none;
    border-color: var(--primary);
}

.playground-results {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    min-height: 200px;
    overflow-y: auto;
    max-height: 350px;
}

.playground-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    gap: 1rem;
}

.playground-placeholder i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.5;
}

.playground-placeholder p {
    font-size: 0.9rem;
}

/* Playground Engine Info */
.playground-engine-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(147, 51, 234, 0.1));
    border-radius: var(--radius-md);
    border: 1px solid var(--primary);
}

.playground-engine-info .engine-badge {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.playground-engine-info .patterns-info {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Playground Results */
.playground-recommendation {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.playground-recommendation:last-child {
    margin-bottom: 0;
}

.playground-rec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.playground-rec-model {
    font-weight: 600;
    color: var(--text-primary);
}

.playground-rec-score {
    background: var(--success);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.playground-rec-category {
    font-size: 0.8rem;
    color: var(--primary-light);
    margin-bottom: 0.5rem;
}

.playground-rec-reasoning {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.playground-rec-synergies {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.playground-rec-synergies .synergy-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.playground-rec-synergies .synergy-model {
    background: rgba(79, 70, 229, 0.15);
    color: var(--primary-light);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    text-transform: capitalize;
}

/* Model Comparison Section */
.model-comparison-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.comparison-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.comparison-header h3 i {
    color: var(--secondary);
}

.comparison-actions {
    display: flex;
    gap: 0.5rem;
}

.comparison-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comparison-selector label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.comparison-selector select {
    min-width: 200px;
    padding: 0.6rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.comparison-selector select:focus {
    outline: none;
    border-color: var(--primary);
}

.comparison-help {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.comparison-results {
    display: grid;
    gap: 1rem;
}

.comparison-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    gap: 1rem;
}

.comparison-placeholder i {
    font-size: 2.5rem;
    color: var(--secondary);
    opacity: 0.5;
}

/* Comparison Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-hover);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.comparison-table th:first-child {
    width: 150px;
    color: var(--text-secondary);
}

.comparison-table td {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-muted);
}

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

.comparison-model-name {
    font-weight: 600;
    color: var(--text-primary) !important;
}

/* Enhanced Filter Bar */
.models-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    align-items: center;
}

.filter-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.filter-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
}

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

.filter-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.filter-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-category-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-category-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-category-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.view-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle button {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.view-toggle button:hover {
    background: var(--bg-hover);
}

.view-toggle button.active {
    background: var(--primary);
    color: white;
}

/* Model Cards Grid */
.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

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

/* Enhanced Model Card */
.model-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.model-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.model-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.model-card-icon {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.model-card-actions {
    display: flex;
    gap: 0.25rem;
}

.model-card-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.model-card-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.model-card-action.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.model-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.model-card-category {
    font-size: 0.8rem;
    color: var(--primary-light);
    margin-bottom: 0.75rem;
}

.model-card-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.model-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.model-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.model-tag {
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.model-card-cta {
    font-size: 0.85rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* List View Card Styles */
.models-grid.list-view .model-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.models-grid.list-view .model-card-header {
    margin-bottom: 0;
}

.models-grid.list-view .model-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.models-grid.list-view .model-card-description {
    margin-bottom: 0;
    -webkit-line-clamp: 2;
}

.models-grid.list-view .model-card-footer {
    border-top: none;
    padding-top: 0;
    flex-direction: column;
    gap: 0.5rem;
}

/* Model Detail Modal */
.model-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.model-detail-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 10;
}

.modal-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon {
    width: 55px;
    height: 55px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.modal-title-group h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.modal-category {
    color: var(--primary-light);
    font-size: 0.9rem;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.modal-body {
    padding: 1.5rem;
}

.modal-section {
    margin-bottom: 2rem;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-section h3 i {
    color: var(--primary);
}

.modal-section p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.modal-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-step {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.step-number {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.step-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.modal-example {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border-left: 4px solid var(--primary);
}

.modal-example-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.modal-example-content {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.related-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.related-model-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.related-model-tag:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.related-model-name {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.related-model-tag i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.modal-footer .btn-primary,
.modal-footer .btn-secondary {
    flex: 1;
}

.modal-lg {
    max-width: 700px;
}

/* =============================================================================
   LINKED ARTIFACTS
   ============================================================================= */

/* Linked Artifacts Section */
.linked-artifacts-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.linked-artifacts-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.linked-artifacts-section .section-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.linked-artifacts-section .section-header h3 i {
    color: var(--accent-primary);
}

.linked-artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.no-artifacts {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    gap: 0.75rem;
}

.no-artifacts i {
    font-size: 2rem;
    opacity: 0.5;
}

.linked-artifact-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    cursor: pointer;
}

.linked-artifact-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.artifact-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.artifact-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.artifact-icon.github {
    background: linear-gradient(135deg, #24292e 0%, #404448 100%);
    color: white;
}

.artifact-icon.gdrive {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 100%);
    color: white;
}

.artifact-icon.url {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.artifact-icon.local {
    background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
    color: white;
}

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

.artifact-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.artifact-source {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.artifact-card-actions {
    display: flex;
    gap: 0.25rem;
}

.artifact-card-actions button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.artifact-card-actions button:hover {
    color: var(--text-primary);
}

.artifact-card-actions button.delete:hover {
    color: var(--error);
}

.artifact-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.artifact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.artifact-tag {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 10px;
    color: var(--text-secondary);
}

.artifact-phase-tag {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    color: var(--primary);
}

/* Link Artifact Modal */
.artifact-source-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.source-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.source-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.source-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.source-tab i {
    font-size: 1.1rem;
}

.artifact-source-panel {
    display: none;
    padding: 1rem 0;
}

.artifact-source-panel.active {
    display: block;
}

.artifact-browse-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.artifact-browse-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

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

.artifact-browse-item:hover {
    background: var(--bg-tertiary);
}

.artifact-browse-item.selected {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--accent-primary);
}

.artifact-browse-item i {
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 20px;
}

.artifact-browse-item .item-name {
    flex: 1;
    font-size: 0.85rem;
}

.artifact-browse-item .item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.artifact-loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.artifact-loading i {
    margin-right: 0.5rem;
}

.file-input-group {
    display: flex;
    gap: 0.5rem;
}

.file-input-group .form-control {
    flex: 1;
}

.gdrive-preview,
.local-file-preview {
    margin-top: 1rem;
}

.preview-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.preview-card i {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.preview-info {
    display: flex;
    flex-direction: column;
}

.preview-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.preview-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.artifact-common-fields {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .artifact-source-tabs {
        flex-wrap: wrap;
    }

    .source-tab {
        flex: 1 1 45%;
    }

    .linked-artifacts-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Mental Models */
@media (max-width: 992px) {
    .playground-container {
        grid-template-columns: 1fr;
    }

    .playground-results {
        max-height: 250px;
    }
}

@media (max-width: 768px) {
    .models-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search {
        width: 100%;
    }

    .comparison-selector {
        flex-direction: column;
    }

    .comparison-selector select {
        width: 100%;
    }

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

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .modal-footer {
        flex-direction: column;
    }

    .related-models-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   GITHUB SLIDING DETAIL VIEW
   ============================================================================= */

.github-slide-container {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 120px);
    overflow: hidden;
}

.github-slide-view {
    width: 100%;
    min-height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.github-list-view {
    display: block;
}

.github-list-view.slide-out {
    display: none;
}

.github-detail-view {
    display: none;
    background: var(--bg-primary);
}

.github-detail-view.active {
    display: block;
}

/* Detail Navigation Header */
.detail-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

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

.back-btn i {
    font-size: 0.75rem;
}

.detail-nav-tabs {
    display: flex;
    gap: 0.5rem;
}

.detail-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.detail-tab.active {
    background: var(--accent-primary);
    color: white;
}

/* Project Header */
.detail-project-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 1px solid var(--border-color);
}

.detail-project-header .project-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.detail-project-header .project-info {
    flex: 1;
    min-width: 0;
}

.detail-project-header .project-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.detail-project-header .project-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.detail-project-header .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.detail-project-header .meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.detail-project-header .meta-item i {
    font-size: 0.75rem;
}

.detail-project-header .project-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Tab Content */
.detail-tab-content {
    display: none;
    padding: 1.5rem;
}

.detail-tab-content.active {
    display: block;
}

/* Stats Grid */
.detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
}

.detail-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.detail-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.detail-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Detail Sections */
.detail-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.detail-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section-title i {
    color: var(--accent-primary);
}

/* Assets Grid */
.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.asset-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all var(--transition-fast);
}

.asset-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.asset-card .asset-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.asset-card .asset-icon.folder { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.asset-card .asset-icon.file { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.asset-card .asset-icon.code { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.asset-card .asset-icon.doc { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

.asset-card .asset-info {
    min-width: 0;
}

.asset-card .asset-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-card .asset-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* SPARC Mini Board */
.sparc-mini-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

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

.mini-column-header {
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-column-header .mini-count {
    background: rgba(255,255,255,0.2);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.mini-column-tasks {
    padding: 0.5rem;
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
}

.mini-task-card {
    background: var(--bg-secondary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-primary);
}

.mini-task-card:last-child {
    margin-bottom: 0;
}

/* Milestones */
.sparc-milestones {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.milestone-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.milestone-card .milestone-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.milestone-card .milestone-icon.completed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.milestone-card .milestone-icon.pending {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.milestone-card .milestone-info {
    font-size: 0.8rem;
}

.milestone-card .milestone-title {
    font-weight: 500;
    color: var(--text-primary);
}

.milestone-card .milestone-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Sprint Kanban */
.sprint-header-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.sprint-header-info .sprint-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.sprint-header-info .sprint-dates {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sprint-header-info .sprint-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.sprint-header-info .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sprint-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

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

.kanban-header {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-count {
    background: var(--bg-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.kanban-items {
    padding: 0.75rem;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
}

.kanban-item {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--accent-primary);
    font-size: 0.8rem;
}

.kanban-item:last-child {
    margin-bottom: 0;
}

.kanban-item .item-title {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.kanban-item .item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.kanban-item .item-points {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

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

    .sparc-mini-board {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 768px) {
    .detail-nav-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .detail-nav-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .detail-project-header {
        flex-direction: column;
        text-align: center;
    }

    .detail-project-header .project-meta {
        justify-content: center;
    }

    .detail-project-header .project-actions {
        justify-content: center;
    }

    .detail-stats-grid {
        grid-template-columns: 1fr;
    }

    .sparc-mini-board {
        grid-template-columns: 1fr;
    }

    .sprint-kanban {
        grid-template-columns: 1fr;
    }

    .sprint-header-info {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ======================================
   Scope Selector - Organization/Project
   ====================================== */

.scope-selector {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.scope-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 10px;
}

.scope-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.scope-tab:hover {
    color: var(--text-primary);
    background: rgba(139, 92, 246, 0.1);
}

.scope-tab.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.scope-tab i {
    font-size: 0.85rem;
}

.project-filter {
    flex: 1;
    max-width: 350px;
}

.project-filter select {
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-filter select:hover {
    border-color: var(--accent-purple);
}

.project-filter select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.project-filter select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Selected Project Info */
.selected-project-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
}

.selected-project-info .project-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: 8px;
    color: white;
}

.selected-project-info .project-details {
    flex: 1;
}

.selected-project-info .project-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.selected-project-info .project-repo {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.selected-project-info .clear-filter {
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.selected-project-info .clear-filter:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--status-error);
    color: var(--status-error);
}

/* Responsive */
@media (max-width: 768px) {
    .scope-selector {
        flex-direction: column;
        align-items: stretch;
    }

    .scope-tabs {
        justify-content: center;
    }

    .project-filter {
        max-width: none;
    }
}

/* ======================================
   Developer Details Modal Styles
   ====================================== */

.dev-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.dev-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.dev-detail-info {
    flex: 1;
}

.dev-detail-info h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.dev-detail-info p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
}

.dev-detail-role {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.dev-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dev-detail-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.dev-detail-section h4 i {
    color: var(--accent-purple);
}

.dev-detail-section p {
    margin: 0;
    color: var(--text-secondary);
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skill-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dev-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.dev-stat {
    text-align: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.dev-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dev-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Checkbox group for forms */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label:hover {
    border-color: var(--accent-purple);
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-label span {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* GitHub Issue Preview in Create Ticket Modal */
.github-issue-preview {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.github-issue-preview .preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.github-issue-preview .preview-header i {
    font-size: 1rem;
}

.github-issue-preview .issue-badge {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
}

.github-issue-preview .issue-state-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.github-issue-preview .issue-state-badge.open {
    background: rgba(var(--warning-rgb), 0.2);
    color: var(--warning);
}

.github-issue-preview .issue-state-badge.closed {
    background: rgba(var(--success-rgb), 0.2);
    color: var(--success);
}

.github-issue-preview .preview-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.github-issue-preview .preview-repo {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Form Divider */
.form-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.form-divider span {
    padding: 0 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-divider span i {
    color: var(--primary);
}

/* Form actions with multiple buttons */
.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-danger {
    background: var(--status-error);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

@media (max-width: 768px) {
    .dev-detail-header {
        flex-direction: column;
        text-align: center;
    }

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

    .form-actions {
        flex-direction: column;
    }
}

/* ===================================================
   PROJECTS PAGE STYLES
   =================================================== */

.projects-slide-container {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 120px);
}

.projects-slide-view {
    width: 100%;
    min-height: 100%;
    padding: 0;
}

.projects-list-view {
    display: block;
}

.projects-list-view.slide-out {
    display: none !important;
}

.projects-detail-view {
    display: none;
    background: var(--bg-primary);
}

.projects-detail-view.active {
    display: block !important;
}

/* Projects Stats Row */
.projects-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.project-stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.project-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.project-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.project-stat-info {
    display: flex;
    flex-direction: column;
}

.project-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.project-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Projects Actions Bar */
.projects-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.projects-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.projects-actions {
    display: flex;
    gap: 0.75rem;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Planning Project Cards */
.planning-project-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.planning-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.planning-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.planning-project-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.planning-project-title i {
    color: var(--primary);
}

.planning-project-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.planning-project-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.planning-project-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.planning-project-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.planning-project-meta i {
    color: var(--primary);
}

/* Project Card */
.project-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary);
}

.project-card-header {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.project-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.project-card-title i {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.project-card-title h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.project-card-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.project-card-badge.synced {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.project-card-badge.active {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.project-card-badge.archived {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.project-card-badge.github {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Project Progress Bar */
.project-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    margin-bottom: 0.75rem;
}

.progress-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary, #8b5cf6));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}

.project-card-body {
    padding: 1.25rem;
}

.project-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.project-meta-item i {
    font-size: 0.875rem;
    opacity: 0.7;
}

.project-card-footer {
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-stats {
    display: flex;
    gap: 1rem;
}

.project-card-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.project-card-stat i {
    color: var(--accent-primary);
}

.project-card-actions {
    display: flex;
    gap: 0.5rem;
}

.project-action-btn {
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.project-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent-primary);
}

/* Project Detail Header */
.project-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.project-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.project-header-info {
    flex: 1;
}

.project-detail-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.project-detail-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}

.project-detail-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.project-header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Project Tab Content */
.project-tab-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}

.project-tab-pane {
    display: none;
}

.project-tab-pane.active {
    display: block;
}

/* Project Summary Section */
.project-summary-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.project-summary-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-summary-section h3 i {
    color: var(--accent-primary);
}

.project-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.summary-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid var(--border-primary);
}

.summary-card.highlights {
    border-left-color: #fbbf24;
}

.summary-card.accomplishments {
    border-left-color: #34d399;
}

.summary-card.issues {
    border-left-color: #f87171;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.summary-card.highlights .summary-card-header i {
    color: #fbbf24;
}

.summary-card.accomplishments .summary-card-header i {
    color: #34d399;
}

.summary-card.issues .summary-card-header i {
    color: #f87171;
}

.summary-card-content {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
}

.summary-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-card-content ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.summary-card-content ul li:last-child {
    border-bottom: none;
}

.summary-card-content ul li i {
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

.summary-card-content .summary-loading {
    color: var(--text-tertiary);
    font-style: italic;
}

.summary-card-content .no-data {
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.summary-item-priority {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: auto;
}

.summary-item-priority.high {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.summary-item-priority.medium {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.summary-item-priority.low {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}

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

.project-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.project-overview-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
}

.project-overview-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-overview-section h3 i {
    color: var(--accent-primary);
}

.project-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.project-stat-item {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
}

.project-stat-item .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.project-stat-item .label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.project-issues-list,
.project-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-issue-item,
.project-activity-item {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.project-issue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.project-activity-item i {
    color: var(--accent-primary);
}

.project-activity-item .time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* SPARC Phases in Project */
.sparc-phases-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.sparc-phase-card {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.sparc-phase-card.active {
    border-color: var(--accent-primary);
    background: rgba(102, 126, 234, 0.05);
}

.sparc-phase-card.completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.sparc-phase-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.sparc-phase-card.completed .sparc-phase-icon {
    background: #10b981;
    color: white;
}

.sparc-phase-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sparc-phase-progress {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Project Sprints List */
.project-sprints-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-sprint-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sprint-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sprint-info h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.sprint-info .dates {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sprint-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sprint-progress-bar {
    width: 120px;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.sprint-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    transition: width 0.3s;
}

.sprint-percentage {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
}

/* Project Team Grid */
.project-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.project-team-member {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.team-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.team-member-info h4 {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.team-member-info .role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Project JIRA Tab Styles */
.project-jira-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.jira-stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jira-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.jira-stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.jira-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

.project-jira-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.jira-project-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jira-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #0052cc, #2684ff);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
}

.jira-project-badge i {
    font-size: 1rem;
}

.jira-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.jira-external-link:hover {
    text-decoration: underline;
}

.jira-filters-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-jira-sprint-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary);
}

.sprint-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sprint-header-row h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-header-row h4 i {
    color: var(--primary);
}

.sprint-name {
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-progress-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.sprint-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #8b5cf6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sprint-stats-row {
    display: flex;
    gap: 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sprint-stats-row strong {
    color: var(--text-primary);
}

.project-jira-issues-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.project-jira-issues-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.project-jira-issues-section .section-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-jira-issues-section .section-header h4 i {
    color: var(--secondary);
}

.issues-count {
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.project-jira-issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.project-jira-issue-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-jira-issue-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.issue-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.issue-key-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.issue-type-icon {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.issue-key {
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.issue-key:hover {
    text-decoration: underline;
}

.issue-priority {
    font-size: 0.75rem;
}

.issue-priority.priority-highest,
.issue-priority.priority-high {
    color: var(--danger);
}

.issue-priority.priority-medium {
    color: var(--warning);
}

.issue-priority.priority-low,
.issue-priority.priority-lowest {
    color: var(--success);
}

.issue-status {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.issue-status.status-todo {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.issue-status.status-progress {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.issue-status.status-done {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.issue-summary {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.issue-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.issue-assignee,
.issue-updated {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Responsive Project JIRA */
@media (max-width: 1200px) {
    .project-jira-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .project-jira-summary {
        grid-template-columns: 1fr;
    }

    .project-jira-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jira-filters-row {
        flex-direction: column;
    }

    .project-jira-issues-grid {
        grid-template-columns: 1fr;
    }

    .sprint-stats-row {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* Responsive Projects Page */
@media (max-width: 1200px) {
    .projects-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .sparc-phases-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .projects-stats-row {
        grid-template-columns: 1fr;
    }

    .projects-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-filters,
    .projects-actions {
        flex-direction: column;
    }

    .project-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .project-header-actions {
        justify-content: center;
    }

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

/* ============================================
   Plans Tab Styles
   ============================================ */
.plans-overview {
    margin-bottom: 2rem;
}

.plans-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plans-section-title i {
    color: var(--primary);
}

.plans-completion-chart {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.plan-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition-normal);
}

.plan-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.plan-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.plan-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.plan-icon.prd {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.plan-icon.architecture {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    color: white;
}

.plan-icon.sparc {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.plan-icon.sprint {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.plan-icon.test {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: white;
}

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

.plan-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.plan-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.plan-status.in-progress {
    color: var(--warning);
}

.plan-status.completed {
    color: var(--success);
}

.plan-progress-circle {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.plan-progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.plan-progress-circle .progress-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 3;
}

.plan-progress-circle .progress-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.plan-progress-circle .progress-text {
    fill: var(--text-primary);
    font-size: 8px;
    font-weight: 600;
    text-anchor: middle;
    transform: rotate(90deg);
    transform-origin: 18px 18px;
}

.plan-card-body {
    padding: 1rem 1.25rem;
}

.plan-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.4rem 0;
}

.plan-item i {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.plan-item.completed i {
    color: var(--success);
}

.plan-item.completed {
    color: var(--text-primary);
}

/* Overall Completion Bar */
.overall-completion {
    flex: 1;
    min-width: 250px;
}

.overall-completion-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.overall-completion-label span:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

.overall-completion-label span:last-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.overall-progress-bar {
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.overall-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 6px;
    transition: width 0.5s ease;
}

/* Plan Mini Stats */
.plan-mini-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.plan-mini-stat {
    text-align: center;
    min-width: 80px;
}

.plan-mini-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.plan-mini-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Sprint Per Project Section */
.sprint-project-section {
    margin-bottom: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.sprint-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    cursor: pointer;
}

.sprint-project-header:hover {
    background: var(--bg-hover);
}

.sprint-project-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sprint-project-title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.sprint-project-title .project-badge {
    font-size: 0.75rem;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.sprint-project-stats {
    display: flex;
    gap: 1.5rem;
}

.sprint-project-stats .stat {
    text-align: center;
}

.sprint-project-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-project-stats .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.sprint-project-body {
    padding: 1rem 1.5rem;
}

.sprint-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.sprint-info {
    flex: 1;
}

.sprint-info h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.sprint-info .dates {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprint-tickets {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ticket-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.ticket-count.completed {
    color: var(--success);
}

.ticket-count.pending {
    color: var(--warning);
}

.completed-tickets-list {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.completed-ticket {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.completed-ticket i {
    color: var(--success);
    font-size: 0.75rem;
}

/* SPARC Features with Stages */
.sparc-feature-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.sparc-feature-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sparc-feature-name {
    font-weight: 600;
    color: var(--text-primary);
}

.sparc-feature-stage {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

.sparc-feature-stage.specification {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.sparc-feature-stage.pseudocode {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
}

.sparc-feature-stage.architecture {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.sparc-feature-stage.refinement {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.sparc-feature-stage.completion {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}

.sparc-feature-progress {
    display: flex;
    gap: 0.25rem;
}

.sparc-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-tertiary);
}

.sparc-stage-dot.active {
    background: var(--primary);
}

.sparc-stage-dot.completed {
    background: var(--success);
}

/* Responsive Plans */
@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .plans-completion-chart {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-mini-stats {
        justify-content: space-around;
    }
}

/* ============================================
   SPARC Features View Styles
   ============================================ */
.sparc-features-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.sparc-features-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sparc-features-header h3 i {
    color: var(--primary);
}

.features-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.specification {
    background: #6366f1;
}

.legend-dot.pseudocode {
    background: #22d3ee;
}

.legend-dot.architecture {
    background: #10b981;
}

.legend-dot.refinement {
    background: #f59e0b;
}

.legend-dot.completion {
    background: #ec4899;
}

.sparc-features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sparc-feature-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    transition: var(--transition-normal);
}

.sparc-feature-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.sparc-feature-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sparc-feature-info {
    flex: 1;
}

.sparc-feature-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.sparc-feature-project {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sparc-feature-stage {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 500;
    text-transform: capitalize;
}

.sparc-feature-stage.specification {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.sparc-feature-stage.pseudocode {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
}

.sparc-feature-stage.architecture {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sparc-feature-stage.refinement {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.sparc-feature-stage.completion {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.sparc-feature-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sparc-stage-indicators {
    display: flex;
    gap: 0.35rem;
}

.sparc-stage-indicator {
    width: 32px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    position: relative;
}

.sparc-stage-indicator.active {
    background: var(--primary);
}

.sparc-stage-indicator.completed {
    background: var(--success);
}

.sparc-stage-indicator span {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.sparc-stage-indicators:hover .sparc-stage-indicator span {
    opacity: 1;
}

.sparc-feature-meta {
    display: flex;
    gap: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.sparc-feature-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sparc-feature-stat i {
    color: var(--text-muted);
}

/* Sprints Per Project View */
.sprint-projects-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.sprint-project-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background 0.2s;
}

.sprint-project-card-header:hover {
    background: var(--bg-hover);
}

.sprint-project-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-project-card-header h3 i {
    color: var(--primary);
}

.sprint-project-summary {
    display: flex;
    gap: 1rem;
}

.sprint-project-summary .stat {
    text-align: center;
    padding: 0 0.75rem;
    border-right: 1px solid var(--border-color);
}

.sprint-project-summary .stat:last-child {
    border-right: none;
}

.sprint-project-summary .stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-project-summary .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.sprint-project-card-body {
    padding: 1rem 1.5rem;
}

.sprint-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.sprint-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sprint-item-info h4 {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.sprint-item-info .dates {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprint-item-stats {
    display: flex;
    gap: 0.75rem;
}

.sprint-item-stats .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
}

.sprint-item-stats .badge.completed {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.sprint-item-stats .badge.in-progress {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.sprint-tickets-section {
    margin-top: 0.75rem;
}

.sprint-tickets-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
}

.sprint-tickets-toggle:hover {
    text-decoration: underline;
}

.sprint-tickets-list {
    display: none;
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
}

.sprint-tickets-list.expanded {
    display: block;
}

.sprint-ticket {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.8rem;
}

.sprint-ticket i {
    font-size: 0.75rem;
}

.sprint-ticket.completed i {
    color: var(--success);
}

.sprint-ticket.pending i {
    color: var(--text-muted);
}

.sprint-ticket-title {
    flex: 1;
    color: var(--text-secondary);
}

.sprint-ticket.completed .sprint-ticket-title {
    color: var(--text-primary);
}

.sprint-ticket-points {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

/* Sprint Projects Header */
.sprint-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.sprint-projects-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-projects-header h3 i {
    color: var(--primary);
}

.projects-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============================================
   Unified Project Planning Page Styles
   ============================================ */
.planning-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.planning-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(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    white-space: nowrap;
}

.planning-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.planning-tab.active {
    background: var(--primary);
    color: white;
}

.planning-tab i {
    font-size: 1rem;
}

.tab-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.planning-tab:not(.active) .tab-badge {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.planning-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.planning-tab-content.active {
    display: block;
}

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

/* Planning Detail Panel */
.planning-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    max-width: 800px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    overflow-y: auto;
    animation: slideInRight 0.3s ease;
}

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

.detail-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.detail-panel-header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-panel-body {
    padding: 1.5rem;
}

/* Assets Header */
.assets-header {
    margin-bottom: 1.5rem;
}

.assets-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assets-header h3 i {
    color: var(--primary);
}

.assets-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Sprint Stats Row */
.sprint-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sprint-stat-card.current-sprint {
    flex: 2;
    min-width: 300px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.sprint-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sprint-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sprint-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
}

.sprint-badge.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.sprint-stat-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.sprint-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sprint-progress .progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.sprint-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sprint-progress .progress-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.sprint-mini-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mini-stat {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    text-align: center;
    min-width: 100px;
}

.mini-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mini-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Responsive Planning Tabs */
@media (max-width: 768px) {
    .planning-tabs {
        flex-wrap: nowrap;
        padding: 0.25rem;
    }

    .planning-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .planning-tab span:not(.tab-badge) {
        display: none;
    }

    .planning-detail-panel {
        width: 100%;
        max-width: none;
    }

    .sprint-stats {
        flex-direction: column;
    }

    .sprint-mini-stats {
        flex-direction: row;
        justify-content: space-around;
    }
}

/* ========================================
   Tab Action Bar Styles
   ======================================== */

.tab-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.action-bar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.action-bar-title i {
    color: var(--primary);
    font-size: 1.2rem;
}

.action-bar-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-action:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.btn-action.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

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

.btn-action i {
    font-size: 0.875rem;
}

/* Refresh Icon Button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.btn-icon.spinning i {
    animation: spin 1s linear infinite;
}

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

/* SPARC Task Refresh Button */
.sparc-task-refresh {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.sparc-task:hover .sparc-task-refresh {
    opacity: 1;
}

.sparc-task-refresh:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

/* Sprint Project Header Refresh */
.sprint-project-header {
    position: relative;
}

.sprint-project-header .btn-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile Responsive for Action Bar */
@media (max-width: 768px) {
    .tab-action-bar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .action-bar-title {
        font-size: 1rem;
    }

    .action-bar-buttons {
        width: 100%;
        justify-content: center;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.75rem;
    }
}

/* ========================================
   Comprehensive Analysis View Styles
   ======================================== */

.analysis-results.comprehensive {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analysis-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.analysis-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.analysis-section h4 i {
    color: var(--primary);
}

.analysis-section h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
}

/* Project Info Grid */
.project-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.info-card.full-width {
    grid-column: 1 / -1;
}

.info-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--primary);
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SPARC Plan Styles */
.sparc-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sparc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sparc-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sparc-phase-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.sparc-phase-badge.specification { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.sparc-phase-badge.pseudocode { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.sparc-phase-badge.architecture { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.sparc-phase-badge.refinement { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.sparc-phase-badge.completion { background: rgba(16, 185, 129, 0.2); color: #10b981; }

.sparc-progress-bar {
    position: relative;
    height: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.sparc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 12px;
    transition: width 0.3s ease;
}

.sparc-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sparc-stats-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.sparc-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    min-width: 80px;
}

.sparc-mini-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.sparc-mini-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sparc-tasks-list {
    margin-top: 0.5rem;
}

.sparc-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.sparc-task-item .task-status-icon {
    color: var(--text-muted);
}

.sparc-task-item.done .task-status-icon {
    color: var(--success);
}

.sparc-task-item.in_progress .task-status-icon {
    color: var(--primary);
}

.sparc-task-item .task-title {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.sparc-task-item .task-phase {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    color: var(--text-secondary);
}

/* Sprint Plan Styles */
.sprint-stats-row {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    margin-bottom: 1rem;
}

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

.sprint-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.sprint-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprint-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sprint-card {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-color);
}

.sprint-card.active {
    border-left-color: var(--primary);
}

.sprint-card.completed {
    border-left-color: var(--success);
}

.sprint-card.planned {
    border-left-color: var(--warning);
}

.sprint-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sprint-card .sprint-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-status-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.sprint-status-badge.active { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.sprint-status-badge.completed { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.sprint-status-badge.planned { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

.sprint-card-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-mini .progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}

.sprint-card-progress .progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: right;
}

.sprint-card-dates {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Issues Section Styles */
.issues-stats-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.issue-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    min-width: 80px;
}

.issue-stat.open .stat-value { color: var(--warning); }
.issue-stat.closed .stat-value { color: var(--success); }
.issue-stat.total .stat-value { color: var(--primary); }

.issue-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.issue-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.issue-breakdown {
    margin-bottom: 1rem;
}

.breakdown-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breakdown-chip {
    padding: 0.25rem 0.625rem;
    background: var(--bg-secondary);
    border-radius: 15px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.breakdown-chip.bug_fix { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.breakdown-chip.feature { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.breakdown-chip.improvement { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.breakdown-chip.refactor { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.breakdown-chip.security_fix { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.breakdown-chip.domain { background: rgba(99, 102, 241, 0.2); color: var(--primary); }

.issues-list {
    max-height: 300px;
    overflow-y: auto;
}

.issue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.375rem;
}

.issue-item .issue-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.issue-item .issue-actions {
    flex-shrink: 0;
}

.issue-item .create-ticket-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.issue-state-icon {
    color: var(--text-muted);
}

.issue-item.open .issue-state-icon { color: var(--warning); }
.issue-item.closed .issue-state-icon { color: var(--success); }

.issue-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 40px;
}

.issue-title {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-type-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: capitalize;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Work Summary Styles */
.work-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.work-card {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.work-card.completed {
    border-color: var(--success);
    border-left-width: 3px;
}

.work-card.pending {
    border-color: var(--warning);
    border-left-width: 3px;
}

.work-card .work-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.work-card.completed .work-icon { color: var(--success); }
.work-card.pending .work-icon { color: var(--warning); }

.work-content {
    margin-bottom: 0.75rem;
}

.work-content .work-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.work-content .work-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.work-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.work-breakdown span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* No Data Placeholder */
.no-data-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.no-data-placeholder i {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.no-data-placeholder p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.more-items {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.5rem;
}

.no-issues {
    color: var(--text-muted);
    text-align: center;
    padding: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .project-info-grid {
        grid-template-columns: 1fr;
    }

    .sparc-stats-row,
    .sprint-stats-row,
    .issues-stats-row {
        flex-wrap: wrap;
    }

    .work-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Plan Status Overview Styles
   ======================================== */

.plan-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.plan-status-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.plan-status-card.found {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.plan-status-card.missing {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.plan-status-card .plan-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.plan-status-card.found .plan-icon {
    color: var(--success);
}

.plan-status-card.missing .plan-icon {
    color: var(--warning);
}

.plan-status-card .plan-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.plan-status-card .plan-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-status-card .plan-status-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.plan-status-card.found .plan-status-label {
    color: var(--success);
}

.plan-status-card.missing .plan-status-label {
    color: var(--warning);
}

.plan-status-card .plan-link {
    color: var(--primary);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.plan-status-card .plan-link:hover {
    background: var(--bg-tertiary);
}

/* Plan Overall Progress */
.plan-overall-progress {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.plan-overall-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.plan-overall-progress .progress-header span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.plan-overall-progress .progress-percentage {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.progress-bar-large {
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-large .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 6px;
    transition: width 0.3s ease;
}

.plan-overall-progress .progress-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.plan-overall-progress .progress-stats span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.plan-overall-progress .progress-stats i {
    color: var(--success);
}

/* Deviations Section */
.deviations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.deviation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-color);
}

.deviation-item.high {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.deviation-item.medium {
    border-left-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.deviation-item.low {
    border-left-color: var(--info);
    background: rgba(59, 130, 246, 0.1);
}

.deviation-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.deviation-item.high .deviation-icon {
    color: var(--danger);
}

.deviation-item.medium .deviation-icon {
    color: var(--warning);
}

.deviation-item.low .deviation-icon {
    color: var(--info);
}

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

.deviation-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.deviation-recommendation {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.deviation-recommendation i {
    color: var(--warning);
    margin-top: 2px;
}

.deviation-severity-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.deviation-severity-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.deviation-severity-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.deviation-severity-badge.low {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

/* SPARC Phases Timeline */
.sparc-phases-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.phase-item {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 0;
    position: relative;
}

.phase-connector {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.phase-connector.first {
    top: 50%;
}

.phase-connector.last {
    bottom: 50%;
}

.phase-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}

.phase-item.complete .phase-marker {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.phase-item.in_progress .phase-marker {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.phase-item.pending .phase-marker {
    color: var(--text-muted);
}

.phase-content {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.phase-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.phase-status-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
}

.phase-status-badge.complete {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.phase-status-badge.in_progress {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.phase-status-badge.pending {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

.phase-status-badge.unknown {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

.phase-progress-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.phase-progress-mini span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 35px;
}

.phase-tasks-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Expandable Phase Item */
.phase-item.expandable {
    cursor: pointer;
    flex-wrap: wrap;
}

.phase-item.expandable:hover .phase-content {
    background: var(--bg-tertiary);
}

.phase-item.expandable.expanded .phase-content {
    background: var(--bg-tertiary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.phase-expand-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    margin-left: auto;
}

.phase-expand-icon.rotated {
    transform: rotate(180deg);
}

/* Phase Detail Panel */
.phase-detail-panel {
    width: 100%;
    margin-left: 48px;
    margin-top: 0;
}

.phase-detail-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    animation: slideDown 0.3s ease;
}

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

.phase-detail-header h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phase-detail-header h5 i {
    color: var(--accent-primary);
}

.phase-detail-description {
    margin-bottom: 1rem;
}

.phase-detail-description p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.phase-detail-description ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.phase-detail-description ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.4rem 0.6rem;
    background: var(--bg-primary);
    border-radius: 4px;
}

.phase-detail-description ul li i {
    color: var(--accent-primary);
    font-size: 0.75rem;
    width: 16px;
}

.phase-tasks-list h6,
.phase-documents h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phase-tasks-list h6 i,
.phase-documents h6 i {
    color: var(--accent-primary);
}

.phase-tasks-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.phase-tasks-list ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-primary);
    border-radius: 4px;
}

.phase-tasks-list ul li.complete {
    color: var(--success);
}

.phase-tasks-list ul li.complete i {
    color: var(--success);
}

.phase-tasks-list ul li.pending {
    color: var(--text-secondary);
}

.phase-tasks-list ul li.pending i {
    color: var(--text-muted);
}

.phase-no-tasks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 4px;
    justify-content: center;
}

.phase-documents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.phase-documents ul li a {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.phase-documents ul li a:hover {
    text-decoration: underline;
}

/* Plan Documents Section */
.plan-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.plan-document-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-document-card .doc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-document-card .doc-header i {
    color: var(--primary);
    font-size: 1.1rem;
}

.plan-document-card .doc-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-document-card .doc-path {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.plan-document-card .doc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

.plan-document-card .doc-stats span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.plan-document-card .doc-stats i {
    color: var(--primary);
    font-size: 0.75rem;
}

.plan-document-card .doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--primary);
    text-decoration: none;
    transition: background 0.2s ease;
    align-self: flex-start;
    margin-top: auto;
}

.plan-document-card .doc-link:hover {
    background: var(--primary);
    color: white;
}

/* Plan Status Responsive */
@media (max-width: 1024px) {
    .plan-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .plan-status-grid {
        grid-template-columns: 1fr;
    }

    .plan-documents-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   CRM (Customer Relationship Management) STYLES
   ============================================================================= */

/* CRM Summary Grid */
.crm-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.crm-summary-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.crm-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.crm-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.crm-summary-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.crm-summary-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.crm-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.crm-summary-value-sub {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
}

.crm-summary-trend {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.crm-summary-trend.up {
    color: var(--success-color);
}

.crm-summary-trend.down {
    color: var(--error-color);
}

/* CRM Actions */
.crm-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.crm-filter select {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* CRM Tabs */
.crm-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.crm-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
}

.crm-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.crm-tab.active {
    color: var(--primary-color);
    background: var(--card-bg);
    border-bottom: 2px solid var(--primary-color);
}

/* CRM Tab Content */
.crm-tab-content {
    display: none;
}

.crm-tab-content.active {
    display: block;
}

/* CRM Table */
.crm-table-container {
    overflow-x: auto;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
}

.crm-table th,
.crm-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.crm-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm-table tr:hover {
    background: var(--hover-bg);
}

/* CRM Contact Name Cell */
.crm-contact-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.crm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.crm-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.7rem;
}

.crm-name {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.crm-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}

/* CRM Status Badge */
.crm-status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.crm-status-badge.customer {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.crm-status-badge.lead {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.crm-status-badge.prospect {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-color);
}

.crm-status-badge.active {
    background: rgba(34, 211, 238, 0.15);
    color: var(--info-color);
}

.crm-status-badge.inactive {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

/* CRM Actions Cell */
.crm-actions-cell {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

/* CRM Search */
.crm-search {
    position: relative;
    display: flex;
    align-items: center;
}

.crm-search i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
}

.crm-search input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 250px;
}

/* CRM Empty State */
.crm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.crm-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.crm-empty-state p {
    margin-bottom: 1rem;
}

/* CRM Pipeline */
.crm-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 400px;
}

.pipeline-stage {
    background: var(--sidebar-bg);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.pipeline-title {
    font-weight: 600;
    color: var(--text-primary);
}

.pipeline-count {
    background: var(--primary-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pipeline-value {
    font-size: 0.85rem;
    color: var(--success-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.pipeline-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 400px;
}

.pipeline-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.pipeline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pipeline-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pipeline-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.pipeline-card-company {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.pipeline-card-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--success-color);
    margin-bottom: 0.5rem;
}

.pipeline-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pipeline-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-size: 0.85rem;
}

/* CRM Activity Feed */
.crm-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm-activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--sidebar-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

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

.activity-icon.call {
    background: rgba(34, 211, 238, 0.15);
    color: var(--info-color);
}

.activity-icon.email {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-color);
}

.activity-icon.meeting {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.activity-icon.note {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.activity-icon.task {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.activity-content {
    flex: 1;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.activity-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.activity-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.activity-subject {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-contact {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.activity-description {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* CRM Modal */
.crm-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: 1000;
    backdrop-filter: blur(4px);
}

.crm-modal-content {
    background: var(--card-bg);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.crm-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.crm-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.crm-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.crm-form-section {
    margin-bottom: 1.5rem;
}

/* CRM Responsive */
@media (max-width: 1200px) {
    .crm-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .crm-summary-grid {
        grid-template-columns: 1fr;
    }

    .crm-pipeline {
        grid-template-columns: 1fr;
    }

    .crm-tabs {
        flex-wrap: wrap;
    }

    .crm-search input {
        width: 100%;
    }

    .crm-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =============================================================================
   JIRA INTEGRATION STYLES
   ============================================================================= */

/* JIRA Summary Grid */
.jira-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.jira-summary-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.jira-summary-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.jira-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.jira-summary-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.jira-summary-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.jira-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* JIRA Actions */
.jira-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.jira-project-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jira-project-selector label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.jira-project-selector select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

/* JIRA Tabs */
.jira-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.jira-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.jira-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.jira-tab.active {
    background: var(--primary);
    color: white;
}

.jira-tab-content {
    display: none;
}

.jira-tab-content.active {
    display: block;
}

/* JIRA Board */
.jira-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 400px;
}

.jira-column {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.jira-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.jira-column-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.jira-column-count {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.jira-column-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 500px;
}

/* JIRA Card */
.jira-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jira-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.jira-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.jira-card-key {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.jira-card-type {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.jira-card-summary {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jira-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jira-card-priority {
    font-size: 0.75rem;
}

.jira-card-priority.priority-highest,
.jira-card-priority.priority-high {
    color: var(--danger);
}

.jira-card-priority.priority-medium {
    color: var(--warning);
}

.jira-card-priority.priority-low,
.jira-card-priority.priority-lowest {
    color: var(--success);
}

.jira-card-assignee {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jira-empty-column {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem;
}

/* JIRA Table */
.jira-table-container {
    overflow-x: auto;
}

.jira-table {
    width: 100%;
    border-collapse: collapse;
}

.jira-table th,
.jira-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.jira-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jira-table td {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.jira-key-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.jira-key-link:hover {
    text-decoration: underline;
}

.jira-summary-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* JIRA Badges */
.jira-type-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.jira-type-badge.jira-type-task {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.jira-type-badge.jira-type-story {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.jira-type-badge.jira-type-bug {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.jira-type-badge.jira-type-epic {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.jira-priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.jira-priority-badge.priority-highest,
.jira-priority-badge.priority-high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.jira-priority-badge.priority-medium {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
}

.jira-priority-badge.priority-low,
.jira-priority-badge.priority-lowest {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.jira-status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* JIRA Search */
.jira-search {
    position: relative;
    display: flex;
    align-items: center;
}

.jira-search i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.jira-search input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    width: 250px;
}

.jira-search input:focus {
    outline: none;
    border-color: var(--primary);
}

/* JIRA Sprint Cards */
.jira-sprints-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.jira-sprint-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.jira-sprint-card.active {
    border-color: var(--success);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.jira-sprint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.jira-sprint-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.jira-sprint-state {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.jira-sprint-state.active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.jira-sprint-state.closed {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.jira-sprint-state.future {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.jira-sprint-dates {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.jira-sprint-goal {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.jira-sprint-actions {
    margin-top: 1rem;
}

/* JIRA Empty State */
.jira-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    text-align: center;
}

.jira-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

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

.jira-modal.active {
    display: flex;
}

.jira-modal-content {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.jira-modal-content.jira-modal-large {
    max-width: 900px;
}

.jira-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jira-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.jira-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.jira-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* JIRA Detail View */
.jira-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
}

.jira-detail-main {
    min-width: 0;
}

.jira-detail-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jira-detail-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.jira-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jira-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.jira-detail-field label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jira-detail-field span {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.jira-detail-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* JIRA Sprint Issues List */
.jira-sprint-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jira-sprint-issue {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.jira-sprint-issue:hover {
    background: var(--bg-tertiary);
}

.jira-sprint-issue-key {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.85rem;
}

.jira-sprint-issue-summary {
    color: var(--text-primary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* JIRA Responsive */
@media (max-width: 1200px) {
    .jira-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .jira-detail-grid {
        grid-template-columns: 1fr;
    }

    .jira-detail-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .jira-detail-field {
        flex: 1;
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .jira-summary-grid {
        grid-template-columns: 1fr;
    }

    .jira-board {
        grid-template-columns: 1fr;
    }

    .jira-tabs {
        flex-wrap: wrap;
    }

    .jira-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jira-search input {
        width: 100%;
    }

    .jira-sprint-issue {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* JIRA All Issues Detail View */
.jira-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jira-filters select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 120px;
}

.jira-filters select:focus {
    outline: none;
    border-color: var(--primary);
}

.jira-tab-count {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.jira-issues-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.jira-issues-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.jira-issue-detail-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jira-issue-detail-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.jira-issue-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.jira-issue-detail-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jira-issue-detail-key .jira-card-type {
    font-size: 0.9rem;
}

.jira-issue-detail-summary {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jira-issue-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.jira-issue-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.jira-issue-detail-meta-item i {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* JIRA Status Pills */
.jira-status-pill {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jira-status-pill.status-todo {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.jira-status-pill.status-progress {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.jira-status-pill.status-done {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

/* JIRA All Issues Empty State */
.jira-all-issues-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    text-align: center;
}

.jira-all-issues-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Responsive for All Issues */
@media (max-width: 768px) {
    .jira-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .jira-filters select {
        width: 100%;
    }

    .jira-issues-detail-grid {
        grid-template-columns: 1fr;
    }

    .jira-issue-detail-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* =============================================================================
   REAL-TIME INSTRUMENTATION STYLES
   ============================================================================= */

.instrumentation-section {
    border: 1px solid var(--primary);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
}

.instrumentation-section .card-header {
    border-bottom: 1px solid var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.instr-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.instr-last-updated {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* System Info Grid */
.system-info-container {
    margin-bottom: 2rem;
}

.system-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.system-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.system-info-item .info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.system-info-item .info-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Resource Meters */
.resource-meters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-meter {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.meter-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meter-label i {
    color: var(--primary);
}

.meter-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

.meter-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background-color 0.3s ease;
}

.meter-fill.success {
    background: linear-gradient(90deg, var(--success), #34d399);
}

.meter-fill.warning {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.meter-fill.danger {
    background: linear-gradient(90deg, var(--danger), #f87171);
}

/* Instrumentation Subsections */
.instr-subsection {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.instr-subsection-title {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instr-subsection-title i {
    color: var(--secondary);
}

.instr-subsection-title .section-badge {
    margin-left: auto;
}

/* Instrumentation Tables */
.instr-table-container {
    overflow-x: auto;
}

.instr-table {
    width: 100%;
    border-collapse: collapse;
}

.instr-table th,
.instr-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.instr-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-tertiary);
}

.instr-table td {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.instr-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.instr-table code {
    background: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
}

.instr-table .high {
    color: var(--danger);
    font-weight: 600;
}

.command-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
}

/* Process Type Badges */
.process-type-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.process-type-badge.node {
    background: rgba(104, 159, 56, 0.2);
    color: #689f38;
}

.process-type-badge.npm {
    background: rgba(203, 56, 55, 0.2);
    color: #cb3837;
}

.process-type-badge.jest {
    background: rgba(153, 66, 91, 0.2);
    color: #99425b;
}

.process-type-badge.webpack {
    background: rgba(29, 120, 193, 0.2);
    color: #1d78c1;
}

.process-type-badge.ts-node {
    background: rgba(49, 120, 198, 0.2);
    color: #3178c6;
}

.process-type-badge.pm2 {
    background: rgba(44, 62, 80, 0.2);
    color: #2c3e50;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.listening {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

/* Docker Section */
.docker-section {
    min-height: 100px;
}

.docker-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

.docker-unavailable i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.docker-containers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.docker-container-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border-left: 3px solid var(--text-muted);
}

.docker-container-card.running {
    border-left-color: var(--success);
}

.docker-container-card.stopped {
    border-left-color: var(--danger);
}

.docker-container-card .container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.docker-container-card .container-name {
    font-weight: 600;
    color: var(--text-primary);
}

.docker-container-card .container-status {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.docker-container-card .container-status.running {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.docker-container-card .container-status.stopped {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.docker-container-card .container-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.docker-container-card .container-details i {
    width: 16px;
    margin-right: 0.5rem;
}

/* Health Check Modal */
.health-result {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.health-result.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);
}

.health-result.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
}

.health-result .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.health-result .result-status {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.health-result .result-status.success {
    color: var(--success);
}

.health-result .result-status.error {
    color: var(--danger);
}

.health-result .result-time {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.health-result .result-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.health-result .result-error {
    font-size: 0.85rem;
    color: var(--danger);
    font-family: monospace;
}

/* Empty States */
.empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Loading Placeholder */
.loading-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.loading-placeholder i {
    margin-right: 0.5rem;
}

/* Progress Fill Animation */
@keyframes fillProgress {
    from {
        width: 0;
    }
}

.meter-fill {
    animation: fillProgress 0.8s ease-out;
}

/* Responsive Instrumentation */
@media (max-width: 768px) {
    .instrumentation-section .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .instr-actions {
        width: 100%;
        justify-content: space-between;
    }

    .system-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .docker-containers-grid {
        grid-template-columns: 1fr;
    }

    .instr-table {
        font-size: 0.8rem;
    }

    .instr-table th,
    .instr-table td {
        padding: 0.5rem;
    }

    .command-cell {
        max-width: 150px;
    }
}

/* =============================================================================
   GLOBAL LOADING OVERLAY
   ============================================================================= */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    animation: pulse 1.5s ease-in-out infinite;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Element-level loading */
.element-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    gap: 0.75rem;
}

.element-loading i {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Button loading state */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

button:disabled i.fa-spinner {
    margin-right: 0.5rem;
}

/* =============================================================================
   CURSOR FOCUS HIGHLIGHTING
   ============================================================================= */

/* Global focus glow effect for interactive elements */
.focus-highlight {
    position: relative;
}

.focus-highlight::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    z-index: 10;
}

.focus-highlight:hover::after,
.focus-highlight:focus::after {
    opacity: 1;
}

/* Cards - repo cards, planning cards, stat cards */
.repo-card:hover,
.planning-card:hover,
.stat-card:hover,
.agent-card:hover,
.crm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.25), 0 0 0 2px var(--primary);
    border-color: var(--primary);
}

/* Buttons */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.action-btn:hover {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus,
.action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

/* Navigation items */
.topnav-item:hover,
.sidebar-item:hover {
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.4);
}

/* Table rows */
.data-table tbody tr:hover,
.issues-table tbody tr:hover,
.prs-table tbody tr:hover {
    background: var(--bg-hover);
    box-shadow: inset 4px 0 0 var(--primary);
}

/* List items - issues, PRs, tasks */
.issue-item:hover,
.pr-item:hover,
.task-item:hover,
.jira-task-item:hover {
    background: var(--bg-hover);
    border-left: 3px solid var(--primary);
    padding-left: calc(1rem - 3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Form inputs */
input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled),
.form-control:hover:not(:disabled) {
    border-color: var(--primary-light);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Tabs */
.tab-btn:hover:not(.active),
.view-tab:hover:not(.active),
.panel-tab:hover:not(.active) {
    background: var(--bg-hover);
    box-shadow: inset 0 -2px 0 var(--primary-light);
}

/* Chips and badges */
.status-badge:hover,
.label-chip:hover,
.tag:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Icons that are clickable */
.clickable-icon:hover,
[onclick]:not(button):not(.btn):hover i,
a:hover i {
    color: var(--primary);
    transform: scale(1.1);
    transition: all var(--transition-fast);
}

/* Modal close buttons */
.modal-close:hover,
.close-btn:hover {
    color: var(--danger);
    transform: rotate(90deg);
    transition: all var(--transition-normal);
}

/* Expandable sections */
.collapsible-header:hover,
.accordion-header:hover,
.expandable-section:hover {
    background: var(--bg-hover);
    border-left: 3px solid var(--primary);
}

/* Timeline items */
.timeline-item:hover,
.activity-item:hover {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px var(--primary-light);
}

/* Progress bars on hover */
.progress-bar:hover {
    transform: scaleY(1.2);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Search inputs special highlight */
.search-input:hover,
.search-box:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.search-input:focus,
.search-box:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

/* Dropdown items */
.dropdown-item:hover,
.select-option:hover,
.autocomplete-item:hover {
    background: var(--primary);
    color: white;
}

/* SPARC phase cards */
.sparc-phase:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
    transform: translateY(-3px);
}

/* Chart and graph elements */
.chart-bar:hover,
.graph-point:hover {
    filter: brightness(1.2);
    stroke: var(--primary);
    stroke-width: 2px;
}

/* Thumbnail and image containers */
.thumbnail:hover,
.image-preview:hover,
.avatar:hover {
    border: 2px solid var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Pagination buttons */
.pagination-btn:hover:not(:disabled),
.page-link:hover:not(.active) {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

/* Links */
a:hover:not(.btn):not(.topnav-item):not(.sidebar-item) {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Cursor pointer for all interactive elements */
[onclick],
button:not(:disabled),
a,
.clickable,
input[type="checkbox"],
input[type="radio"],
select,
.repo-card,
.planning-card,
.tab-btn,
.view-tab {
    cursor: pointer;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Animated glow effect for primary actions */
@keyframes focusGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
    }
}

.primary-action:hover {
    animation: focusGlow 1.5s ease-in-out infinite;
}

/* =============================================================================
   DETAIL PANEL TABS
   ============================================================================= */

.detail-panel-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.detail-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.detail-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.detail-tab.active {
    background: var(--primary);
    color: white;
}

.detail-tab i {
    font-size: 0.9rem;
}

.detail-tab-content {
    display: none;
    animation: fadeIn 0.2s ease-out;
}

.detail-tab-content.active {
    display: block;
}

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

/* Detail Panel Content Sections */
.detail-project-content,
.detail-sparc-content,
.detail-sprints-content,
.detail-assets-content {
    padding: 1rem;
}

/* SPARC Phases in Detail Panel */
.sparc-phases-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sparc-phase-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: all var(--transition-fast);
}

.sparc-phase-card:hover {
    border-color: var(--primary);
}

.sparc-phase-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sparc-phase-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.sparc-phase-icon.spec { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.sparc-phase-icon.pseudo { background: rgba(34, 211, 238, 0.2); color: var(--secondary); }
.sparc-phase-icon.arch { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.sparc-phase-icon.refine { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.sparc-phase-icon.complete { background: rgba(236, 72, 153, 0.2); color: #ec4899; }

.sparc-phase-title {
    font-weight: 600;
    color: var(--text-primary);
}

.sparc-phase-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sparc-task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.sparc-task-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Sprint List in Detail Panel */
.sprint-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sprint-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.sprint-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sprint-item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-item-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.sprint-item-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.sprint-item-badge.planned {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

.sprint-item-badge.completed {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.sprint-item-progress {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.sprint-item-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Assets List in Detail Panel */
.assets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.asset-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.asset-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.asset-item-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.asset-item-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.asset-item-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Planning Main Content (GitHub List Only) */
.planning-main-content {
    display: block;
}


/* =========================================================================== */
/* SPECIALIZED AI AGENTS PAGE (J4C-71 / J4C-72) */
/* =========================================================================== */

/* Agent Stats Row */
.agents-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.agent-stat-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    color: white;
}

.agent-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
}

.agent-stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* Agent Filters */
.agents-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.agents-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agents-filters label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.agents-filters select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
}

/* Agents Grid */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.agent-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.agent-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.agent-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.agent-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.agent-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.agent-domain {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.agent-status {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.agent-status.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.agent-status.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.agent-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.agent-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.skill-tag {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.skill-tag.more {
    background: var(--primary);
    color: white;
}

.agent-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.agent-footer i {
    margin-right: 0.25rem;
}

/* GNN Agent Section */
.gnn-agent-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.gnn-agent-section .section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gnn-agent-section .section-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.gnn-controls {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.gnn-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gnn-input-group label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.gnn-input-group select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    min-width: 150px;
}

.gnn-results {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    min-height: 100px;
}

.gnn-results .placeholder-text {
    color: var(--text-muted);
    text-align: center;
}

.gnn-results .loading {
    text-align: center;
    color: var(--primary);
}

.gnn-analysis .analysis-section {
    margin-bottom: 1.5rem;
}

.gnn-analysis .analysis-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gnn-analysis .recommendations {
    display: grid;
    gap: 1rem;
}

.rec-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rec-rank {
    background: var(--primary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.rec-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rec-score {
    margin-left: auto;
    color: var(--success);
    font-weight: 600;
}

.rec-explanation {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.synthesis-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.synthesis-stat {
    color: var(--text-secondary);
}

.synthesis-stat strong {
    color: var(--primary);
}

.insights {
    display: grid;
    gap: 0.75rem;
}

.insight-card {
    background: var(--bg-secondary);
    border-left: 3px solid var(--info);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.insight-card.warning {
    border-left-color: var(--warning);
}

.insight-card.success {
    border-left-color: var(--success);
}

.insight-card i {
    color: var(--info);
}

.insight-card .rec {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.combinations {
    display: grid;
    gap: 1rem;
}

.combo-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.combo-models {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.combo-model {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.combo-score {
    margin-left: auto;
    color: var(--success);
    font-weight: 600;
}

/* SPARC Phase Distribution */
.sparc-distribution {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.sparc-distribution h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
}

.sparc-phases-visual {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
}

.sparc-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.sparc-phase:hover {
    background: var(--bg-tertiary);
}

.phase-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.phase-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.phase-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Agent Detail Modal */
.agent-detail {
    color: var(--text-primary);
}

.agent-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.agent-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.agent-detail-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agent-detail-info h2 {
    margin: 0;
    font-size: 1.5rem;
}

.agent-detail-body .agent-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.agent-section {
    margin-bottom: 1.5rem;
}

.agent-section h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.phases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.phase-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
}

.phase-badge.phase-specification { border-left: 3px solid #3b82f6; }
.phase-badge.phase-pseudocode { border-left: 3px solid #8b5cf6; }
.phase-badge.phase-architecture { border-left: 3px solid #10b981; }
.phase-badge.phase-refinement { border-left: 3px solid #f59e0b; }
.phase-badge.phase-completion { border-left: 3px solid #06b6d4; }

.capabilities-list,
.model-affinity,
.recommendations-list,
.related-agents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.capability-tag,
.model-tag {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.capability-tag {
    border: 1px solid var(--primary);
}

.model-tag {
    border: 1px solid var(--secondary);
}

.rec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    width: 100%;
}

.rec-model {
    text-transform: capitalize;
}

.related-agent-tag {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.related-agent-tag:hover {
    opacity: 0.8;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #06b6d4;
}

.badge-green {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.badge-gray {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .agents-grid {
        grid-template-columns: 1fr;
    }

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

    .gnn-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .sparc-phases-visual {
        flex-wrap: wrap;
    }

    .sparc-phase {
        flex: 0 0 45%;
    }
}