/* === ROOT COLOR PALETTE & DESIGN TOKENS (wmatiz.dev Theme) === */
:root {
  /* Backgrounds */
  --bg-primary: #05050A;
  --bg-secondary: #0B0718;
  --bg-tertiary: #151028;

  /* Purple */
  --purple-900: #24124D;
  --purple-800: #3A1D73;
  --purple-700: #562C99;
  --purple-600: #7240C6;
  --purple-500: #9157FF;

  /* Glow */
  --glow-primary: #A96DFF;
  --glow-secondary: #C28BFF;
  --glow-soft: rgba(169, 109, 255, .45);

  /* Blue */
  --blue-900: #081447;
  --blue-800: #10206B;
  --blue-700: #1D3FA3;
  --blue-600: #2E5ED6;

  /* Coral */
  --coral-500: #FF8A82;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #C8C8D8;
  --text-muted: #8A8AA8;

  /* Legacy variable mappings (to not break old classes entirely) */
  --primary-color: var(--purple-500);
  --primary-color-dark: var(--purple-600);
  --primary-color-light: var(--glow-primary);
  --text-main: var(--text-primary);
  --text-dark: var(--text-primary);
  --text-light: var(--text-secondary);
  --gray-50: var(--bg-primary);
  --gray-100: var(--bg-secondary);
  --gray-200: var(--bg-tertiary);
  --gray-300: #2D2357; /* borders */
  --gray-500: var(--text-muted);
  --gray-600: var(--text-secondary);
  --gray-700: var(--text-primary);

  /* Status Colors */
  --success-color: #3DDC84;
  --success-bg: rgba(61, 220, 132, 0.1);
  --warning-color: #FFC857;
  --warning-bg: rgba(255, 200, 87, 0.1);
  --error-color: #FF5D73;
  --error-bg: rgba(255, 93, 115, 0.1);
  --info-color: #5AB7FF;
  --info-bg: rgba(90, 183, 255, 0.1);

  /* Backgrounds & Cards */
  --bg-gradient: linear-gradient(180deg, #05050A 0%, #090113 100%);
  --card-bg: linear-gradient(180deg, var(--bg-secondary), rgba(255, 255, 255, 0.02));
  --card-bg-solid: var(--bg-secondary);
  --modal-bg: var(--bg-tertiary);

  /* Borders & Shadows */
  --border-color: #2D2357;
  --border-color-light: #4D3898;
  --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 0 10px var(--glow-soft), 0 0 30px rgba(169, 109, 255, .15);

  /* UI Elements */
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-border: var(--border-color);
  --input-focus: var(--purple-500);
  --input-error: var(--error-color);
  --input-radius: 8px;
  --button-radius: 10px;
  --avatar-bg: var(--purple-700);

  /* Z-index */
  --z-modal: 1050;
  --z-dropdown: 900;
  --z-header: 800;

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Body Styles */
body {
    background: var(--bg-gradient) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

/* Card overrides (Glassmorphism) */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(9, 6, 20, 0.7) !important;
    color: var(--text-secondary) !important;
}
.card-header, .card-footer {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Forms & Inputs */
.form-control, .form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--input-radius) !important;
}
option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 10px var(--glow-soft) !important;
    color: var(--text-primary) !important;
}
.form-label {
    color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #5E36D9, #9157FF) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--button-radius) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #7240C6, #A96DFF) !important;
    box-shadow: 0 0 25px rgba(169, 109, 255, .45) !important;
}

/* Tables Override (DataTables and Normal) */
table.dataTable, table.table {
    color: var(--text-secondary) !important;
}
.table>:not(caption)>*>* {
    background-color: transparent !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-primary) !important;
}
.table-hover>tbody>tr:hover>* {
    background-color: rgba(169, 109, 255, 0.05) !important;
    color: var(--text-primary) !important;
}
.dataTable-top, .dataTable-bottom {
    color: var(--text-secondary) !important;
}
.dataTable-input, .dataTable-selector {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Modals Override */
.modal-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 40px rgba(169, 109, 255, 0.15) !important;
    color: var(--text-secondary) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}
.modal-title {
    color: var(--text-primary) !important;
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Utils */
.text-muted {
    color: var(--text-muted) !important;
}
.badge {
    border-radius: 999px !important;
    font-weight: 500 !important;
}