@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;800&family=Orbitron:wght@400;600;800;900&display=swap');

/* SCOPED TRANSFORMERS THEME */
.transformers-active {
    --transformer-primary: #00d2ff;
    --transformer-secondary: #0a0c10;
    --transformer-metallic: #c0c0c0;
    --transformer-glow: rgba(0, 210, 255, 0.4);
    
    /* Radzen Variable Overrides for high visibility */
    --rz-body-background-color: #0d1117;
    --rz-text-color: #ffffff;
    --rz-grid-cell-color: #ffffff;
    --rz-grid-header-background-color: #161b22;
    --rz-grid-header-color: var(--transformer-primary);
    --rz-grid-stripe-background-color: #161b22;
    
    background: #0d1117 !important;
    font-family: 'Exo 2', sans-serif !important;
    color: #ffffff !important;
}


/* Ensure the main container grows to full height */

.transformers-active main {
    background: #0d1117 !important;
}

/* Typography Overrides */
.transformers-active h1, 
.transformers-active h2, 
.transformers-active h3, 
.transformers-active .rz-text-h6,
.transformers-active .rz-text-h5,
.transformers-active .rz-text-h4 {
    font-family: 'Orbitron', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--transformer-primary) !important;
    text-shadow: 0 0 10px var(--transformer-glow) !important;
}

.transformers-active .rz-text-body2,
.transformers-active .rz-text-body1,
.transformers-active .rz-text-subtitle1,
.transformers-active .rz-text-subtitle2,
.transformers-active .rz-text-caption,
.transformers-active .rz-text-overline,
.transformers-active .rz-text-button,
.transformers-active p,
.transformers-active span,
.transformers-active label,
.transformers-active .text-muted,
.transformers-active .rz-text-secondary,
.transformers-active .rz-color-base-400,
.transformers-active .rz-color-base-500,
.transformers-active .rz-color-base-600 {
    color: #e0e0e0 !important;
}

/* Layout & Panels - Increased Opacity for Visibility */
.transformers-active .rz-card, 
.transformers-active .rz-tabview-panels,
.transformers-active .rz-background-color-base-100,
.transformers-active .rz-background-color-base-200,
.transformers-active .rz-background-color-base-300 {
    background: #161b22 !important; /* Solid background for clarity */
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8) !important;
    border-radius: 4px !important;
}

/* HUD Decorative Corners for Cards */
.transformers-active .rz-card {
    position: relative;
}

.transformers-active .rz-card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px; width: 15px; height: 15px;
    border-bottom: 3px solid var(--transformer-primary);
    border-right: 3px solid var(--transformer-primary);
}

/* Radzen Button Overrides */
.transformers-active .rz-button {
    background: linear-gradient(135deg, #161b22 0%, #30363d 100%) !important;
    border: 1px solid var(--transformer-primary) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important;
}

.transformers-active .rz-button:hover:not(.rz-state-disabled) {
    box-shadow: 0 0 20px var(--transformer-primary) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.2) !important;
}

/* DataGrid Cybertron Style - Forced dark background for all rows */
.transformers-active .rz-datagrid {
    border: 1px solid #30363d !important;
}

.transformers-active .rz-datagrid-thead th {
    background: #21262d !important;
    color: var(--transformer-primary) !important;
    font-family: 'Orbitron', sans-serif !important;
    border-bottom: 2px solid var(--transformer-primary) !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

/* NUCLEAR FIX FOR DATA TABLES (Screenshot 7/8/9 fix) */
/* Force absolute darkness for all table-related elements in game context */
.transformers-active table,
.transformers-active .rz-datagrid,
.transformers-active .rz-grid-table,
.transformers-active .rz-datatable,
.transformers-active tr,
.transformers-active td,
.transformers-active th,
.transformers-active [class*="rz-datagrid"],
.transformers-active [class*="rz-grid-table"],
.transformers-active .rz-datagrid-data,
.transformers-active .rz-datagrid-row-alternate {
    background-color: #0d1117 !important;
    background: #0d1117 !important;
}

.transformers-active .rz-datagrid-data td,
.transformers-active .rz-grid-table td,
.transformers-active tr td,
.transformers-active .rz-datagrid-odd td,
.transformers-active .rz-datagrid-even td,
.transformers-active .rz-datagrid-row-alternate td {
    background-color: #0d1117 !important;
    background: #0d1117 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #21262d !important;
}

.transformers-active {
    --rz-grid-stripe-background-color: #0d1117 !important;
    --rz-datagrid-row-background-color: #0d1117 !important;
    --rz-datagrid-row-alternate-background-color: #0d1117 !important;
    --rz-grid-cell-background-color: #0d1117 !important;
    --rz-grid-background-color: #0d1117 !important;
    --rz-grid-stripe-color: #ffffff !important;
}

.transformers-active .rz-datagrid-row-selected td {
    background: rgba(0, 210, 255, 0.2) !important;
    color: var(--transformer-primary) !important;
}

/* Progress Bars & Badges */
.transformers-active .rz-progressbar-value {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5) !important;
    box-shadow: 0 0 10px var(--transformer-primary) !important;
}

