/* views-polish.css — framing cleanup for the Stats, Scheduler, Radar and
   Active Recall full-page views.
   Fixes: page-wide box wrapping every section (nested frames), and section
   titles sitting flush on top of card borders. Presentation only. */

/* 1) The page shell is a layout container, never a card ------------------- */
#stats-view .sched-shell,
#scheduler-view .sched-shell,
#radar-view .sched-shell,
#recall-view .sched-shell {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 4px 32px !important;
}

/* 2) Page header breathes instead of hugging a border -------------------- */
#stats-view .sched-header,
#scheduler-view .sched-header,
#radar-view .sched-header,
#recall-view .sched-header {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 22px !important;
  align-items: center;
}
#stats-view .sched-subtitle,
#scheduler-view .sched-subtitle,
#radar-view .sched-subtitle {
  max-width: 640px;
  line-height: 1.55;
}

/* 3) Cards: consistent padding so no text touches an edge ---------------- */
#stats-view .goals-card,
.stats-page-body .pomo-chart-wrap,
.stats-page-body .pomo-per-doc-wrap,
#stats-view .pomo-panel {
  padding: 20px 22px !important;
  margin: 0 !important;
  border-radius: 16px !important;
}
.stats-page-body .pomo-chart-title {
  margin: 0 0 14px !important;
  display: block;
}
.stats-page-body .pomo-chart,
.stats-page-body .pomo-doc-row {
  border: 0 !important;
}
.stats-page-body .pomo-chart {
  padding: 14px 12px 10px !important;
}
#stats-view .pomo-stat-card {
  padding: 18px 16px !important;
  border-radius: 16px !important;
}

/* 4) Scheduler: side cards get inner padding, lists stay flat ------------ */
#scheduler-view .sched-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#scheduler-view .sched-side-card {
  padding: 18px 18px 16px !important;
  border-radius: 16px !important;
}
#scheduler-view .sched-side-head {
  margin-bottom: 12px;
}
#scheduler-view .sched-day-list,
#scheduler-view .sched-cal-grid {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#scheduler-view .sched-calendar-wrap {
  padding: 18px !important;
  border-radius: 16px !important;
}
#scheduler-view .sched-empty {
  padding: 14px 2px;
}

/* 5) Active Recall: hero and cards are the only framed surfaces ---------- */
#recall-view .recall-studio {
  padding-top: 0 !important;
}
#recall-view .recall-hero {
  padding: 26px 26px 24px !important;
  border-radius: 20px !important;
  margin-bottom: 20px !important;
}
#recall-view .recall-doc-grid {
  gap: 16px !important;
}
#recall-view .recall-doc-card {
  padding: 18px !important;
  border-radius: 16px !important;
}

@media (max-width: 720px) {
  #stats-view .sched-shell,
  #scheduler-view .sched-shell,
  #radar-view .sched-shell,
  #recall-view .sched-shell {
    padding: 4px 0 24px !important;
  }
  #stats-view .goals-card,
  .stats-page-body .pomo-chart-wrap,
  .stats-page-body .pomo-per-doc-wrap,
  #recall-view .recall-hero {
    padding: 16px !important;
  }
}

/* ===== Full Document Exam (setup / results) ===== */
.fdx-setup, .fdx-results { max-width: 820px; }
.fdx-stats {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0;
}
.fdx-stat {
  flex: 1; min-width: 120px; padding: 14px; border-radius: 10px;
  background: #f4f6f9; border: 1px solid #e2e6ec; text-align: center;
}
.fdx-stat span { display: block; font-size: 1.5rem; font-weight: 800; color: #111827; }
.fdx-stat small { color: #6b7280; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; }
.fdx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fdx-actions .usmle-proceed-btn { flex: 1; min-width: 200px; }

.fdx-history { margin-top: 26px; }
.fdx-history h3, .fdx-weak h3, .fdx-review h3 {
  font-size: 1rem; margin-bottom: 10px; color: #111827;
}
.fdx-history table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fdx-history th, .fdx-history td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5e7eb;
}
.fdx-history th { color: #6b7280; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.fdx-history tr.is-best td { background: #ecfdf5; font-weight: 700; }

.fdx-score { text-align: center; padding: 22px; border-radius: 12px; margin: 10px 0 6px; }
.fdx-score-num { font-size: 3rem; font-weight: 900; line-height: 1; }
.fdx-score-sub { margin-top: 6px; font-weight: 600; }
.fdx-band-great { background: #ecfdf5; color: #065f46; }
.fdx-band-pass  { background: #eff6ff; color: #1e40af; }
.fdx-band-warn  { background: #fffbeb; color: #92400e; }
.fdx-band-fail  { background: #fef2f2; color: #991b1b; }

.fdx-weak { margin-top: 20px; }
.fdx-weak ul { list-style: none; padding: 0; margin: 0; }
.fdx-weak li {
  display: flex; justify-content: space-between; padding: 8px 10px;
  border-bottom: 1px solid #eef0f3; font-size: 0.92rem;
}
.fdx-weak li span { color: #b91c1c; font-weight: 700; font-size: 0.82rem; }

.fdx-review { margin-top: 22px; }
.fdx-review-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.fdx-chip {
  width: 34px; height: 34px; border-radius: 7px; border: 1px solid #d1d5db;
  font-weight: 700; cursor: pointer; background: #fff; color: #374151;
}
.fdx-chip.ok   { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.fdx-chip.bad  { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.fdx-chip.skip { background: #f3f4f6; color: #6b7280; }
.fdx-chip:hover { outline: 2px solid #7c3aed; }

#exam-timer-display.fdx-timer-warn { color: #b45309; font-weight: 700; }
#exam-timer-display.fdx-timer-danger { color: #b91c1c; font-weight: 800; }

/* Full Document Exam — length picker + loading bar */
.fdx-length { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.fdx-length button {
  flex:1 1 130px; padding:10px 12px; border-radius:12px; cursor:pointer;
  border:1.5px solid #e2e8f0; background:#fff; text-align:left; transition:.15s;
}
.fdx-length button:hover { border-color:#94a3b8; }
.fdx-length button.is-active { border-color:#0f766e; background:#f0fdfa; }
.fdx-length button span { display:block; font-weight:700; font-size:.95rem; color:#0f172a; }
.fdx-length button small { display:block; color:#64748b; font-size:.75rem; margin-top:2px; }
.fdx-loading { display:flex; align-items:center; justify-content:center; min-height:180px; }
.fdx-bar { width:min(420px, 80%); height:8px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.fdx-bar-fill {
  height:100%; border-radius:999px; background:linear-gradient(90deg,#0f766e,#14b8a6);
  transition:width .4s ease; animation:fdx-pulse 1.4s ease-in-out infinite;
}
@keyframes fdx-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.fdx-plan-note {
  display:flex; align-items:center; gap:8px; margin:0 0 18px; padding:10px 12px;
  border-radius:12px; background:#f0fdfa; border:1px solid #99f6e4;
  color:#0f766e; font-size:.88rem; font-weight:600;
}
.fdx-plan-note i { width:16px; height:16px; flex:0 0 auto; }

.fdx-review-btn{background:#0f766e;color:#fff;border:none;border-radius:8px;padding:5px 10px;font-size:.78rem;font-weight:600;cursor:pointer;}
.fdx-review-btn:hover{filter:brightness(1.1);}