/* ===================================
   🎨 Design DevOps Ultra-Moderne
   =================================== */

:root {
    --primary-neon: #5b8def;
    --secondary-neon: #b79cff;
    --success-neon: #34d399;
    --danger-neon: #fb7185;
    --warning-neon: #fbbf24;
    /* Vert lime fluo : promote actif / clignotement (distinct du deploy) */
    --promote-pulse-neon: #b79cff;
    --bg-dark: #090d17;
    --bg-card: rgba(255, 255, 255, 0.05);
    --text-primary: #eaf0fa;
    --text-secondary: #a6b4c8;
}

/* Hard override: always ensure Bootstrap modals are on top and clickable */
.modal-backdrop {
    pointer-events: none !important;
}

.modal,
.modal-dialog,
.modal-content {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

.modal button,
.modal .btn,
.modal .btn-close {
    pointer-events: auto !important;
    z-index: 10001 !important;
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(1100px 600px at 85% -8%, rgba(91, 141, 239, 0.07), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(183, 156, 255, 0.05), transparent 55%),
        #090d17 !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    min-height: 100vh;
    overflow-x: hidden;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1rem 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* Animated Background */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-animation::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(91, 141, 239, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(183, 156, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(52, 211, 153, 0.1) 0%, transparent 50%);
    animation: drift 20s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(50px, 100px) rotate(120deg); }
    66% { transform: translate(-50px, -100px) rotate(240deg); }
}

/* Header Moderne */
.modern-header {
    position: relative;
    z-index: 10;
    padding: 0.35rem 1.1rem;
    background: linear-gradient(180deg, rgba(9, 13, 23, 0.88), rgba(9, 13, 23, 0.72));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(91, 141, 239, 0.18);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.modern-logo {
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-neon), var(--secondary-neon));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(91, 141, 239, 0.35);
}

/* Navbar: compacter sans perdre en lisibilité */
.modern-header .navbar-brand img {
    width: 20px;
    height: 20px;
}

.modern-header .navbar-nav .nav-link {
    padding: 0.35rem 0.6rem;
    font-size: 0.92rem;
}

.modern-header .navbar-toggler {
    padding: 0.25rem 0.45rem;
    border-radius: 12px;
    border-color: rgba(91, 141, 239, 0.25) !important;
}

.modern-header .container-fluid {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Accent stylé: liseré lumineux subtil */
.modern-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(91, 141, 239, 0.0),
        rgba(91, 141, 239, 0.22),
        rgba(183, 156, 255, 0.16),
        rgba(52, 211, 153, 0.18),
        rgba(91, 141, 239, 0.0)
    );
    filter: blur(0.2px);
    pointer-events: none;
}

.navbar-dark .nav-link {
    color: var(--text-secondary);
    transition: all 0.3s ease;
    position: relative;
}

.navbar-dark .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-neon);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-dark .nav-link:hover {
    color: var(--primary-neon);
}

.navbar-dark .nav-link:hover::after {
    width: 80%;
}

/* Cards Modernes */
.modern-card {
    position: relative;
    background: var(--panel) !important;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.modern-card .card-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem !important;
}

.modern-card .card-body {
    padding: 1.5rem !important;
}

.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modern-card:hover {
    border-color: var(--accent-line) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.34) !important;
}

.modern-card:hover::before {
    opacity: 1;
}

/* Stats Cards */
.stat-card {
    position: relative;
    padding: 2rem !important;
    background: rgba(15, 23, 38, 0.6) !important;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-neon) !important;
    box-shadow: 0 20px 60px rgba(91, 141, 239, 0.3) !important;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.stat-card.projects .stat-icon {
    background: rgba(91, 141, 239, 0.2);
    color: var(--primary-neon);
    box-shadow: 0 0 30px rgba(91, 141, 239, 0.3);
}

.stat-card.success .stat-icon {
    background: rgba(52, 211, 153, 0.2);
    color: var(--success-neon);
    box-shadow: 0 0 30px rgba(52, 211, 153, 0.3);
}

.stat-card.failed .stat-icon {
    background: rgba(251, 113, 133, 0.2);
    color: var(--danger-neon);
    box-shadow: 0 0 30px rgba(251, 113, 133, 0.3);
}

.stat-card.running .stat-icon {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning-neon);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.5rem;
}

.stat-subtext {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-secondary) !important;
}

.stat-progress {
    width: 100%;
    height: 10px;
    margin-top: 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.stat-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 141, 239, 0.7), rgba(52, 211, 153, 0.95));
    transition: width 0.45s cubic-bezier(0.2, 1, 0.2, 1);
}

/* Stats HUD */
.hud-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1.2rem;
    padding: 1.1rem;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(15, 23, 38, 0.55), rgba(9, 13, 23, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow:
        0 25px 90px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(91, 141, 239, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.0rem;
}

.hud-stats::before {
    content: '';
    position: absolute;
    inset: -3px;
    background:
        conic-gradient(from 200deg,
            rgba(91, 141, 239, 0.0),
            rgba(91, 141, 239, 0.30),
            rgba(183, 156, 255, 0.20),
            rgba(52, 211, 153, 0.25),
            rgba(91, 141, 239, 0.0)
        );
    filter: blur(10px);
    opacity: 0.55;
    pointer-events: none;
}

.hud-stats::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 260px at 10% 0%, rgba(91, 141, 239, 0.22), transparent 55%),
        radial-gradient(700px 240px at 90% 25%, rgba(183, 156, 255, 0.14), transparent 60%),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 18px
        );
    opacity: 0.55;
    pointer-events: none;
}

.hud-stat {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1.05rem;
    border-radius: 26px;
    background: rgba(9, 13, 23, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    will-change: transform;
}

.hud-stat:first-child {
    grid-column: auto;
}

.hud-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 141, 239, 0.35);
    box-shadow: 0 0 0 1px rgba(91, 141, 239, 0.14), 0 24px 60px rgba(0, 0, 0, 0.35);
}

.hud-stat::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
    opacity: 0.0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.hud-stat:hover::before {
    opacity: 1;
}

.hud-stat .stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.hud-stat .stat-label {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    font-weight: 700;
}

.hud-stat .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Accent per tile (order in the template) */
.hud-stat:nth-child(1) {
    border-color: rgba(91, 141, 239, 0.42);
}
.hud-stat:nth-child(1) .stat-icon {
    background: rgba(91, 141, 239, 0.16);
    color: var(--primary-neon);
    box-shadow: 0 0 28px rgba(91, 141, 239, 0.18);
}
.hud-stat:nth-child(1) .stat-value {
    color: var(--primary-neon);
    font-size: 3.2rem;
}

.hud-stat:nth-child(2) {
    border-color: rgba(52, 211, 153, 0.42);
}
.hud-stat:nth-child(2) .stat-icon {
    background: rgba(52, 211, 153, 0.16);
    color: var(--success-neon);
    box-shadow: 0 0 28px rgba(52, 211, 153, 0.18);
}
.hud-stat:nth-child(2) .stat-value {
    color: var(--success-neon);
    font-size: 2.5rem;
}

.hud-stat:nth-child(3) {
    border-color: rgba(251, 113, 133, 0.42);
}
.hud-stat:nth-child(3) .stat-icon {
    background: rgba(251, 113, 133, 0.16);
    color: var(--danger-neon);
    box-shadow: 0 0 28px rgba(251, 113, 133, 0.18);
}
.hud-stat:nth-child(3) .stat-value {
    color: var(--danger-neon);
    font-size: 2.5rem;
}

.hud-stat:nth-child(4) {
    border-color: rgba(251, 191, 36, 0.42);
}
.hud-stat:nth-child(4) .stat-icon {
    background: rgba(251, 191, 36, 0.16);
    color: var(--warning-neon);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.18);
}
.hud-stat:nth-child(4) .stat-value {
    color: var(--warning-neon);
    font-size: 2.5rem;
}

/* Reliability bar: more “gauge” */
.hud-stat:nth-child(1) .stat-progress {
    height: 12px;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(91, 141, 239, 0.18);
}

.hud-stat:nth-child(1) .stat-progress > span {
    background: linear-gradient(90deg,
        rgba(91, 141, 239, 0.85),
        rgba(52, 211, 153, 0.95));
}

@media (prefers-reduced-motion: reduce) {
    .hud-stat { transition: none; }
}

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

.stat-card.projects .stat-value { color: var(--primary-neon); }
.stat-card.success .stat-value { color: var(--success-neon); }
.stat-card.failed .stat-value { color: var(--danger-neon); }
.stat-card.running .stat-value { color: var(--warning-neon); }

/* Badges Néon */
.badge-canceled,
.badge-cancelled {
    background: rgba(160, 174, 192, 0.16);
    color: rgba(210, 220, 235, 0.9);
    border: 1px solid rgba(210, 220, 235, 0.35);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.badge-success {
    background: rgba(52, 211, 153, 0.2);
    color: var(--success-neon);
    border: 1px solid var(--success-neon);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.badge-running {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning-neon);
    border: 1px solid var(--warning-neon);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    animation: glow 2s ease-in-out infinite;
}

.badge-failed {
    background: rgba(251, 113, 133, 0.2);
    color: var(--danger-neon);
    border: 1px solid var(--danger-neon);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.badge-pending {
    background: rgba(160, 174, 192, 0.2);
    color: var(--text-secondary);
    border: 1px solid var(--text-secondary);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.badge-promotion {
    background: rgba(251, 191, 36, 0.16);
    color: var(--warning-neon);
    border: 1px solid rgba(251, 191, 36, 0.55);
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-weight: 700;
}
.badge-promotion--uate {
    background: rgba(91, 141, 239, 0.16);
    color: var(--primary-neon);
    border-color: rgba(91, 141, 239, 0.55);
}
.badge-promotion--cate {
    background: rgba(251, 191, 36, 0.16);
    color: var(--warning-neon);
    border-color: rgba(251, 191, 36, 0.55);
}
.badge-promotion--live {
    background: rgba(52, 211, 153, 0.16);
    color: var(--success-neon);
    border-color: rgba(52, 211, 153, 0.55);
}

.badge-deploy {
    background: rgba(91, 141, 239, 0.12);
    color: var(--primary-neon);
    border: 1px solid rgba(91, 141, 239, 0.45);
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-weight: 700;
}
.badge-deploy--uate {
    background: rgba(91, 141, 239, 0.14);
    color: var(--primary-neon);
    border-color: rgba(91, 141, 239, 0.5);
}
.badge-deploy--cate {
    background: rgba(251, 191, 36, 0.14);
    color: var(--warning-neon);
    border-color: rgba(251, 191, 36, 0.5);
}
.badge-deploy--live {
    background: rgba(52, 211, 153, 0.14);
    color: var(--success-neon);
    border-color: rgba(52, 211, 153, 0.5);
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
    50% { box-shadow: 0 0 8px 0 rgba(251, 191, 36, 0.35); }
}

/* Status Icons */
.status-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-success { background-color: var(--success-neon); }
.status-running { background-color: var(--warning-neon); animation: pulse 2s infinite; }
.status-failed { background-color: var(--danger-neon); }
.status-pending { background-color: var(--text-secondary); }
.status-canceled,
.status-cancelled { background-color: rgba(210, 220, 235, 0.65); }

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

/* Buttons */
.btn-modern {
    padding: 0.65rem 1.3rem !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-line) !important;
    border-radius: var(--r-md);
    color: var(--primary-neon) !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer !important;
    font-size: 0.9rem;
}

.btn-sm.btn-modern {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem;
}

.btn-modern:hover {
    background: rgba(91, 141, 239, 0.18) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-line) !important;
}

.btn-modern:active {
    transform: translateY(-1px) !important;
}

/* Project tools sections */
.tools-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.tools-section {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.75rem;
}

.tools-section__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-neon);
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-size: 0.72rem;
    margin-bottom: 0.6rem;
}

.tools-section__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.tools-section__buttons .btn-modern {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.5rem;
}

/* Promotion buttons color progression: UATE -> CATE -> LIVE */
.tools-section__buttons .promo-btn {
    border-width: 1px !important;
}

.tools-section__buttons .promo-btn--uate {
    color: #5b8def !important;
    border-color: rgba(91, 141, 239, 0.65) !important;
    background: rgba(91, 141, 239, 0.11) !important;
}

.tools-section__buttons .promo-btn--uate:hover {
    background: rgba(91, 141, 239, 0.22) !important;
    box-shadow: 0 0 24px rgba(91, 141, 239, 0.45) !important;
}

.tools-section__buttons .promo-btn--cate {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.65) !important;
    background: rgba(251, 191, 36, 0.12) !important;
}

.tools-section__buttons .promo-btn--cate:hover {
    background: rgba(251, 191, 36, 0.22) !important;
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.42) !important;
}

.tools-section__buttons .promo-btn--live {
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.65) !important;
    background: rgba(52, 211, 153, 0.12) !important;
}

.tools-section__buttons .promo-btn--live:hover {
    background: rgba(52, 211, 153, 0.22) !important;
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.4) !important;
}

/* Action buttons (MR vs Issue severity hint) */
.tools-section__buttons .action-btn--mr {
    color: #5b8def !important;
    border-color: rgba(91, 141, 239, 0.65) !important;
    background: rgba(91, 141, 239, 0.11) !important;
}

.tools-section__buttons .action-btn--mr:hover {
    background: rgba(91, 141, 239, 0.22) !important;
    box-shadow: 0 0 24px rgba(91, 141, 239, 0.45) !important;
}

.tools-section__buttons .action-btn--issue {
    color: #fb7185 !important;
    border-color: rgba(255, 79, 122, 0.65) !important;
    background: rgba(255, 79, 122, 0.12) !important;
}

.tools-section__buttons .action-btn--issue:hover {
    background: rgba(255, 79, 122, 0.24) !important;
    box-shadow: 0 0 24px rgba(255, 79, 122, 0.45) !important;
}

.tools-section__buttons .action-btn--branch {
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, 0.65) !important;
    background: rgba(255, 193, 7, 0.12) !important;
}

.tools-section__buttons .action-btn--branch:hover {
    background: rgba(255, 193, 7, 0.24) !important;
    box-shadow: 0 0 24px rgba(255, 193, 7, 0.42) !important;
}

.mr-workflow-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-neon);
    font-weight: 800;
    letter-spacing: 0.35px;
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.55rem;
}

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

.btn-outline-primary:hover {
    background: rgba(91, 141, 239, 0.2);
    border-color: var(--primary-neon);
    color: var(--primary-neon);
}

/* Tables */
.table {
    color: var(--text-primary) !important;
    background: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-lo) !important;
    background: var(--surface-1) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    padding: 1rem 1rem !important;
    border-top: none !important;
}

.table thead th:first-child {
    border-top-left-radius: 10px;
}

.table thead th:last-child {
    border-top-right-radius: 10px;
}

