/**
 * Abide AI Governance - Command Strip Banner
 * 
 * A full-width mission-critical control bar featuring:
 * - Human In Command status
 * - Live activity indicators  
 * - Pending review count
 * - HALT ALL emergency button
 * - Quick access to command center
 */

/* ============================================================================
   COMMAND STRIP BANNER
   ============================================================================ */

.command-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 78, 59, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: visible;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

/* Subtle animated gradient sweep */
.command-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16, 185, 129, 0.08) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: stripSweep 4s ease-in-out infinite;
}

@keyframes stripSweep {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(100%); }
}

/* Left Section - Status & Info */
.command-strip-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.command-strip-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.command-strip-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--green, #10B981), #065F46);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    position: relative;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Live pulse indicator */
.command-strip-icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    background: #10B981;
    border: 2px solid var(--midnight, #0B0F19);
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 0 6px transparent;
        opacity: 0.8;
    }
}

.command-strip-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.command-strip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1, #F9FAFB);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.command-strip-title .active-badge {
    padding: 3px 8px;
    background: #10B981;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.command-strip-subtitle {
    font-size: 0.8125rem;
    color: var(--text-3, #9CA3AF);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Divider */
.command-strip-divider {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.4), transparent);
}

/* Stats Section */
.command-strip-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}

.command-strip-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.command-strip-stat .stat-icon {
    font-size: 1rem;
}

.command-strip-stat .stat-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1, #F9FAFB);
}

.command-strip-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted, #6B7280);
}

.command-strip-stat.pending {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}

.command-strip-stat.pending .stat-value {
    color: #F59E0B;
}

/* Right Section - Actions - ALWAYS VISIBLE */
.command-strip-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Console Button */
.command-strip-console {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    color: #10B981;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.command-strip-console:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10B981;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.command-strip-console .arrow {
    transition: transform 0.2s ease;
}

.command-strip-console:hover .arrow {
    transform: translateX(3px);
}

/* HALT ALL Button - The Star of the Show */
.halt-all-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border: 2px solid #EF4444;
    border-radius: 8px;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(239, 68, 68, 0.3),
        0 4px 12px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.halt-all-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.halt-all-btn:hover {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
    border-color: #F87171;
    transform: translateY(-2px);
    box-shadow: 
        0 0 0 2px rgba(239, 68, 68, 0.4),
        0 8px 24px rgba(239, 68, 68, 0.4),
        0 0 40px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.halt-all-btn:active {
    transform: translateY(0);
}

.halt-all-btn .halt-icon {
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.halt-all-btn .halt-icon::before {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 2px;
}

/* Halt button confirmation state */
.halt-all-btn.confirming {
    animation: haltPulse 0.5s ease-in-out infinite;
}

@keyframes haltPulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px rgba(239, 68, 68, 0.6),
            0 0 20px rgba(239, 68, 68, 0.6);
    }
    50% { 
        box-shadow: 
            0 0 0 4px rgba(239, 68, 68, 0.4),
            0 0 40px rgba(239, 68, 68, 0.4);
    }
}

/* ============================================================================
   PENDING COUNT BLINK ANIMATION
   ============================================================================ */

.command-strip-stat.pending .stat-value {
    animation: pendingBlink 1.5s ease-in-out infinite;
}

@keyframes pendingBlink {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    }
    50% { 
        opacity: 0.4;
        text-shadow: 0 0 2px rgba(245, 158, 11, 0.3);
    }
}

/* Extra urgency when count > 0 */
.command-strip-stat.pending.has-pending {
    animation: pendingStatPulse 2s ease-in-out infinite;
}

@keyframes pendingStatPulse {
    0%, 100% { 
        background: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.25);
    }
    50% { 
        background: rgba(245, 158, 11, 0.25);
        border-color: rgba(245, 158, 11, 0.6);
    }
}

