/* ============================================
   DFI Training Academy — Portal additions
   Layered on top of styles.css. Only contains
   components the original public site did not
   need (flash messages, admin tables, etc.).
   ============================================ */

/* -------- Flash messages -------- */
.flash {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.95rem;
  line-height: 1.5;
}
.flash--success {
  background-color: #f0f9f4;
  border-color:     #bfe3cd;
  color:            #165a34;
}
.flash--error {
  background-color: #fdf2f2;
  border-color:     #f5c6c6;
  color:            #7a1f1f;
}
.flash--warn {
  background-color: #fff8e6;
  border-color:     #f0d68c;
  color:            #7a5b00;
}
.flash--info {
  background-color: var(--color-gray-lightest);
  border-color:     var(--color-gray-lighter);
  color:            var(--color-text-secondary);
}

/* -------- Admin data tables -------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-gray-lighter);
  vertical-align: top;
}
.data-table th {
  background: var(--color-gray-lightest);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-table tr:hover td { background: #fafbfc; }
.data-table .actions { white-space: nowrap; }
.data-table .actions a { margin-right: var(--space-sm); }

/* -------- Status badges -------- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.badge--pending  { background:#fff8e6; color:#7a5b00; border-color:#f0d68c; }
.badge--active   { background:#f0f9f4; color:#165a34; border-color:#bfe3cd; }
.badge--disabled { background:#f5f6f7; color:#5a6270; border-color:#c5c9d0; }
.badge--expired  { background:#fdf2f2; color:#7a1f1f; border-color:#f5c6c6; }
.badge--revoked  { background:#fdf2f2; color:#7a1f1f; border-color:#f5c6c6; }
.badge--draft      { background:#f5f6f7; color:#5a6270; border-color:#c5c9d0; }
.badge--completed  { background:#eef2ff; color:#26337a; border-color:#c7d2fe; }
.badge--archived   { background:#f5f6f7; color:#5a6270; border-color:#c5c9d0; }
.badge--admin      { background:var(--color-text-primary); color:#fff; border-color:var(--color-text-primary); }
.badge--student    { background:var(--color-cream); color:var(--color-text-primary); border-color:var(--color-hairline); }
.badge--instructor { background:#f5efd8; color:#6b5f48; border-color:#e8dcb6; }
.badge--viewer     { background:var(--color-gray-lightest); color:var(--color-gray-dark); border-color:var(--color-gray-light); }

/* -------- Admin layout -------- */
.admin-subnav {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-md) 0 var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-gray-lighter);
}
.admin-subnav a {
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid transparent;
}
.admin-subnav a:hover  { color: var(--color-text-primary); }
.admin-subnav a.active { color: var(--color-text-primary); border-color: var(--color-red); }

/* -------- Small utilities used in layouts -------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.row-actions { display: flex; gap: var(--space-sm); }
.muted { color: var(--color-text-muted); }
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* Nav "Sign out" emphasis */
nav .nav-signout {
  opacity: 0.85;
}
nav .nav-admin {
  color: var(--color-red);
}

/* ========== Phase B additions ========== */

/* Danger button (used on Delete Document etc.) — keep red so destructive stands out */
.btn--danger {
  background: #a12626;
  color: #fff;
  border: 1px solid #a12626;
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn--danger:hover {
  background: #8b1f1f;
  border-color: #8b1f1f;
}

/* Checkbox row — a label wrapping a checkbox + text */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 6px);
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 4px;
}
.checkbox-row input[type="checkbox"] {
  margin: 0;
}

/* Document link in dashboard lists */
.doc-link {
  text-decoration: none;
  color: var(--color-text-primary);
}
.doc-link:hover {
  text-decoration: underline;
}

/* Filter bar "active" pill emphasis */
.filter-bar .btn.active {
  background: var(--color-text-primary);
  color: #fff;
  border-color: var(--color-text-primary);
}

/* ========== Phase B2 additions: tabs, notices, links ========== */

/* Tabbed dashboard */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-gray-lighter);
  margin: var(--space-lg) 0 var(--space-xl);
  flex-wrap: wrap;
}
.tabs .tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-sm) var(--space-lg);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.tabs .tab:hover {
  color: var(--color-text-primary);
}
.tabs .tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-red);
  font-weight: 700;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* Notice card — admin-written text block */
.notice-card {
  background: #fff8e6;
  border: 1px solid #f0d68c;
  border-left: 4px solid #e6b800;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.notice-card h4 {
  margin: 0 0 var(--space-xs);
  color: #7a5b00;
  font-size: 1.05rem;
}
.notice-card p {
  margin: 0 0 var(--space-sm);
  color: #4a3800;
  line-height: 1.55;
}
.notice-card p:last-child {
  margin-bottom: 0;
}
.notice-card a {
  color: #8b1f1f;
  text-decoration: underline;
}

