/* ═══════════════════════════════════════════════════════════════════════════
   BloxVault - Premium Admin Theme
   A sleek, modern design system for Roblox game wikis
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   FONTS - Plus Jakarta Sans (Premium, distinctive typography) & Exo 2 (Display)
   ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Exo+2:wght@700;800&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   CSS VARIABLES - Design Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand Colors */
    --cms-primary: #00d4ff;
    --cms-primary-hover: #00b8e6;
    --cms-secondary: #a855f7;
    --cms-accent: #22d3ee;
    
    /* Semantic Colors */
    --cms-success: #34d399;
    --cms-warning: #fbbf24;
    --cms-error: #f87171;
    --cms-info: #60a5fa;
    
    /* Dark Mode Background Layers */
    --cms-bg-base: #08080d;
    --cms-bg-elevated: #0f0f1a;
    --cms-bg-surface: #16161f;
    --cms-bg-overlay: #1e1e2e;
    --cms-bg-hover: #252536;
    
    /* Text Colors */
    --cms-text-primary: #f1f5f9;
    --cms-text-secondary: #94a3b8;
    --cms-text-muted: #64748b;
    --cms-text-disabled: #475569;
    
    /* Borders */
    --cms-border: rgba(255, 255, 255, 0.08);
    --cms-border-hover: rgba(255, 255, 255, 0.15);
    --cms-border-focus: var(--cms-primary);
    
    /* Shadows */
    --cms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cms-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --cms-shadow-glow: 0 0 40px rgba(129, 140, 248, 0.15);
    
    /* Transitions */
    --cms-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cms-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --cms-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Spacing */
    --cms-radius-sm: 8px;
    --cms-radius-md: 12px;
    --cms-radius-lg: 16px;
    --cms-radius-xl: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--cms-bg-base);
    color: var(--cms-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* Selection */
::selection {
    background: rgba(129, 140, 248, 0.3);
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT - Drawer & Navigation
   ───────────────────────────────────────────────────────────────────────────── */

/* Sidebar/Drawer styling */
.mud-drawer {
    background: linear-gradient(180deg, var(--cms-bg-elevated) 0%, var(--cms-bg-base) 100%) !important;
    border-right: 1px solid var(--cms-border) !important;
}

/* Logo area */
.cms-logo-area {
    padding: 24px 20px;
    border-bottom: 1px solid var(--cms-border);
    margin-bottom: 8px;
}

.cms-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cms-logo-icon {
    color: var(--cms-primary) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.3));
}

.cms-logo-text {
    font-family: 'Exo 2', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--cms-primary) 0%, var(--cms-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cms-logo-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 3px 8px;
    background: var(--cms-primary);
    color: #08080d;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

/* Nav section headers */
.cms-nav-section {
    padding: 16px 20px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cms-text-muted);
}

/* Nav links */
.mud-nav-link {
    margin: 2px 12px !important;
    border-radius: var(--cms-radius-sm) !important;
    transition: var(--cms-transition-fast) !important;
    color: var(--cms-text-secondary) !important;
}

.mud-nav-link:hover {
    background: var(--cms-bg-hover) !important;
    color: var(--cms-text-primary) !important;
}

.mud-nav-link.active {
    background: rgba(129, 140, 248, 0.12) !important;
    color: var(--cms-primary) !important;
}

.mud-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--cms-primary);
    border-radius: 0 3px 3px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT - Main Content Area
   ───────────────────────────────────────────────────────────────────────────── */

.mud-main-content {
    background: var(--cms-bg-base) !important;
    min-height: 100vh;
}

/* AppBar */
.mud-appbar {
    background: rgba(8, 8, 13, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cms-border) !important;
    box-shadow: none !important;
}

/* Page container */
.cms-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px;
}

/* Page header */
.cms-page-header {
    margin-bottom: 32px;
}

.cms-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cms-text-primary);
    margin-bottom: 4px;
}