.table tbody tr {
    transition: all 0.3s ease;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.table tbody tr:hover {
    background: rgba(91, 141, 239, 0.06) !important;
}

.table tbody td {
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    padding: 1.2rem 1rem !important;
    vertical-align: middle !important;
}

.table tbody td:first-child {
    padding-left: 1.5rem !important;
}

.table tbody td:last-child {
    padding-right: 1.5rem !important;
}

/* Pipeline Cards */
.pipeline-card {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.pipeline-card:hover {
    transform: translateX(5px);
    border-color: var(--primary-neon);
    box-shadow: 0 10px 40px rgba(91, 141, 239, 0.2);
}

/* Filters */
.filter-btn {
    padding: 0.7rem 1.4rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    margin: 0.25rem;
}

.filter-btn:hover {
    background: rgba(91, 141, 239, 0.1) !important;
    border-color: var(--primary-neon) !important;
    color: var(--primary-neon) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 141, 239, 0.2);
}

.filter-btn.active {
    background: rgba(91, 141, 239, 0.2) !important;
    border-color: var(--primary-neon) !important;
    color: var(--primary-neon) !important;
    box-shadow: 0 0 20px rgba(91, 141, 239, 0.4), inset 0 0 10px rgba(91, 141, 239, 0.1);
    font-weight: 600;
}

/* Dashboard home — compacter le header et les stats simples */
.dashboard-home {
    padding-top: 0.75rem;
}

/* Dashboard — page title */
.dashboard-hero {
    position: relative;
    padding: 0.35rem 0.25rem 0.85rem 0.25rem;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(91, 141, 239, 0.0),
        rgba(91, 141, 239, 0.35),
        rgba(183, 156, 255, 0.22),
        rgba(91, 141, 239, 0.0)
    );
    opacity: 0.9;
}

.dashboard-page-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 900;
    font-size: 1.55rem;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.dashboard-page-title__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: radial-gradient(60% 60% at 35% 30%, rgba(91, 141, 239, 0.35), rgba(91, 141, 239, 0.06));
    border: 1px solid rgba(91, 141, 239, 0.35);
    box-shadow: 0 10px 30px rgba(91, 141, 239, 0.10);
    flex: 0 0 auto;
}

.dashboard-page-title__text {
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(91, 141, 239,0.95));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dashboard-page-title__badge {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.10);
    color: rgba(52, 211, 153, 0.95);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.10);
}

.dashboard-page-subtitle {
    margin-top: 0.25rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    max-width: 72ch;
}

/* Quick access — rail de pills (plus propre que la grille bootstrap) */
.quick-access-title {
    color: var(--primary-neon);
    font-weight: 800;
    letter-spacing: 0.4px;
}

.quick-access-rail {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.quick-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(91, 141, 239, 0.25);
    background: rgba(91, 141, 239, 0.06);
    color: var(--text-primary);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    max-width: 100%;
}

.quick-access-pill__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    flex: 0 0 auto;
}

.quick-access-pill__text {
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}

.quick-access-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 141, 239, 0.55);
    background: rgba(91, 141, 239, 0.10);
    box-shadow: 0 10px 30px rgba(91, 141, 239, 0.12);
}

@media (max-width: 520px) {
    .dashboard-page-title { font-size: 1.18rem; }
    .dashboard-page-title__icon { width: 34px; height: 34px; border-radius: 10px; }
    .dashboard-page-subtitle { font-size: 0.86rem; }

    .quick-access-rail {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
    }
    .quick-access-rail::-webkit-scrollbar { height: 6px; }
    .quick-access-rail::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.14);
        border-radius: 999px;
    }
    .quick-access-pill__text { max-width: 22ch; }
}

.dashboard-home #statsContainer .hud-stat {
    padding: 0.95rem 0.95rem;
    border-radius: 22px;
}

.dashboard-home #statsContainer .stat-value {
    font-size: 1.6rem;
}

.dashboard-home #statsContainer .stat-subtext {
    font-size: 0.75rem;
}

/* Breadcrumb */
.breadcrumb {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0.55rem 1rem !important;
    margin-bottom: 0.9rem !important;
}

.breadcrumb-item a {
    color: var(--primary-neon);
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #84acff;
}

/* Realtime Indicator */
.realtime-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 0.8rem 1.5rem;
    background: rgba(52, 211, 153, 0.15) !important;
    border: 2px solid var(--success-neon) !important;
    border-radius: 50px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(52, 211, 153, 0.4), inset 0 0 20px rgba(52, 211, 153, 0.1);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--success-neon) !important;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Modern Modal Styles */
.modal {
    z-index: 10000 !important;
}

.modal.show {
    display: block !important;
}

.modal-dialog {
    z-index: 10001 !important;
    pointer-events: auto !important;
    position: relative !important;
}

.modal-content {
    background-color: var(--panel) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    color: var(--text-primary) !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10002 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: transparent !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-body {
    color: var(--text-primary) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-subtle) !important;
    background: transparent !important;
}

.modal-backdrop {
    z-index: 9999 !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    top: unset !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
    top: unset !important;
}

/* Ensure modal dialog is above backdrop */
.modal.show .modal-dialog {
    z-index: 10001 !important;
    position: relative !important;
}

.modal.show .modal-content {
    z-index: 10002 !important;
    position: relative !important;
}

.btn-close {
    filter: invert(1);
    opacity: 0.8;
    cursor: pointer !important;
}

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

/* Force all interactive elements in any Bootstrap modal to be clickable, even avec overlays custom */
.modal button,
.modal .btn,
.modal .btn-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10010 !important;
    position: relative !important;
}

/* Compact status pills used in stage jobs modal */
.stage-modal-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    border: 1px solid transparent;
    line-height: 1.1;
}

.stage-modal-status--success {
    color: var(--success-neon);
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.45);
}

.stage-modal-status--failed {
    color: var(--danger-neon);
    background: rgba(251, 113, 133, 0.15);
    border-color: rgba(251, 113, 133, 0.45);
}

.stage-modal-status--running {
    color: var(--warning-neon);
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.5);
}

.stage-modal-status--pending {
    color: var(--text-secondary);
    background: rgba(160, 174, 192, 0.14);
    border-color: rgba(160, 174, 192, 0.4);
}

.stage-modal-status--muted {
    color: #9aa6c4;
    background: rgba(154, 166, 196, 0.12);
    border-color: rgba(154, 166, 196, 0.35);
}

.pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success-neon);
    box-shadow: 0 0 25px var(--success-neon), 0 0 50px rgba(52, 211, 153, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Removed fade-update animation to prevent flashing */

/* Loading */
.loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.loading i {
    font-size: 3rem;
    color: var(--primary-neon);
    animation: spin 1s linear infinite;
}

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

/* Alerts */
.alert {
    border-radius: var(--r-lg);
    border: none;
}

.alert-info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--primary-neon);
}

.alert-danger {
    background: rgba(251, 113, 133, 0.1);
    border: 1px solid var(--danger-neon);
    color: var(--danger-neon);
}

.alert-success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid var(--success-neon);
    color: var(--success-neon);
}

/* Job Logs */
.job-logs {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    border-radius: 15px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid rgba(91, 141, 239, 0.2);
    scroll-behavior: smooth;
}

/* Job Detail — spacing for Job Information rows */
.job-info-list li {
    margin: 0.4rem 0;
}

.pipeline-info-list li {
    margin: 0.4rem 0;
}

/* Use flex+gap for consistent vertical spacing */
.user-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.user-info-list li {
    margin: 0;
    padding: 0; /* default reset, let specific blocks define their own padding */
}

/* In pipeline_detail.html.twig, user-info-list contains job-additional-item rows.
   The generic padding reset must not wipe those paddings. */
.user-info-list li.job-additional-item {
    padding: 0.65rem 0.8rem;
}

.user-info-list li.job-additional-link {
    margin-top: 0; /* rely on flex gap for vertical spacing */
}

.job-info-list strong {
    letter-spacing: 0.2px;
}

/* Job Detail — Additional Info (more spacing + cleaner layout) */
.job-additional-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    margin: 0.55rem 0;
    background: rgba(91, 141, 239, 0.04);
    border: 1px solid rgba(91, 141, 239, 0.12);
    border-radius: 14px;
}

.job-additional-item__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.job-additional-item__value {
    min-width: 0;
    display: inline-flex;
    justify-content: flex-end;
}

.job-additional-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(91, 141, 239, 0.10);
    border: 1px solid rgba(91, 141, 239, 0.26);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runner-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--warning-neon);
    font-weight: 900;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-additional-link {
    margin-top: 0.25rem;
}

.runner-pill:hover,
.job-additional-pill:hover {
    white-space: normal;
}

/* Fullscreen mode for job logs */
.modern-card.fullscreen-logs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    background: #090d17;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: none;
}

.modern-card.fullscreen-logs .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

.modern-card.fullscreen-logs .job-logs {
    flex: 1;
    max-height: none;
    height: 100%;
    border-radius: 10px;
    font-size: 14px;
    padding: 25px;
}

.modern-card.fullscreen-logs .card-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.modern-card.fullscreen-logs #jobLogs {
    font-size: 14px;
    line-height: 1.6;
}

/* Auto-scroll toggle button */
#toggleAutoScroll {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem !important;
}

/* Restart job button */
.btn-restart {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem !important;
    background: rgba(91, 141, 239, 0.1);
    border-color: rgba(91, 141, 239, 0.3);
    color: var(--primary-neon);
    transition: all 0.3s ease;
}

.btn-restart:hover:not(:disabled) {
    background: rgba(91, 141, 239, 0.2);
    border-color: var(--primary-neon);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 141, 239, 0.2);
}

.btn-restart:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: rgba(128, 128, 128, 0.1) !important;
    border-color: rgba(128, 128, 128, 0.3) !important;
    color: rgba(128, 128, 128, 0.7) !important;
}

/* Spinner animation for restart button */
.btn-restart .spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}

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

#toggleAutoScroll.active {
    background: rgba(91, 141, 239, 0.2) !important;
    border-color: var(--primary-neon) !important;
    color: var(--primary-neon) !important;
    box-shadow: 0 0 10px rgba(91, 141, 239, 0.3) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-value {
        font-size: 2rem;
    }
    
    .modern-logo {
        font-size: 1.4rem;
    }
    
    .realtime-indicator {
        bottom: 10px;
        right: 10px;
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }
}

/* Container */
.container-fluid {
    position: relative;
    z-index: 10;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 0.75rem !important;
}

/* Rows spacing */
.row {
    margin-bottom: 1.5rem;
}

.row.mb-4 {
    margin-bottom: 2rem !important;
}

/* Override Bootstrap */
.card {
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: var(--r-lg) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Neutralize Bootstrap light header utilities on the dark theme (e.g. Overview) */
.card-header.bg-white,
.card-header.bg-light {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

.card-body {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.card-title {
    color: var(--primary-neon) !important;
}

/* Breadcrumb Override */
.breadcrumb {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--primary-neon) !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, div {
    user-select: text !important;
}

/* Lead text */
.lead {
    color: var(--text-secondary) !important;
}

/* Display */
.display-4 {
    background: linear-gradient(135deg, var(--primary-neon), var(--secondary-neon));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem !important;
}

/* Project detail header: tighten typography */
.display-5 {
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 0.45rem !important;
}

.display-5 i {
    opacity: 0.95;
    margin-right: 0.3rem;
}

.lead {
    margin-bottom: 1rem !important;
}

/* Links */
a {
    color: var(--primary-neon);
    text-decoration: none;
}

a:hover {
    color: #84acff;
}

/* Code */
code {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-neon);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* Small text */
small {
    color: var(--text-secondary);
}

/* Fix pour la sélection de texte */
* {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

/* Curseurs corrects */
button, a, .btn, [onclick], [role="button"] {
    cursor: pointer !important;
    user-select: none !important;
}

.filter-btn, .modern-card:hover {
    cursor: pointer !important;
}

td {
    cursor: text !important;
}

/* Override Bootstrap button classes — semantic-aware (no longer all-azure) */
.btn-primary, .btn-info {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-line) !important;
    color: var(--primary-neon) !important;
}
.btn-secondary {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}
.btn-success {
    background: rgba(52, 211, 153, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    color: var(--success-neon) !important;
}
.btn-danger {
    background: rgba(251, 113, 133, 0.12) !important;
    border: 1px solid rgba(251, 113, 133, 0.5) !important;
    color: var(--danger-neon) !important;
}
.btn-warning {
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
    color: var(--warning-neon) !important;
}

.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-warning:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px);
}

.btn-outline-primary, .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--primary-neon) !important;
}

.btn-outline-primary:hover, .btn-outline-secondary:hover {
    background: rgba(91, 141, 239, 0.1) !important;
    border-color: var(--primary-neon) !important;
}

/* Badge overrides */
.badge {
    user-select: text !important;
}

.bg-secondary {
    background: rgba(160, 174, 192, 0.2) !important;
    border: 1px solid var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

.badge.bg-info {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-line) !important;
    color: var(--primary-neon) !important;
}

/* Text utilities */
.text-decoration-none {
    color: var(--primary-neon) !important;
}

.text-decoration-none:hover {
    color: #84acff !important;
}

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

/* Strong text */
strong {
    color: var(--text-primary) !important;
}

/* Table row */
.table tbody tr:hover td {
    color: var(--text-primary) !important;
}

/* Fix pour les icônes */
i {
    user-select: none !important;
}

/* Form controls */
input, textarea, select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Placeholder (rechercher) */
input::placeholder, textarea::placeholder, select::placeholder {
    color: rgba(160,174,192,0.85) !important;
    opacity: 1 !important;
}

input:focus, textarea:focus, select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-neon) !important;
    box-shadow: 0 0 0 0.25rem rgba(91, 141, 239, 0.25) !important;
}

/* ================================
   🎯 Style GitLab pour Jobs/Stages
   ================================ */

/* Container des stages */
.stages-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 141, 239, 0.3) rgba(255, 255, 255, 0.05);
}

.stages-container::-webkit-scrollbar {
    height: 8px;
}

.stages-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.stages-container::-webkit-scrollbar-thumb {
    background: rgba(91, 141, 239, 0.3);
    border-radius: 4px;
}

.stages-container::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 141, 239, 0.5);
}

/* Colonne de stage */
.stage-column {
    min-width: 280px;
    flex-shrink: 0;
    position: relative;
}

.stages-flow .stage-column:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 42px;
    right: -0.9rem;
    width: 1.8rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 141, 239,0.12), rgba(91, 141, 239,0.55), rgba(91, 141, 239,0.12));
    box-shadow: 0 0 10px rgba(91, 141, 239,0.4);
}

.stages-flow .stage-column:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 38px;
    right: -0.15rem;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid rgba(91, 141, 239,0.75);
}