/* External link card */
.link-card {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  text-decoration: none;
  color: var(--color-text-primary);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.link-card:hover {
  border-color: var(--color-text-primary);
  box-shadow: 0 2px 6px rgba(28, 28, 28, 0.06);
}
.link-card strong {
  display: block;
  color: var(--color-text-primary);
}
.link-card .link-url {
  display: block;
  font-size: 0.85em;
  color: var(--color-text-secondary);
  margin-top: 2px;
  word-break: break-all;
}
.link-card .link-icon {
  float: right;
  color: var(--color-text-secondary);
  font-size: 1.1em;
}

/* Section heading within a tab panel */
.panel-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-gray-lighter);
}
.panel-section-title:first-child {
  margin-top: 0;
}

/* ===================================================================
 * Phase D -- training video grid (inspector + student dashboards)
 * Videos are embedded from YouTube/Vimeo/SharePoint via an iframe
 * that is lazily swapped in on click. See dashboard.php for markup.
 * =================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.video-card {
  border: 1px solid var(--color-gray-lighter);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface, #fff);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.video-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.video-card.playing {
  cursor: default;
  transform: none;
}
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #444);
  color: rgba(255,255,255,0.8);
  font-size: 0.9em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.video-card:hover .video-play {
  background: var(--color-red);
  transform: translate(-50%, -50%) scale(1.05);
}
.video-card.playing .video-play {
  display: none;
}
.video-meta {
  padding: var(--space-sm) var(--space-md);
}
.video-meta strong {
  display: block;
  margin-bottom: 2px;
}
@media (max-width: 540px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-play { width: 48px; height: 48px; font-size: 18px; }
}

/* ===================================================================
 * Phase H -- Printable Report Cards
 * Used by admin/report-student.php and admin/report-cohort.php.
 * Designed to look polished on screen AND print clean to PDF when the
 * admin hits browser Print.
 * =================================================================== */

.report-card { max-width: 1100px; }

.rc-toolbar {
  display: flex; gap: var(--space-md); justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.rc-letterhead {
  display: flex; gap: var(--space-md); align-items: center;
  border-bottom: 2px solid var(--color-text-primary);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-lg);
}
.rc-letterhead-logo img { height: 36px; width: auto; display: block; }
.rc-letterhead-meta h1 {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.1;
}
.rc-letterhead-sub  { margin: 2px 0 0; font-size: 0.88rem; color: var(--color-text-secondary); }
.rc-letterhead-date { margin: 2px 0 0; font-size: 0.8rem; }

.rc-id-block {
  background: var(--color-gray-lightest);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.rc-id-block dl {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) var(--space-lg);
}
.rc-id-block dl > div { display: flex; flex-direction: column; }
.rc-id-block dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-secondary); margin: 0;
}
.rc-id-block dd { margin: 2px 0 0; font-weight: 500; }

.rc-phase { margin: var(--space-xl) 0; }
.rc-phase--break { page-break-before: always; }

.rc-phase-header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-gray-lighter);
  padding-bottom: var(--space-xs); margin-bottom: var(--space-md);
}
.rc-phase-header h2 {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem; font-weight: 600;
}
.rc-phase-dates { margin: 0; font-size: 0.9rem; }
.rc-phase-verdict { margin-left: auto; }

.rc-section-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-secondary);
  margin: var(--space-md) 0 var(--space-xs);
}

.rc-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.92rem; margin-bottom: var(--space-md);
}
.rc-table th, .rc-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--color-gray-lighter);
  text-align: left; vertical-align: top;
}
.rc-table th {
  background: var(--color-gray-lightest);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.rc-table tr:last-child td { border-bottom: none; }
.rc-table .rc-num { text-align: right; font-variant-numeric: tabular-nums; }
.rc-table .rc-highest { font-weight: 700; }
.rc-no-pass { font-size: 0.78rem; font-style: italic; }

.rc-attendance-table { background: #fbfaf6; }

.rc-attendance-flags {
  list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-md);
}
.rc-attendance-flags li { margin-bottom: 4px; }

.rc-phase-req { font-size: 0.88rem; margin: var(--space-sm) 0; }
.rc-phase-summary {
  margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md);
  background: #fbfaf6; border-left: 3px solid var(--color-text-primary);
  border-radius: 2px; font-size: 0.95rem;
}

