/* ============================================================
   KUDO DESIGN SYSTEM — Manila Folder Theme
   Phase 5A: Design System Foundation
   ============================================================ */

/* ---- Color Tokens ---- */
:root {
  --manila:       #F5E6C8;
  --cream:        #FEFCE8;
  --kudo-indigo:  #3730A3;
  --dark-navy:    #1E1B4B;
  --warm-tan:     #D4A96A;
  --soft-shadow:  rgba(0, 0, 0, 0.12);
  --sage-green:   #6B7C5E;
  --muted-red:    #B45309;
}

/* ---- Base ---- */
body {
  background-color: var(--manila) !important;
  color: var(--dark-navy);
}

/* ---- Typography ---- */
.font-display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.font-document { font-family: 'Lora', 'Georgia', serif; }
.font-mono-kudo { font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   NAV
   ============================================================ */
.kudo-nav {
  background-color: var(--cream) !important;
  border-bottom: 1px solid var(--warm-tan) !important;
}

/* ============================================================
   FOLDER CARD COMPONENT (dashboard employee cards)
   ============================================================ */
.folder-card-wrap {
  padding-top: 28px;
  position: relative;
}

.folder-tab {
  position: absolute;
  top: 0;
  left: 16px;
  background: var(--warm-tan);
  padding: 5px 14px 6px;
  border-radius: 6px 6px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dark-navy);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.folder-tab.completed {
  background: var(--sage-green);
  color: #fff;
}

.folder-card {
  background: var(--manila);
  border: 1px solid rgba(212, 169, 106, 0.5);
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 2px 6px var(--soft-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--soft-shadow);
}

.folder-avatar {
  width: 40px;
  height: 40px;
  background: var(--kudo-indigo);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--kudo-indigo) !important;
  color: #fff !important;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover {
  background: #312e81 !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--warm-tan) !important;
  color: var(--dark-navy) !important;
  border: none !important;
  transition: background 0.15s;
}
.btn-secondary:hover {
  background: #c9983c !important;
}

.btn-ghost {
  background: transparent;
  color: var(--kudo-indigo);
  border: 1px solid var(--kudo-indigo);
  transition: background 0.15s;
}
.btn-ghost:hover {
  background: rgba(55,48,163,0.06);
}

/* ============================================================
   STATS CARDS
   ============================================================ */
.stat-card {
  background: var(--cream);
  border: 1px solid rgba(212, 169, 106, 0.4);
  border-radius: 12px;
  box-shadow: 0 1px 4px var(--soft-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--soft-shadow);
}
.stat-icon {
  width: 40px; height: 40px;
  background: rgba(55,48,163,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   SECTION PANEL (wraps employee list)
   ============================================================ */
.panel {
  background: var(--cream);
  border: 1px solid rgba(212, 169, 106, 0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px var(--soft-shadow);
}
.panel-header {
  background: #fdf7e8;
  border-bottom: 1px solid rgba(212, 169, 106, 0.35);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   MODAL
   ============================================================ */
.kudo-modal {
  background: var(--cream) !important;
}
.kudo-modal input,
.kudo-modal select,
.kudo-modal textarea {
  background: var(--manila) !important;
  border-color: rgba(212, 169, 106, 0.6) !important;
  color: var(--dark-navy) !important;
}
.kudo-modal input:focus,
.kudo-modal select:focus,
.kudo-modal textarea:focus {
  border-color: var(--kudo-indigo) !important;
  box-shadow: 0 0 0 2px rgba(55,48,163,0.12) !important;
  outline: none !important;
}

/* ============================================================
   INTERVIEW PAGE
   ============================================================ */
.progress-bar-manila {
  height: 4px;
  background: linear-gradient(to right, var(--warm-tan) var(--progress), rgba(212,169,106,0.2) var(--progress));
  transition: background 0.3s ease;
}

.question-card {
  background: var(--cream);
  border-left: 4px solid var(--kudo-indigo);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 12px var(--soft-shadow);
  padding: 32px;
}

.answer-textarea {
  background: var(--manila) !important;
  border: 2px solid rgba(212,169,106,0.5) !important;
  border-radius: 12px !important;
  color: var(--dark-navy) !important;
  line-height: 1.6;
  transition: border-color 0.2s;
}
.answer-textarea:focus {
  border-color: var(--kudo-indigo) !important;
  box-shadow: 0 0 0 2px rgba(55,48,163,0.1) !important;
  outline: none !important;
}

.followup-section {
  border-left: 4px solid var(--kudo-indigo);
  background: rgba(55,48,163,0.04);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
}

/* ============================================================
   REVIEW PAGE — Document Paper
   ============================================================ */
.review-paper-manila {
  background: var(--cream);
  box-shadow: 0 2px 8px var(--soft-shadow), 0 16px 48px rgba(0,0,0,0.06);
  border: 1px solid rgba(212,169,106,0.35);
  line-height: 1.8;
}

.review-paper-header {
  background: #fdf7e8;
  border-bottom: 1px solid rgba(212,169,106,0.3);
}

.review-section-heading {
  color: var(--kudo-indigo) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
}

/* ============================================================
   PROGRESS INDICATOR (loading states — text, not spinner)
   ============================================================ */
.thinking-message {
  font-family: 'Lora', 'Georgia', serif;
  font-style: italic;
  color: var(--dark-navy);
  font-size: 1.1rem;
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.badge-pro {
  background: rgba(55,48,163,0.12);
  color: var(--kudo-indigo);
  font-weight: 600;
}
.badge-free {
  background: rgba(212,169,106,0.2);
  color: var(--dark-navy);
  font-weight: 600;
}
.badge-complete {
  background: rgba(107,124,94,0.15);
  color: var(--sage-green);
  font-weight: 600;
}
.badge-draft {
  background: rgba(180,83,9,0.12);
  color: var(--muted-red);
  font-weight: 600;
}

/* ============================================================
   UPGRADE BANNERS
   ============================================================ */
.upgrade-banner-free {
  background: linear-gradient(135deg, var(--kudo-indigo) 0%, #4c1d95 100%);
}
.upgrade-banner-pro {
  background: rgba(107,124,94,0.1);
  border: 1px solid rgba(107,124,94,0.3);
}

/* ============================================================
   TRANSITIONS & ANIMATION
   ============================================================ */
.fade-in-manila {
  animation: fadeInManila 0.35s ease-out;
}
@keyframes fadeInManila {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Paper-flip open transition */
.paper-open {
  animation: paperOpen 0.3s ease-out;
}
@keyframes paperOpen {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated loading text dots */
.loading-text::after {
  content: '';
  animation: loadingDots 1.8s steps(4, end) infinite;
}
@keyframes loadingDots {
  0%, 20%  { content: ''; }
  40%      { content: '.'; }
  60%      { content: '..'; }
  80%,100% { content: '...'; }
}