/*
 * pastel-theme.css — Pastel Light Theme Override
 * Workstation Design System v2.0 — Theme Layer
 *
 * This file MUST load LAST to override all legacy dark values.
 * It remaps core tokens + sidebar from navy-dark to soft pastels.
 *
 * Load order: ds-tokens.css → design-system.css → ds-premium.css → ... → pastel-theme.css
 */

:root {
  /* ─── Brand Override → Violet Pastel ─── */
  --ds-brand-primary:       #7C3AED;
  --ds-brand-primary-dark:  #5B21B6;
  --ds-brand-primary-light: #A78BFA;
  --ds-brand-accent:        #F59E0B;
  --ds-brand-accent-dark:   #D97706;

  /* ─── Sidebar → Light Pastel (no longer navy-dark) ─── */
  --ds-sidebar-bg:     #F8F7FF;
  --ds-sidebar-hover:  rgba(124, 58, 237, 0.06);
  --ds-sidebar-active: rgba(124, 58, 237, 0.10);
  --ds-sidebar-text:   #6B7280;
  --ds-sidebar-label:  #9CA3AF;

  /* Legacy token overrides (design-system.css) */
  --sidebar-bg: #F8F7FF;
  --sidebar-hover: rgba(124, 58, 237, 0.06);
  --sidebar-active: rgba(124, 58, 237, 0.10);
  --sidebar-active-border: var(--ds-brand-primary);
  --sidebar-text: #6B7280;
  --sidebar-text-active: #7C3AED;
  --sidebar-label: #9CA3AF;

  /* ─── Semantic color remaps ─── */
  --primary: #7C3AED;
  --primary-dark: #5B21B6;
  --primary-light: #A78BFA;
  --primary-hover: #6D28D9;
  --primary-subtle: #F5F3FF;
  --accent: #F59E0B;

  /* ─── Navy palette → Violet ─── */
  --navy-900: #4C1D95;
  --navy-800: #5B21B6;
  --navy-700: #6D28D9;
  --navy-600: #7C3AED;
  --navy-500: #8B5CF6;
  --navy-100: #EDE9FE;
  --navy-50:  #F5F3FF;

  /* ─── Surfaces (ensure always light) ─── */
  --bg-base: #F9FAFB;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(107, 114, 128, 0.40);

  /* ─── DS surface tokens ─── */
  --ds-bg-base:     #F9FAFB;
  --ds-bg-surface:  #FFFFFF;
  --ds-bg-elevated: #FFFFFF;
  --ds-bg-overlay:  rgba(107, 114, 128, 0.40);

  /* ─── Text remains dark-on-light ─── */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-link: #7C3AED;

  --ds-text-primary:   #111827;
  --ds-text-secondary: #4B5563;
  --ds-text-tertiary:  #9CA3AF;
  --ds-text-inverse:   #FFFFFF;
  --ds-text-link:      #7C3AED;

  /* ─── Border ─── */
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --border-focus: #7C3AED;
  --border-accent: #F59E0B;
  --ds-border: #E5E7EB;
  --ds-border-strong: #D1D5DB;

  /* ─── Shadows (lighter for pastel) ─── */
  --shadow-navy: 0 4px 14px rgba(124, 58, 237, 0.15);
  --ds-shadow-navy: 0 4px 14px rgba(124, 58, 237, 0.15);

  /* ─── DS Color remap ─── */
  --ds-color-navy-900: #4C1D95;
  --ds-color-navy-800: #5B21B6;
  --ds-color-navy-700: #6D28D9;
  --ds-color-navy-600: #7C3AED;
  --ds-color-navy-500: #8B5CF6;
  --ds-color-navy-100: #EDE9FE;
  --ds-color-navy-50:  #F5F3FF;

  --ds-input-focus-ring: rgba(124, 58, 237, 0.10);

  /* ─── Component: platform-admin override ─── */
  --pa-bg:       #F9FAFB;
  --pa-surface:  #FFFFFF;
  --pa-border:   #E5E7EB;

  /* ─── Component: reports override ─── */
  --rp-surface:  #FFFFFF;
}

/* ══════════════════════════════════════════
   SIDEBAR — Force light pastel
   ══════════════════════════════════════════ */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04) !important;
}

.ds-sidebar {
  background: var(--ds-sidebar-bg) !important;
  border-right: 1px solid var(--ds-border) !important;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04) !important;
}

.ds-sidebar__logo-name {
  color: var(--primary) !important;
}

.ds-sidebar__logo {
  border-bottom-color: var(--border) !important;
}

.menu-section {
  color: var(--sidebar-label) !important;
}

