/* ==========================================================================
   DJ Event Planner — Design Tokens
   
   All colour, spacing and shadow values live here as CSS custom properties.
   The dark theme is the default (matching the current app).  Light theme
   overrides are defined under [bd-theme="bd-theme-light"].
   
   Pages should NEVER use raw hex values — always reference a token.
   ========================================================================== */

/* ---------- Brand constants (do NOT change per theme) ---------- */
:root {
   /* Brand gradient */
   --ep-brand-primary:   #F7426F;
   --ep-brand-secondary: #F87A58;
   --ep-brand-gradient:  linear-gradient(90deg, #F7426F, #F87A58);

   /* Accent palette */
   --ep-accent-red:    #ED1616;
   --ep-accent-amber:  #FFA300;
   --ep-accent-green:  #00D185;
   --ep-accent-blue:   #4168E6;
   --ep-accent-purple: #7C3AED;

   /* Status colours */
   --ep-color-success:  #1CA35B;
   --ep-color-warning:  #F6AC3C;
   --ep-color-danger:   #FF3E5F;
   --ep-color-info:     #299CDB;

   /* Chart palette */
   --ep-chart-1: #F87A58;
   --ep-chart-2: #F7426F;
   --ep-chart-3: #F7B84B;
   --ep-chart-4: #405189;
   --ep-chart-5: #299CDB;
   --ep-chart-6: #F06548;

   /* Subscription badges */
   --ep-badge-jnr: linear-gradient(90.69deg, #4d6274, #1a3856);
   --ep-badge-pro: linear-gradient(90.69deg, #ff2259, #f200f7);
   --ep-badge-vip: linear-gradient(90.69deg, #f7426f, #f87a58);

   /* Typography */
   --ep-font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --ep-font-size-base: 16px;
   --ep-font-size-xs:   12px;
   --ep-font-size-sm:   14px;
   --ep-font-size-md:   16px;
   --ep-font-size-lg:   18px;
   --ep-font-size-xl:   20px;
   --ep-font-size-2xl:  24px;
   --ep-font-size-3xl:  30px;
   --ep-font-size-4xl:  36px;
   --ep-line-height:    1.625;

   /* Font weights */
   --ep-fw-light:   300;
   --ep-fw-regular: 400;
   --ep-fw-medium:  500;
   --ep-fw-semi:    600;
   --ep-fw-bold:    700;

   /* Spacing scale (multiples of 4px) */
   --ep-space-1:   4px;
   --ep-space-2:   8px;
   --ep-space-3:  12px;
   --ep-space-4:  16px;
   --ep-space-5:  20px;
   --ep-space-6:  24px;
   --ep-space-8:  32px;
   --ep-space-10: 40px;
   --ep-space-12: 48px;
   --ep-space-16: 64px;

   /* Border radius */
   --ep-radius-sm:   4px;
   --ep-radius-md:   6px;
   --ep-radius-lg:  12px;
   --ep-radius-xl:  16px;
   --ep-radius-full: 9999px;

   /* Sidebar */
   --ep-sidebar-width:      260px;
   --ep-sidebar-collapsed:   78px;
   --ep-header-height:       76px;

   /* Transitions */
   --ep-transition-fast:   0.15s ease;
   --ep-transition-normal: 0.3s ease;
   --ep-transition-slow:   0.5s ease;
}


/* ====================================================================
   DARK THEME (default)
   ==================================================================== */
:root,
[bd-theme="bd-theme-dark"] {
   /* Surfaces */
   --ep-bg-body:       #111111;
   --ep-bg-sidebar:    #000000;
   --ep-bg-header:     #111111;
   --ep-bg-card:       #2C2C2C;
   --ep-bg-elevated:   #414141;
   --ep-bg-input:      #2C2C2C;
   --ep-bg-hover:      #363636;
   --ep-bg-selected:   rgba(247, 66, 111, 0.12);

   /* Text */
   --ep-text-primary:   #F0F0F0;
   --ep-text-secondary: #B0B0B0;
   --ep-text-muted:     #787878;
   --ep-text-inverse:   #111111;
   --ep-text-link:      #F87A58;
   --ep-text-heading:   #FFFFFF;

   /* Borders */
   --ep-border-color:   #3A3A3A;
   --ep-border-light:   #2C2C2C;
   --ep-border-focus:   #F7426F;

   /* Shadows */
   --ep-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
   --ep-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
   --ep-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);
   --ep-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);

   /* Stat card gradients */
   --ep-stat-events:   linear-gradient(45deg, #4168e6, #7a89ff);
   --ep-stat-revenue:  linear-gradient(45deg, #1ca35b, #85e3b2);
   --ep-stat-clients:  linear-gradient(45deg, #e6416e, #ff89a3);
   --ep-stat-tasks:    linear-gradient(45deg, #f6ac3c, #fdcd5e);

   /* Welcome card */
   --ep-welcome-bg:   linear-gradient(145deg, #2a2a4a, #3a3a6a);
   --ep-welcome-text: #F0F0F0;

   /* Table */
   --ep-table-header-bg:  #1a1a1a;
   --ep-table-row-hover:  #333333;
   --ep-table-stripe:     #262626;

   /* Modal / overlay */
   --ep-overlay-bg:    rgba(0, 0, 0, 0.6);
   --ep-modal-bg:      #2C2C2C;

   /* Scrollbar */
   --ep-scrollbar-bg:     #1a1a1a;
   --ep-scrollbar-thumb:  #555555;
}


/* ====================================================================
   LIGHT THEME
   ==================================================================== */
[bd-theme="bd-theme-light"] {
   /* Surfaces */
   --ep-bg-body:       #F5F7FA;
   --ep-bg-sidebar:    #FFFFFF;
   --ep-bg-header:     #FFFFFF;
   --ep-bg-card:       #FFFFFF;
   --ep-bg-elevated:   #F0F2F5;
   --ep-bg-input:      #FFFFFF;
   --ep-bg-hover:      #F0F2F5;
   --ep-bg-selected:   rgba(247, 66, 111, 0.08);

   /* Text */
   --ep-text-primary:   #1A1A2E;
   --ep-text-secondary: #555770;
   --ep-text-muted:     #8E8EA0;
   --ep-text-inverse:   #FFFFFF;
   --ep-text-link:      #F7426F;
   --ep-text-heading:   #1A1A2E;

   /* Borders */
   --ep-border-color:   #E2E5EA;
   --ep-border-light:   #F0F2F5;
   --ep-border-focus:   #F7426F;

   /* Shadows */
   --ep-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
   --ep-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
   --ep-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.1);
   --ep-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

   /* Stat card gradients (slightly lighter for light mode) */
   --ep-stat-events:   linear-gradient(45deg, #5178f6, #8a99ff);
   --ep-stat-revenue:  linear-gradient(45deg, #2cb36b, #95f3c2);
   --ep-stat-clients:  linear-gradient(45deg, #f6517e, #ffa0b3);
   --ep-stat-tasks:    linear-gradient(45deg, #f6bc4c, #fddd6e);

   /* Welcome card */
   --ep-welcome-bg:   linear-gradient(145deg, #EEF0FF, #E8EEFF);
   --ep-welcome-text: #1A1A2E;

   /* Table */
   --ep-table-header-bg:  #F5F7FA;
   --ep-table-row-hover:  #F0F2F5;
   --ep-table-stripe:     #FAFBFC;

   /* Modal / overlay */
   --ep-overlay-bg:    rgba(0, 0, 0, 0.4);
   --ep-modal-bg:      #FFFFFF;

   /* Scrollbar */
   --ep-scrollbar-bg:     #F0F2F5;
   --ep-scrollbar-thumb:  #C0C0C0;
}


/* ====================================================================
   Base element resets using tokens
   ==================================================================== */

body {
   background-color: var(--ep-bg-body);
   color: var(--ep-text-primary);
   font-family: var(--ep-font-family);
   font-size: var(--ep-font-size-base);
   line-height: var(--ep-line-height);
   transition: background-color var(--ep-transition-normal), color var(--ep-transition-normal);
}

h1, h2, h3, h4, h5, h6 {
   color: var(--ep-text-heading);
}

a {
   color: var(--ep-text-link);
   transition: color var(--ep-transition-fast);
}
a:hover {
   color: var(--ep-brand-primary);
}

/* Card base */
.body__card-wrapper,
.ep-card {
   background: var(--ep-bg-card);
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-md);
   box-shadow: var(--ep-shadow-card);
   padding: var(--ep-space-6);
   transition: background var(--ep-transition-normal), border-color var(--ep-transition-normal);
}

/* Form inputs */
.form-control,
.form-select {
   background-color: var(--ep-bg-input);
   border-color: var(--ep-border-color);
   color: var(--ep-text-primary);
   transition: border-color var(--ep-transition-fast), background-color var(--ep-transition-normal);
}
.form-control:focus,
.form-select:focus {
   border-color: var(--ep-border-focus);
   box-shadow: 0 0 0 3px rgba(247, 66, 111, 0.15);
   background-color: var(--ep-bg-input);
   color: var(--ep-text-primary);
}
.form-control::placeholder {
   color: var(--ep-text-muted);
}

/* Tables */
.table {
   color: var(--ep-text-primary);
}
.table thead th {
   background-color: var(--ep-table-header-bg);
   color: var(--ep-text-secondary);
   border-bottom-color: var(--ep-border-color);
   font-weight: var(--ep-fw-semi);
   font-size: var(--ep-font-size-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
.table tbody tr {
   border-bottom-color: var(--ep-border-light);
   transition: background-color var(--ep-transition-fast);
}
.table tbody tr:hover {
   background-color: var(--ep-table-row-hover);
}
.table-striped tbody tr:nth-child(even) {
   background-color: var(--ep-table-stripe);
}

/* Buttons */
.btn-ep-primary {
   background: var(--ep-brand-gradient);
   border: none;
   color: #FFFFFF;
   font-weight: var(--ep-fw-semi);
   border-radius: var(--ep-radius-md);
   padding: var(--ep-space-2) var(--ep-space-5);
   transition: opacity var(--ep-transition-fast), transform var(--ep-transition-fast);
}
.btn-ep-primary:hover {
   opacity: 0.9;
   color: #FFFFFF;
   transform: translateY(-1px);
}

.btn-ep-secondary {
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-color);
   color: var(--ep-text-primary);
   font-weight: var(--ep-fw-medium);
   border-radius: var(--ep-radius-md);
   padding: var(--ep-space-2) var(--ep-space-5);
   transition: background var(--ep-transition-fast);
}
.btn-ep-secondary:hover {
   background: var(--ep-bg-hover);
   color: var(--ep-text-primary);
}

.btn-ep-outline {
   background: transparent;
   border: 1px solid var(--ep-brand-primary);
   color: var(--ep-brand-primary);
   font-weight: var(--ep-fw-medium);
   border-radius: var(--ep-radius-md);
   padding: var(--ep-space-2) var(--ep-space-5);
   transition: background var(--ep-transition-fast), color var(--ep-transition-fast);
}
.btn-ep-outline:hover {
   background: var(--ep-brand-primary);
   color: #FFFFFF;
}

/* Badge variants */
.badge-ep-success { background: var(--ep-color-success); color: #FFFFFF; }
.badge-ep-warning { background: var(--ep-color-warning); color: #111111; }
.badge-ep-danger  { background: var(--ep-color-danger);  color: #FFFFFF; }
.badge-ep-info    { background: var(--ep-color-info);    color: #FFFFFF; }

/* Modal theming */
.modal-content {
   background-color: var(--ep-modal-bg);
   color: var(--ep-text-primary);
   border-color: var(--ep-border-color);
}
.modal-header {
   border-bottom-color: var(--ep-border-light);
}
.modal-footer {
   border-top-color: var(--ep-border-light);
}

/* Sidebar theming */
.expovent__sidebar {
   background-color: var(--ep-bg-sidebar);
}

/* Header theming */
.app__header__area {
   background-color: var(--ep-bg-header);
   border-bottom: 1px solid var(--ep-border-light);
}

/* Scrollbar styling */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}
::-webkit-scrollbar-track {
   background: var(--ep-scrollbar-bg);
}
::-webkit-scrollbar-thumb {
   background: var(--ep-scrollbar-thumb);
   border-radius: var(--ep-radius-full);
}
::-webkit-scrollbar-thumb:hover {
   background: var(--ep-text-muted);
}

/* Section labels for sidebar grouping */
.sidebar-section-label {
   display: block;
   padding: 12px 25px 6px;
   font-size: var(--ep-font-size-xs);
   font-weight: var(--ep-fw-semi);
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: var(--ep-text-muted);
   pointer-events: none;
}

/* Utility: text on brand gradient bg */
.text-on-brand {
   color: #FFFFFF;
}

/* Alert theming */
.alert {
   border-radius: var(--ep-radius-md);
}

/* Preloader theming */
#preloader {
   background: var(--ep-bg-body);
}