/* =============================================================================
   EXCUCHA DESIGN SYSTEM
   CSS Custom Properties + Base Component Classes
   Phase 1 — Admin-wide Redesign
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS — CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ex-accent:       #E8613A;
  --ex-accent-hover: #D4522E;
  --ex-accent-light: #FEF2EE;
  --ex-accent-ring:  rgba(232, 97, 58, 0.1);

  /* Surfaces */
  --ex-bg:           #F7F8FA;
  --ex-surface:      #FFFFFF;
  --ex-surface-hover:#FAFBFC;

  /* Borders */
  --ex-border:       #E8E8E8;
  --ex-border-hover: #D1D5DB;
  --ex-border-focus: #E8613A;

  /* Text */
  --ex-ink:          #1A1A2E;
  --ex-ink-2:        #374151;
  --ex-ink-muted:    #6B7280;
  --ex-ink-faint:    #9CA3AF;

  /* Semantic — Success */
  --ex-success:        #22C55E;
  --ex-success-bg:     #F0FDF4;
  --ex-success-border: #BBF7D0;

  /* Semantic — Warning */
  --ex-warning:        #F59E0B;
  --ex-warning-bg:     #FFF7ED;
  --ex-warning-border: #FDE68A;

  /* Semantic — Danger */
  --ex-danger:         #EF4444;
  --ex-danger-bg:      #FEF2F2;
  --ex-danger-border:  #FECACA;

  /* Semantic — Info */
  --ex-info:           #2563EB;
  --ex-info-bg:        #DBEAFE;
  --ex-info-border:    #BFDBFE;

  /* NPS Segments */
  --ex-nps-promoter:      #22C55E;
  --ex-nps-promoter-bg:   #F0FDF4;
  --ex-nps-passive:       #F59E0B;
  --ex-nps-passive-bg:    #FFF7ED;
  --ex-nps-detractor:     #EF4444;
  --ex-nps-detractor-bg:  #FEF2F2;

  /* Survey Type Badges */
  --ex-badge-nps-bg:    #FEF3C7;
  --ex-badge-nps-text:  #D97706;
  --ex-badge-csat-bg:   #DBEAFE;
  --ex-badge-csat-text: #2563EB;
  --ex-badge-ces-bg:    #E0F2FE;
  --ex-badge-ces-text:  #0284C7;
  --ex-badge-custom-bg: #F3E8FF;
  --ex-badge-custom-text:#7C3AED;

  /* Typography */
  --ex-font: 'Inter', sans-serif;

  /* Spacing Scale */
  --ex-space-1: 4px;
  --ex-space-2: 8px;
  --ex-space-3: 12px;
  --ex-space-4: 16px;
  --ex-space-5: 20px;
  --ex-space-6: 24px;
  --ex-space-7: 28px;
  --ex-space-8: 32px;

  /* Border Radii */
  --ex-radius-xs: 6px;
  --ex-radius-sm: 8px;
  --ex-radius-md: 12px;
  --ex-radius-lg: 16px;
  --ex-radius-xl: 20px;

  /* Shadows */
  --ex-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ex-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --ex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --ex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
  --ex-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03);

  /* Layout */
  --ex-sidebar-w: 260px;
  --ex-topbar-h:  64px;

  /* Transitions */
  --ex-transition: 0.2s ease;
}


/* -----------------------------------------------------------------------------
   2. KEYFRAME ANIMATIONS
   ----------------------------------------------------------------------------- */

@keyframes ex-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

@keyframes ex-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes ex-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}


/* -----------------------------------------------------------------------------
   3. CARD
   ----------------------------------------------------------------------------- */

.ex-card {
  background:    var(--ex-surface);
  border:        1px solid var(--ex-border);
  border-radius: var(--ex-radius-lg);
  padding:       var(--ex-space-6);
}

.ex-card--hover {
  cursor:     pointer;
  transition: border-color var(--ex-transition),
              box-shadow   var(--ex-transition),
              transform    var(--ex-transition);
}

.ex-card--hover:hover {
  border-color: var(--ex-accent);
  box-shadow:   var(--ex-shadow-md);
  transform:    translateY(-2px);
}


/* -----------------------------------------------------------------------------
   4. BUTTON
   ----------------------------------------------------------------------------- */

.ex-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ex-space-2);
  font-family:     var(--ex-font);
  font-size:       14px;
  font-weight:     600;
  line-height:     1;
  border-radius:   var(--ex-radius-sm);
  border:          1px solid transparent;
  padding:         10px 18px;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--ex-transition),
                   color       var(--ex-transition),
                   border-color var(--ex-transition),
                   box-shadow   var(--ex-transition);
  white-space: nowrap;
}

/* Primary */
.ex-btn--primary {
  background:   var(--ex-accent);
  color:        #FFFFFF;
  border-color: var(--ex-accent);
}