.menu-item {
  color: var(--sidebar-text) !important;
}
.menu-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--primary) !important;
}
.menu-item.active {
  background: var(--sidebar-active) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

.ds-nav__item {
  color: var(--ds-sidebar-text) !important;
}
.ds-nav__item:hover {
  background: var(--ds-sidebar-hover) !important;
  color: var(--primary) !important;
}
.ds-nav__item.active,
.ds-nav__item[aria-current="page"] {
  background: var(--ds-sidebar-active) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

/* Sidebar search — light */
.sidebar-search {
  border-bottom-color: var(--border) !important;
}
.sidebar-search-input {
  background: var(--bg-base) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.sidebar-search-input::placeholder {
  color: var(--text-tertiary) !important;
}

/* Sidebar footer — light */
.sidebar-footer {
  border-top-color: var(--border) !important;
}
.sidebar-avatar {
  background: var(--primary) !important;
}
.sidebar-user-name {
  color: var(--text-primary) !important;
}
.sidebar-user-role {
  color: var(--text-secondary) !important;
}
.sidebar-user-btn {
  color: var(--text-secondary) !important;
}
.sidebar-user-btn:hover {
  color: var(--primary) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

/* Sidebar scrollbar — light */
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border) !important;
}

/* Menu group toggle — light */
.menu-group-toggle {
  color: var(--text-secondary) !important;
}
.menu-group-toggle:hover {
  background: var(--sidebar-hover) !important;
}

/* ══════════════════════════════════════════
   HEADER — Already light in design-system.css,
   override navy references
   ══════════════════════════════════════════ */
.header-title {
  color: var(--primary) !important;
}
.user-name {
  color: var(--primary) !important;
}

/* ══════════════════════════════════════════
   LOGIN — Light card, overrides any legacy
   ══════════════════════════════════════════ */
.login-btn {
  background: var(--primary) !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}
.login-btn:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35) !important;
}

/* ══════════════════════════════════════════
   QUICK ACTIONS BAR — Light version
   ══════════════════════════════════════════ */
.quick-actions-bar {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.qa-btn {
  color: var(--text-secondary) !important;
}
.qa-btn:hover {
  background: var(--bg-base) !important;
  color: var(--primary) !important;
}
.qa-btn.primary {
  background: var(--primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.30) !important;
}
.qa-divider {
  background: var(--border) !important;
}

/* ══════════════════════════════════════════
   TABLES — Ensure light hover
   ══════════════════════════════════════════ */
tbody tr:hover {
  background: #F5F3FF !important;
}
.ds-table tbody tr:hover {
  background: #F5F3FF !important;
}
thead th {
  background: var(--bg-base) !important;
}

/* ══════════════════════════════════════════
   FORMS — Focus ring uses violet
   ══════════════════════════════════════════ */
input:focus,
select:focus,
textarea:focus,
.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* ══════════════════════════════════════════
   ONBOARDING — Light gradient
   ══════════════════════════════════════════ */
.ob-header {
  background: linear-gradient(135deg, #EDE9FE, #DBEAFE) !important;
}
.ob-header h2,
.ob-header p {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════
   PORTAL CLIENTE — Light header
   ══════════════════════════════════════════ */
.cp-header {
  background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%) !important;
}

/* ══════════════════════════════════════════
   PLATFORM ADMIN — Force light surfaces
   ══════════════════════════════════════════ */
.pa-shell {
  background: var(--bg-base) !important;
}
.pa-sidebar {
  background: var(--bg-surface) !important;
  border-right-color: var(--border) !important;
}
.pa-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.pa-field input,
.pa-field select,
.pa-field textarea {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════
   NOTIFICATION CENTER — Already light ✓
   COMMAND PALETTE — Already light ✓
   CONTEXT PANEL — Already light ✓
   KPI CARDS — Already light ✓
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   GLOBAL OVERRIDES — Kill any remaining dark
   ══════════════════════════════════════════ */

/* Card backgrounds */
.card,
.ds-card,
.metric-card,
.ds-metric,
.kpi-card,
.ds-chart-card {
  background: var(--bg-surface) !important;
}

/* Modal overlays — softer */
.cmd-overlay {
  background: rgba(107, 114, 128, 0.40) !important;
}
.context-panel-overlay {
  background: rgba(107, 114, 128, 0.25) !important;
}

/* Button primary → violet */
.btn-primary {
  background: var(--primary) !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  box-shadow: var(--shadow-navy) !important;
}

/* Legacy compat */
.btn.primary {
  background: var(--primary) !important;
}