/* ==========================================================================
   Reports & Export Center

   Screen styles for the export cards/filters, plus a print block that is
   scoped to body.printing-export. The scoping matters: this page's own
   "Print / Save PDF" button still prints the analytics dashboard normally,
   and only an export-triggered print swaps the page for the data table.
   ========================================================================== */

.export-center { margin-bottom: var(--sp-6); }

/* --- Filters ------------------------------------------------------------ */
.export-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle, #e5e8ee);
}

.export-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.export-filter label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary, #7b8496);
}

.export-filter-hint { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.75; }

.export-filter select,
.export-filter input {
  width: 100%;
  min-width: 0; /* lets a long option name shrink instead of stretching the grid */
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-default, #d7dce5);
  border-radius: 8px;
  background: var(--surface-1, #fff);
  color: var(--text-primary, #1a2233);
  font-size: 13px;
  font-family: inherit;
}

.export-filter select:focus,
.export-filter input:focus { outline: 2px solid var(--accent-500, #2c5f9e); outline-offset: -1px; }

.export-filter-actions { justify-content: flex-end; }

/* --- Dataset cards ------------------------------------------------------ */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--sp-4);
}

.export-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-subtle, #e5e8ee);
  border-radius: 12px;
  background: var(--surface-1, #fff);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.export-card:hover {
  border-color: var(--accent-400, #4a7fc1);
  box-shadow: 0 2px 10px rgba(16, 32, 64, 0.06);
}

.export-card-head { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }

.export-card-icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-50, #eef4fb);
  color: var(--accent-600, #24507f);
  font-size: 15px;
}

/* min-width:0 on the text column is what actually allows a long dataset name
   to wrap instead of pushing the card wider than its grid track. */
.export-card-text { min-width: 0; }

.export-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #1a2233);
  overflow-wrap: anywhere;
}

.export-card-desc {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-tertiary, #7b8496);
  overflow-wrap: anywhere;
}

.export-card-note {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--warn-50, #fff8e6);
  color: var(--warn-700, #8a6100);
  font-size: 11.5px;
  line-height: 1.4;
}

.export-card-actions {
  display: flex;
  flex-wrap: wrap;      /* three buttons must never overflow a narrow card */
  gap: var(--sp-2);
  margin-top: auto;     /* keeps actions aligned across cards of differing height */
  padding-top: var(--sp-2);
}

.export-card-actions .btn { flex: 1 1 auto; white-space: nowrap; justify-content: center; }

@media (max-width: 640px) {
  .export-grid { grid-template-columns: 1fr; }
  .export-card-actions .btn { flex: 1 1 100%; }
}

/* --- Training Register summary tiles ------------------------------------ */
.register-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.reg-sum-tile {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle, #e5e8ee);
  border-left: 3px solid var(--accent-500, #2c5f9e);
  border-radius: 10px;
  background: var(--surface-1, #fff);
  min-width: 0;
}

.reg-sum-wide { grid-column: span 2; }

.reg-sum-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary, #7b8496);
}

.reg-sum-value {
  font-family: var(--font-display, inherit);
  font-size: 20px; font-weight: 800; line-height: 1.2;
  color: var(--text-primary, #1a2233);
  margin-top: 3px;
  overflow-wrap: anywhere;   /* the date-range tile holds a long string */
}

.reg-sum-hint { font-size: 11px; color: var(--text-tertiary, #7b8496); margin-top: 2px; }

@media (max-width: 720px) {
  .reg-sum-wide { grid-column: span 1; }
  .reg-sum-value { font-size: 17px; }
}

/* --- Print output ------------------------------------------------------- */
.doc-print-root { display: none; }

.export-print-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #1e3a5f; }
.export-print-org { font-size: 15px; font-weight: 800; color: #1e3a5f; }
.export-print-title { font-size: 19px; font-weight: 700; margin-top: 2px; }
.export-print-meta { font-size: 10px; color: #6b7280; margin-top: 4px; }

.export-print-table { width: 100%; border-collapse: collapse; font-size: 9.5px; table-layout: fixed; }
.export-print-table th,
.export-print-table td {
  border: 1px solid #d5dae2;
  padding: 4px 5px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;  /* a long note or URL wraps rather than escaping the cell */
  word-break: break-word;
}
.export-print-table th { background: #1e3a5f; color: #fff; font-weight: 700; }
.export-print-table tr { break-inside: avoid; }
.export-print-table thead { display: table-header-group; } /* repeat header on every page */

@media print {
  body.printing-export > .app-shell,
  body.printing-export .modal-overlay,
  body.printing-export .cmdk-overlay,
  body.printing-export .sidebar-overlay { display: none !important; }

  body.printing-export .doc-print-root { display: block !important; }
  body.printing-export .export-print-page { padding: 12mm 10mm; }

  body.printing-export { background: #fff; }
}

@page { size: A4; margin: 0; }

/* --- Training Register calculated hour boxes ----------------------------
   The client's Excel logbook carried these six totals at the top of the
   register. They are visually distinct from the reach tiles below them
   because they are hour calculations, not row counts. */
.register-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.reg-kpi {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle, #e5e8ee);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-1, #fff) 0%, #f7f9fc 100%);
  min-width: 0;
}

.reg-kpi-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary, #7b8496);
  display: flex; align-items: center; gap: 6px;
}

.reg-kpi-value {
  font-family: var(--font-display, inherit);
  font-size: 23px; font-weight: 800; line-height: 1.15;
  color: var(--accent-700, #1e3a5f);
  margin-top: 4px;
}

.reg-kpi-unit { font-size: 13px; font-weight: 700; color: var(--text-tertiary, #7b8496); margin-left: 2px; }
.reg-kpi-hint { font-size: 11px; color: var(--text-tertiary, #7b8496); margin-top: 3px; }
.reg-kpi.is-loading .reg-kpi-value { color: var(--text-tertiary, #7b8496); }

@media (max-width: 720px) {
  .reg-kpi-value { font-size: 19px; }
}

@media print {
  .register-kpis { grid-template-columns: repeat(3, 1fr); }
  .reg-kpi { background: #fff; }
}

/* --- Period Summary / Weekly Training Log filter bar --------------------- */
.filter-inline-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary, #7b8496);
}

.filter-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.period-preset.is-active {
  background: var(--accent-50, #eef4fc);
  color: var(--accent-700, #1e3a5f);
  box-shadow: inset 0 0 0 1px var(--accent-500, #2c5f9e);
}

#logTable tfoot td {
  font-weight: 800;
  background: var(--surface-2, #f5f7fb);
  border-top: 2px solid var(--accent-500, #2c5f9e);
}

@media (max-width: 860px) {
  .filter-bar-actions { margin-left: 0; width: 100%; }
}

/* --- Session Documents & Printing --------------------------------------- */
.print-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--sp-4);
  align-items: start;
}

.spc-doc {
  border: 1px solid var(--border-subtle, #e5e8ee);
  border-left: 4px solid var(--accent-500, #2c5f9e);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--surface-1, #fff);
}
.spc-doc.is-blocked { border-left-color: var(--amber-500, #d97706); }
.spc-doc.is-none { border-left-color: var(--border-default, #cfd6e4); opacity: 0.72; }

.spc-doc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.spc-doc-name { font-weight: 800; font-size: 14px; }
.spc-doc-meta { font-size: 11.5px; color: var(--text-tertiary, #7b8496); margin-top: 2px; }
.spc-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.spc-doc-note { font-size: 11.5px; color: var(--amber-700, #b45309); margin-top: 6px; }

.spc-pack { max-height: 560px; overflow: auto; }
.spc-pack-item { padding: 9px 0; border-bottom: 1px solid var(--border-subtle, #e5e8ee); }
.spc-pack-item:last-child { border-bottom: 0; }
.spc-pack-name { font-weight: 700; font-size: 13px; }
.spc-pack-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.spc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--surface-2, #f1f4f9); color: var(--text-secondary, #4b5568);
}
.spc-tag.is-done { background: #e7f6ee; color: #047857; }
.spc-tag.is-pending { background: #fdf3e3; color: #b45309; }

@media (max-width: 980px) {
  .print-center-grid { grid-template-columns: 1fr; }
}

/* Secondary line inside a table cell — the Iqama under a worker's name, the
   register id under a status, and similar. */
.cell-sub { font-size: 11.5px; color: var(--text-tertiary, #7b8496); margin-top: 2px; }

.an-preset.is-active {
  background: var(--accent-50, #eef4fc);
  color: var(--accent-700, #1e3a5f);
  box-shadow: inset 0 0 0 1px var(--accent-500, #2c5f9e);
}