/* Header du stage */
.stage-header {
    padding: 1rem 1.5rem;
    background: rgba(91, 141, 239, 0.1);
    border: 1px solid var(--primary-neon);
    border-radius: 12px 12px 0 0;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary-neon);
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(91, 141, 239, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.stage-header__name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0; /* Evite que le texte pousse les métriques hors du header */
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.stage-header__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stage-meta {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    text-transform: none;
}

.stage-meta--count {
    color: var(--primary-neon);
    border: 1px solid rgba(91, 141, 239, 0.35);
    background: rgba(91, 141, 239, 0.12);
}

.stage-meta--running {
    color: var(--warning-neon);
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
}

.stage-meta--failed {
    color: var(--danger-neon);
    border: 1px solid rgba(251, 113, 133, 0.35);
    background: rgba(251, 113, 133, 0.12);
}

.stage-meta--success {
    color: var(--success-neon);
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.12);
}

/* Liste des jobs */
.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(15, 23, 38, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 12px 12px;
    min-height: 120px;
}

/* Card de job - Style GitLab */
.job-card {
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.job-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--text-secondary);
    transition: all 0.3s ease;
}

.job-card.success::before {
    background: var(--success-neon);
    box-shadow: 0 0 10px var(--success-neon);
}

.job-card.failed::before {
    background: var(--danger-neon);
    box-shadow: 0 0 10px var(--danger-neon);
}

.job-card.running::before {
    background: var(--warning-neon);
    box-shadow: 0 0 10px var(--warning-neon);
    animation: pulse 2s infinite;
}

.job-card.pending::before {
    background: var(--text-secondary);
}

.job-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-neon);
    box-shadow: 0 8px 24px rgba(91, 141, 239, 0.2);
    background: rgba(91, 141, 239, 0.05);
}

/* Nom du job */
.job-name {
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    flex-wrap: wrap; /* Long nom => on passe sur plusieurs lignes */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.job-name i {
    color: var(--primary-neon);
    font-size: 1rem;
}

/* Statut du job */
.job-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-status.success {
    background: rgba(52, 211, 153, 0.15);
    color: var(--success-neon);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.job-status.failed {
    background: rgba(251, 113, 133, 0.15);
    color: var(--danger-neon);
    border: 1px solid rgba(251, 113, 133, 0.3);
}

.job-status.running {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning-neon);
    border: 1px solid rgba(251, 191, 36, 0.3);
    animation: glow 2s infinite;
}

.job-status.pending {
    background: rgba(160, 174, 192, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(160, 174, 192, 0.3);
}

.job-status.canceled, .job-status.skipped {
    background: rgba(160, 174, 192, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(160, 174, 192, 0.2);
}

/* Info supplémentaires du job */
.job-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.job-info-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.job-info-item i {
    color: var(--primary-neon);
    font-size: 0.85rem;
}

/* ID du job */
.job-id {
    font-family: 'Courier New', monospace;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.job-info-item--depends {
    flex-basis: 100%;
    margin-top: 0.15rem;
    color: var(--text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Icône de statut dans le job */
.job-status i {
    font-size: 0.9rem;
}

/* Animation pour le status running */
@keyframes jobPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.job-card.running {
    animation: jobPulse 2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .stages-container {
        flex-direction: column;
    }
    
    .stage-column {
        min-width: 100%;
    }

    /* En responsive, on évite que le nom long du stage pousse les métriques */
    .stage-header {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.4rem;
        justify-content: flex-start;
    }

    .stage-header__name {
        order: 1;
        flex: 1 1 100%;
        justify-content: flex-start;
        display: inline-flex;
    }

    .stage-header__meta {
        order: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-start;
        display: flex; /* On évite les comportements “inline-flex” qui peuvent garder la même ligne */
    }

    /* Advanced pipeline (mode advanced / job flow advanced) */
    .adv-stage__head {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 0.35rem;
    }

    .adv-stage__title {
        order: 1;
        flex: 1 1 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .adv-stage__metrics {
        order: 2;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .stages-flow .stage-column:not(:last-child)::after,
    .stages-flow .stage-column:not(:last-child)::before {
        display: none;
    }
}

/* Fenêtres “moyennes” (ex: laptop / split view) où le head advanced peut déborder */
@media (max-width: 1160px), (max-height: 1182px) {
    .adv-stage__head {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 0.35rem;
    }

    .adv-stage__title {
        flex: 1 1 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .adv-stage__metrics {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Section titre pour Jobs */
.jobs-section-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(91, 141, 239, 0.3);
}

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

.jobs-section-title h2 {
    font-size: 1.5rem;
    color: var(--primary-neon);
    margin: 0;
}

.jobs-flow-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    letter-spacing: 0.4px;
}

.jobs-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.6rem;
}

.jobs-view-switcher__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
}

.jobs-view-switcher__select {
    min-width: 140px;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(91, 141, 239, 0.35) !important;
    color: var(--text-primary) !important;
    border-radius: 999px !important;
    padding: 0.35rem 2.1rem 0.35rem 0.85rem !important;
    line-height: 1.15 !important;
    font-weight: 700;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;

    /* Remove native select styling + add custom caret */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f3ff' fill-opacity='0.85' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 16px 16px;
}

.jobs-view-switcher__select:hover {
    background: rgba(91, 141, 239, 0.07) !important;
    border-color: rgba(91, 141, 239, 0.55) !important;
}

.jobs-view-switcher__select:focus {
    border-color: var(--primary-neon) !important;
    box-shadow: 0 0 0 0.18rem rgba(91, 141, 239, 0.2) !important;
    outline: none !important;
}

.advanced-flow {
    margin-top: 0.6rem;
}

.jobs-graph {
    margin-top: 0.6rem;
    border-radius: 16px;
    border: 1px solid rgba(91, 141, 239, 0.25);
    background: radial-gradient(600px 260px at 10% 0%, rgba(91, 141, 239, 0.08), transparent 60%),
                radial-gradient(600px 260px at 90% 0%, rgba(52, 211, 153, 0.08), transparent 60%),
                rgba(9, 13, 23, 0.9);
    overflow: hidden;
    padding: 0.7rem;
}

.jobs-graph__svg {
    width: 100%;
    min-width: 1100px;
    height: 620px;
}

.jobs-graph__viewport {
    width: 100%;
    overflow: auto;
    max-height: 70vh;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(3, 7, 23, 0.75);
    cursor: grab;
    padding: 0.2rem 0.1rem 0.3rem;
}

.jobs-graph__viewport.is-panning {
    cursor: grabbing;
}

.jobs-graph__toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.1rem 0 0.5rem;
    flex-wrap: wrap;
}

.jobs-graph__search {
    min-width: 210px;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.jobs-graph__search::placeholder {
    color: rgba(210, 226, 245, 0.72);
}

.jobs-graph__zoom-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    font-size: 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 141, 239, 0.34);
    background: rgba(91, 141, 239, 0.08);
    color: rgba(224, 248, 255, 0.98);
    padding: 0.18rem 0.45rem;
}

.jobs-graph__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: rgba(210, 224, 238, 0.92);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    margin: 0.15rem 0 0.45rem;
}

.jobs-graph__hint code {
    color: var(--primary-neon);
}

.jobs-graph__hint--ok {
    color: rgba(180, 255, 220, 0.95);
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.11);
}

.jobs-graph__focus {
    margin: 0.15rem 0 0.5rem;
    font-size: 0.78rem;
    color: rgba(180, 220, 245, 0.95);
    line-height: 1.35;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    border: 1px dashed rgba(91, 141, 239, 0.35);
    background: rgba(91, 141, 239, 0.07);
    cursor: pointer;
}

.jobs-graph__edge {
    stroke: rgba(91, 141, 239, 0.55);
    stroke-width: 1.8;
    marker-end: url(#jobs-graph-arrow);
    opacity: 0.9;
    fill: none;
    transition: opacity 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
}

.jobs-graph__edge-arrow {
    fill: rgba(91, 141, 239, 0.8);
}

.jobs-graph__node-rect {
    fill: rgba(15, 20, 48, 0.95);
    stroke: rgba(91, 141, 239, 0.4);
    stroke-width: 1.4;
    transition: opacity 140ms ease, stroke 140ms ease, fill 140ms ease, transform 140ms ease;
}

.jobs-graph__node-rect--success {
    stroke: rgba(52, 211, 153, 0.9);
}

.jobs-graph__node-rect--failed {
    stroke: rgba(251, 113, 133, 0.9);
}

.jobs-graph__node-text {
    fill: #ffffff;
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: 600;
}

.jobs-graph__node-subtext {
    fill: rgba(200, 220, 240, 0.86);
    font-size: 10px;
    text-anchor: middle;
    dominant-baseline: central;
}

.jobs-graph__stage-label {
    fill: rgba(160, 174, 192, 0.96);
    font-size: 12px;
    text-anchor: middle;
    dominant-baseline: central;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.jobs-graph__node {
    cursor: pointer;
}

.jobs-graph__node.is-search-hit .jobs-graph__node-rect {
    stroke: rgba(255, 255, 255, 0.98);
    stroke-width: 2.1;
    fill: rgba(23, 35, 78, 0.98);
}

.jobs-graph__node.is-dim .jobs-graph__node-rect,
.jobs-graph__node.is-dim .jobs-graph__node-text,
.jobs-graph__node.is-dim .jobs-graph__node-subtext {
    opacity: 0.22;
}

.jobs-graph__edge.is-dim {
    opacity: 0.12;
}

.jobs-graph__node.is-focus .jobs-graph__node-rect {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2.2;
    fill: rgba(24, 30, 66, 0.98);
}

.jobs-graph__node.is-upstream .jobs-graph__node-rect {
    stroke: rgba(251, 191, 36, 0.9);
}

.jobs-graph__node.is-downstream .jobs-graph__node-rect {
    stroke: rgba(52, 211, 153, 0.92);
}

.jobs-graph__edge.is-active {
    opacity: 0.95;
    stroke-width: 2.1;
    stroke: rgba(255, 255, 255, 0.92);
}

.jobs-galaxy3d {
    margin-top: 0.6rem;
    border-radius: 16px;
    border: 1px solid rgba(91, 141, 239, 0.28);
    background: linear-gradient(160deg, rgba(6, 10, 30, 0.96), rgba(11, 18, 45, 0.96));
    padding: 0.6rem;
}

.jobs-galaxy3d__hud {
    margin-bottom: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0.45rem 0.7rem;
    background: rgba(8, 14, 34, 0.78);
}

.jobs-galaxy3d__title {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: rgba(218, 242, 255, 0.98);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jobs-galaxy3d__subtitle {
    margin-top: 0.22rem;
    color: rgba(189, 210, 232, 0.95);
    font-size: 0.78rem;
    line-height: 1.3;
}

.jobs-galaxy3d__kpis {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.jobs-galaxy3d__kpi {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.14rem 0.52rem;
    font-size: 0.72rem;
    color: rgba(218, 236, 255, 0.94);
    background: rgba(255, 255, 255, 0.04);
}

.jobs-galaxy3d__toolbar {
    margin-top: 0.42rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
}

.jobs-galaxy3d__search {
    width: 210px;
    max-width: 100%;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

.jobs-galaxy3d__toolbar .btn.is-active {
    border-color: rgba(91, 141, 239, 0.9);
    box-shadow: 0 0 0 0.12rem rgba(91, 141, 239, 0.18);
}

.jobs-galaxy3d__stages {
    margin-top: 0.42rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.26rem;
}

.jobs-galaxy3d__batch {
    margin-top: 0.42rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.3rem 0.46rem;
}

.jobs-galaxy3d__batch-label {
    font-size: 0.72rem;
    color: rgba(212, 232, 255, 0.96);
}

.jobs-galaxy3d__batch-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.jobs-galaxy3d__batch-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(91, 141, 239, 0.95), rgba(52, 211, 153, 0.95));
    transition: width 170ms ease;
}

.jobs-galaxy3d__batch-meta {
    min-width: 50px;
    text-align: right;
    font-size: 0.7rem;
    color: rgba(201, 227, 251, 0.9);
}

.jobs-galaxy3d__stage-chip {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(214, 232, 250, 0.96);
    border-radius: 999px;
    font-size: 0.68rem;
    padding: 0.12rem 0.46rem;
}

.jobs-galaxy3d__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0.55rem;
}

.jobs-galaxy3d__canvas {
    width: 100%;
    height: 560px;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(1200px 500px at 50% 20%, rgba(91, 141, 239, 0.08), rgba(2, 6, 20, 0.96));
}

.jobs-galaxy3d__panel {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 14, 35, 0.88);
    padding: 0.6rem;
    min-height: 560px;
    overflow: auto;
}

.jobs-galaxy3d__panel-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.jobs-galaxy3d__panel.is-entering .jobs-galaxy3d__panel-content {
    animation: galaxyPanelIn 220ms ease;
}

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

.jobs-galaxy3d__panel-title {
    color: rgba(229, 245, 255, 0.98);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.22rem;
}

.jobs-galaxy3d__panel-empty {
    color: rgba(171, 197, 223, 0.84);
    font-size: 0.78rem;
}

.jobs-galaxy3d__panel-meta {
    color: rgba(165, 194, 222, 0.9);
    font-size: 0.74rem;
    margin-bottom: 0.45rem;
}

.jobs-galaxy3d__panel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
}

.jobs-galaxy3d__panel-stats span {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.7rem;
    color: rgba(223, 240, 255, 0.95);
}

.jobs-galaxy3d__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-bottom: 0.55rem;
}

.jobs-galaxy3d__list-title {
    color: rgba(196, 231, 255, 0.97);
    text-transform: uppercase;
    font-size: 0.69rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.24rem;
}

.jobs-galaxy3d__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem;
    margin-bottom: 0.55rem;
}

.jobs-galaxy3d__list span {
    font-size: 0.7rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(221, 242, 255, 0.96);
    background: rgba(255, 255, 255, 0.03);
}

.jobs-galaxy3d__list em {
    font-size: 0.72rem;
    color: rgba(163, 186, 209, 0.8);
}

@media (max-width: 1200px) {
    .jobs-galaxy3d__layout {
        grid-template-columns: 1fr;
    }

    .jobs-galaxy3d__panel {
        min-height: 280px;
    }
}

.adv-ops {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(10, 16, 36, 0.55);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.adv-command {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.65rem;
}

.adv-command__title {
    color: var(--primary-neon);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.adv-command__risk {
    margin-top: 0.25rem;
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    border: 1px solid rgba(160, 174, 192, 0.35);
    color: var(--text-secondary);
    background: rgba(160, 174, 192, 0.12);
}

.adv-command__risk--critical {
    color: var(--danger-neon);
    border-color: rgba(251, 113, 133, 0.45);
    background: rgba(251, 113, 133, 0.15);
}

.adv-command__risk--elevated {
    color: var(--warning-neon);
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.14);
}

.adv-command__risk--stable {
    color: var(--success-neon);
    border-color: rgba(52, 211, 153, 0.42);
    background: rgba(52, 211, 153, 0.14);
}

.adv-command__actions {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.adv-command__btn {
    font-size: 0.66rem !important;
    padding: 0.22rem 0.55rem !important;
    line-height: 1.1 !important;
}

.adv-command__risk-help {
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.71rem;
    line-height: 1.35;
    max-width: 920px;
}

.adv-command__risk-legend {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    color: rgba(160, 174, 192, 0.95);
    font-size: 0.66rem;
}

.adv-ops__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.adv-kpi {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.adv-kpi__label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--text-secondary);
}

.adv-kpi__value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-neon);
}