.ex-btn--primary:hover {
  background:   var(--ex-accent-hover);
  border-color: var(--ex-accent-hover);
  box-shadow:   0 0 0 3px var(--ex-accent-ring);
}

/* Secondary */
.ex-btn--secondary {
  background:   var(--ex-surface);
  color:        var(--ex-ink);
  border-color: var(--ex-border);
}

.ex-btn--secondary:hover {
  background:   var(--ex-surface-hover);
  border-color: var(--ex-border-hover);
  box-shadow:   var(--ex-shadow-xs);
}

/* Ghost */
.ex-btn--ghost {
  background:   transparent;
  color:        var(--ex-ink-muted);
  border-color: transparent;
}

.ex-btn--ghost:hover {
  background: var(--ex-bg);
  color:      var(--ex-ink-2);
}

/* Danger */
.ex-btn--danger {
  background:   var(--ex-danger);
  color:        #FFFFFF;
  border-color: var(--ex-danger);
}

.ex-btn--danger:hover {
  background:   #DC2626;
  border-color: #DC2626;
  box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Small */
.ex-btn--sm {
  font-size: 12px;
  padding:   6px 12px;
}

/* Disabled */
.ex-btn--disabled,
.ex-btn:disabled {
  background:     var(--ex-border);
  color:          var(--ex-ink-muted);
  border-color:   var(--ex-border);
  pointer-events: none;
  cursor:         not-allowed;
  box-shadow:     none;
}


/* -----------------------------------------------------------------------------
   5. INPUT
   ----------------------------------------------------------------------------- */

.ex-input {
  display:       block;
  width:         100%;
  font-family:   var(--ex-font);
  font-size:     14px;
  color:         var(--ex-ink);
  background:    var(--ex-surface);
  border:        1px solid var(--ex-border);
  border-radius: var(--ex-radius-sm);
  padding:       9px 12px;
  outline:       none;
  transition:    border-color var(--ex-transition),
                 box-shadow   var(--ex-transition);
  box-sizing:    border-box;
}

.ex-input::placeholder {
  color: var(--ex-ink-faint);
}

.ex-input:hover {
  border-color: var(--ex-border-hover);
}

.ex-input:focus {
  border-color: var(--ex-border-focus);
  box-shadow:   0 0 0 3px var(--ex-accent-ring);
}


/* -----------------------------------------------------------------------------
   6. SELECT
   ----------------------------------------------------------------------------- */

.ex-select {
  display:             block;
  width:               100%;
  font-family:         var(--ex-font);
  font-size:           14px;
  color:               var(--ex-ink);
  background-color:    var(--ex-surface);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  background-size:     16px 16px;
  border:              1px solid var(--ex-border);
  border-radius:       var(--ex-radius-sm);
  padding:             9px 36px 9px 12px;
  appearance:          none;
  -webkit-appearance:  none;
  outline:             none;
  cursor:              pointer;
  transition:          border-color var(--ex-transition),
                       box-shadow   var(--ex-transition);
  box-sizing:          border-box;
}

.ex-select:hover {
  border-color: var(--ex-border-hover);
}

.ex-select:focus {
  border-color: var(--ex-border-focus);
  box-shadow:   0 0 0 3px var(--ex-accent-ring);
}


/* -----------------------------------------------------------------------------
   7. BADGE
   ----------------------------------------------------------------------------- */

.ex-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-family:   var(--ex-font);
  font-size:     11px;
  font-weight:   600;
  line-height:   1;
  border-radius: 6px;
  padding:       3px 8px;
  white-space:   nowrap;
}

/* Survey type badges */
.ex-badge--nps {
  background: var(--ex-badge-nps-bg);
  color:      var(--ex-badge-nps-text);
}

.ex-badge--csat {
  background: var(--ex-badge-csat-bg);
  color:      var(--ex-badge-csat-text);
}

.ex-badge--ces {
  background: var(--ex-badge-ces-bg);
  color:      var(--ex-badge-ces-text);
}

.ex-badge--custom {
  background: var(--ex-badge-custom-bg);
  color:      var(--ex-badge-custom-text);
}

/* Semantic badges */
.ex-badge--success {
  background: var(--ex-success-bg);
  color:      var(--ex-success);
}

.ex-badge--warning {
  background: var(--ex-warning-bg);
  color:      var(--ex-warning);
}

.ex-badge--danger {
  background: var(--ex-danger-bg);
  color:      var(--ex-danger);
}


/* -----------------------------------------------------------------------------
   8. STATUS INDICATOR
   ----------------------------------------------------------------------------- */

.ex-status {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--ex-font);
  font-size:   13px;
  font-weight: 500;
  color:       var(--ex-ink-2);
}

.ex-status::before {
  content:       '';
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}

.ex-status--active {
  color: var(--ex-success);
}

