/* ==========================================================================
   Admin/Analytics/Review Polish Layer
   v1.0 — applies the new homepage design language to legacy pages.
   This file is additive and non-destructive. It targets the class names
   already in use across admin.html, analytics.html, billing.html,
   calibration.html, review*.html, task_*.html, submit_task.html, status.html.

   Design tokens expected on each page (most pages already have these):
   --primary, --primary-dark, --primary-light, --accent, --cream
   --bg, --surface, --ink, --ink-muted, --ink-faint
   --border, --border-light, --radius, --radius-lg
   --green, --green-light, --red, --red-light, --amber, --amber-light
   ========================================================================== */

/* ---------- 1. Sticky topbar refinement: backdrop-blur + soft border ---------- */
.topbar, .navbar, .topnav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.topbar.scrolled, .navbar.scrolled, .topnav.scrolled {
  border-bottom-color: var(--border, #E8E2D8) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Dark page topbars (admin) — match dark glass aesthetic */
.admin-hero ~ .topbar, body.dark .topbar, .topbar.topbar--dark {
  background: rgba(17, 24, 39, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---------- 2. Page hero / page title polish ---------- */
.page-header, .hero-band, .admin-hero, .page-hero {
  position: relative;
  overflow: hidden;
}

/* Light hero — cream → white gradient + 3px gradient accent bar at top */
.page-header--cream, .admin-hero--cream {
  background: linear-gradient(180deg, var(--cream, #FBF8F0) 0%, #fff 100%) !important;
  border-bottom: 1px solid var(--border-light, #F0ECE4) !important;
  text-align: center;
  padding: 56px 24px 40px !important;
}

/* Dark hero — slate → darker, kept for admin.html */
.admin-hero {
  background: linear-gradient(180deg, var(--gray-900, #111827) 0%, #0B1220 100%) !important;
  padding: 56px 24px 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
}
.admin-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary, #0D5C4B) 0%, var(--accent, #C8842A) 100%);
  border-radius: 0 0 3px 3px;
}

/* The 3px gradient accent bar that sits at the top of major sections.
   Two usage modes:
   (a) Add class .accent-bar to a relatively-positioned wrapper; the
       gradient bar appears as a centered 60×3px strip at the top.
   (b) Add class .page-header--cream or .admin-hero--cream to the hero
       band; the bar is rendered as the ::before pseudo-element. */
.accent-bar,
.page-header--cream,
.admin-hero--cream {
  position: relative;
}
.accent-bar::before,
.page-header--cream::before,
.admin-hero--cream::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary, #0D5C4B) 0%, var(--accent, #C8842A) 100%);
  border-radius: 0 0 3px 3px;
}

/* Page h1 — Instrument Serif display type, large, tight tracking.
   Only applied to explicit opt-in classes so we don't change the look
   of pages that have their own h1 style. */
.page-title, .section-title, .login-screen h2, .panel-title--lg {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* Eyebrow / kicker label */
.section-label, .panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #C8842A);
  margin-bottom: 12px;
}
.section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, #0D5C4B);
  box-shadow: 0 0 0 3px rgba(13, 92, 75, 0.12);
}

/* ---------- 3. Card / panel shadow lift on hover ---------- */
.admin-card, .kpi-card, .panel, .card, .health-item,
.queue-card, .task-card, .stat-card {
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.admin-card:hover, .kpi-card:hover, .panel:hover, .card:hover,
.health-item:hover, .queue-card:hover, .task-card:hover, .stat-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04),
              0 12px 32px -12px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-2px) !important;
}

/* Lighter hover for compact cards so the page doesn't feel jumpy */
.health-item:hover, .kpi-card:hover {
  transform: translateY(-1px) !important;
}

/* ---------- 4. Section padding rhythm ---------- */
/* Only target admin-specific containers here — other pages set their own. */
.admin-content {
  padding-top: 48px;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .admin-content {
    padding-top: 32px;
    padding-bottom: 56px;
  }
}

/* ---------- 5. Buttons — primary gets the lift-and-glow hover ---------- */
/* Approach: do NOT override the page's primary color. The lift/glow hover
   pattern is the part that's design-system; the fill color stays under
   each page's --primary / --blue / --blue-600 / --viridian control. */
.btn, .refresh-btn, .key-input button, .action-btn, button[type="submit"] {
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.btn-primary, .key-input button, button.primary, .action-btn.primary,
.claim-btn, .bulk-claim-btn, .approve-btn, .submit-btn {
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover, .key-input button:hover, button.primary:hover,
.action-btn.primary:hover, .claim-btn:hover, .bulk-claim-btn:hover,
.approve-btn:hover, .submit-btn:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18),
              0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}
.btn-primary:active, .key-input button:active, button.primary:active,
.action-btn.primary:active, .claim-btn:active, .bulk-claim-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Approve / Reject pairs — only re-style generic .approve-btn / .reject-btn
   classes. Most pages handle this through their own naming (.btn-approve, etc). */
.approve-btn { transition: background-color 0.18s, box-shadow 0.22s, transform 0.22s !important; }
.approve-btn:hover { transform: translateY(-1.5px) !important; box-shadow: 0 6px 20px rgba(22, 101, 52, 0.28), 0 0 0 3px rgba(22, 101, 52, 0.08) !important; }
.reject-btn { transition: background-color 0.18s, box-shadow 0.22s, transform 0.22s !important; }
.reject-btn:hover { transform: translateY(-1.5px) !important; box-shadow: 0 6px 20px rgba(185, 28, 28, 0.28), 0 0 0 3px rgba(185, 28, 28, 0.08) !important; }

/* Secondary / ghost — subtle hover lift */
.btn-secondary, button.secondary, button.ghost {
  transition: background-color 0.18s, border-color 0.18s,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-secondary:hover, button.secondary:hover, button.ghost:hover {
  transform: translateY(-1px) !important;
}

/* ---------- 6. Inputs — focus state uses page's primary color ring ---------- */
/* We use currentColor where possible, or fall back to a neutral ring.
   The page's own focus styles (set with !important) take precedence. */
input, select, textarea, .input, .form-input, .form-textarea,
.key-input input, .review-textarea, .form-card input,
.form-card select, .form-card textarea {
  transition: border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ---------- 7. Tables — softer hover, uppercase muted headers ---------- */
/* Only normalize where the page hasn't already defined strong table styles.
   The aim: keep the look of each page's tables while removing some harshness. */
table th, .table th, .admin-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.admin-table tbody tr:hover td, table tbody tr:hover td,
.table tbody tr:hover td {
  transition: background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ---------- 8. Badges / pills — softer colors, tighter padding ---------- */
/* Subtle type polish only — colors are still controlled by each page. */
.badge, .status-pill, .status-badge, .pill {
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ---------- 9. Section dividers / subtle separators ---------- */
.panel + .panel, .admin-card + .admin-card, .kpi-card + .kpi-card {
  /* default spacing handled by parent gap */
}

/* Subtle inner divider that matches the homepage's hairline rhythm */
.hairline, hr, .divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border, #E8E2D8) 20%,
    var(--border, #E8E2D8) 80%,
    transparent 100%) !important;
  margin: 24px 0 !important;
}

/* ---------- 10. Footer polish (matches landing footer tone) ---------- */
/* Keep this subtle — most pages already style their footer.
   The main intent: consistent padding and a clear top divider. */
footer, .site-footer, .page-footer {
  padding: 32px 24px !important;
  font-size: 13px !important;
}

/* ---------- 11. Status dot — keep the "live" feel for health checks ---------- */
.status-dot {
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.18;
}
.status-healthy .status-dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.05; }
}

/* ---------- 12. Dark page surface — opt-in only, no auto-apply ---------- */
/* The admin.html page sets its own dark body color inline. We don't
   override it. This is a hook for future dark variants. */
body.page-dark {
  background: linear-gradient(180deg, #0B1220 0%, #050810 100%) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- 13. Empty state polish ---------- */
.empty-state {
  text-align: center;
  padding: 56px 20px;
}
.empty-state svg { opacity: 0.45; margin-bottom: 12px; }
.empty-state p { font-size: 14px; line-height: 1.5; }

/* ---------- 14. Review verdict/CTA row — keep the action row visually anchored ---------- */
.verdict-bar, .action-bar, .review-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: var(--radius-lg, 12px);
}

/* ---------- 15. Hide focus ring only when using mouse, keep for keyboard ---------- */
:focus:not(:focus-visible) { outline: none !important; }
/* focus-visible is a UA-level rule, no !important so page styles still win */

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}