.transformers-active .rz-badge {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 1px !important;
}

/* Navigation & Dropdowns - Fixing Light Backdrops */
.transformers-active .rz-tabview-nav li {
    background: transparent !important;
}

.transformers-active .rz-tabview-nav li.rz-tabview-selected {
    border-bottom: 3px solid var(--transformer-primary) !important;
}

.transformers-active .rz-tabview-nav li.rz-tabview-selected a {
    color: var(--transformer-primary) !important;
    text-shadow: 0 0 10px var(--transformer-glow) !important;
}

/* Quiz questions & Labels for readability (Screenshot 3 fix) */
.transformers-active .rz-label,
.transformers-active label,
.transformers-active .rz-radio-button-label,
.transformers-active .rz-chkbox-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.transformers-active .rz-text-h4,
.transformers-active .rz-text-h5,
.transformers-active .rz-text-h6 {
    color: var(--transformer-primary) !important;
}

.transformers-active .rz-radio-button-list {
    color: #ffffff !important;
}

.transformers-active .rz-dropdown,
.transformers-active .rz-dropdown-panel,
.transformers-active .rz-dropdown-items {
    background: #0d1117 !important;
    color: white !important;
    border: 1px solid #30363d !important;
}

.transformers-active .rz-dropdown-item {
    color: white !important;
}

.transformers-active .rz-dropdown-item:hover,
.transformers-active .rz-dropdown-item.rz-state-highlight {
    background: var(--transformer-primary) !important;
    color: black !important;
}

/* Dropdown in NavMenu / Top Bar fix (Screenshot 1 fix) */
.transformers-active .top-row {
    background: #0d1117 !important;
    border-bottom: 2px solid var(--transformer-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.2) !important;
}

.transformers-active .rz-menu, 
.transformers-active .rz-navigation-item-wrapper,
.transformers-active .rz-navigation-item-content {
    background: #0d1117 !important;
    color: white !important;
}

.transformers-active .top-brand-text {
    color: var(--transformer-primary) !important;
    font-family: 'Orbitron', sans-serif !important;
}

/* Scoped Overrides for Shared Game Top Bar (Screenshot 4 fix) */
.transformers-active .game-top-bar,
.transformers-active .game-coin-display {
    background: #0b0e14 !important; /* Solid dark background */
    border-bottom: 3px solid var(--transformer-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 210, 255, 0.3) !important;
    color: #ffffff !important;
}

.transformers-active .game-coin-display span,
.transformers-active .game-coin-display p,
.transformers-active .game-coin-display .rz-text-subtitle1,
.transformers-active .game-coin-display .rz-text-caption {
    color: #ffffff !important;
}
/* Game Coin Display (Player Top Bar) - Nuclear Override of inline styles */
.transformers-active .game-coin-display {
    background: #0a0c10 !important;
    background-color: #0a0c10 !important;
    color: var(--transformer-primary) !important;
    border-bottom: 2px solid var(--transformer-primary) !important;
    box-shadow: 0 4px 15px var(--transformer-glow) !important;
}

.transformers-active .game-coin-display * {
    color: #ffffff !important;
}

.transformers-active .game-coin-display .rz-icon,
.transformers-active .game-coin-display i {
    color: var(--transformer-primary) !important;
    text-shadow: 0 0 8px var(--transformer-glow) !important;
}