.adv-ops__rail {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 0.55rem;
}

.adv-rail__node {
    min-width: 170px;
    max-width: 240px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.03);
}

.adv-rail__node--success { border-color: rgba(52, 211, 153, 0.35); }
.adv-rail__node--failed  { border-color: rgba(251, 113, 133, 0.35); }
.adv-rail__node--active  { border-color: rgba(251, 191, 36, 0.4); }

.adv-rail__name {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.adv-rail__meta {
    font-size: 0.64rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.adv-rail__arrow {
    color: rgba(91, 141, 239, 0.6);
    font-size: 0.82rem;
    flex-shrink: 0;
}

.adv-ops__signals {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.45rem;
}

.adv-ops__signals-title {
    color: var(--primary-neon);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.adv-ops__signals ul {
    margin: 0;
    padding-left: 1rem;
}

.adv-ops__signals li {
    color: var(--text-secondary);
    font-size: 0.72rem;
    margin-bottom: 0.1rem;
}

.adv-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.adv-stage {
    background: rgba(18, 25, 48, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.8rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.adv-stage--running {
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18), 0 0 18px rgba(251, 191, 36, 0.15);
}

.adv-stage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.adv-stage__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary-neon);
}

.adv-stage__metrics {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.adv-stage__metrics .ok { color: var(--success-neon); }
.adv-stage__metrics .ko { color: var(--danger-neon); }
.adv-stage__metrics .run { color: var(--warning-neon); }

.adv-stage__bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    margin-bottom: 0.65rem;
}

.adv-stage__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 141, 239, 0.7), rgba(52, 211, 153, 0.9));
    transition: width 0.35s ease;
}

.adv-stage--running .adv-stage__bar > span {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.6), rgba(91, 141, 239, 0.85), rgba(251, 191, 36, 0.6));
    background-size: 200% 100%;
    animation: advBarFlow 1.4s linear infinite;
}

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

.adv-stage__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: stretch;
}

.adv-chip {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    border-radius: 10px;
    padding: 0.35rem 0.55rem;
    font-size: 0.69rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    overflow: hidden;
}

.adv-chip__name {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    font-size: 0.73rem;
    font-weight: 700;
}

.adv-chip__status {
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-size: 0.62rem;
}

.adv-chip__depends {
    margin-top: 0.22rem;
    font-size: 0.66rem;
    color: rgba(170, 220, 245, 0.92);
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
    word-break: break-word;
    width: 100%;
}

.job-depends-line {
    display: inline-block;
    margin-top: 0.2rem;
    color: rgba(170, 220, 245, 0.95);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.adv-chip--success { border-color: rgba(52, 211, 153, 0.45); color: var(--success-neon); }
.adv-chip--failed { border-color: rgba(251, 113, 133, 0.45); color: var(--danger-neon); }
.adv-chip--running { border-color: rgba(251, 191, 36, 0.45); color: var(--warning-neon); }
.adv-chip--pending, .adv-chip--created { border-color: rgba(160, 174, 192, 0.45); color: var(--text-secondary); }

.adv-chip__loader {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.2);
    overflow: hidden;
    margin-top: 0.15rem;
}

.adv-chip__loader > span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(251, 191, 36,0), rgba(251, 191, 36,1), rgba(251, 191, 36,0));
    animation: advChipRun 1.1s ease-in-out infinite;
}

.adv-chip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.adv-chip__btn {
    padding: 0.22rem 0.5rem !important;
    font-size: 0.64rem !important;
    line-height: 1.05 !important;
}

@keyframes advChipRun {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(260%); }
}

/* Badge pour le compteur de jobs */
.jobs-count {
    background: rgba(91, 141, 239, 0.2);
    color: var(--primary-neon);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--primary-neon);
}

/* ================================
   🔔 Système de Toast Notifications
   ================================ */

/* Container des toasts */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    pointer-events: none;
}

/* Toast individuel */
.toast-notification {
    pointer-events: all;
    padding: 1.2rem 1.5rem;
    background: rgba(15, 23, 38, 0.95);
    backdrop-filter: blur(30px);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.3s ease;
    cursor: pointer;
}

.toast-notification:hover {
    transform: translateX(-5px) scale(1.02);
    box-shadow: 0 15px 50px rgba(91, 141, 239, 0.3);
}

/* Toast Success */
.toast-notification.success {
    border-color: var(--success-neon);
    box-shadow: 0 10px 40px rgba(52, 211, 153, 0.3), inset 0 0 20px rgba(52, 211, 153, 0.05);
}

.toast-notification.success .toast-icon {
    background: rgba(52, 211, 153, 0.2);
    color: var(--success-neon);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
}
.toast-notification.success { border-left: 4px solid var(--success-neon); }

/* Toast Error */
.toast-notification.error {
    border-color: var(--danger-neon);
    box-shadow: 0 10px 40px rgba(251, 113, 133, 0.3), inset 0 0 20px rgba(251, 113, 133, 0.05);
}

.toast-notification.error .toast-icon {
    background: rgba(251, 113, 133, 0.2);
    color: var(--danger-neon);
    box-shadow: 0 0 20px rgba(251, 113, 133, 0.5);
}
.toast-notification.error { border-left: 4px solid var(--danger-neon); }

/* Toast Running */
.toast-notification.running {
    border-color: var(--warning-neon);
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.05);
}

.toast-notification.running .toast-icon {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning-neon);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    animation: pulse 2s infinite;
}
.toast-notification.running { border-left: 4px solid var(--warning-neon); }

/* Toast Info */
.toast-notification.info {
    border-color: var(--primary-neon);
    box-shadow: 0 10px 40px rgba(91, 141, 239, 0.3), inset 0 0 20px rgba(91, 141, 239, 0.05);
}

.toast-notification.info .toast-icon {
    background: rgba(91, 141, 239, 0.2);
    color: var(--primary-neon);
    box-shadow: 0 0 20px rgba(91, 141, 239, 0.5);
}
.toast-notification.info { border-left: 4px solid var(--primary-neon); }

/* Icône du toast */
.toast-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Contenu du toast */
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.toast-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.toast-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-project {
    font-size: 0.8rem;
    color: var(--primary-neon);
    font-weight: 600;
    margin-top: 0.2rem;
}

/* Bouton fermer */
.toast-close {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Barre de progression du toast */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-neon), var(--success-neon));
    border-radius: 0 0 14px 14px;
    animation: toastProgress 5s linear forwards;
}
.toast-notification.success .toast-progress { background: linear-gradient(90deg, rgba(52, 211, 153,0.95), rgba(52, 211, 153,0.35)); }
.toast-notification.error .toast-progress { background: linear-gradient(90deg, rgba(251, 113, 133,0.95), rgba(251, 113, 133,0.35)); }
.toast-notification.running .toast-progress { background: linear-gradient(90deg, rgba(251, 191, 36,0.95), rgba(251, 191, 36,0.35)); }
.toast-notification.info .toast-progress { background: linear-gradient(90deg, rgba(91, 141, 239,0.95), rgba(91, 141, 239,0.35)); }

/* Animations */
@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-notification.removing {
    animation: toastSlideOut 0.3s ease forwards;
}

/* Transitions douces pour les updates */
.smooth-update {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-transition {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fade-transition.visible {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .toast-container {
        top: 60px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .toast-notification {
        padding: 1rem;
    }
}

/* ================================
   🔄 Actions Boutons (Retry/Cancel)
   ================================ */

.retry-btn {
    background: rgba(91, 141, 239, 0.1) !important;
    border-color: var(--primary-neon) !important;
    color: var(--primary-neon) !important;
    transition: all 0.3s ease !important;
}

.retry-btn:hover {
    background: rgba(91, 141, 239, 0.2) !important;
    box-shadow: 0 0 15px rgba(91, 141, 239, 0.5) !important;
    transform: translateY(-2px) !important;
}

.cancel-btn {
    background: rgba(251, 113, 133, 0.1) !important;
    border-color: var(--danger-neon) !important;
    color: var(--danger-neon) !important;
    transition: all 0.3s ease !important;
}

.cancel-btn:hover {
    background: rgba(251, 113, 133, 0.2) !important;
    box-shadow: 0 0 15px rgba(251, 113, 133, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Animation de rotation pour les boutons retry */
.retry-btn i {
    transition: transform 0.3s ease;
}

.retry-btn:hover i {
    transform: rotate(180deg);
}

/* ============================================================
   📐 MODES ÉCRAN — Portrait, Landscape & Kiosk (TV / Mur)
   ============================================================ */

/* --- Éléments réservés au mode kiosk --- */
.kiosk-clock {
    display: none;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--primary-neon);
    text-shadow: 0 0 20px rgba(91, 141, 239, 0.6);
}

.kiosk-status-bar {
    display: none;
    width: 100%;
    padding: 0.3rem 2rem;
    background: rgba(91, 141, 239, 0.04);
    border-bottom: 1px solid rgba(91, 141, 239, 0.1);
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    position: relative;
    z-index: 11;
}

/* ============================================================
   📺 KIOSK MODE — activé par body.kiosk-mode
   ============================================================ */

body.kiosk-mode {
    overflow: hidden;
    cursor: none;
}

body.kiosk-mode .kiosk-clock { display: inline-flex; align-items: center; gap: 0.5rem; }
body.kiosk-mode .kiosk-status-bar { display: flex; align-items: center; justify-content: space-between; }
body.kiosk-mode .kiosk-hide { display: none !important; }

body.kiosk-mode .modern-header {
    padding: 0.5rem 1.5rem;
}

body.kiosk-mode .modern-logo {
    font-size: 1.3rem;
}

body.kiosk-mode #navbarNav {
    display: none !important;
}

body.kiosk-mode .navbar-toggler {
    display: none !important;
}

body.kiosk-mode .container-fluid {
    padding-top: 0.5rem !important;
}

body.kiosk-mode .display-4 {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
}

body.kiosk-mode .lead {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
}

body.kiosk-mode .row.mb-4 {
    margin-bottom: 0.8rem !important;
}

body.kiosk-mode .row {
    margin-bottom: 0.8rem;
}

body.kiosk-mode .stat-card {
    padding: 1.2rem !important;
}

body.kiosk-mode .stat-value {
    font-size: 3.2rem;
}

body.kiosk-mode .stat-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
}

body.kiosk-mode .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
}

body.kiosk-mode .modern-card .card-body {
    padding: 0.8rem !important;
}

body.kiosk-mode .modern-card .card-header {
    padding: 0.8rem 1rem 0.6rem !important;
}

body.kiosk-mode .filter-btn {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.78rem;
    margin: 0.15rem;
}

body.kiosk-mode .table thead th {
    padding: 0.8rem 0.7rem !important;
    font-size: 0.7rem;
}

body.kiosk-mode .table tbody td {
    padding: 0.9rem 0.7rem !important;
    font-size: 0.95rem;
}

body.kiosk-mode .btn-sm.btn-modern {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.78rem;
}

body.kiosk-mode .realtime-indicator {
    bottom: 12px;
    right: 12px;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
}

/* ============================================================
   🔲 PORTRAIT — @media (orientation: portrait)
   ============================================================ */

@media (orientation: portrait) {
    /* Stats en grille 2×2 */
    #statsContainer .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .stat-value {
        font-size: 2.8rem;
    }

    /* Colonnes peu importantes masquées */
    .portrait-hide {
        display: none !important;
    }

    /* Compacter le container */
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Réduire les entêtes de tableau */
    .table thead th {
        font-size: 0.68rem;
        padding: 0.8rem 0.5rem !important;
        letter-spacing: 0.7px;
    }

    .table tbody td {
        padding: 0.8rem 0.5rem !important;
    }

    /* Filtres sur plusieurs lignes */
    .filter-btn {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.82rem;
    }
}

/* Portrait + kiosk : stats plus grandes, layout vertical serré */
@media (orientation: portrait) {
    body.kiosk-mode #statsContainer .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    body.kiosk-mode .stat-value {
        font-size: 3.8rem;
    }

    body.kiosk-mode .stat-card {
        padding: 1.5rem !important;
    }

    body.kiosk-mode .display-4 {
        font-size: 1.3rem !important;
    }
}

/* ============================================================
   🖥️ LANDSCAPE — @media (orientation: landscape)
   ============================================================ */

@media (orientation: landscape) {
    /* Stat cards : toujours en ligne */
    #statsContainer .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .landscape-hide {
        display: none !important;
    }
}

/* Landscape + kiosk : optimisation grand écran horizontal */
@media (orientation: landscape) {
    body.kiosk-mode .stat-value {
        font-size: 2.8rem;
    }

    body.kiosk-mode #statsContainer .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ============================================================
   🌐 Indicateur d'orientation dans le header kiosk
   ============================================================ */

.kiosk-orientation-badge {
    display: none;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.1);
    border: 1px solid rgba(91, 141, 239, 0.3);
    color: var(--primary-neon);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 0.8rem;
    vertical-align: middle;
}

body.kiosk-mode .kiosk-orientation-badge {
    display: inline-block;
}

/* ============================================================
   🃏 PIPELINE CARDS — Layout grille ultra-fluide
   ============================================================ */

/* --- Grille principale --- */
.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
    padding: 0.5rem 0;
}

/* Portrait : 2 colonnes fixes */
@media (orientation: portrait) {
    .pipeline-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
}

/* Mobile portrait : 1 colonne (évite cartes illisibles) */
@media (max-width: 520px) {
    .pipeline-grid { grid-template-columns: 1fr !important; gap: 0.65rem; }
    .pipe-card__body { padding: 0.78rem 0.85rem 0.78rem 1.05rem; }
    .pipe-card__project { font-size: 0.95rem; }
    .pipe-card__branch code { font-size: 0.78rem; }
}

/* Kiosk landscape : davantage de colonnes */
body.kiosk-mode.landscape .pipeline-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
}

body.kiosk-mode.portrait .pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

/* Mobile : filtres en “chips” scrollables */
@media (max-width: 520px) {
    .filter-row .card-body {
        padding: 1rem !important;
    }

    .filter-row .card-body > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.45rem !important;
        padding-bottom: 0.35rem;
        margin: 0 !important;
    }

    .filter-row .card-body > .d-flex::-webkit-scrollbar { height: 6px; }
    .filter-row .card-body > .d-flex::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.14);
        border-radius: 999px;
    }

    .filter-btn {
        margin: 0 !important;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.55rem 0.9rem !important;
        border-radius: 999px;
    }

    /* sépare visuellement les 3 lignes de filtres */
    .filter-row .card-body > .d-flex + .d-flex {
        margin-top: 0.65rem !important;
        padding-top: 0.65rem !important;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    /* Quick access : horizontal scroll */
    .quick-access-project {
        font-size: 0.82rem;
        padding: 0.55rem 0.65rem !important;
        border-radius: 999px;
    }
    .quick-access-project i { display: none; }
}

