/* ==========================================================================
   C2P CRM Design System v2.1.0
   Identite visuelle premium, corporate pharmaceutique, data-centric
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* -- Couleurs principales ------------------------------------------------ */
  --c2p-primary:        #1E3A8A;   /* Bleu corporate profond               */
  --c2p-primary-hover:  #1E3070;   /* Hover bleu corporate                 */
  --c2p-accent:         #2563EB;   /* Bleu action / CTA                    */
  --c2p-accent-hover:   #1D4FD7;   /* Hover bleu action                    */
  --c2p-accent-light:   #3B82F6;   /* Bleu clair hover                     */
  --c2p-gold:           #f1d656;   /* Jaune signature C2P                  */
  --c2p-gold-soft:      #fef9e7;   /* Fond jaune tres leger                */
  --c2p-indigo:         #4F46E5;   /* Indigo croissance                    */

  /* -- Couleurs semantiques ------------------------------------------------ */
  --c2p-success:        #16A34A;   /* Vert : CA, performance, online       */
  --c2p-success-soft:   #dcfce7;   /* Fond vert leger                      */
  --c2p-warning:        #F59E0B;   /* Orange : alertes, en attente         */
  --c2p-warning-soft:   #fef3c7;   /* Fond orange leger                    */
  --c2p-danger:         #DC2626;   /* Rouge : erreur, baisse, alerte       */
  --c2p-danger-soft:    #fee2e2;   /* Fond rouge leger                     */
  --c2p-info:           #0EA5E9;   /* Cyan : information                   */
  --c2p-info-soft:      #e0f2fe;   /* Fond cyan leger                      */

  /* -- Neutres ------------------------------------------------------------- */
  --c2p-text-primary:   #111827;   /* Texte principal                      */
  --c2p-text-secondary: #6B7280;   /* Texte secondaire, labels             */
  --c2p-text-muted:     #9CA3AF;   /* Texte desactive, placeholder         */
  --c2p-border:         #E5E7EB;   /* Bordures standard                    */
  --c2p-border-light:   #F1F5F9;   /* Bordures tres legeres                */
  --c2p-bg-page:        #F8FAFC;   /* Fond de page                         */
  --c2p-bg-card:        #FFFFFF;   /* Fond des cartes                      */
  --c2p-bg-table-head:  #F1F5F9;   /* Fond header tableaux                 */
  --c2p-bg-table-alt:   #FAFBFC;   /* Fond ligne alternee                  */
  --c2p-bg-hover:       #EFF6FF;   /* Fond survol (teinte bleue)           */
  --c2p-icon-color:     #374151;   /* Couleur icones standard              */

  /* -- Sidebar / Topbar ---------------------------------------------------- */
  --c2p-sidebar-bg:     #1E3A8A;   /* Sidebar : bleu corporate             */
  --c2p-sidebar-hover:  rgba(255,255,255,0.10);
  --c2p-sidebar-text:   #CBD5E1;
  --c2p-sidebar-active-bg:   rgba(255,255,255,0.15);
  --c2p-sidebar-active-text: #FFFFFF;
  --c2p-topbar-bg:      #1E3A8A;   /* Topbar : bleu corporate              */

  /* -- Ombres (3 niveaux) -------------------------------------------------- */
  --c2p-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.04);
  --c2p-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --c2p-shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);

  /* -- Coins arrondis (2 valeurs) ------------------------------------------ */
  --c2p-radius:    10px;    /* Cards, modales, gros conteneurs      */
  --c2p-radius-sm:  6px;    /* Boutons, badges, inputs              */

  /* -- Typographie --------------------------------------------------------- */
  --c2p-font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --c2p-font-mono:  'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* -- Transition ---------------------------------------------------------- */
  --c2p-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* -- Palette graphiques (Chart.js) --------------------------------------- */
  --c2p-chart-1: #1E3A8A;
  --c2p-chart-2: #2563EB;
  --c2p-chart-3: #4F46E5;
  --c2p-chart-4: #16A34A;
  --c2p-chart-5: #F59E0B;
  --c2p-chart-6: #DC2626;

  /* -- Couleurs roles ------------------------------------------------------ */
  --c2p-role-rsi:         #1E3A8A;
  --c2p-role-dg:          #7C3AED;
  --c2p-role-it:          #0891B2;
  --c2p-role-chefproduit: #9333EA;
  --c2p-role-superviseur: #EA580C;
  --c2p-role-vm:          #16A34A;
}

