/* ==============================================
   MAIN CSS ENTRY POINT
   Meta Militia Dashboard
   
   This file imports all CSS modules in the correct order.
   Load this single file in your HTML instead of styles.css
   ============================================== */

/* ==============================================
   BASE STYLES
   Foundation styles that other modules depend on
   ============================================== */

/* CSS Variables and Theme Definitions */
@import url('base/variables.css');

/* CSS Reset and Base Typography */
@import url('base/reset.css');

/* Keyframe Animations */
@import url('base/animations.css');


/* ==============================================
   LAYOUT STYLES
   Structural layout and positioning
   ============================================== */

/* Container, Main Layout, Sections */
@import url('layout/container.css');

/* Sidebar Navigation */
@import url('layout/sidebar.css');


/* ==============================================
   COMPONENT STYLES
   Reusable UI components
   ============================================== */

/* Cards, Stat Boxes, Chart Boxes */
@import url('components/cards.css');

/* Buttons and Button Groups */
@import url('components/buttons.css');

/* Tables and Data Display */
@import url('components/tables.css');

/* Form Inputs, Selects, Toggles */
@import url('components/forms.css');

/* Loading States and Spinners */
@import url('components/loading.css');

/* Messages and Notifications */
@import url('components/messages.css');

/* Theme Selector and Admin Menu */
@import url('components/theme-selector.css');

/* Modal Dialogs */
@import url('components/modals.css');


/* ==============================================
   SECTION-SPECIFIC STYLES
   Styles for specific page sections
   ============================================== */

/* Boss Section */
@import url('sections/bosses.css');

/* Activity Feed */
@import url('sections/activity.css');

/* Wealth Section */
@import url('sections/wealth.css');

/* Events/Bingo Section */
@import url('sections/events.css');


/* ==============================================
   RESPONSIVE STYLES
   Mobile and tablet breakpoints
   ============================================== */

/* Mobile Responsive Styles */
@import url('layout/mobile.css');


/* ==============================================
   THEME APPLICATION
   Apply theme variables to elements
   These rules use CSS variables defined in variables.css
   ============================================== */

/* Body Background with Theme Variables */
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

body::before {
    background: 
        radial-gradient(circle at 20% 50%, var(--glow-color) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--glow-color) 0%, transparent 50%),
        radial-gradient(circle at 40% 90%, var(--glow-color) 0%, transparent 50%);
}

/* Heading Gradients */
h1 {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Styling with Theme */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.card h2 {
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-image: linear-gradient(90deg, var(--accent-primary), transparent) 1;
}

.card h2::after {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

/* Navigation Active State */
.nav-tabs button.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

/* Primary Buttons */
button {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

/* Table Headers */
th {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
}

/* Labels */
label {
    color: var(--accent-primary);
}

/* Input Focus States */
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 5px var(--glow-color);
}

/* Spinner with Theme Color */
.spinner {
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-primary);
}


/* ==============================================
   CHART.JS OVERRIDES
   Chart-specific styling
   ============================================== */

/* Chart.js tooltip overrides */
.chartjs-tooltip {
    max-height: 80vh !important;
    overflow-y: auto !important;
}