/* Dashboard — filtres intégrés dans Recent Pipelines */
.dash-pipe-filters__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.dash-pipe-filters__row::-webkit-scrollbar { height: 6px; }
.dash-pipe-filters__row::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
}
.dash-pipe-filters__label {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 700;
    opacity: 0.85;
    white-space: nowrap;
    margin-right: 0.15rem;
}
.dash-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
}
.dash-chip.active {
    border-color: rgba(91, 141, 239,0.55);
    background: rgba(91, 141, 239,0.14);
    color: var(--primary-neon);
    box-shadow: 0 0 18px rgba(91, 141, 239, 0.18);
    font-weight: 700;
}

/* --- Carte individuelle --- */
.pipe-card {
    position: relative;
    background: rgba(20, 25, 50, 0.7);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition:
        border-color 0.4s ease,
        box-shadow   0.4s ease,
        transform    0.3s ease,
        opacity      0.3s ease;
    will-change: transform, opacity;
    backdrop-filter: blur(12px);
}

.pipe-card:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 141, 239, 0.4);
    box-shadow: 0 8px 30px rgba(91, 141, 239, 0.15);
}

/* Overlay cliquable sur toute la card */
.pipe-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
}

/* Les éléments interactifs internes passent au-dessus de l'overlay */
.pipe-card__body a,
.pipe-card__body button,
.pipe-card__running-job {
    position: relative;
    z-index: 2;
}

/* Curseur pointer sur toute la card */
.pipe-card { cursor: pointer; }

/* Bande de couleur gauche — indicateur de statut */
.pipe-card__strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 14px 0 0 14px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.pipe-card--success  .pipe-card__strip { background: var(--success-neon); box-shadow: 0 0 14px var(--success-neon); }
.pipe-card--failed   .pipe-card__strip { background: var(--danger-neon);  box-shadow: 0 0 14px var(--danger-neon); }
.pipe-card--running  .pipe-card__strip { background: var(--warning-neon); box-shadow: 0 0 14px var(--warning-neon); animation: stripPulse 2s ease-in-out infinite; }
.pipe-card--pending  .pipe-card__strip { background: var(--text-secondary); }
.pipe-card--canceled .pipe-card__strip,
.pipe-card--skipped  .pipe-card__strip { background: rgba(160, 174, 192, 0.3); }

@keyframes stripPulse {
    0%, 100% { box-shadow: 0 0 8px  var(--warning-neon); }
    50%       { box-shadow: 0 0 24px var(--warning-neon); opacity: 0.7; }
}

/* Glow global carte running */
.pipe-card--running {
    border-color: rgba(251, 191, 36, 0.25);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 4px 20px rgba(251, 191, 36, 0.1);
    animation: cardBreath 3s ease-in-out infinite;
}

.pipe-card--failed {
    border-color: rgba(251, 113, 133, 0.2);
}

@keyframes cardBreath {
    0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 4px 20px rgba(251, 191, 36, 0.08); }
    50%       { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 6px 28px rgba(251, 191, 36, 0.2); }
}

/* --- Contenu de la carte --- */
.pipe-card__body {
    padding: 0.85rem 0.9rem 0.85rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pipe-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}


.pipe-card__project-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    max-width: 70%;
}

.pipe-card__group {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.75;
}

.pipe-card__project {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    display: block;
}

.pipe-card__id {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dashboard immersive overlay */
.dashboard-immersive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Above the fixed sidebar (1040) / backdrop (1035) / header, regardless of where it sits in the padded flow */
    z-index: 13000;
    /* Opaque ground under a subtle azure glow — prevents the dashboard from ghosting through the center */
    background:
        radial-gradient(1200px 700px at 50% 18%, rgba(91, 141, 239, 0.12), transparent 62%),
        radial-gradient(900px 600px at 80% 100%, rgba(183, 156, 255, 0.08), transparent 60%),
        #060a12;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 360ms ease, transform 360ms ease;
}

/* While immersive is active, hide the app chrome so nothing bleeds through */
body.is-immersive .app-side,
body.is-immersive .app-side__backdrop,
body.is-immersive .modern-header { display: none !important; }

.dashboard-immersive.is-active {
    opacity: 1;
    transform: scale(1);
}

.dashboard-immersive__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: saturate(1.1) contrast(1.04);
}

.dashboard-immersive__hud {
    position: absolute;
    top: 16px;
    left: 16px;
    right: min(360px, 34vw);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 14, 34, 0.72);
    padding: 0.7rem 0.85rem;
    backdrop-filter: blur(10px);
}

.dashboard-immersive__hud-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(230, 246, 255, 0.98);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.dashboard-immersive__hud-title-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(91, 141, 239, 0.35);
    background: rgba(91, 141, 239, 0.08);
}

.dashboard-immersive__hud-pill {
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.08);
    color: rgba(190, 255, 225, 0.96);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
}

.dashboard-immersive__hud-kpis {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dashboard-immersive__kpi {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.16rem 0.55rem;
}

.dashboard-immersive__kpi strong {
    color: rgba(233, 248, 255, 0.98);
    font-size: 0.78rem;
}

.dashboard-immersive__kpi span {
    color: rgba(175, 200, 226, 0.92);
    font-size: 0.7rem;
}

.dashboard-immersive__hud-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dashboard-immersive__panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: min(320px, 88vw);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(6, 11, 28, 0.92);
    backdrop-filter: blur(18px);
    padding: 0.75rem;
    overflow: auto;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.55);
    /* Hidden off-screen by default — slides in when .is-open */
    transform: translateX(calc(100% + 24px));
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
    pointer-events: none;
}

.dashboard-immersive__panel.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

.dashboard-immersive__panel-title {
    color: rgba(230, 246, 255, 0.98);
    font-weight: 800;
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}

.dashboard-immersive__panel-empty {
    color: rgba(170, 196, 225, 0.9);
    font-size: 0.78rem;
}

.dashboard-immersive__panel-meta {
    color: rgba(170, 196, 225, 0.9);
    font-size: 0.74rem;
    margin-bottom: 0.5rem;
}

.dashboard-immersive__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.55rem 0 0.65rem;
}

.dashboard-immersive__panel-list-title {
    color: rgba(200, 231, 255, 0.97);
    text-transform: uppercase;
    font-size: 0.69rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.dashboard-immersive__panel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    margin-bottom: 0.55rem;
}

.dashboard-immersive__panel-list span {
    font-size: 0.7rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(221, 242, 255, 0.96);
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 992px) {
    .dashboard-immersive__hud { right: 16px; }
    .dashboard-immersive__panel { width: min(280px, 92vw); }
}

@media (max-width: 1280px), (max-height: 760px) {
    .dashboard-immersive__hud {
        padding: 0.6rem 0.72rem;
    }
    .dashboard-immersive__panel {
        top: 12px;
        right: 12px;
        bottom: 12px;
        padding: 0.62rem;
    }
}

body.is-immersive {
    overflow: hidden;
    /* Cancel the sidebar gutter so the overlay/content is not offset behind it */
    padding-left: 0 !important;
}

.pipe-card__branch {
    font-size: 0.8rem;
}

.pipe-card__branch code {
    background: rgba(91, 141, 239, 0.08);
    color: var(--primary-neon);
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    font-size: 0.78rem;
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipe-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
    gap: 0.5rem;
}

/* Badge de statut dans la carte */
.pipe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
}

.pipe-badge--success  { background: rgba(52, 211, 153,0.12);  color: var(--success-neon);  border: 1px solid rgba(52, 211, 153,0.3); }
.pipe-badge--failed   { background: rgba(251, 113, 133,0.12);   color: var(--danger-neon);   border: 1px solid rgba(251, 113, 133,0.3); }
.pipe-badge--running  { background: rgba(251, 191, 36,0.12);  color: var(--warning-neon);  border: 1px solid rgba(251, 191, 36,0.3); animation: glow 2s ease-in-out infinite; }
.pipe-badge--pending  { background: rgba(160,174,192,0.1); color: var(--text-secondary); border: 1px solid rgba(160,174,192,0.25); }
.pipe-badge--canceled,
.pipe-badge--skipped  { background: rgba(160,174,192,0.06); color: rgba(160,174,192,0.5); border: 1px solid rgba(160,174,192,0.1); }
.pipe-badge--promotion { background: rgba(251, 191, 36,0.14); color: var(--warning-neon); border: 1px solid rgba(251, 191, 36,0.45); }
.pipe-badge--promotion-uate { background: rgba(91, 141, 239,0.14); color: var(--primary-neon); border-color: rgba(91, 141, 239,0.45); }
.pipe-badge--promotion-cate { background: rgba(251, 191, 36,0.14); color: var(--warning-neon); border-color: rgba(251, 191, 36,0.45); }
.pipe-badge--promotion-live { background: rgba(52, 211, 153,0.14); color: var(--success-neon); border-color: rgba(52, 211, 153,0.45); }
.pipe-badge--deploy { background: rgba(91, 141, 239,0.12); color: var(--primary-neon); border: 1px solid rgba(91, 141, 239,0.38); }
.pipe-badge--deploy-uate { background: rgba(91, 141, 239,0.12); color: var(--primary-neon); border-color: rgba(91, 141, 239,0.38); }
.pipe-badge--deploy-cate { background: rgba(251, 191, 36,0.12); color: var(--warning-neon); border-color: rgba(251, 191, 36,0.38); }
.pipe-badge--deploy-live { background: rgba(52, 211, 153,0.12); color: var(--success-neon); border-color: rgba(52, 211, 153,0.38); }

.pipe-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pipe-badge--success  .pipe-badge__dot { background: var(--success-neon); }
.pipe-badge--failed   .pipe-badge__dot { background: var(--danger-neon); }
.pipe-badge--running  .pipe-badge__dot { background: var(--warning-neon); animation: pulse 1.5s ease-in-out infinite; }
.pipe-badge--pending  .pipe-badge__dot { background: var(--text-secondary); }

/* ── Job en cours (running) ─────────────────────────────────── */

/* Ligne dédiée sous le badge, bien visible */
.pipe-card__job-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.1rem;
}

.pipe-card__running-job {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 7px;
    max-width: 100%;
    overflow: hidden;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.15);
}

.pipe-card--running .pipe-card__running-job {
    animation: jobRowBreath 2.5s ease-in-out infinite;
}

@keyframes jobRowBreath {
    0%, 100% { box-shadow: 0 0 8px  rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.4); }
    50%       { box-shadow: 0 0 18px rgba(251, 191, 36, 0.35); border-color: rgba(251, 191, 36, 0.7); }
}

.pipe-card__running-job[data-loading="1"] {
    opacity: 0.55;
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow: none;
    animation: none;
}

.pipe-card__job-spin {
    font-size: 0.7rem;
    animation: spin 1.2s linear infinite;
    flex-shrink: 0;
    color: var(--warning-neon);
}

.pipe-card__job-name {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--warning-neon);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.kiosk-mode .pipe-card__running-job { padding: 0.25rem 0.55rem; }
body.kiosk-mode .pipe-card__job-name    { font-size: 0.72rem; }

/* Temps relatif */
.pipe-card__time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.pipe-card--running .pipe-card__time { color: var(--warning-neon); opacity: 0.9; }

/* Durée */
.pipe-card__dur {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    opacity: 0.7;
}

/* --- Animations entrée / sortie des cartes --- */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes cardExit {
    to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@keyframes statusFlash {
    0%   { background: rgba(255, 255, 255, 0.06); }
    40%  { background: rgba(91, 141, 239, 0.12); }
    100% { background: rgba(20, 25, 50, 0.7); }
}

.pipe-card.is-entering {
    animation: cardEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pipe-card.is-exiting {
    animation: cardExit 0.25s ease forwards;
    pointer-events: none;
}

.pipe-card.status-changed {
    animation: statusFlash 0.6s ease forwards;
}

/* --- Kiosk : compacter les cartes --- */
body.kiosk-mode .pipe-card__body {
    padding: 0.7rem 0.8rem 0.7rem 1.1rem;
    gap: 0.35rem;
}

body.kiosk-mode .pipe-card__project { font-size: 0.85rem; }
body.kiosk-mode .pipe-badge          { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
body.kiosk-mode .pipe-card__time     { font-size: 0.68rem; }

/* ============================================================
   📊 STAT STRIP — barre de stats inline dans le header kiosk
   ============================================================ */

.kiosk-stat-strip {
    display: none; /* hidden by default */
    align-items: center;
    gap: 1.2rem;
    flex-shrink: 0;
}

body.kiosk-mode .kiosk-stat-strip {
    display: flex;
}

/* Masquer les grandes stat-cards en kiosk (remplacées par la strip) */
body.kiosk-mode #statsContainer {
    display: none !important;
}

/* Quick Access projects: allow full project names (no ellipsis) */
.quick-access-project {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.15;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.quick-access-project i {
    flex-shrink: 0;
}

/* MR list: delete source branch option (shown before Merge) */
.mr-merge-delete-branch-panel {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    padding: 0.9rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(52, 211, 153, 0.42);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(8, 22, 28, 0.55));
    box-shadow:
        0 0 0 1px rgba(91, 141, 239, 0.07) inset,
        0 10px 28px rgba(0, 0, 0, 0.28);
    width: 100%;
    pointer-events: auto;
}

.mr-merge-delete-branch-panel .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    margin-top: 0.35rem;
    cursor: pointer;
    accent-color: var(--success-neon);
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    /* Native checkbox must stay clickable (some themes strip appearance) */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}

.mr-actions-row {
    position: relative;
    z-index: 3;
}

.mr-merge-delete-branch-panel__title {
    font-weight: 850;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.96);
    cursor: pointer;
}

.mr-merge-delete-branch-panel__branch code {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--success-neon);
    background: rgba(52, 211, 153, 0.12);
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
}

.mr-merge-delete-branch-panel__hint {
    color: rgba(200, 255, 220, 0.88);
    line-height: 1.35;
}