/* --------------------------------------------------------------------------
   2. BASE RESET & TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
  font-family: var(--c2p-font);
  background: var(--c2p-bg-page);
  color: var(--c2p-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. PAGE LAYOUT
   -------------------------------------------------------------------------- */
.c2p-page-header {
  margin-bottom: 24px;
}

.c2p-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c2p-text-primary);
  margin: 0 0 4px;
  line-height: 1.3;
}

.c2p-page-subtitle {
  font-size: 0.88rem;
  color: var(--c2p-text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.c2p-card {
  background: var(--c2p-bg-card);
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius);
  box-shadow: var(--c2p-shadow-sm);
  transition: var(--c2p-transition);
}

.c2p-card-body {
  padding: 20px;
}

.c2p-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c2p-border);
  background: var(--c2p-bg-card);
  border-radius: var(--c2p-radius) var(--c2p-radius) 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--c2p-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.c2p-card-header i,
.c2p-card-header .fa-solid,
.c2p-card-header .fa-regular {
  color: var(--c2p-accent);
  font-size: 0.88rem;
}

/* Card interactive (hover lift) */
.c2p-card-interactive {
  cursor: pointer;
}
.c2p-card-interactive:hover {
  box-shadow: var(--c2p-shadow-md);
  transform: translateY(-2px);
}
.c2p-card-interactive:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. KPI CARDS
   -------------------------------------------------------------------------- */
.c2p-kpi {
  background: var(--c2p-bg-card);
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius);
  padding: 16px 20px;
  box-shadow: var(--c2p-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  transition: var(--c2p-transition);
}

.c2p-kpi:hover {
  box-shadow: var(--c2p-shadow-md);
}

.c2p-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c2p-text-secondary);
  line-height: 1.3;
}

.c2p-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c2p-text-primary);
  line-height: 1.2;
}

.c2p-kpi-sub {
  font-size: 0.8rem;
  color: var(--c2p-text-muted);
  line-height: 1.3;
}

/* KPI avec accent de couleur (bordure gauche) */
.c2p-kpi-accent-blue    { border-left: 4px solid var(--c2p-accent); }
.c2p-kpi-accent-green   { border-left: 4px solid var(--c2p-success); }
.c2p-kpi-accent-orange  { border-left: 4px solid var(--c2p-warning); }
.c2p-kpi-accent-red     { border-left: 4px solid var(--c2p-danger); }
.c2p-kpi-accent-indigo  { border-left: 4px solid var(--c2p-indigo); }
.c2p-kpi-accent-gold    { border-left: 4px solid var(--c2p-gold); }

/* KPI value colors */
.c2p-kpi-value-blue     { color: var(--c2p-accent); }
.c2p-kpi-value-green    { color: var(--c2p-success); }
.c2p-kpi-value-orange   { color: var(--c2p-warning); }
.c2p-kpi-value-red      { color: var(--c2p-danger); }
.c2p-kpi-value-indigo   { color: var(--c2p-indigo); }

/* KPI mini (compact) */
.c2p-kpi-mini {
  padding: 12px 16px;
}
.c2p-kpi-mini .c2p-kpi-value {
  font-size: 1.15rem;
}

/* KPI grid layout */
.c2p-kpi-grid,
.c2p-kpi-grid-2,
.c2p-kpi-grid-3,
.c2p-kpi-grid-4,
.c2p-kpi-grid-5,
.c2p-kpi-grid-6 {
  display: grid;
  gap: 16px;
}
.c2p-kpi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.c2p-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.c2p-kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.c2p-kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.c2p-kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 991.98px) {
  .c2p-kpi-grid-4,
  .c2p-kpi-grid-5,
  .c2p-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .c2p-kpi-grid-3,
  .c2p-kpi-grid-4,
  .c2p-kpi-grid-5,
  .c2p-kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .c2p-kpi-grid-2,
  .c2p-kpi-grid-3,
  .c2p-kpi-grid-4,
  .c2p-kpi-grid-5,
  .c2p-kpi-grid-6 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. SECTION HEADINGS
   -------------------------------------------------------------------------- */
.c2p-section {
  margin-bottom: 24px;
}

.c2p-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c2p-text-primary);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.c2p-section-title i {
  color: var(--c2p-accent);
  font-size: 0.88rem;
}

