/* Printable IT Health Check questionnaire — ToughBlue branded */

@page {
  size: A4;
  margin: 12mm 12mm 18mm;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.print-doc {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9.5pt;
  color: var(--tb-text);
  line-height: 1.45;
  background: #dde4ee;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-page-wrap {
  max-width: 210mm;
  margin: 0 auto;
  background: white;
}

/* ── Screen toolbar ── */
.screen-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tb-primary-dark);
  color: white;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.screen-bar-inner {
  max-width: 210mm;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  font-size: 0.88rem;
}
.screen-logo { height: 28px; width: auto; }
.screen-bar-text span { display: block; opacity: 0.85; font-size: 0.78rem; margin-top: 0.15rem; }
.screen-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.btn-print {
  background: var(--tb-accent);
  color: var(--tb-primary-dark);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-back { color: white; text-decoration: none; padding: 0.5rem 0.75rem; font-size: 0.85rem; }

/* ── Branded hero (matches company flyer) ── */
.tb-print-hero {
  position: relative;
  min-height: 52mm;
  overflow: hidden;
  color: white;
  margin-bottom: 0;
}
.tb-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../brand/uganda/clock-tower-flyover.jpg') center 42% / cover no-repeat;
}
.tb-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--tb-primary-dark) 0%,
    rgba(13,50,102,0.96) 32%,
    rgba(20,71,143,0.78) 58%,
    rgba(20,71,143,0.35) 100%);
}
.tb-hero-ring { position: absolute; border-radius: 50%; z-index: 1; }
.tb-hero-ring.r1 { width: 38mm; height: 38mm; top: -12mm; right: 28mm; border: 1.1mm solid rgba(245,166,35,0.55); }
.tb-hero-ring.r2 { width: 22mm; height: 22mm; bottom: 8mm; right: 48mm; border: 0.8mm solid rgba(107,183,232,0.55); }
.tb-hero-ring.r3 { width: 9mm; height: 9mm; top: 8mm; right: 18mm; background: rgba(90,200,250,0.30); }