/* MR promotion workflow (develop -> release/latest -> main) */
.mr-workflow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.mr-workflow__step {
    flex: 1 1 220px;
    min-width: 200px;
    background: rgba(9, 13, 23, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 0.85rem 0.95rem;
    box-shadow: inset 0 0 0 1px rgba(91, 141, 239, 0.04);
    backdrop-filter: blur(14px);
    transition: border-color .22s ease, box-shadow .22s ease, transform .15s ease;
}

.mr-workflow__title {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.mr-workflow__branch code {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mr-workflow__step--uat {
    border-color: rgba(91, 141, 239, 0.25);
}
.mr-workflow__step--uat .mr-workflow__branch code {
    color: var(--primary-neon);
}

.mr-workflow__step--cate {
    border-color: rgba(183, 156, 255, 0.25);
}
.mr-workflow__step--cate .mr-workflow__branch code {
    color: var(--secondary-neon);
}

.mr-workflow__step--live {
    border-color: rgba(52, 211, 153, 0.25);
}
.mr-workflow__step--live .mr-workflow__branch code {
    color: var(--success-neon);
}

.mr-workflow__arrow {
    color: rgba(91, 141, 239, 0.65);
    font-size: 1.6rem;
    font-weight: 900;
    padding: 0 0.2rem;
    line-height: 1;
}

.mr-workflow__signal {
    margin-top: 0.5rem;
    min-height: 1.05rem;
    font-size: 0.72rem;
    letter-spacing: 0.25px;
    color: var(--text-secondary);
}

.mr-workflow__signal--promote {
    color: var(--promote-pulse-neon);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(183, 156, 255, 0.45);
}

.mr-workflow__signal--deploy {
    color: var(--success-neon);
    font-weight: 700;
}

.mr-workflow__step.flow-step--clickable {
    cursor: pointer;
}

.mr-workflow__step.flow-step--clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(91, 141, 239, 0.08);
}

.mr-workflow__step.flow-step--active-promote {
    border-color: rgba(183, 156, 255, 0.72);
    background: linear-gradient(135deg, rgba(183, 156, 255, 0.2), rgba(12, 22, 18, 0.58));
    animation: flowPromotePulse 1.25s ease-in-out infinite;
}

.mr-workflow__step.flow-step--active-deploy {
    border-color: rgba(52, 211, 153, 0.68);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(10, 20, 34, 0.58));
    animation: flowDeployPulse 1.15s ease-in-out infinite;
}

/* Ultra visible env label while pulsing (use flow color, not env color) */
.mr-workflow__step.flow-step--active-promote .mr-workflow__title,
.mr-workflow__step.flow-step--active-deploy .mr-workflow__title {
    font-size: 0.84rem;
    font-weight: 950;
    letter-spacing: 2.4px;
    opacity: 1;
}

.mr-workflow__step.flow-step--active-promote .mr-workflow__title {
    color: rgba(230, 255, 120, 0.99) !important;
    text-shadow:
        0 0 12px rgba(183, 156, 255, 0.65),
        0 0 28px rgba(180, 255, 0, 0.35);
}

.mr-workflow__step.flow-step--active-deploy .mr-workflow__title {
    color: rgba(52, 211, 153, 0.98) !important;
    text-shadow:
        0 0 10px rgba(52, 211, 153, 0.55),
        0 0 22px rgba(52, 211, 153, 0.30);
}

@keyframes flowPromotePulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(183, 156, 255, 0.2), inset 0 0 0 1px rgba(183, 156, 255, 0.32);
        filter: saturate(1.05);
    }
    50% {
        transform: translateY(-2px) scale(1.035);
        box-shadow:
            0 0 0 10px rgba(183, 156, 255, 0.12),
            0 0 36px rgba(183, 156, 255, 0.55),
            inset 0 0 0 1px rgba(230, 255, 80, 0.55);
        filter: saturate(1.35) brightness(1.05);
    }
}

@keyframes flowDeployPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.18), inset 0 0 0 1px rgba(52, 211, 153, 0.22);
        filter: saturate(1);
    }
    50% {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 0 0 10px rgba(52, 211, 153, 0.10), 0 0 32px rgba(52, 211, 153, 0.44), inset 0 0 0 1px rgba(52, 211, 153, 0.50);
        filter: saturate(1.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mr-workflow__step.flow-step--active-promote,
    .mr-workflow__step.flow-step--active-deploy {
        animation: none;
    }
}

.kstat {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s ease;
    white-space: nowrap;
}

.kstat__icon { font-size: 0.9rem; }
.kstat__val  {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 1.8ch;
    text-align: right;
    transition: all 0.4s ease;
}
.kstat__label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }

.kstat--projects { border-color: rgba(91, 141, 239, 0.2); }
.kstat--projects .kstat__icon,
.kstat--projects .kstat__val  { color: var(--primary-neon); }

.kstat--success  { border-color: rgba(52, 211, 153, 0.2); }
.kstat--success  .kstat__icon,
.kstat--success  .kstat__val  { color: var(--success-neon); }

.kstat--failed   { border-color: rgba(251, 113, 133, 0.2); }
.kstat--failed   .kstat__icon,
.kstat--failed   .kstat__val  { color: var(--danger-neon); }

.kstat--running  { border-color: rgba(251, 191, 36, 0.2); }
.kstat--running  .kstat__icon,
.kstat--running  .kstat__val  { color: var(--warning-neon); }

/* Pulse sur running quand > 0 */
.kstat--running.has-activity {
    border-color: rgba(251, 191, 36, 0.4);
    animation: kstatPulse 2.5s ease-in-out infinite;
}

@keyframes kstatPulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 14px rgba(251, 191, 36, 0.3); }
}

/* Alert quand échecs > 0 */
.kstat--failed.has-failures {
    border-color: rgba(251, 113, 133, 0.4);
    animation: kstatDanger 3s ease-in-out infinite;
}

@keyframes kstatDanger {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 14px rgba(251, 113, 133, 0.25); }
}

/* ============================================================
   📺 Kiosk — header réorganisé
   ============================================================ */

body.kiosk-mode .modern-header .container-fluid {
    flex-wrap: nowrap;
    gap: 1.5rem;
}

body.kiosk-mode .fluxops-title-row {
    display: none !important; /* masque le h1 / lead en kiosk */
}

body.kiosk-mode .filter-row {
    display: none !important; /* masque les filtres en kiosk */
}

/* Titre section pipelines : compacter en kiosk */
body.kiosk-mode .pipelines-section-header {
    padding: 0.5rem 0.8rem !important;
}

body.kiosk-mode .pipelines-section-header h5 {
    font-size: 0.82rem !important;
}

/* Scroll auto dans la grille kiosk si débordement */
body.kiosk-mode .pipeline-grid-wrap {
    overflow: hidden;
}

/* Numéro de stat — animation de comptage */
@keyframes statPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.kstat__val.changed,
.stat-value.changed {
    animation: statPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Issues / incidents — severity (Luna FluxOps labels fluxops-severity::*) */
.issue-severity-badge {
    font-weight: 700;
    text-transform: capitalize;
}

.issue-severity-badge--critical {
    background: rgba(251, 113, 133, 0.25);
    border: 1px solid var(--danger-neon);
    color: #ff8fb8;
}

.issue-severity-badge--high {
    background: rgba(251, 191, 36, 0.22);
    border: 1px solid var(--warning-neon);
    color: #ffd699;
}

.issue-severity-badge--medium {
    background: rgba(91, 141, 239, 0.12);
    border: 1px solid var(--primary-neon);
    color: var(--primary-neon);
}

.issue-severity-badge--low {
    background: rgba(160, 174, 192, 0.2);
    border: 1px solid rgba(160, 174, 192, 0.55);
    color: #cbd5e1;
}

.issue-severity-badge--unset {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}

/* Branches — grille : la colonne case à cocher n’est pas recouverte par le nom de branche */
#branchesList .branch-row-manage__grid {
    display: grid;
    grid-template-columns: 2.75rem auto minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
}

#branchesList .branch-row-manage__check-slot {
    display: block;
    width: 2.75rem;
    min-height: 1rem;
}

#branchesList .branch-row-manage__name {
    min-width: 0;
}

#branchesList .branch-select-wrap {
    justify-self: center;
    z-index: 2;
    pointer-events: auto;
}

#branchesList .branch-select-wrap-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    margin: -0.2rem;
    cursor: pointer;
    border-radius: 8px;
}

#branchesList .branch-select-wrap-inner:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

#branchesList .branch-select-wrap .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    cursor: inherit;
    opacity: 1 !important;
    pointer-events: auto !important;
    appearance: auto;
    -webkit-appearance: auto;
}

/* Issue / Incident / MR selection checkboxes — mirrors branch-select-wrap pattern */
#issuesList .select-check-wrap,
#mergeRequestsList .select-check-wrap {
    z-index: 2;
    pointer-events: auto;
}

#issuesList .select-check-wrap-inner,
#mergeRequestsList .select-check-wrap-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    margin: -0.2rem;
    cursor: pointer;
    border-radius: 8px;
}

#issuesList .select-check-wrap .form-check-input,
#mergeRequestsList .select-check-wrap .form-check-input {
    width: 1.15em !important;
    height: 1.15em !important;
    margin: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

/* Dashboard — advanced insights */
.insight-kpi {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.55rem 0.65rem;
}

.insight-kpi__label {
    color: var(--text-secondary);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 700;
}

.insight-kpi__value {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.insight-kpi__sub {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.insight-meter {
    height: 6px;
    margin-top: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.insight-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(91, 141, 239,.75), rgba(52, 211, 153,.85));
    transition: width .3s ease;
}

.insight-meter--danger > span {
    background: linear-gradient(90deg, rgba(251, 191, 36,.9), rgba(251, 113, 133,.9));
}

/* Inline meter used in mutualized stats */
.insight-inline-meter {
    display: inline-flex;
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
    vertical-align: middle;
}
.insight-inline-meter > span {
    height: 100%;
    background: linear-gradient(90deg, rgba(91, 141, 239,.75), rgba(52, 211, 153,.85));
    transition: width .3s ease;
}

/* Dashboard home: Recent Pipelines plus compact */
.dashboard-home .pipelines-section-header h5 {
    font-size: 1rem;
}
.dashboard-home #pipelinesContainer.card-body {
    padding-top: 1rem !important;
}

/* Project detail: pipelines should stay visible and readable */
#pipelinesPanel .btn-group .btn {
    border-color: rgba(91, 141, 239, 0.25);
}

#pipelinesPanel .pipe-col--status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#pipelinesPanel .pipe-col--status .status-icon {
    margin-right: 0;
}

/* Make status + flow badges compact in pipeline table */
#pipelinesPanel .pipe-col--status .badge {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.1;
    text-transform: lowercase;
}

#pipelinesPanel .pipe-col--status .badge:first-of-type {
    text-transform: lowercase;
}

#pipelinesPanel .pipe-col--status .badge.badge-promotion,
#pipelinesPanel .pipe-col--status .badge.badge-deploy {
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

#pipelinesPanel .pipe-col--status .badge i {
    margin-right: 0.25rem;
    opacity: 0.9;
}

#branchesPanel,
#mergeRequestsPanel,
#issuesPanel,
#pipelinesPanel {
    scroll-margin-top: 90px;
}

.project-stats-rail .pipe-badge {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.project-stats-rail .pipe-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 141, 239, 0.35);
    box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

/* Project stats: more stylized background strip */
.project-stats-wrap {
    position: relative;
    border-radius: 18px;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(1200px 420px at 12% 18%, rgba(91, 141, 239, 0.18), transparent 60%),
        radial-gradient(900px 360px at 76% 28%, rgba(183, 156, 255, 0.14), transparent 62%),
        radial-gradient(900px 420px at 70% 90%, rgba(52, 211, 153, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(9, 13, 23, 0.62), rgba(9, 13, 23, 0.26));
    box-shadow:
        0 22px 50px rgba(0,0,0,0.28),
        inset 0 0 0 1px rgba(91, 141, 239, 0.08);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.project-stats-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            transparent 1px,
            transparent 6px
        );
    mix-blend-mode: overlay;
}

.project-stats-wrap .project-stats-rail {
    position: relative;
    z-index: 1;
}

/* Project header meta row: client + latest tag inline */
.project-meta-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.project-client-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
}

.project-latest-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 12px;
    background: rgba(255,193,7,0.14);
    border: 1px solid rgba(255,193,7,0.55);
}

/*
 * Colonne Meta : utile en vue mobile (cartes), inutile en desktop.
 * display:none laisse parfois une « colonne fantôme » → Actions décalée / header incohérent.
 * visibility:collapse retire la colonne du layout tableau (comportement CSS tables).
 */
@media (min-width: 521px) {
    #pipelinesPanel .pipe-th--meta,
    #pipelinesPanel .pipe-col--meta {
        visibility: collapse;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
    }
}

/* Pas de scroll horizontal : évite que la dernière colonne se « découpe » du tableau */
#pipelinesPanel .pipelines-table-scroll.table-responsive {
    overflow-x: hidden !important;
}

#pipelinesPanel .pipelines-table-scroll {
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    border-radius: 12px;
    scrollbar-gutter: auto;
}

#pipelinesPanel .pipelines-table-scroll.pipelines-table-scroll--limited {
    max-height: min(62vh, 720px);
    overflow-y: auto;
    scrollbar-gutter: auto;
    border: 1px solid rgba(91, 141, 239, 0.12);
    box-shadow: inset 0 0 0 1px rgba(91, 141, 239, 0.06);
}

/* Prefer no horizontal scroll on desktop; allow the table to shrink */
#pipelinesPanel .pipelines-table-scroll.pipelines-table-scroll--limited {
    overflow-x: hidden;
}

/* Même fond partout (le global .table thead th a background !important) */
#pipelinesPanel .table thead th {
    color: rgba(91, 141, 239, 0.85);
    font-weight: 700;
    letter-spacing: 0.3px;
    background: rgba(11, 18, 48, 0.98) !important;
    border-bottom: 2px solid rgba(91, 141, 239, 0.22) !important;
    position: static;
}

#pipelinesPanel .pipelines-table-scroll.pipelines-table-scroll--limited .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Fond opaque : évite les coutures / différences entre colonnes (sticky + backdrop) */
    background: rgba(11, 18, 48, 0.98) !important;
    border-bottom: 2px solid rgba(91, 141, 239, 0.22) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#pipelinesPanel .table tbody td {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Keep pipelines row highlight uniform (including Actions column) */
#pipelinesPanel .table tbody tr:hover {
    transform: none;
}

#pipelinesPanel .table tbody tr:hover td {
    background: rgba(91, 141, 239, 0.08) !important;
}

/*
 * Table pipelines : colonnes Created / Duration / Meta masquées (visibility:collapse).
 * Ne pas utiliser display:none sur les cellules (casse le layout + colgroup).
 */
#pipelinesPanel .pipelines-table .pipe-col--created,
#pipelinesPanel .pipelines-table .pipe-col--duration {
    visibility: collapse;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

#pipelinesPanel .pipelines-table thead th:nth-child(4),
#pipelinesPanel .pipelines-table thead th:nth-child(5),
#pipelinesPanel .pipelines-table thead th:nth-child(6) {
    visibility: collapse;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* Largeurs : Status (badges + méta), Branch (refs) */
#pipelinesPanel .pipelines-table col.pipe-colgroup--id { width: 9%; }
#pipelinesPanel .pipelines-table col.pipe-colgroup--status { width: 40%; }
#pipelinesPanel .pipelines-table col.pipe-colgroup--branch { width: 34%; }
#pipelinesPanel .pipelines-table col.pipe-colgroup--actions { width: 17%; }
#pipelinesPanel .pipelines-table col.pipe-colgroup--created,
#pipelinesPanel .pipelines-table col.pipe-colgroup--duration,
#pipelinesPanel .pipelines-table col.pipe-colgroup--meta {
    width: 0 !important;
    min-width: 0 !important;
}