.transformers-active .game-coin-display .rz-image,
.transformers-active .game-coin-display img {
    border: 2px solid var(--transformer-primary) !important;
    background: #000 !important;
    box-shadow: 0 0 10px var(--transformer-glow) !important;
}

/* Badges / Coins - Transforming yellow badges into Energon/Metallic containers */
.transformers-active .badge.bg-warning {
    background: linear-gradient(135deg, #0d1117, #161b22) !important;
    color: var(--transformer-primary) !important;
    border: 1px solid var(--transformer-primary) !important;
    box-shadow: 0 0 5px var(--transformer-glow) !important;
    font-family: 'Orbitron', sans-serif !important;
    text-transform: uppercase !important;
}

/* Team Selection HUD Buttons (Game Lobby) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.team-select-button {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 120px !important;
    position: relative !important;
    overflow: hidden !important;
}

.team-select-button:not(.disabled):hover {
    border-color: var(--transformer-primary) !important;
    box-shadow: 0 0 15px var(--transformer-glow) !important;
    transform: translateY(-2px) !important;
    background: rgba(0, 210, 255, 0.05) !important;
}

.team-select-button.selected {
    border-color: var(--transformer-primary) !important;
    box-shadow: 0 0 20px var(--transformer-glow) !important;
    background: rgba(0, 210, 255, 0.1) !important;
}

.team-select-button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(1) !important;
}

.team-avatar-container {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #30363d !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: border-color 0.3s ease !important;
}

.team-select-button:not(.disabled):hover .team-avatar-container {
    border-color: var(--transformer-primary) !important;
}

.team-count-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: var(--transformer-primary) !important;
    color: #000 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-family: 'Orbitron', sans-serif !important;
}

/* Bootstrap List Group Theming (Station Tracker & Comments) */
.transformers-active .list-group-item {
    background-color: #161b22 !important;
    background: #161b22 !important;
    color: #ffffff !important;
    border-color: #30363d !important;
}

.transformers-active .list-group-item:hover {
    background-color: #1c2128 !important;
}

.transformers-active .list-group-flush .list-group-item {
    border-bottom: 1px solid #30363d !important;
}

/* Custom Question/Answer Boxes - Overriding inline light gradients */
.transformers-active .question-box,
.transformers-active [style*="background-color: var(--rz-secondary-lighter)"],
.transformers-active [style*="background: linear-gradient(135deg, #e3f2fd, #f3e5f5)"] {
    background: #161b22 !important;
    background-color: #161b22 !important;
    border-left: 4px solid var(--transformer-primary) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs & Form Elements */
.transformers-active .rz-textarea,
.transformers-active .rz-textbox,
.transformers-active .rz-dropdown,
.transformers-active .form-control {
    background-color: #0d1117 !important;
    color: #ffffff !important;
    border: 1px solid #30363d !important;
}

.transformers-active .rz-textarea:focus,
.transformers-active .rz-textbox:focus,
.transformers-active .form-control:focus {
    border-color: var(--transformer-primary) !important;
    box-shadow: 0 0 5px var(--transformer-glow) !important;
}

/* File Input Specifically */
.transformers-active input[type="file"] {
    background-color: #161b22 !important;
    color: #e0e0e0 !important;
    border: 1px solid #30363d !important;
}

/* Typography on White Backgrounds (Fixing dark text remnants) */
.transformers-active .list-group-item span,
.transformers-active .list-group-item div,
.transformers-active .list-group-item strong {
    color: #ffffff !important;
}

.transformers-active .text-muted,
.transformers-active small {
    color: #8b949e !important;
}

/* Red / Purple icons in Admin - Keeping colors but adding themed glow */
.transformers-active .rz-icon[style*="color:#e53935"],
.transformers-active .rz-icon[style*="red"] {
    filter: drop-shadow(0 0 5px rgba(229, 57, 53, 0.6)) !important;
}

.transformers-active .rz-icon[style*="color:#8e24aa"],
.transformers-active .rz-icon[style*="purple"] {
    filter: drop-shadow(0 0 5px rgba(142, 36, 170, 0.6)) !important;
}

/* Universal Icon Glow for the theme */
.transformers-active .rz-icon {
    text-shadow: 0 0 5px var(--transformer-glow);
}