.tb-hero-content {
  position: relative;
  z-index: 2;
  padding: 7mm 10mm 12mm;
  max-width: 145mm;
}
.tb-logo-lockup {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-bottom: 3mm;
}
.tb-logo-roundel {
  width: 13mm;
  height: 13mm;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.tb-logo-roundel img { height: 11mm; width: auto; }
.tb-name { font-size: 16pt; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.tb-name .tough { color: white; }
.tb-name .blue { color: var(--tb-secondary); }
.tb-tagline {
  font-size: 6.5pt;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-top: 1mm;
}
.tb-tagline .tag-sep { color: var(--tb-accent); margin: 0 0.35em; }

.tb-doc-badge {
  display: inline-block;
  background: var(--tb-accent);
  color: var(--tb-primary-dark);
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1mm 2.5mm;
  border-radius: 999px;
  margin-bottom: 2mm;
}
.tb-doc-title {
  font-size: 15pt;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.5mm;
}
.tb-doc-sub { font-size: 8pt; opacity: 0.88; margin-bottom: 2mm; }
.tb-doc-intro {
  font-size: 8.5pt;
  line-height: 1.4;
  background: rgba(255,255,255,0.12);
  border-left: 2px solid var(--tb-accent);
  padding: 2mm 3mm;
  border-radius: 0 4px 4px 0;
  max-width: 130mm;
}

.tb-hero-motto {
  position: absolute;
  z-index: 3;
  right: 8mm;
  bottom: 10mm;
  font-size: 11pt;
  font-weight: 800;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(20,71,143,0.2);
  border-radius: 999px;
  padding: 1.5mm 4mm;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.tb-hero-motto .think { color: var(--tb-accent); }
.tb-hero-motto .act { color: var(--tb-accent-act); }
.tb-hero-motto .solve { color: var(--tb-primary); }
.tb-hero-motto .sep { color: var(--tb-muted); opacity: 0.6; font-weight: 300; margin: 0 0.2em; }

.tb-hero-linien {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

/* ── Branded footer ── */
.tb-print-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 3mm 10mm;
  border-top: 1px solid var(--tb-border);
  background: var(--tb-surface);
  font-size: 7.5pt;
  font-weight: 600;
  color: var(--tb-text);
  margin-top: 1rem;
}
.tb-footer-left { display: flex; align-items: center; gap: 2mm; }
.tb-footer-mark { height: 5mm; width: auto; }
.tb-footer-left .pipe,
.tb-print-footer .pipe { color: var(--tb-muted); opacity: 0.6; margin: 0 0.3em; font-weight: 300; }
.tb-footer-motto .think { color: var(--tb-accent); }
.tb-footer-motto .act { color: var(--tb-accent-act); }
.tb-footer-motto .solve { color: var(--tb-primary); }
.tb-footer-right { color: var(--tb-muted); font-weight: 500; }

.subsidiary-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.65rem 0.85rem;
  background: var(--tb-surface);
  border-radius: 8px;
  border: 1px solid var(--tb-border);
  font-size: 8.5pt;
  color: var(--tb-muted);
}
.subsidiary-note img { height: 22px; width: auto; }

/* ── Document sections ── */
.print-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tb-border);
}
.print-section h2 {
  font-size: 12pt;
  color: var(--tb-primary);
  border-bottom: 2px solid var(--tb-primary);
  padding-bottom: 4px;
  margin-bottom: 0.75rem;
}
.core-banner { background: #eff6ff; padding: 0.5rem 0.75rem; border-bottom: none; border-radius: 6px; border-left: 4px solid var(--tb-primary); }
.optional-banner { background: var(--tb-surface); padding: 0.5rem 0.75rem; border-bottom: none; border-radius: 6px; border-left: 4px solid var(--tb-secondary); }
.section-note { font-size: 8.5pt; color: var(--tb-muted); margin-bottom: 0.75rem; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
}
.field-wide { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tb-muted);
  margin-bottom: 2px;
}
.field-line { border-bottom: 1px solid #333; min-height: 20px; }
.field-line.tall { min-height: 36px; margin-bottom: 4px; }

.triage-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.triage-table th,
.triage-table td { border: 1px solid #ccc; padding: 5px 7px; vertical-align: top; text-align: left; }
.triage-table th { background: var(--tb-surface); font-weight: 700; color: var(--tb-primary); }
.check-cell { width: 28px; text-align: center; }

.question-block {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tb-border);
}
.question-block h3 { font-size: 10.5pt; color: var(--tb-primary-dark); margin-bottom: 0.2rem; }
.section-sub { font-size: 8.5pt; color: var(--tb-muted); margin-bottom: 0.65rem; }

.optional-block {
  border: 1px dashed var(--tb-secondary);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: #fafcff;
}
.optional-tag {
  font-size: 7pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tb-primary);
  margin-bottom: 0.35rem;
}
.triage-reminder {
  font-size: 8pt;
  color: var(--tb-muted);
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.5rem;
  background: white;
  border-radius: 4px;
}

.q-row { margin-bottom: 0.85rem; page-break-inside: avoid; }
.q-head { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
.q-num {
  flex-shrink: 0;
  font-size: 7.5pt;
  font-weight: 800;
  color: white;
  background: var(--tb-primary);
  border-radius: 3px;
  padding: 1px 5px;
  height: fit-content;
}
.q-text { font-weight: 600; font-size: 9.5pt; }
.q-detail { font-size: 8.5pt; color: var(--tb-text); margin: 0.2rem 0 0.2rem 1.75rem; }
.q-look-for {
  font-size: 8pt;
  color: var(--tb-muted);
  margin: 0.2rem 0 0.35rem 1.75rem;
  padding: 0.3rem 0.45rem;
  background: var(--tb-surface);
  border-left: 2px solid var(--tb-secondary);
  border-radius: 0 4px 4px 0;
}
.q-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  font-size: 8.5pt;
  margin: 0.35rem 0 0.35rem 1.75rem;
}
.box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--tb-primary);
  margin-right: 3px;
  vertical-align: middle;
}
.q-notes {
  margin: 0.25rem 0 0 1.75rem;
  font-size: 8pt;
  color: var(--tb-muted);
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}
.notes-label { font-weight: 600; white-space: nowrap; }
.notes-line { flex: 1; border-bottom: 1px dashed #aaa; min-height: 14px; }

.summary-fields .field { margin-bottom: 0.85rem; }

.page-break { page-break-before: always; }
.page-break-avoid { page-break-inside: avoid; }

@media print {
  body.print-doc .tb-print-footer {
    position: static;
  }
  .print-section:last-of-type { padding-bottom: 0; }
}

@media screen {
  .print-page-wrap {
    margin: 1rem auto 2rem;
    box-shadow: 0 8px 32px rgba(20, 71, 143, 0.12);
  }
}

@media screen and (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .screen-actions { margin-left: 0; width: 100%; }
  .tb-hero-motto { display: none; }
}