/* Ligne méta sous les badges (survol) */
#pipelinesPanel .pipe-status-main {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#pipelinesPanel .pipelines-table .pipe-status-main {
    gap: 5px;
}

#pipelinesPanel .pipe-compact-meta {
    display: none;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: rgba(210, 220, 235, 0.75);
    letter-spacing: 0.2px;
}

#pipelinesPanel .pipelines-table .pipe-compact-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transform: translateY(-2px);
    transition: opacity 0.16s ease, max-height 0.18s ease, transform 0.16s ease, margin-top 0.16s ease;
}

/* Méta-infos au survol de ligne / cellule status */
#pipelinesPanel .pipelines-table tbody tr.pipe-row:hover .pipe-compact-meta {
    opacity: 1;
    max-height: 100%;
    margin-top: 0.35rem;
    transform: translateY(0);
    color: rgba(230, 238, 252, 0.92);
}

/* Also reveal meta when hovering directly status cell */
#pipelinesPanel .pipelines-table .pipe-col--status:hover .pipe-compact-meta {
    opacity: 1;
    max-height: 100%;
    margin-top: 0.35rem;
    transform: translateY(0);
    color: rgba(230, 238, 252, 0.92);
}

#pipelinesPanel .pipe-compact-meta__item i {
    margin-right: 0.25rem;
    opacity: 0.85;
}

#pipelinesPanel .pipe-compact-meta__sep {
    opacity: 0.55;
}

/* Écrans tactiles: pas de hover fiable, on garde visible */
@media (hover: none) {
    #pipelinesPanel .pipelines-table .pipe-compact-meta {
        opacity: 1;
        max-height: 64px;
        margin-top: 0.35rem;
        transform: translateY(0);
    }
}

/* Padding lignes */
#pipelinesPanel .pipelines-table tbody td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#pipelinesPanel .pipelines-table .pipe-col--branch {
    font-size: 0.62rem;
    line-height: 1.2;
}

#pipelinesPanel .pipelines-table .pipe-col--branch i {
    font-size: 0.85em;
}

#pipelinesPanel .pipelines-table .pipe-col--branch code {
    font-size: 0.6rem;
    padding: 0.06rem 0.28rem;
    max-width: 100%;
}

/* Table pipelines : layout fixe + largeurs via colgroup ci-dessus */
#pipelinesPanel table.table.pipelines-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

#pipelinesPanel table.table thead th,
#pipelinesPanel table.table tbody td {
    vertical-align: middle;
}

/* Duration : ellipsis (secondaire) */
#pipelinesPanel .pipe-col--duration small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Created : laisser la date lisible en entier quand possible */
#pipelinesPanel .pipe-col--created small {
    display: block;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 520px) {
    #pipelinesPanel .btn-group {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
    #pipelinesPanel .btn-group .btn {
        flex: 0 0 auto;
    }

    /* Turn pipelines table into stacked cards */
    #pipelinesPanel .table-responsive,
    #pipelinesPanel .pipelines-table-scroll {
        overflow-x: visible;
        max-height: none;
    }
    #pipelinesPanel table.table {
        display: block;
    }
    #pipelinesPanel table.table thead {
        display: none;
    }
    #pipelinesPanel table.table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #pipelinesPanel table.table tbody tr.pipe-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "id actions"
            "status actions"
            "branch branch"
            "meta meta";
        gap: 8px 10px;
        padding: 12px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(91, 141, 239, 0.12);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    }
    #pipelinesPanel table.table tbody tr.pipe-row > td {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #pipelinesPanel .pipe-col--id {
        grid-area: id;
        font-size: 1.05rem;
        letter-spacing: 0.2px;
    }
    #pipelinesPanel .pipe-col--actions {
        grid-area: actions;
        justify-self: end;
        align-self: start;
        display: flex;
        gap: 8px;
    }
    #pipelinesPanel .pipe-col--status {
        grid-area: status;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    #pipelinesPanel .pipe-col--branch {
        grid-area: branch;
        opacity: 0.95;
    }
    #pipelinesPanel .pipe-col--branch code {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    #pipelinesPanel .pipe-col--created,
    #pipelinesPanel .pipe-col--duration {
        display: none;
    }

    #pipelinesPanel .pipe-th--meta,
    #pipelinesPanel .pipe-col--meta {
        display: block;
        visibility: visible;
        width: auto !important;
        min-width: 0 !important;
        padding: revert !important;
        border: revert !important;
        font-size: inherit !important;
        line-height: inherit !important;
        overflow: visible !important;
    }
    #pipelinesPanel .pipe-col--meta {
        grid-area: meta;
        opacity: 0.9;
    }
    #pipelinesPanel .pipe-col--meta small {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        line-height: 1.25;
    }
}

/* ---- Export loading modal ---- */
.export-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}
.export-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 8, 0.72);
    backdrop-filter: blur(3px);
}
.export-modal__card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 2.5rem;
    border-radius: 14px;
    background: #0a1016;
    border: 1px solid rgba(91, 141, 239, 0.35);
    box-shadow: 0 0 32px rgba(91, 141, 239, 0.18);
    max-width: 90vw;
}
.export-modal__spinner {
    font-size: 2.2rem;
    color: var(--primary-neon);
    margin-bottom: 0.75rem;
}
.export-modal__title {
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.export-modal__text {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}
.export-modal__card--wide {
    text-align: left;
    width: 460px;
    max-width: 92vw;
}
.group-picker__toolbar {
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.group-picker__all,
.group-picker__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.35rem 0.25rem;
    border-radius: 6px;
}
.group-picker__item:hover,
.group-picker__all:hover {
    background: rgba(91, 141, 239, 0.06);
}
.group-picker__list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 1rem;
}
.group-picker__item small {
    color: var(--text-secondary);
}
.group-picker__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ---- Projects pagination ---- */
.projects-pagination {
    margin: 1rem 0 2.5rem;
}
.projects-pagination .pagination {
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}
.projects-pagination .page-link {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
    transition: all 0.15s ease;
}
.projects-pagination .page-link:hover {
    background: rgba(91, 141, 239, 0.08);
    border-color: rgba(91, 141, 239, 0.35);
    color: var(--primary-neon);
}
.projects-pagination .page-item.active .page-link {
    background: rgba(91, 141, 239, 0.15);
    border-color: var(--primary-neon);
    color: var(--primary-neon);
    font-weight: 600;
}
.projects-pagination .page-item.disabled .page-link {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
}
.projects-pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(91, 141, 239, 0.2);
}

/* ---- Active pipelines view ---- */
.auto-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-neon);
    margin-left: 6px;
    box-shadow: 0 0 8px var(--success-neon);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.active-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.active-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
}
.active-row.is-running { border-left-color: var(--primary-neon); }
.active-row.is-pending { border-left-color: var(--warning-neon); }
.active-row.is-manual  { border-left-color: var(--warning-neon); }
.active-row__project { font-weight: 600; color: var(--text-primary); }
.active-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.active-row__links { display: flex; gap: 0.4rem; }
.active-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
}
.active-badge.is-running { color: var(--primary-neon); border-color: rgba(91, 141, 239, 0.4); background: rgba(91, 141, 239, 0.08); }
.active-badge.is-pending,
.active-badge.is-manual { color: var(--warning-neon); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }
@media (max-width: 640px) {
    .active-row { grid-template-columns: 1fr; }
    .active-row__right { align-items: flex-start; }
}

/* ---- Pipeline stats view ---- */
.stats-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.stats-kpi {
    text-align: center;
    padding: 1.2rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.stats-kpi__value { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.stats-kpi__value--ok { color: var(--success-neon); }
.stats-kpi__value--ko { color: var(--danger-neon); }
.stats-kpi__value--run { color: var(--primary-neon); }
.stats-kpi__label { color: var(--text-secondary); font-size: 0.82rem; margin-top: 0.4rem; }
.project-stats { display: flex; flex-direction: column; gap: 1rem; }
.project-stat {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.project-stat__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.project-stat__name { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.project-stat__name:hover { color: var(--primary-neon); }
.project-stat__rate { font-weight: 700; }
.project-stat__bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.project-stat__bar .seg { height: 100%; }
.project-stat__bar .seg--ok { background: var(--success-neon); }
.project-stat__bar .seg--ko { background: var(--danger-neon); }
.project-stat__bar .seg--run { background: var(--primary-neon); }
.project-stat__legend { margin-top: 0.4rem; }

/* ---- Pinned / favorite projects ---- */
.project-pin-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.project-pin-btn:hover { color: var(--warning-neon); border-color: rgba(251, 191, 36, 0.4); }
.project-pin-btn.is-pinned { color: var(--warning-neon); border-color: var(--warning-neon); background: rgba(251, 191, 36, 0.12); }
.project-card-wrap { position: relative; }
#projectsGrid .card { position: relative; }

/* ---- Shared badge status variants (deployments / compare / maintenance) ---- */
.active-badge.is-ok { color: var(--success-neon); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.active-badge.is-ko { color: var(--danger-neon); border-color: rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.08); }
.active-badge.is-run { color: var(--primary-neon); border-color: rgba(91, 141, 239, 0.4); background: rgba(91, 141, 239, 0.08); }
.active-badge.is-idle { color: var(--text-secondary); }

/* ---- Global search ---- */
.search-col { display: flex; flex-direction: column; gap: 0.4rem; }
.search-item {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.search-item:hover { border-color: rgba(91, 141, 239, 0.35); background: rgba(91, 141, 239, 0.06); }
.search-item__title { font-weight: 600; }
.search-item__sub { margin-top: 2px; }

/* ---- Deployments timeline ---- */
.deploy-timeline { display: flex; flex-direction: column; gap: 0.5rem; }
.deploy-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
}
.deploy-row.is-ok { border-left-color: var(--success-neon); }
.deploy-row.is-ko { border-left-color: var(--danger-neon); }
.deploy-row.is-run { border-left-color: var(--primary-neon); }
.deploy-row__project { font-weight: 600; color: var(--text-primary); }
.deploy-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.env-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.1);
    border: 1px solid rgba(91, 141, 239, 0.3);
    color: var(--primary-neon);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}
@media (max-width: 640px) {
    .deploy-row { grid-template-columns: 1fr; }
    .deploy-row__right { align-items: flex-start; }
}

/* ---- Compare pipelines ---- */
.compare-head {
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.compare-table th, .compare-table td { vertical-align: middle; }
.compare-table tr.row-diff { background: rgba(251, 191, 36, 0.06); }

/* ---- Project maintenance ---- */
.maint-branch, .maint-flaky {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.maint-branch__info { flex: 1; }
.maint-branch__name { color: var(--text-primary); font-weight: 600; }
.maint-flaky__name { flex: 0 0 30%; color: var(--text-primary); font-weight: 600; word-break: break-word; }
.maint-flaky__bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.maint-flaky__bar .seg--ko { display: block; height: 100%; background: var(--danger-neon); }
.maint-flaky__stats { flex: 0 0 auto; }
@media (max-width: 640px) {
    .maint-flaky { flex-wrap: wrap; }
    .maint-flaky__name { flex-basis: 100%; }
}

/* ---- Stats: sparkline + duration ---- */
.sparkline { vertical-align: middle; opacity: 0.9; }
.project-stat__dur { min-width: 52px; text-align: right; }

/* ---- Command palette (⌘K) ---- */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 8, 0.7);
    backdrop-filter: blur(3px);
}
.cmdk__panel {
    position: relative;
    z-index: 1;
    margin-top: 12vh;
    width: 600px;
    max-width: 92vw;
    background: #0a1016;
    border: 1px solid rgba(91, 141, 239, 0.35);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(91, 141, 239, 0.12);
    overflow: hidden;
}
.cmdk__inputwrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--primary-neon);
}
.cmdk__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}
.cmdk__kbd {
    font-size: 0.7rem;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
}
.cmdk__list { max-height: 50vh; overflow-y: auto; padding: 0.4rem; }
.cmdk__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
}
.cmdk__item i { color: var(--primary-neon); width: 18px; text-align: center; }
.cmdk__item.is-active { background: rgba(91, 141, 239, 0.1); }
.cmdk__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__sub { color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; }
.cmdk__empty, .cmdk__footer { padding: 0.8rem 1rem; color: var(--text-secondary); font-size: 0.85rem; }
.cmdk__footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* ---- Job log search ---- */
.log-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-secondary);
}
.log-search__input {
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 140px;
}
.log-search__count { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.log-search__filter { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; margin: 0; cursor: pointer; }
mark.log-hit {
    background: var(--warning-neon);
    color: #000;
    border-radius: 2px;
    padding: 0 1px;
}

/* ---- Help & About ---- */
.footer-author { color: var(--primary-neon); text-decoration: none; }
.footer-author:hover { text-decoration: underline; }
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.help-card {
    display: block;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--panel);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
a.help-card:hover {
    border-color: var(--accent-line);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.help-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 0.5rem;
}
.help-card__head > i { color: var(--primary-neon); }
.help-card p, .help-card li { color: var(--text-secondary); margin: 0; }
.help-card ul { padding-left: 1.1rem; margin-bottom: 0; }
.help-route {
    margin-left: auto;
    font-size: 0.72rem;
    font-family: var(--mono);
    color: var(--primary-neon);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    padding: 1px 7px;
}

/* Help hero + toolbar */
.help-hero { padding: 0.5rem 0 1.25rem; }
.help-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-neon); font-weight: 600; margin: 0 0 0.35rem; }
.help-title { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text-primary); }
.help-lead { color: var(--text-secondary); margin: 0.5rem 0 0; font-size: 1.05rem; }
.help-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.help-search {
    display: flex; align-items: center; gap: 0.6rem;
    flex: 1 1 320px; max-width: 460px;
    padding: 0.55rem 0.9rem;
    background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
    color: var(--text-lo);
}
.help-search:focus-within { border-color: var(--accent-line); }
.help-search i { color: var(--primary-neon); }
.help-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text-primary); font-size: 0.92rem; }
.help-kbdhint { color: var(--text-faint); font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.help-empty { color: var(--text-secondary); padding: 1.5rem; text-align: center; border: 1px dashed var(--border-subtle); border-radius: var(--r-lg); margin-bottom: 1.5rem; }

/* Help sections */
.help-section { margin-bottom: 2rem; }
.help-section__title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
    color: var(--text-lo); margin: 0 0 0.9rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.help-section__title i { color: var(--primary-neon); }

/* Keyboard shortcuts */
.help-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem; }
.help-key {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.7rem 1rem; border-radius: var(--r-md);
    background: var(--surface-1); border: 1px solid var(--border-subtle);
}
.help-key__combo { display: inline-flex; gap: 4px; flex: none; }
.help-key__desc { color: var(--text-secondary); font-size: 0.9rem; }
.about-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.about-logo {
    font-size: 3rem;
    color: var(--primary-neon);
    text-shadow: 0 0 24px rgba(91, 141, 239, 0.4);
    margin-bottom: 0.5rem;
}
.about-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    padding: 1.2rem;
    border-radius: 12px;
    background: rgba(91, 141, 239, 0.05);
    border: 1px solid rgba(91, 141, 239, 0.25);
    max-width: 360px;
    margin: 0 auto;
}
.about-author__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: #030508;
    background: var(--primary-neon);
    box-shadow: 0 0 18px rgba(91, 141, 239, 0.4);
}
.about-author__label { color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.about-author__name { color: var(--text-primary); font-size: 1.4rem; font-weight: 700; }

/* ---- Global loading screen ---- */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #0a1016 0%, #030508 70%);
    opacity: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.app-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.app-loader__inner { text-align: center; }
.app-loader__logo {
    font-size: 3.2rem;
    color: var(--primary-neon);
    text-shadow: 0 0 28px rgba(91, 141, 239, 0.5);
    animation: app-loader-float 2.4s ease-in-out infinite;
}
@keyframes app-loader-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.app-loader__title {
    margin-top: 0.6rem;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.app-loader__spinner {
    width: 34px;
    height: 34px;
    margin: 1.2rem auto 0;
    border: 3px solid rgba(91, 141, 239, 0.2);
    border-top-color: var(--primary-neon);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================================
   First-visit intro / start screen — "wow" animation
   ============================================================ */
body.intro-lock { overflow: hidden; }

.intro {
    position: fixed;
    inset: 0;
    z-index: 2100;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #0a1430 0%, #05060f 55%, #020308 100%);
    opacity: 0;
    transition: opacity 0.8s ease;
}
.intro.is-on { opacity: 1; }
.intro.is-off { opacity: 0; pointer-events: none; }

/* --- Starfields (3 parallax layers) --- */
.intro__stars {
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.9) 50%, transparent),
        radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,0.7) 50%, transparent),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.8) 50%, transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.6) 50%, transparent),
        radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,0.7) 50%, transparent),
        radial-gradient(1px 1px at 60% 45%, rgba(255,255,255,0.5) 50%, transparent);
    background-size: 320px 320px;
    animation: intro-stars 60s linear infinite;
    opacity: 0.7;
}
.intro__stars--mid { background-size: 220px 220px; animation-duration: 40s; opacity: 0.5; }
.intro__stars--near { background-size: 160px 160px; animation-duration: 24s; opacity: 0.9; }
@keyframes intro-stars {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-160px, -120px, 0); }
}

