/* base.css — khung giao diện chung, không phụ thuộc theme */
/* Bộ design token 3 tầng (trích từ web gốc — xem study/LIVE-ANALYSIS.md mục 2). */
:root {
  --app-radius: 16px;

  /* Tầng 1 — thang hệ thống (bất biến) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .35);
  --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 1040;
  --z-modal: 1050; --z-toast: 99999; --z-loader: 100000;

  /* Tầng 2 — màu ngữ nghĩa (dùng chung, không đổi theo theme phiếu) */
  --primary: #3b82f6;   --primary-hover: #2563eb;
  --secondary: #10b981; --secondary-hover: #059669;
  --accent: #f59e0b;    --danger: #ef4444; --danger-hover: #dc2626;
  --success: #22c55e;   --warning: #f59e0b;
}

body {
  font-family: 'Comfortaa', 'Nunito', 'Segoe UI', sans-serif;
  background: var(--app-bg, #fdf2f6);
  color: #1f2937;
  min-height: 100vh;
}

.app-nav {
  background: var(--app-nav-bg, #fff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.app-nav .navbar-brand { color: var(--app-primary, #c2185b); }
.app-nav .nav-link { color: #4b5563; font-weight: 500; border-radius: 10px; padding: 6px 12px; }
.app-nav .nav-link.active,
.app-nav .nav-link:hover { color: var(--app-primary, #c2185b); background: var(--app-primary-soft, #fce4ec); }

.card-soft {
  background: var(--d-surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--app-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background: var(--app-primary, #c2185b);
  border-color: var(--app-primary, #c2185b);
}
.btn-primary:hover { filter: brightness(0.93); }
.btn-outline-primary { color: var(--app-primary, #c2185b); border-color: var(--app-primary, #c2185b); }
.btn-outline-primary:hover { background: var(--app-primary, #c2185b); border-color: var(--app-primary, #c2185b); }

.page-title { font-weight: 700; color: var(--app-primary, #c2185b); }

.stat-card { padding: 18px 20px; }
.stat-card .stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { color: #6b7280; font-size: 0.85rem; }

.empty-hint {
  text-align: center; padding: 48px 16px; color: #9ca3af;
}
.empty-hint i { font-size: 2.4rem; margin-bottom: 12px; display: block; }

/* lưới chọn theme trong cấu hình */
.theme-swatch {
  border-radius: 12px; padding: 14px; cursor: pointer; border: 3px solid transparent;
  color: #fff; font-weight: 600; text-align: center; min-height: 80px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.theme-swatch.selected { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.1); }

/* ô điểm danh */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.att-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 2px solid #e5e7eb; border-radius: 12px; cursor: pointer; user-select: none; background: var(--d-surface, #fff);
}
.att-chip.present { border-color: var(--app-primary, #c2185b); background: var(--app-primary-soft, #fce4ec); }
.att-chip .form-check-input { pointer-events: none; }

/* chọn loại buổi A / B / Cả 2 (HS có 2 mức phí) */
.ab-pick { margin-left: auto; display: inline-flex; gap: 2px; background: #f3f4f6; border-radius: 10px; padding: 2px; }
.ab-opt {
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: .68rem; font-weight: 800; color: #6b7280; padding: 2px 7px; line-height: 1.4;
}
.ab-opt:hover { background: #e5e7eb; }
.ab-opt.on { background: #0369a1; color: #fff; }

@media print {
  .app-nav, .no-print { display: none !important; }
}

/* ---- Bộ animation cốt lõi (chắt lọc từ ~75 keyframe web gốc — study/LIVE-ANALYSIS.md mục 3/8.6) ---- */
@keyframes fadeIn      { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeOut     { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes slideUp     { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes scSlideUp   { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes scaleInM    { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes scaleOutM   { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes toastSlideIn{ 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes pulse       { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes heartbeat   { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
@keyframes spin        { 100% { transform: rotate(360deg); } }

.anim-fade      { animation: fadeIn .22s ease both; }
.anim-fade-out  { animation: fadeOut .18s ease forwards; }
.anim-slide     { animation: slideUp .3s ease both; }
.anim-scale     { animation: scaleInM .2s ease both; }
.anim-scale-out { animation: scaleOutM .18s ease forwards; }
.anim-pulse     { animation: pulse 1.6s ease-in-out infinite; }
.anim-spin      { animation: spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-fade-out, .anim-slide, .anim-scale, .anim-scale-out, .anim-pulse, .anim-spin,
  .modal-overlay, .modal-box, .modal-overlay.closing, .modal-overlay.closing .modal-box {
    animation: none !important;
    transition: none !important;
  }
}

/* Sync dot glow */
.sync-glow {
  animation: syncPulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px currentColor;
}
@keyframes syncPulse {
  0%, 100% { box-shadow: 0 0 4px currentColor; }
  50% { box-shadow: 0 0 12px currentColor, 0 0 20px currentColor; }
}