.hidden {
  display: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 0.8s linear infinite;
}

/* Grade badge colors */
.grade-A { background: rgba(22, 163, 74, 0.12);  color: #16a34a; }
.grade-B { background: rgba(101, 163, 13, 0.12);  color: #65a30d; }
.grade-C { background: rgba(217, 119, 6, 0.12);   color: #d97706; }
.grade-D { background: rgba(234, 88, 12, 0.12);   color: #ea580c; }
.grade-F { background: rgba(220, 38, 38, 0.12);   color: #dc2626; }

/* Score bar fill */
.score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Prescription code block */
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* History Panel slide-in */
.history-panel {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.history-panel.open {
  transform: translateX(0);
}

/* Line clamp */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── E-team AI Compass — Brand System ───────────────────────────────── */
/*
 * Compass Needle Gradient
 * The signature cyan-to-emerald gradient represents the light radiating
 * from the Compass needle — always pointing toward brand visibility in
 * the AI era. #00C9FF (true north, cyan) → #2AF598 (emerald horizon).
 * These two anchors must never be changed independently; they form the
 * single directional beam that defines E-team AI Compass identity.
 */

/* Gradient fill (buttons, icon backgrounds) — Compass Needle */
.et-accent {
  background: linear-gradient(135deg, #00C9FF 0%, #2AF598 100%);
}

/* Gradient text — Compass Needle */
.et-gradient-text {
  background: linear-gradient(135deg, #00C9FF 0%, #2AF598 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient CTA button — Compass Needle */
.btn-et {
  background: linear-gradient(135deg, #00C9FF 0%, #2AF598 100%);
  color: white;
  font-weight: 600;
  transition: opacity 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-et:hover:not(:disabled) {
  opacity: 0.88;
}
.btn-et:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hero section background */
.hero-bg {
  background: linear-gradient(160deg, #f0fdf9 0%, #e0f7ff 55%, #f8fafc 100%);
}

/* Branded loading spinner */
.spinner-et {
  animation: spin 0.8s linear infinite;
  border-top-color: #00C9FF !important;
}

/* Client modal */
.clients-modal {
  display: none;
}
.clients-modal.open {
  display: flex;
}

/* Print utilities (screen default) */
.print-only {
  display: none;
}

/* Print header layout */
.print-header {
  padding: 0;
}

/* Admin detail panel slide-in */
.detail-panel {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.detail-panel.open {
  transform: translateX(0);
}

@media print {
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .print-header {
    padding: 1.5rem 2rem 0;
  }

  body {
    background: white !important;
  }

  #result-section {
    display: block !important;
  }

  @page {
    margin: 1.5cm;
    size: A4;
  }

  /* Remove decorative shadows/borders for cleaner print */
  .shadow-sm,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl {
    box-shadow: none !important;
  }

  /* Avoid page breaks inside cards */
  .rounded-2xl,
  .rounded-xl {
    page-break-inside: avoid;
  }

  /* Hide overlays and panels */
  #clients-overlay,
  #clients-modal {
    display: none !important;
  }

  /* Admin page: print only the detail panel */
  body.admin-page #login-section,
  body.admin-page #dashboard-section,
  body.admin-page #detail-overlay {
    display: none !important;
  }
  body.admin-page #detail-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.admin-page #detail-panel .no-print-admin {
    display: none !important;
  }
}