/* Cohort roster table tweaks */
.rc-roster-table th, .rc-roster-table td {
  padding: 6px 8px; font-size: 0.88rem;
}
.rc-student-link {
  color: var(--color-text-primary); text-decoration: none; font-weight: 600;
}
.rc-student-link:hover { text-decoration: underline; }
.rc-student-id { font-size: 0.78rem; }
.rc-dropped td { opacity: 0.55; background: #f6f4ee; }
.rc-unenrolled td { opacity: 0.7; background: #f7f7f7; font-style: italic; }

.rc-cell--pass    { color: #165a34; font-weight: 600; }
.rc-cell--fail    { color: #7a1f1f; font-weight: 600; }
.rc-cell--partial { color: #7a5b00; font-weight: 600; }
.rc-cell--info    { color: var(--color-text-secondary); }

/* Verdict pills */
.rc-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; border: 1px solid transparent; white-space: nowrap;
}
.rc-badge--pass    { background: #f0f9f4; color: #165a34; border-color: #bfe3cd; }
.rc-badge--fail    { background: #fdf2f2; color: #7a1f1f; border-color: #f5c6c6; }
.rc-badge--partial { background: #fff8e6; color: #7a5b00; border-color: #f0d68c; }
.rc-badge--pending { background: #f5f6f7; color: #5a6270; border-color: #c5c9d0; }
.rc-badge--info    { background: #eef2ff; color: #26337a; border-color: #c7d2fe; }

/* Summary strip on the cohort report */
.rc-summary-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm); margin-bottom: var(--space-lg);
}
.rc-summary-strip > div {
  background: var(--color-gray-lightest);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}
.rc-summary-num {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem; font-weight: 700; line-height: 1;
}
.rc-summary-lbl {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-secondary); margin-top: 2px;
}

/* Overall result block (per-student report) */
.rc-overall {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-md);
  border: 2px solid var(--color-text-primary);
  border-radius: var(--radius-md);
  text-align: center;
  background: #fbfaf6;
  page-break-inside: avoid;
}
.rc-overall h2 {
  margin: 0 0 var(--space-sm);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 600;
}
.rc-overall-badge .rc-badge { font-size: 0.95rem; padding: 6px 18px; }
.rc-overall-text { margin: var(--space-sm) 0 0; font-size: 1rem; }

.rc-footer {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-lighter);
}

/* ============== PRINT RULES ==============
 * Print clean to PDF: hide chrome, force black text on white,
 * use sensible margins, keep tables together, force page breaks
 * between phases. */
@media print {
  @page { size: letter; margin: 0.45in 0.5in 0.5in 0.5in; }
  html, body { background: #fff !important; color: #000 !important; }
  /* Hide everything that is a direct child of <body> except the <main>
     that holds the report card. This catches site header, site footer,
     admin subnav wrappers, flash containers, scripts -- anything we
     didn't anticipate. */
  body > *:not(main) { display: none !important; }
  /* And inside main, kill anything explicitly marked no-print. */
  main .no-print, main .admin-subnav, main .flash { display: none !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .report-card { max-width: none !important; }
  .rc-letterhead {
    display: flex !important; gap: 12px !important; align-items: center !important;
    border-bottom: 1.5px solid #000 !important; padding-bottom: 6px !important;
    margin-bottom: 14px !important;
  }
  .rc-letterhead-meta { display: block !important; }
  .rc-letterhead-logo img { height: 32px !important; }
  .rc-letterhead-meta h1 { font-size: 1.25rem !important; }
  .rc-letterhead-sub { font-size: 0.85rem !important; }
  .rc-letterhead-date { font-size: 0.78rem !important; }
  /* Tables: avoid cutting a row in half across pages. */
  .rc-table tr, .rc-overall { page-break-inside: avoid; }
  .rc-table thead { display: table-header-group; } /* repeat header on each page */
  .rc-phase--break { page-break-before: always; }
  /* Bigger contrast for badges in print so they don't print as light pastels. */
  .rc-badge { border-width: 1px !important; }
  .rc-badge--pass    { background: #fff !important; color: #0a4a26 !important; border-color: #0a4a26 !important; }
  .rc-badge--fail    { background: #fff !important; color: #6a1414 !important; border-color: #6a1414 !important; }
  .rc-badge--partial { background: #fff !important; color: #6a4a00 !important; border-color: #6a4a00 !important; }
  .rc-badge--pending { background: #fff !important; color: #444 !important;    border-color: #444 !important; }
  .rc-cell--pass    { color: #0a4a26 !important; }
  .rc-cell--fail    { color: #6a1414 !important; }
  .rc-cell--partial { color: #6a4a00 !important; }
  /* Links print in black so they don't underline scream. */
  a, a:visited { color: #000 !important; text-decoration: none !important; }
}