.cms-page-subtitle {
    font-size: 0.9375rem;
    color: var(--cms-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Cards
   ───────────────────────────────────────────────────────────────────────────── */

.mud-paper {
    background: var(--cms-bg-surface) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-md) !important;
    box-shadow: var(--cms-shadow-sm) !important;
}

/* Stats cards */
.cms-stat-card {
    padding: 24px;
    border-radius: var(--cms-radius-lg);
    background: linear-gradient(135deg, var(--cms-bg-surface) 0%, var(--cms-bg-overlay) 100%);
    border: 1px solid var(--cms-border);
    transition: var(--cms-transition-normal);
    position: relative;
    overflow: hidden;
}

.cms-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

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

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

.cms-stat-card-icon.primary { background: rgba(129, 140, 248, 0.15); color: var(--cms-primary); }
.cms-stat-card-icon.success { background: rgba(52, 211, 153, 0.15); color: var(--cms-success); }
.cms-stat-card-icon.warning { background: rgba(251, 191, 36, 0.15); color: var(--cms-warning); }
.cms-stat-card-icon.info { background: rgba(96, 165, 250, 0.15); color: var(--cms-info); }

.cms-stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Tables & Data Grid
   ───────────────────────────────────────────────────────────────────────────── */

.mud-table, .mud-data-grid {
    background: transparent !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-lg) !important;
    overflow: hidden;
}

.mud-table-container {
    background: var(--cms-bg-surface) !important;
}

.mud-table-head {
    background: var(--cms-bg-overlay) !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--cms-text-secondary) !important;
    border-bottom: 1px solid var(--cms-border) !important;
    padding: 16px 20px !important;
}

.mud-table-body .mud-table-row {
    transition: var(--cms-transition-fast);
}

.mud-table-body .mud-table-row:hover {
    background: var(--cms-bg-hover) !important;
}

.mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--cms-border) !important;
    padding: 16px 20px !important;
    color: var(--cms-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.mud-button-root {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: var(--cms-radius-sm) !important;
    transition: var(--cms-transition-fast) !important;
}

.mud-button-filled.mud-button-primary {
    background: linear-gradient(135deg, var(--cms-primary) 0%, var(--cms-primary-hover) 100%) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35) !important;
}

.mud-button-filled.mud-button-primary:hover {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
}

.mud-button-outlined {
    border-color: var(--cms-border) !important;
}

.mud-button-outlined:hover {
    border-color: var(--cms-border-hover) !important;
    background: var(--cms-bg-hover) !important;
}

/* Icon buttons */
.mud-icon-button {
    border-radius: var(--cms-radius-sm) !important;
    transition: var(--cms-transition-fast) !important;
}

.mud-icon-button:hover {
    background: var(--cms-bg-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Chips & Badges
   ───────────────────────────────────────────────────────────────────────────── */

.mud-chip {
    font-weight: 500 !important;
    border-radius: 6px !important;
}

.mud-chip.mud-chip-filled.mud-success {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--cms-success) !important;
}

.mud-chip.mud-chip-filled.mud-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: var(--cms-warning) !important;
}

.mud-chip.mud-chip-filled.mud-info {
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--cms-info) !important;
}

.mud-chip.mud-chip-filled.mud-error {
    background: rgba(248, 113, 113, 0.15) !important;
    color: var(--cms-error) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Forms & Inputs
   ───────────────────────────────────────────────────────────────────────────── */

.mud-input-control {
    margin-bottom: 8px !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--cms-border) !important;
    border-radius: var(--cms-radius-sm) !important;
    transition: var(--cms-transition-fast) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--cms-border-hover) !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--cms-primary) !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

.mud-input {
    color: var(--cms-text-primary) !important;
}

.mud-input-label {
    color: var(--cms-text-secondary) !important;
}

.mud-input-helper-text {
    color: var(--cms-text-muted) !important;
}

/* Select dropdowns */
.mud-select .mud-input-slot {
    background: var(--cms-bg-surface) !important;
}

.mud-popover-paper {
    background: var(--cms-bg-surface) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-md) !important;
    box-shadow: var(--cms-shadow-lg) !important;
}

.mud-list-item {
    transition: var(--cms-transition-fast) !important;
}