/* --- Synthwave horizon grid --- */
.intro__grid {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -10%;
    height: 55%;
    background-image:
        linear-gradient(rgba(91, 141, 239,0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 141, 239,0.35) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(420px) rotateX(72deg);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    animation: intro-grid 4s linear infinite;
    opacity: 0.6;
}
@keyframes intro-grid {
    from { background-position: 0 0; }
    to { background-position: 0 48px; }
}

.intro__glow {
    position: absolute;
    left: 50%;
    top: 35%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(91, 141, 239,0.18) 0%, transparent 60%);
    filter: blur(8px);
    animation: intro-breathe 5s ease-in-out infinite;
}
@keyframes intro-breathe {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
}

/* --- Centerpiece --- */
.intro__stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}
.intro__orbit {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
    animation: intro-pop 1s cubic-bezier(.2,.9,.3,1.3) both;
}
.intro__planet {
    position: absolute;
    inset: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1bd7ff, #0a4d8c 70%, #052338);
    box-shadow: 0 0 40px rgba(91, 141, 239,0.5), inset -8px -8px 24px rgba(0,0,0,0.6);
}
.intro__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(91, 141, 239,0.5);
    animation: spin 12s linear infinite;
}
.intro__rocket {
    position: absolute;
    top: -14px;
    left: 50%;
    transform-origin: 0 104px;
    color: var(--primary-neon);
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(91, 141, 239,0.9));
    animation: intro-orbit 6s linear infinite;
}
@keyframes intro-orbit {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes intro-pop {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

.intro__title {
    font-size: clamp(2.2rem, 7vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0;
    background: linear-gradient(90deg, #5b8def, #7af9ff, #ffffff, #5b8def);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: intro-shine 4s linear infinite;
}
.intro__title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    animation: intro-letter 0.6s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro__title span.intro__space { width: 0.45em; animation: none; opacity: 1; }
.intro__title span:nth-child(1) { animation-delay: 0.35s; }
.intro__title span:nth-child(2) { animation-delay: 0.42s; }
.intro__title span:nth-child(3) { animation-delay: 0.49s; }
.intro__title span:nth-child(4) { animation-delay: 0.56s; }
.intro__title span:nth-child(6) { animation-delay: 0.66s; }
.intro__title span:nth-child(7) { animation-delay: 0.73s; }
.intro__title span:nth-child(8) { animation-delay: 0.80s; }
.intro__title span:nth-child(9) { animation-delay: 0.87s; }
.intro__title span:nth-child(10) { animation-delay: 0.94s; }
.intro__title span:nth-child(11) { animation-delay: 1.01s; }
.intro__title span:nth-child(12) { animation-delay: 1.08s; }
@keyframes intro-letter {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes intro-shine {
    to { background-position: 250% 0; }
}

.intro__tagline {
    margin-top: 0.8rem;
    color: var(--text-secondary);
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    letter-spacing: 0.06em;
    opacity: 0;
    animation: intro-rise 0.7s ease forwards 1.25s;
}
.intro__enter {
    margin-top: 2rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--primary-neon);
    background: rgba(91, 141, 239,0.1);
    color: var(--primary-neon);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    animation: intro-rise 0.7s ease forwards 1.5s, intro-pulse 2.4s ease-in-out infinite 2.2s;
    transition: background 0.2s ease, transform 0.2s ease;
}
.intro__enter:hover { background: rgba(91, 141, 239,0.2); transform: translateY(-2px); }
@keyframes intro-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91, 141, 239,0.4); }
    50% { box-shadow: 0 0 0 14px rgba(91, 141, 239,0); }
}
.intro__skip {
    position: absolute;
    top: 1.2rem;
    right: 1.4rem;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0;
    animation: intro-rise 0.5s ease forwards 0.8s;
}
.intro__skip:hover { color: var(--text-primary); }

/* Reduced motion / instant: drop the choreography. */
.intro--instant .intro__title span,
.intro--instant .intro__tagline,
.intro--instant .intro__enter,
.intro--instant .intro__skip { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
.intro--instant .intro__rocket,
.intro--instant .intro__ring,
.intro--instant .intro__stars { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .intro__stars, .intro__grid, .intro__rocket, .intro__ring, .intro__glow { animation: none !important; }
}

/* ============================================================
   Design tokens (additive — existing --*-neon vars kept)
   ============================================================ */
:root {
    --panel: #0f1726;
    --panel-2: #131d30;
    --surface-1: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text-lo: #97abb7;            /* raised vs --text-secondary for AA contrast */
    --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-pill: 999px;
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
    --side-w: 232px;
    --side-w-collapsed: 64px;
    --accent-line: rgba(91, 141, 239, 0.42);
    --accent-soft: rgba(91, 141, 239, 0.13);
    --text-faint: #5f7079;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

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

/* ============================================================
   Sidebar navigation (Option B)
   Pattern: fixed aside + body padding-left. Footer stays sticky
   via the existing body flex column.
   ============================================================ */
body.has-sidebar { padding-left: var(--side-w); transition: padding-left 0.2s ease; }
body.has-sidebar.side-collapsed { padding-left: var(--side-w-collapsed); }

.app-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--side-w);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-4) var(--s-3) var(--s-3);
    background: #070d13;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease, transform 0.2s ease;
}
.side-collapsed .app-side { width: var(--side-w-collapsed); }

.app-side__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px var(--s-4);
    font-weight: 800; font-size: 1.15rem; text-decoration: none;
    color: var(--text-primary); white-space: nowrap;
}
.app-side__brand img { width: 26px; height: 26px; flex: none; }
.app-side__brand .app-side__name {
    background: linear-gradient(135deg, var(--primary-neon), var(--secondary-neon));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.app-side__group {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--text-faint, #5f7079); padding: var(--s-3) 10px 4px; white-space: nowrap;
}
.app-side__link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-sm);
    color: var(--text-lo); text-decoration: none; font-size: 0.9rem; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.app-side__link .app-side__i { width: 18px; text-align: center; flex: none; color: var(--primary-neon); font-size: 1rem; }
.app-side__link:hover { background: var(--surface-2); color: var(--text-primary); }
.app-side__link.active {
    background: rgba(91, 141, 239, 0.1); color: var(--primary-neon);
    box-shadow: inset 2px 0 0 var(--primary-neon);
}
.app-side__spacer { flex: 1 1 auto; min-height: var(--s-4); }
.app-side__sep { height: 1px; background: var(--border-subtle); margin: var(--s-3) 6px; }

.app-side__collapse {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-sm);
    background: transparent; border: 1px solid var(--border-subtle);
    color: var(--text-lo); cursor: pointer; font-size: 0.85rem; white-space: nowrap;
}
.app-side__collapse:hover { color: var(--text-primary); background: var(--surface-2); }
.app-side__collapse .app-side__i { width: 18px; text-align: center; flex: none; }

/* Collapsed: hide every label, center icons */
.side-collapsed .app-side__name,
.side-collapsed .app-side__group,
.side-collapsed .app-side__link .app-side__label,
.side-collapsed .app-side__collapse .app-side__label { display: none; }
.side-collapsed .app-side__link,
.side-collapsed .app-side__collapse,
.side-collapsed .app-side__brand { justify-content: center; gap: 0; }
.side-collapsed .app-side { padding-left: var(--s-2); padding-right: var(--s-2); }

/* Header sidebar toggle */
.side-toggle {
    background: transparent; border: 1px solid rgba(91, 141, 239, 0.25);
    color: var(--primary-neon); border-radius: 10px;
    width: 38px; height: 34px; cursor: pointer; font-size: 1.05rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.side-toggle:hover { background: rgba(91, 141, 239, 0.1); }

.app-side__backdrop {
    position: fixed; inset: 0; z-index: 1035;
    background: rgba(3, 5, 8, 0.6); backdrop-filter: blur(2px);
    display: none;
}

/* Kiosk: hide the chrome, full-bleed content */
body.kiosk-mode { padding-left: 0 !important; }
body.kiosk-mode .app-side,
body.kiosk-mode .side-toggle,
body.kiosk-mode .app-side__backdrop { display: none !important; }

/* Mobile: off-canvas sidebar */
@media (max-width: 991px) {
    body.has-sidebar, body.has-sidebar.side-collapsed { padding-left: 0; }
    .app-side { transform: translateX(-100%); width: var(--side-w); }
    .side-collapsed .app-side { width: var(--side-w); }
    .side-collapsed .app-side__name,
    .side-collapsed .app-side__group,
    .side-collapsed .app-side__link .app-side__label,
    .side-collapsed .app-side__collapse .app-side__label { display: inline; }
    .side-collapsed .app-side__link, .side-collapsed .app-side__collapse, .side-collapsed .app-side__brand { justify-content: flex-start; gap: 12px; }
    body.side-open .app-side { transform: translateX(0); }
    body.side-open .app-side__backdrop { display: block; }
}

/* ---- Topbar actions (search trigger + live) ---- */
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.live-indicator__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-neon); box-shadow: 0 0 8px var(--success-neon); animation: pulse-dot 2s ease-in-out infinite; }
.topbar-search {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--surface-1); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); cursor: pointer; font-size: 0.85rem;
}
.topbar-search:hover { border-color: var(--accent-line); color: var(--text-primary); }
.topbar-search__kbd { font-family: var(--mono, monospace); font-size: 0.7rem; border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 6px; color: var(--text-secondary); }
@media (max-width: 640px) {
    .topbar-search__label, .live-indicator { display: none; }
}
.pinned-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.5rem 0 1rem;
}
.pinned-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   Phase 3 — polish: missing Bootstrap overrides + surface crispness
   ============================================================ */

/* Dark form inputs (were raw Bootstrap light boxes) */
.form-control {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-md) !important;
}
.form-control::placeholder { color: var(--text-faint) !important; opacity: 1; }
.form-control:focus {
    background: var(--surface-2) !important;
    border-color: var(--primary-neon) !important;
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
    color: var(--text-primary) !important;
}

/* Visible dropdown caret + dark bg on selects */
.form-select {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-md) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6b4c8' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
    background-size: 14px 12px !important;
    padding-right: 2rem !important;
}

/* Switches / checkboxes */
.form-check-input { background-color: var(--surface-2); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary-neon); border-color: var(--primary-neon); }
.form-check-input:focus { border-color: var(--primary-neon); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Alert: dark warning variant */
.alert-warning {
    background: rgba(251, 191, 36, 0.10) !important;
    border: 1px solid var(--warning-neon) !important;
    color: var(--warning-neon) !important;
}

/* Semantic outline buttons (were raw Bootstrap fills) */
.btn-outline-info    { background: var(--surface-1) !important; border: 1px solid var(--border-subtle) !important; color: var(--primary-neon) !important; }
.btn-outline-success { background: rgba(52, 211, 153, 0.10) !important; border: 1px solid rgba(52, 211, 153, 0.45) !important; color: var(--success-neon) !important; }
.btn-outline-danger  { background: rgba(251, 113, 133, 0.10) !important; border: 1px solid rgba(251, 113, 133, 0.45) !important; color: var(--danger-neon) !important; }
.btn-outline-warning { background: rgba(251, 191, 36, 0.10) !important; border: 1px solid rgba(251, 191, 36, 0.45) !important; color: var(--warning-neon) !important; }
.btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover { filter: brightness(1.15); }
.btn-outline-primary.active, .btn-outline-secondary.active, .btn-outline-info.active,
.btn-outline-success.active, .btn-outline-danger.active, .btn-outline-warning.active {
    background: var(--accent-soft) !important; border-color: var(--accent-line) !important; color: var(--primary-neon) !important;
    box-shadow: inset 0 0 0 1px var(--accent-line) !important;
}

/* Keycaps (raw Bootstrap kbd was a grey #212529 pill) */
kbd {
    font-family: var(--mono); background: var(--surface-2);
    border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
    padding: 1px 6px; color: var(--text-secondary); box-shadow: none;
}

/* JS-injected primary badge + warning text util on dark */
.badge.bg-primary { background: var(--accent-soft) !important; border: 1px solid var(--accent-line) !important; color: var(--primary-neon) !important; }
.text-warning { color: var(--warning-neon) !important; }

/* Crisp solid panels for KPI/card surfaces (were faint translucent washes on the ground) */
.stats-kpi, .project-stat, .compare-head, .help-card, .about-hero {
    background: var(--panel);
    border-color: var(--border-subtle);
}