.ex-status--active::before {
  background:  var(--ex-success);
  animation:   ex-pulse 2s ease-in-out infinite;
}

.ex-status--draft {
  color: var(--ex-ink-muted);
}

.ex-status--draft::before {
  background: var(--ex-ink-faint);
}

.ex-status--closed {
  color: var(--ex-danger);
}

.ex-status--closed::before {
  background: var(--ex-danger);
}


/* -----------------------------------------------------------------------------
   9. TOGGLE SWITCH
   ----------------------------------------------------------------------------- */

.ex-toggle {
  position:   relative;
  display:    inline-block;
  width:      40px;
  height:     22px;
  flex-shrink: 0;
}

.ex-toggle input {
  opacity:  0;
  width:    0;
  height:   0;
  position: absolute;
}

.ex-toggle__track {
  position:      absolute;
  inset:         0;
  background:    var(--ex-border-hover);
  border-radius: 22px;
  cursor:        pointer;
  transition:    background var(--ex-transition);
}

.ex-toggle__track::before {
  content:       '';
  position:      absolute;
  left:          3px;
  top:           3px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    #FFFFFF;
  box-shadow:    var(--ex-shadow-xs);
  transition:    transform var(--ex-transition);
}

.ex-toggle input:checked + .ex-toggle__track {
  background: var(--ex-accent);
}

.ex-toggle input:checked + .ex-toggle__track::before {
  transform: translateX(18px);
}

.ex-toggle input:focus + .ex-toggle__track {
  box-shadow: 0 0 0 3px var(--ex-accent-ring);
}


/* -----------------------------------------------------------------------------
   10. SEGMENTED CONTROL
   ----------------------------------------------------------------------------- */

.ex-segmented {
  display:       inline-flex;
  align-items:   center;
  background:    var(--ex-bg);
  border:        1px solid var(--ex-border);
  border-radius: var(--ex-radius-sm);
  padding:       3px;
  gap:           2px;
}

.ex-segmented__btn {
  font-family:   var(--ex-font);
  font-size:     13px;
  font-weight:   500;
  color:         var(--ex-ink-muted);
  background:    transparent;
  border:        none;
  border-radius: 6px;
  padding:       5px 12px;
  cursor:        pointer;
  transition:    background var(--ex-transition),
                 color       var(--ex-transition),
                 box-shadow  var(--ex-transition);
  white-space:   nowrap;
}

.ex-segmented__btn:hover {
  color: var(--ex-ink-2);
}

.ex-segmented__btn--active,
.ex-segmented__btn[aria-selected="true"] {
  background: var(--ex-accent);
  color:      #FFFFFF;
  box-shadow: var(--ex-shadow-xs);
}


/* -----------------------------------------------------------------------------
   11. OVERLAY & MODAL
   ----------------------------------------------------------------------------- */

.ex-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.45);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          1000;
  padding:          var(--ex-space-4);
}

.ex-modal {
  background:    var(--ex-surface);
  border:        1px solid var(--ex-border);
  border-radius: var(--ex-radius-lg);
  box-shadow:    var(--ex-shadow-xl);
  width:         100%;
  max-width:     540px;
  max-height:    calc(100vh - 64px);
  overflow-y:    auto;
  animation:     ex-modal-in 0.2s ease both;
}


/* -----------------------------------------------------------------------------
   12. SKELETON / SHIMMER
   ----------------------------------------------------------------------------- */

.ex-skeleton {
  display:          block;
  background:       linear-gradient(
                      90deg,
                      var(--ex-bg)      0px,
                      var(--ex-border)  200px,
                      var(--ex-bg)      400px
                    );
  background-size:  800px 100%;
  border-radius:    var(--ex-radius-xs);
  animation:        ex-shimmer 1.4s ease-in-out infinite;
}


/* -----------------------------------------------------------------------------
   13. SECTION LABEL
   ----------------------------------------------------------------------------- */

.ex-section-label {
  display:        block;
  font-family:    var(--ex-font);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ex-ink-muted);
  margin-bottom:  var(--ex-space-3);
}


/* -----------------------------------------------------------------------------
   14. EMPTY STATE
   ----------------------------------------------------------------------------- */

.ex-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--ex-space-8) var(--ex-space-6);
  gap:             var(--ex-space-3);
}

.ex-empty__icon {
  width:  48px;
  height: 48px;
  color:  var(--ex-ink-faint);
  margin-bottom: var(--ex-space-2);
}

.ex-empty__title {
  font-family: var(--ex-font);
  font-size:   16px;
  font-weight: 600;
  color:       var(--ex-ink-2);
  margin:      0;
}

.ex-empty__text {
  font-family: var(--ex-font);
  font-size:   14px;
  color:       var(--ex-ink-muted);
  margin:      0;
  max-width:   320px;
  line-height: 1.5;
}