.c2p-section-sub {
  font-size: 0.78rem;
  color: var(--c2p-text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.c2p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: var(--c2p-radius-sm);
  font-family: var(--c2p-font);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--c2p-transition);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.c2p-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary */
.c2p-btn-primary {
  background: var(--c2p-accent);
  color: #fff;
}
.c2p-btn-primary:hover:not(:disabled) {
  background: var(--c2p-accent-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Secondary (outlined) */
.c2p-btn-secondary {
  background: var(--c2p-bg-card);
  color: var(--c2p-text-primary);
  border: 1px solid var(--c2p-border);
}
.c2p-btn-secondary:hover:not(:disabled) {
  background: var(--c2p-bg-table-head);
  color: var(--c2p-text-primary);
  border-color: #D1D5DB;
}

/* Danger */
.c2p-btn-danger {
  background: var(--c2p-danger);
  color: #fff;
}
.c2p-btn-danger:hover:not(:disabled) {
  background: #B91C1C;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* Success */
.c2p-btn-success {
  background: var(--c2p-success);
  color: #fff;
}
.c2p-btn-success:hover:not(:disabled) {
  background: #15803D;
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

/* Ghost (text-only) */
.c2p-btn-ghost {
  background: transparent;
  color: var(--c2p-accent);
  padding: 8px 12px;
}
.c2p-btn-ghost:hover:not(:disabled) {
  background: var(--c2p-bg-hover);
}

/* Button sizes */
.c2p-btn-sm {
  padding: 5px 12px;
  font-size: 0.78rem;
}
.c2p-btn-lg {
  padding: 12px 28px;
  font-size: 0.95rem;
}

/* Pill shape (special) */
.c2p-btn-pill {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   8. BADGES
   -------------------------------------------------------------------------- */
.c2p-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Soft variants */
.c2p-badge-blue    { background: #DBEAFE; color: #1E40AF; }
.c2p-badge-green   { background: var(--c2p-success-soft); color: #166534; }
.c2p-badge-orange  { background: var(--c2p-warning-soft); color: #92400E; }
.c2p-badge-red     { background: var(--c2p-danger-soft); color: #991B1B; }
.c2p-badge-gray    { background: #E5E7EB; color: var(--c2p-text-primary); }
.c2p-badge-indigo  { background: #E0E7FF; color: #3730A3; }
.c2p-badge-gold    { background: #FDE68A; color: #92400E; }
.c2p-badge-dark    { background: var(--c2p-text-primary); color: #fff; }

/* Role badges */
.c2p-badge-role-rsi         { background: rgba(30,58,138,0.12); color: var(--c2p-role-rsi); }
.c2p-badge-role-dg          { background: rgba(124,58,237,0.12); color: var(--c2p-role-dg); }
.c2p-badge-role-it          { background: rgba(8,145,178,0.12); color: var(--c2p-role-it); }
.c2p-badge-role-chefproduit { background: rgba(147,51,234,0.12); color: var(--c2p-role-chefproduit); }
.c2p-badge-role-superviseur { background: rgba(234,88,12,0.12); color: var(--c2p-role-superviseur); }
.c2p-badge-role-vm          { background: rgba(22,163,74,0.12); color: var(--c2p-role-vm); }

/* --------------------------------------------------------------------------
   9. R/O (Realisation / Objectif) INDICATORS
   -------------------------------------------------------------------------- */
.c2p-ro-positive { color: var(--c2p-success); font-weight: 700; }
.c2p-ro-neutral  { color: var(--c2p-text-secondary); font-weight: 600; }
.c2p-ro-negative { color: var(--c2p-danger); font-weight: 700; }

.c2p-ro-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.c2p-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.c2p-table thead th {
  background: var(--c2p-bg-table-head);
  color: var(--c2p-text-secondary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c2p-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.c2p-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c2p-border-light);
  color: var(--c2p-text-primary);
  vertical-align: middle;
}

.c2p-table tbody tr:hover {
  background: var(--c2p-bg-hover);
}

.c2p-table tbody tr:last-child td {
  border-bottom: none;
}

/* Compact table variant */
.c2p-table-sm thead th {
  padding: 8px 10px;
  font-size: 0.7rem;
}
.c2p-table-sm tbody td {
  padding: 7px 10px;
  font-size: 0.82rem;
}

/* Striped variant */
.c2p-table-striped tbody tr:nth-child(even) {
  background: var(--c2p-bg-table-alt);
}
.c2p-table-striped tbody tr:hover {
  background: var(--c2p-bg-hover);
}

/* Drill-down row */
.c2p-table .c2p-drill-row {
  cursor: pointer;
  transition: var(--c2p-transition);
}
.c2p-table .c2p-drill-row:hover {
  background: var(--c2p-bg-hover);
}
.c2p-table .c2p-drill-row:hover .c2p-drill-cell {
  color: var(--c2p-accent);
  transform: translateX(2px);
}
.c2p-drill-cell {
  transition: var(--c2p-transition);
  font-weight: 600;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius-sm);
  padding: 6px 12px;
  font-size: 0.85rem;
  transition: var(--c2p-transition);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--c2p-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius-sm);
  padding: 4px 8px;
  font-size: 0.85rem;
}
.dataTables_wrapper .dataTables_info {
  font-size: 0.8rem;
  color: var(--c2p-text-secondary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--c2p-radius-sm) !important;
  font-size: 0.82rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--c2p-accent) !important;
  border-color: var(--c2p-accent) !important;
  color: #fff !important;
}
table.dataTable thead th {
  background: var(--c2p-bg-table-head);
  color: var(--c2p-text-secondary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
table.dataTable tbody td {
  font-size: 0.85rem;
  vertical-align: middle;
}
table.dataTable tbody tr:hover {
  background: var(--c2p-bg-hover) !important;
}

/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */
.c2p-form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c2p-text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.c2p-form-label i {
  color: var(--c2p-accent);
  font-size: 0.82rem;
}

.c2p-form-control {
  width: 100%;
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius-sm);
  padding: 8px 12px;
  font-family: var(--c2p-font);
  font-size: 0.88rem;
  color: var(--c2p-text-primary);
  background: var(--c2p-bg-card);
  transition: var(--c2p-transition);
}

.c2p-form-control:focus {
  border-color: var(--c2p-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.c2p-form-control::placeholder {
  color: var(--c2p-text-muted);
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--c2p-border) !important;
  border-radius: var(--c2p-radius-sm) !important;
  height: 38px !important;
  transition: var(--c2p-transition);
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--c2p-accent) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--c2p-font);
  font-size: 0.88rem;
  color: var(--c2p-text-primary);
  line-height: 36px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--c2p-accent) !important;
}
.select2-dropdown {
  border: 1px solid var(--c2p-border) !important;
  border-radius: var(--c2p-radius-sm) !important;
  box-shadow: var(--c2p-shadow-md) !important;
}
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--c2p-border) !important;
  border-radius: var(--c2p-radius-sm) !important;
}

/* --------------------------------------------------------------------------
   12. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--c2p-radius);
  box-shadow: var(--c2p-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--c2p-border);
  padding: 16px 20px;
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c2p-text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 1px solid var(--c2p-border);
  padding: 12px 20px;
}

/* --------------------------------------------------------------------------
   13. CHART WRAPPERS
   -------------------------------------------------------------------------- */
.c2p-chart-wrapper {
  position: relative;
  height: clamp(240px, 36vh, 340px);
  padding: 8px;
}

.c2p-chart-wrapper canvas {
  max-height: 100%;
}

.c2p-chart-wrapper-donut {
  height: clamp(280px, 44vh, 400px);
}

.c2p-chart-wrapper-sm {
  height: clamp(180px, 28vh, 260px);
}

/* --------------------------------------------------------------------------
   14. PILLS / TABS
   -------------------------------------------------------------------------- */
.c2p-tab-pills .nav-link {
  border-radius: 999px;
  padding: 6px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c2p-text-secondary);
  transition: var(--c2p-transition);
}

.c2p-tab-pills .nav-link:hover {
  background: var(--c2p-bg-hover);
  color: var(--c2p-text-primary);
}

.c2p-tab-pills .nav-link.active {
  background: var(--c2p-accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   15. STATUS DOTS & ONLINE INDICATORS
   -------------------------------------------------------------------------- */
.c2p-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.c2p-status-online  { background: var(--c2p-success); box-shadow: 0 0 6px rgba(22, 163, 74, 0.5); }
.c2p-status-offline { background: #ADB5BD; }
.c2p-status-draft   { background: var(--c2p-gold); }
.c2p-status-valid   { background: var(--c2p-success); }
.c2p-status-closed  { background: var(--c2p-accent); }
.c2p-status-pending { background: var(--c2p-warning); }
.c2p-status-danger  { background: var(--c2p-danger); }

/* --------------------------------------------------------------------------
   16. PLANNING-SPECIFIC COMPONENTS
   -------------------------------------------------------------------------- */
.c2p-planning-slot {
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius-sm);
  padding: 8px 12px;
  background: var(--c2p-bg-card);
  transition: var(--c2p-transition);
}

.c2p-planning-slot:hover {
  box-shadow: var(--c2p-shadow-sm);
  border-color: var(--c2p-accent-light);
}

/* --------------------------------------------------------------------------
   17. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Text colors */
.c2p-text-primary   { color: var(--c2p-text-primary) !important; }
.c2p-text-secondary { color: var(--c2p-text-secondary) !important; }
.c2p-text-muted     { color: var(--c2p-text-muted) !important; }
.c2p-text-accent    { color: var(--c2p-accent) !important; }
.c2p-text-success   { color: var(--c2p-success) !important; }
.c2p-text-warning   { color: var(--c2p-warning) !important; }
.c2p-text-danger    { color: var(--c2p-danger) !important; }
.c2p-text-white     { color: #fff !important; }

/* Background colors */
.c2p-bg-success-soft { background: var(--c2p-success-soft) !important; }
.c2p-bg-warning-soft { background: var(--c2p-warning-soft) !important; }
.c2p-bg-danger-soft  { background: var(--c2p-danger-soft) !important; }
.c2p-bg-info-soft    { background: var(--c2p-info-soft) !important; }
.c2p-bg-blue-soft    { background: #DBEAFE !important; }

/* Font weights */
.c2p-fw-500 { font-weight: 500; }
.c2p-fw-600 { font-weight: 600; }
.c2p-fw-700 { font-weight: 700; }

/* Font sizes */
.c2p-fs-xs  { font-size: 0.72rem; }
.c2p-fs-sm  { font-size: 0.82rem; }
.c2p-fs-md  { font-size: 0.88rem; }
.c2p-fs-lg  { font-size: 1.15rem; }
.c2p-fs-xl  { font-size: 1.35rem; }

/* Uppercase labels */
.c2p-label-upper {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c2p-text-secondary);
}

/* Spacing (gap helper) */
.c2p-gap-8  { gap: 8px; }
.c2p-gap-12 { gap: 12px; }
.c2p-gap-16 { gap: 16px; }
.c2p-gap-20 { gap: 20px; }
.c2p-gap-24 { gap: 24px; }

/* --------------------------------------------------------------------------
   18. ANIMATIONS (subtle entrance)
   -------------------------------------------------------------------------- */
@keyframes c2pFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c2p-animate-in {
  animation: c2pFadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger delays for KPI grids */
.c2p-animate-in:nth-child(1) { animation-delay: 0s; }
.c2p-animate-in:nth-child(2) { animation-delay: 0.05s; }
.c2p-animate-in:nth-child(3) { animation-delay: 0.10s; }
.c2p-animate-in:nth-child(4) { animation-delay: 0.15s; }
.c2p-animate-in:nth-child(5) { animation-delay: 0.20s; }
.c2p-animate-in:nth-child(6) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .c2p-animate-in {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   19. EMPTY STATE
   -------------------------------------------------------------------------- */
.c2p-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--c2p-text-muted);
}

.c2p-empty-state i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

.c2p-empty-state p {
  font-size: 0.88rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE HELPERS
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .c2p-card-body { padding: 16px; }
  .c2p-kpi { padding: 12px 16px; }
  .c2p-page-title { font-size: 1.15rem; }
  .c2p-kpi-value { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   21. SCROLLBAR STYLING
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* --------------------------------------------------------------------------
   22. WEEK PICKER COMPONENT (Flatpickr-based, Monday-only)
   -------------------------------------------------------------------------- */
.c2p-week-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c2p-bg-card);
  border: 1px solid var(--c2p-border);
  border-radius: var(--c2p-radius);
  padding: 4px 6px;
  transition: var(--c2p-transition);
}
.c2p-week-picker:focus-within {
  border-color: var(--c2p-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.c2p-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--c2p-bg-table-head);
  color: var(--c2p-text-secondary);
  font-size: .72rem;
  cursor: pointer;
  transition: var(--c2p-transition);
  flex-shrink: 0;
}
.c2p-week-nav:hover {
  background: var(--c2p-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}
.c2p-week-nav:active {
  transform: scale(.92);
}

.c2p-week-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.c2p-week-icon {
  color: var(--c2p-accent);
  font-size: .85rem;
  flex-shrink: 0;
}

.c2p-week-picker input.c2p-week-input,
.c2p-week-picker input.c2p-week-input.active,
.c2p-week-picker input.form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
  height: auto;
  min-height: 30px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c2p-text-primary);
  cursor: pointer;
  min-width: 190px;
  outline: none;
}
.c2p-week-picker input.c2p-week-input:focus,
.c2p-week-picker input.form-control:focus {
  box-shadow: none !important;
  border: none !important;
}

/* ---- Flatpickr calendar overrides (compact) ---- */
.c2p-weekpicker {
  width: 260px !important;
  border-radius: var(--c2p-radius) !important;
  box-shadow: var(--c2p-shadow-lg) !important;
  border: 1px solid var(--c2p-border) !important;
  font-family: var(--c2p-font) !important;
}
.c2p-weekpicker .flatpickr-innerContainer {
  max-width: 260px;
}
.c2p-weekpicker .flatpickr-months {
  background: var(--c2p-primary);
  border-radius: var(--c2p-radius) var(--c2p-radius) 0 0;
  padding: 2px 0;
}
.c2p-weekpicker .flatpickr-months .flatpickr-month {
  color: #fff;
  fill: #fff;
  height: 28px;
}
.c2p-weekpicker .flatpickr-months .flatpickr-prev-month,
.c2p-weekpicker .flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
  padding: 4px 8px;
}
.c2p-weekpicker .flatpickr-months .flatpickr-prev-month svg,
.c2p-weekpicker .flatpickr-months .flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}
.c2p-weekpicker .flatpickr-months .flatpickr-prev-month:hover svg,
.c2p-weekpicker .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--c2p-gold);
}
.c2p-weekpicker .flatpickr-current-month {
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  padding-top: 4px;
}
.c2p-weekpicker .flatpickr-current-month .cur-month {
  color: #fff;
}
.c2p-weekpicker .flatpickr-current-month input.cur-year {
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
}

.c2p-weekpicker .flatpickr-weekdays {
  background: var(--c2p-bg-table-head);
  height: 24px;
}
.c2p-weekpicker .flatpickr-weekday {
  color: var(--c2p-text-secondary);
  font-weight: 600;
  font-size: .68rem;
  line-height: 24px;
}

.c2p-weekpicker .dayContainer {
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  padding: 2px 0;
}
.c2p-weekpicker .flatpickr-day {
  width: 34px;
  max-width: 34px;
  height: 30px;
  line-height: 30px;
  border-radius: var(--c2p-radius-sm);
  transition: var(--c2p-transition);
  font-size: .75rem;
}
.c2p-weekpicker .flatpickr-day:hover:not(.flatpickr-disabled) {
  background: var(--c2p-bg-hover);
  border-color: var(--c2p-accent);
}
.c2p-weekpicker .flatpickr-day.selected,
.c2p-weekpicker .flatpickr-day.selected:hover {
  background: var(--c2p-accent) !important;
  border-color: var(--c2p-accent) !important;
  color: #fff !important;
  font-weight: 700;
}
.c2p-weekpicker .flatpickr-day.flatpickr-disabled,
.c2p-weekpicker .flatpickr-day.flatpickr-disabled:hover {
  color: var(--c2p-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  opacity: .3;
  cursor: not-allowed;
}
.c2p-weekpicker .flatpickr-day.today:not(.selected) {
  border-color: var(--c2p-gold);
}

@media (max-width: 767.98px) {
  .c2p-week-picker {
    flex: 1;
    min-width: 0;
  }
  .c2p-week-picker input.c2p-week-input {
    min-width: 0 !important;
    flex: 1;
    font-size: .78rem;
  }
}

/* --------------------------------------------------------------------------
   23. WIZARD STEPPER
   -------------------------------------------------------------------------- */
.c2p-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  counter-reset: step;
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}
.c2p-stepper-step {
  flex: 1;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.c2p-stepper-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 6px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  border: 2px solid var(--c2p-border);
  background: var(--c2p-bg-card);
  color: var(--c2p-text-muted);
  transition: var(--c2p-transition);
  position: relative;
  z-index: 2;
}
.c2p-stepper-step::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--c2p-border);
  z-index: 1;
  transition: var(--c2p-transition);
}
.c2p-stepper-step:last-child::after {
  display: none;
}
.c2p-stepper-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--c2p-text-muted);
  transition: var(--c2p-transition);
  line-height: 1.2;
}

/* Active step */
.c2p-stepper-step.active::before {
  border-color: var(--c2p-accent);
  background: var(--c2p-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.c2p-stepper-step.active .c2p-stepper-label {
  color: var(--c2p-accent);
  font-weight: 600;
}

/* Done step */
.c2p-stepper-step.done::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .7rem;
  border-color: var(--c2p-success);
  background: var(--c2p-success);
  color: #fff;
}
.c2p-stepper-step.done::after {
  background: var(--c2p-success);
}
.c2p-stepper-step.done .c2p-stepper-label {
  color: var(--c2p-success);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 575.98px) {
  .c2p-stepper-step::before {
    width: 28px;
    height: 28px;
    font-size: .72rem;
  }
  .c2p-stepper-step::after {
    top: 14px;
    left: calc(50% + 17px);
    right: calc(-50% + 17px);
  }
  .c2p-stepper-label {
    font-size: .65rem;
  }
}

/* Duplicate warning banner */
.c2p-dup-banner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--c2p-radius-sm);
  background: var(--c2p-warning-soft);
  border: 1px solid var(--c2p-warning);
  margin-bottom: 1rem;
}
.c2p-dup-banner i {
  color: var(--c2p-warning);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.c2p-dup-banner-content {
  flex: 1;
  font-size: .82rem;
  color: var(--c2p-text-primary);
}
.c2p-dup-banner-content strong {
  font-weight: 600;
}
.c2p-dup-item {
  padding: .35rem .5rem;
  background: var(--c2p-bg-card);
  border-radius: var(--c2p-radius-sm);
  margin-top: .4rem;
  font-size: .78rem;
  border: 1px solid var(--c2p-border);
}

/* Recap card */
.c2p-recap-section {
  margin-bottom: 1rem;
}
.c2p-recap-section h6 {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c2p-text-secondary);
  border-bottom: 1px solid var(--c2p-border);
  padding-bottom: .4rem;
  margin-bottom: .5rem;
}
.c2p-recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .35rem .75rem;
}
.c2p-recap-field {
  font-size: .82rem;
}
.c2p-recap-field .label {
  color: var(--c2p-text-muted);
  font-size: .72rem;
}
.c2p-recap-field .value {
  font-weight: 500;
  color: var(--c2p-text-primary);
}

/* --------------------------------------------------------------------------
   24. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .c2p-sidebar,
  .c2p-topbar,
  .c2p-backdrop { display: none !important; }
  .c2p-main { margin-left: 0 !important; padding: 0 !important; }
  .c2p-card { box-shadow: none; border: 1px solid #ddd; }
}