.mud-list-item:hover {
    background: var(--cms-bg-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Dialogs
   ───────────────────────────────────────────────────────────────────────────── */

.mud-dialog {
    background: var(--cms-bg-surface) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-lg) !important;
    box-shadow: var(--cms-shadow-lg), var(--cms-shadow-glow) !important;
}

.mud-dialog-title {
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid var(--cms-border) !important;
}

.mud-dialog-content {
    padding: 24px !important;
}

.mud-dialog-actions {
    padding: 16px 24px 24px !important;
    border-top: 1px solid var(--cms-border) !important;
    gap: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Snackbars & Alerts
   ───────────────────────────────────────────────────────────────────────────── */

.mud-snackbar {
    background: var(--cms-bg-surface) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-md) !important;
    box-shadow: var(--cms-shadow-lg) !important;
}

.mud-snackbar-content-message {
    color: var(--cms-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Avatars
   ───────────────────────────────────────────────────────────────────────────── */

.mud-avatar {
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Checkboxes & Switches
   ───────────────────────────────────────────────────────────────────────────── */

/* Fix checkbox hover - make it circular */
.mud-checkbox .mud-button-root::before,
.mud-checkbox .mud-icon-button::before {
    border-radius: 50% !important;
}

/* Style the actual checkbox icon hover */
.mud-checkbox:hover .mud-icon-root {
    color: var(--cms-primary) !important;
}

/* Fix switch/toggle hover - remove square background around thumb */
.mud-switch .mud-button-root,
.mud-switch .mud-switch-button {
    background: transparent !important;
}

.mud-switch .mud-button-root:hover,
.mud-switch .mud-switch-button:hover {
    background: transparent !important;
}

.mud-switch .mud-button-root::before,
.mud-switch .mud-switch-button::before {
    display: none !important;
}

/* Ensure the switch track and thumb look correct */
.mud-switch-track {
    background-color: var(--cms-border) !important;
}

.mud-switch-thumb {
    background-color: var(--cms-text-muted) !important;
}

.mud-switch input:checked + .mud-switch-track {
    background-color: var(--cms-primary) !important;
    opacity: 0.5;
}

.mud-switch input:checked + .mud-switch-track .mud-switch-thumb {
    background-color: var(--cms-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Tabs (World Selection)
   ───────────────────────────────────────────────────────────────────────────── */

.mud-tabs {
    background: var(--cms-bg-surface) !important;
    border-radius: var(--cms-radius-md);
    border: 1px solid var(--cms-border);
}

.mud-tab {
    color: var(--cms-text-muted) !important;
    font-weight: 500;
    text-transform: none !important;
    min-width: 120px;
    transition: all 0.2s ease;
}

.mud-tab:hover {
    color: var(--cms-text-primary) !important;
    background: var(--cms-bg-overlay) !important;
}

.mud-tab.mud-tab-active {
    color: var(--cms-text-primary) !important;
    background: var(--cms-bg-overlay) !important;
    font-weight: 600;
}

/* Hide the default indicator line */
.mud-tabs-toolbar .mud-tab-slider {
    display: none !important;
}

/* Custom active indicator with world color */
.mud-tab.mud-tab-active {
    border-bottom: 3px solid var(--cms-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENTS - Progress
   ───────────────────────────────────────────────────────────────────────────── */

.mud-progress-circular svg circle:first-child {
    stroke: var(--cms-border) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES - Empty States
   ───────────────────────────────────────────────────────────────────────────── */

.cms-empty-state {
    padding: 64px 32px;
    text-align: center;
    background: linear-gradient(135deg, var(--cms-bg-surface) 0%, var(--cms-bg-overlay) 100%);
    border: 1px dashed var(--cms-border);
    border-radius: var(--cms-radius-lg);
}

.cms-empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--cms-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cms-text-muted);
}

.cms-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cms-text-primary);
    margin-bottom: 8px;
}

.cms-empty-state-description {
    color: var(--cms-text-secondary);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES - Animations
   ───────────────────────────────────────────────────────────────────────────── */

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

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

.cms-fade-in {
    animation: fadeIn var(--cms-transition-slow) ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .cms-page-container {
        padding: 24px 20px;
    }
    
    .cms-page-title {
        font-size: 1.5rem;
    }
}