/*
 * ═══════════════════════════════════════════════════════
 *  MEDLYTICS — UX Layer  (ux.css)
 *  Phase 3 — Experience Touches
 *
 *  Additive only — loaded after style.css, theme.css, motion.css
 *  Does NOT override layout, IDs, or JS-bound selectors.
 * ═══════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════
   1. EMPTY STATES — enhanced visual (over shared.js base)
   ══════════════════════════════════════════════════════ */

.empty-cell {
  padding: 48px 20px !important;
  text-align: center !important;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.empty-icon {
  font-size: 40px;
  opacity: 0.55;
  margin-bottom: 4px;
  line-height: 1;
}

.empty-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 2px;
}

.empty-sub {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  max-width: 320px;
  line-height: 1.55;
}

.empty-state .btn {
  margin-top: 16px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
}

/* Pages using plain <td class="muted"> for empty rows — upgrade visually */
td.muted:only-child {
  padding: 36px 20px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════
   2. SKELETON LOADER — shimmer rows while data fetches
   ══════════════════════════════════════════════════════ */

@keyframes ux-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ux-skeleton-row td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}

.ux-skeleton-pulse {
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--border, rgba(0,0,0,0.08)) 25%,
    rgba(255,255,255,0.12)          50%,
    var(--border, rgba(0,0,0,0.08)) 75%
  );
  background-size: 200% 100%;
  animation: ux-shimmer 1.4s ease infinite;
  opacity: 0.7;
}

/* Vary widths for visual realism */
.ux-skeleton-row:nth-child(1) .ux-skeleton-pulse { width: 85%; }
.ux-skeleton-row:nth-child(2) .ux-skeleton-pulse { width: 70%; }
.ux-skeleton-row:nth-child(3) .ux-skeleton-pulse { width: 90%; }
.ux-skeleton-row:nth-child(4) .ux-skeleton-pulse { width: 60%; }
.ux-skeleton-row:nth-child(5) .ux-skeleton-pulse { width: 78%; }

/* Skeleton card (for stat cards) */
.ux-skeleton-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 20px !important;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ux-skeleton-card .ux-skeleton-pulse:first-child { width: 40%; height: 13px; }
.ux-skeleton-card .ux-skeleton-pulse:last-child  { width: 60%; height: 28px; }

/* ══════════════════════════════════════════════════════
   3. FIRST-TIME HINT BANNER
   One-time dismissible guidance banner injected by ux.js
   ══════════════════════════════════════════════════════ */

.ux-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: var(--radius, 12px);
  border: 1px solid rgba(0, 209, 178, 0.25);
  background: rgba(0, 209, 178, 0.07);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  animation: med-fade-up 0.30s ease both;
}

.ux-hint-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ux-hint-body {
  flex: 1;
  min-width: 0;
}

.ux-hint-title {
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--primary, #00D1B2);
}

.ux-hint-text {
  color: var(--text-muted);
  font-size: 13px;
}

.ux-hint-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
  font-family: inherit;
}
.ux-hint-dismiss:hover { opacity: 1; }

/* Fade-out class added by JS on dismiss */
.ux-hint.ux-hint-hiding {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   4. DASHBOARD — page subtitle emphasis
   ══════════════════════════════════════════════════════ */

/* The existing #pageSubheading already shows subtitle.
   Enhance its visual weight here. */
#pageSubheading {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* Dashboard first section-card gets a subtle left accent */
#page-content > .section-card:first-child {
  border-inline-start: 3px solid var(--primary, #00D1B2) !important;
  padding-inline-start: 18px !important;
}

/* ══════════════════════════════════════════════════════
   5. CTA BUTTON HIERARCHY
   Ensure each section has one clear primary CTA.
   Secondary buttons in same row look muted.
   ══════════════════════════════════════════════════════ */

/* When a .btn-primary is inside .header-actions, give it a bit more weight */
.header-actions .btn-primary {
  box-shadow: 0 2px 10px rgba(0, 209, 178, 0.25) !important;
}

/* ══════════════════════════════════════════════════════
   6. LOADING INDICATOR — top progress bar
   A thin progress bar appears at the top of .page-content
   while data is being fetched (controlled by ux.js class).
   ══════════════════════════════════════════════════════ */

@keyframes ux-progress {
  0%   { width: 0%;   opacity: 1; }
  70%  { width: 85%;  opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

.ux-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary, #00D1B2), #38BDF8);
  z-index: 9999;
  animation: ux-progress 1.8s ease forwards;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   7. BETTER TABLE EMPTY ROWS (appointments/doctors)
   These pages insert: <tr><td colspan="N" class="muted">
   Upgrade them to match the .empty-state look.
   ══════════════════════════════════════════════════════ */

tr:only-child > td.muted {
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════
   8. SUCCESS / ERROR STATUS BOX entry animation
   Already styled in style.css. Just polish entrance.
   ══════════════════════════════════════════════════════ */

.status-box.status-ok,
.status-box.status-bad {
  display: block;
  animation: med-fade-up 0.20s ease both;
}

/* ══════════════════════════════════════════════════════
   9. HELP BUTTONS — hidden system-wide
   addHelpButton() creates .help-btn inside #helpContainer.
   Both are suppressed here; ux.js also no-ops the function.
   ══════════════════════════════════════════════════════ */

#helpContainer,
.help-btn {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ux-skeleton-pulse { animation: none; opacity: 0.4; }
  .ux-loading-bar    { animation: none; width: 100%; }
  .ux-hint           { animation: none; }
}