/* ============================================================================
   RESPONSIVE DESIGN - PROGRESSIVE DISCLOSURE
   Priority: HALT ALL > Console > Title > Stats > Subtitle
   ============================================================================ */

/* Hide stats labels first (wide screens) */
@media (max-width: 1350px) {
    .command-strip-stat .stat-label {
        display: none;
    }
    
    .command-strip-stats {
        gap: 10px;
    }
    
    .command-strip-stat {
        padding: 6px 10px;
    }
}

/* Hide stats entirely */
@media (max-width: 1150px) {
    .command-strip-stats {
        display: none;
    }
    
    .command-strip-divider {
        display: none;
    }
    
    .command-strip {
        padding: 10px 20px;
    }
}

/* Hide subtitle */
@media (max-width: 950px) {
    .command-strip-subtitle {
        display: none;
    }
    
    .command-strip-icon {
        width: 38px;
        height: 38px;
        font-size: 1.125rem;
    }
    
    .command-strip-title {
        font-size: 0.875rem;
    }
}

/* Compact console button */
@media (max-width: 800px) {
    .command-strip-console span:not(.arrow) {
        display: none;
    }
    
    .command-strip-console {
        padding: 10px 12px;
    }
    
    .halt-all-btn {
        padding: 10px 16px;
        font-size: 0.8125rem;
    }
    
    .command-strip {
        padding: 10px 16px;
        gap: 12px;
    }
}

/* Mobile - minimal */
@media (max-width: 600px) {
    .command-strip-left {
        gap: 10px;
    }
    
    .command-strip-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        border-radius: 8px;
    }
    
    .command-strip-icon::after {
        width: 10px;
        height: 10px;
        top: -2px;
        right: -2px;
        border-width: 2px;
    }
    
    .command-strip-title {
        font-size: 0.75rem;
        gap: 6px;
    }
    
    .active-badge {
        padding: 2px 6px;
        font-size: 0.5625rem;
    }
    
    .halt-all-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    
    .halt-all-btn .halt-icon {
        width: 14px;
        height: 14px;
    }
    
    .halt-all-btn .halt-icon::before {
        width: 6px;
        height: 6px;
    }
    
    .command-strip {
        padding: 8px 12px;
        gap: 10px;
    }
}

/* ============================================================================
   LIGHT THEME ADJUSTMENTS
   ============================================================================ */

[data-theme="light"] .command-strip {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(6, 78, 59, 0.08) 100%);
    border-color: rgba(5, 150, 105, 0.2);
}

[data-theme="light"] .command-strip-icon {
    box-shadow: 0 0 16px rgba(5, 150, 105, 0.25);
}

[data-theme="light"] .command-strip-stat {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .halt-all-btn {
    box-shadow: 
        0 0 0 1px rgba(220, 38, 38, 0.2),
        0 4px 12px rgba(220, 38, 38, 0.2);
}

/* ============================================================================
   HALTED STATE - When system is halted
   ============================================================================ */

.command-strip.halted {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(127, 29, 29, 0.15) 100%);
    border-color: rgba(239, 68, 68, 0.5);
    animation: haltedStrip 1s ease-in-out infinite;
}

@keyframes haltedStrip {
    0%, 100% { border-color: rgba(239, 68, 68, 0.4); }
    50% { border-color: rgba(239, 68, 68, 0.7); }
}

.command-strip.halted .command-strip-icon {
    background: linear-gradient(135deg, #EF4444, #991B1B);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.command-strip.halted .command-strip-title .active-badge {
    background: #EF4444;
    animation: none;
}

.command-strip.halted .halt-all-btn {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: #10B981;
    box-shadow: 
        0 0 0 1px rgba(16, 185, 129, 0.3),
        0 4px 12px rgba(16, 185, 129, 0.3);
}

.command-strip.halted .halt-all-btn:hover {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    border-color: #34D399;
    box-shadow: 
        0 0 0 2px rgba(16, 185, 129, 0.4),
        0 8px 24px rgba(16, 185, 129, 0.4);
}