/* Print-specific styles for exam session documents */

/* CSS Custom Properties for common values */
:root {
  --print-primary: #3b82f6;
  --print-primary-dark: #1d4ed8;
  --print-primary-light: #dbeafe;
  --print-success: #10b981;
  --print-success-dark: #059669;
  --print-success-light: #d1fae5;
  --print-error: #ef4444;
  --print-error-dark: #dc2626;
  --print-error-light: #fee2e2;
  --print-purple: #8b5cf6;
  --print-purple-dark: #7c3aed;
  --print-gray-50: #f8fafc;
  --print-gray-100: #f1f5f9;
  --print-gray-200: #e2e8f0;
  --print-gray-300: #cbd5e1;
  --print-gray-400: #94a3b8;
  --print-gray-500: #64748b;
  --print-gray-600: #475569;
  --print-gray-700: #334155;
  --print-gray-800: #1e293b;
  --print-gray-900: #0f172a;
  --print-border-radius: 6pt;
  --print-shadow: 0 2pt 4pt rgba(0, 0, 0, 0.1);
  --print-shadow-sm: 0 1pt 2pt rgba(0, 0, 0, 0.05);
}

/* Force color printing */
* {
  -webkit-print-color-adjust: exact !important;
  color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Base layout */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.print-preview {
  background: white;
  padding: 0.75in;
  min-height: 11in;
}

/* Header section */
.print-header {
  background: linear-gradient(135deg, var(--print-gray-50) 0%, var(--print-gray-100) 100%) !important;
  border: 1px solid var(--print-gray-300) !important;
  border-radius: 8pt !important;
  margin-bottom: 16pt;
  padding: 16pt !important;
  page-break-inside: avoid !important;
}

.print-title-section {
  text-align: center;
  margin-bottom: 12pt !important;
}

.print-title-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 8pt !important;
}

.title-icon {
  width: 18pt !important;
  height: 18pt !important;
  color: var(--print-primary) !important;
  margin-right: 6pt !important;
  background: linear-gradient(135deg, var(--print-primary-light), #bfdbfe) !important;
  padding: 3pt !important;
  border-radius: 8pt !important;
  border: 1px solid #93c5fd !important;
}

.print-title {
  font-size: 18pt !important;
  font-weight: 800 !important;
  color: #1e40af !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 6pt 0 !important;
}

.print-subtitle-wrapper {
  margin-top: 6pt !important;
}

.print-subtitle {
  font-size: 14pt !important;
  font-weight: 600 !important;
  text-align: center;
  color: #374151 !important;
  margin-bottom: 6pt !important;
}

.exam-meta {
  display: flex !important;
  justify-content: center;
}

.exam-badge {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(135deg, var(--print-primary), var(--print-primary-dark)) !important;
  color: white !important;
  padding: 3pt 6pt !important;
  border-radius: 12pt !important;
  font-size: 8pt !important;
  font-weight: 600 !important;
}

.badge-icon {
  width: 6pt !important;
  height: 6pt !important;
  margin-right: 3pt !important;
}

/* Grid layouts */
.print-info-grid, .instructions-grid {
  display: grid !important;
  gap: 6pt !important;
}

.print-info-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: 12pt !important;
}

.instructions-grid {
  grid-template-columns: 1fr 1fr !important;
  margin-bottom: 6pt !important;
}

.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8pt !important;
}

.print-supervisor-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8pt !important;
}

/* Card components */
.info-card, .instruction-item {
  background: white !important;
  border: 1px solid var(--print-gray-300) !important;
  border-radius: var(--print-border-radius) !important;
  padding: 6pt !important;
  display: flex !important;
  align-items: flex-start;
}

.instruction-item {
  border-color: var(--print-gray-200) !important;
  border-radius: 4pt !important;
}

/* Icon components */
.info-icon, .field-icon {
  background: var(--print-gray-50) !important;
  color: var(--print-gray-500) !important;
  width: 12pt !important;
  height: 12pt !important;
  border-radius: 4pt !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 4pt !important;
  flex-shrink: 0;
  border: 1px solid var(--print-gray-200) !important;
}

.field-icon {
  border-radius: 3pt !important;
  margin-right: 6pt !important;
  border-color: #d1d5db !important;
}

.info-icon svg, .field-icon svg {
  width: 6pt !important;
  height: 6pt !important;
}

/* Content areas */
.info-content, .field-content, .instruction-text, .summary-content {
  flex: 1;
}

/* Labels and values */
.info-label, .summary-label {
  font-size: 6pt !important;
  font-weight: 600 !important;
  color: var(--print-gray-500) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1pt !important;
}

.info-value {
  font-size: 7pt !important;
  font-weight: 500 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
}

.field-label {
  font-size: 7pt !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 4pt !important;
  display: block !important;
}

/* Section containers */
.print-instructions, .print-summary, .print-supervisor {
  background: linear-gradient(135deg, var(--print-gray-50) 0%, var(--print-gray-100) 100%) !important;
  border: 1px solid var(--print-gray-300) !important;
  border-radius: 8pt !important;
  padding: 16pt !important;
  margin: 16pt 0 !important;
  page-break-inside: avoid !important;
}

.print-instructions {
  border-radius: var(--print-border-radius) !important;
  padding: 8pt !important;
  margin: 8pt 0 !important;
  border-left: 4pt solid var(--print-primary) !important;
}

/* Section headers */
.print-instructions-header, .summary-header, .supervisor-header {
  display: flex !important;
  align-items: center;
  margin-bottom: 12pt !important;
  padding-bottom: 8pt !important;
  border-bottom: 1px solid var(--print-gray-200) !important;
}

.print-instructions-header {
  margin-bottom: 6pt !important;
  padding-bottom: 4pt !important;
}

/* Section icons */
.print-instructions-icon {
  background: var(--print-primary) !important;
  color: white !important;
  width: 12pt !important;
  height: 12pt !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 4pt !important;
  flex-shrink: 0;
}

.summary-icon, .supervisor-icon {
  color: white !important;
  width: 16pt !important;
  height: 16pt !important;
  border-radius: 6pt !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 6pt !important;
  flex-shrink: 0;
}

.summary-icon {
  background: linear-gradient(135deg, var(--print-success), var(--print-success-dark)) !important;
}

.supervisor-icon {
  background: linear-gradient(135deg, var(--print-purple), var(--print-purple-dark)) !important;
}

.instruction-icon, .summary-icon svg, .supervisor-icon svg {
  width: 6pt !important;
  height: 6pt !important;
}

.summary-icon svg, .supervisor-icon svg {
  width: 8pt !important;
  height: 8pt !important;
}

/* Section titles */
.print-instructions-title, .summary-title, .supervisor-title {
  font-weight: 700 !important;
  color: var(--print-gray-800) !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.print-instructions-title {
  font-size: 9pt !important;
}

.summary-title, .supervisor-title {
  font-size: 10pt !important;
}

/* Instructions content */
.print-instructions-content {
  margin-top: 6pt !important;
}

.instruction-number {
  background: linear-gradient(135deg, var(--print-primary), var(--print-primary-dark)) !important;
  color: white !important;
  width: 10pt !important;
  height: 10pt !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  font-size: 6pt !important;
  margin-right: 4pt !important;
  flex-shrink: 0;
}

.instruction-text p {
  color: var(--print-gray-600) !important;
  font-size: 7pt !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Table styles */
.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12pt;
  font-size: 8pt;
  page-break-inside: auto;
}

.print-table th {
  background-color: #f5f5f5 !important;
  border: 1px solid #000 !important;
  padding: 3pt 4pt !important;
  font-weight: 700 !important;
  text-align: left;
  font-size: 7pt !important;
  vertical-align: middle !important;
}

.print-table td {
  border: 1px solid #000 !important;
  padding: 3pt 4pt !important;
  vertical-align: top;
  font-size: 7pt !important;
  line-height: 1.2 !important;
}

.print-table tbody tr {
  page-break-inside: avoid !important;
}

.print-table tr:nth-child(even) {
  background-color: #fafafa !important;
}

/* Status badges */
.print-status-registered, .print-status-completed, .print-status-cancelled, .print-status-default {
  padding: 1pt 3pt !important;
  border-radius: 2pt !important;
  font-size: 6pt !important;
  font-weight: 700 !important;
  display: inline-block !important;
  border: 1px solid;
}

.print-status-registered {
  background-color: var(--print-primary-light) !important;
  color: #1e40af !important;
  border-color: var(--print-primary) !important;
}

.print-status-completed {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  border-color: #22c55e !important;
}

.print-status-cancelled {
  background-color: var(--print-error-light) !important;
  color: #991b1b !important;
  border-color: var(--print-error) !important;
}

.print-status-default {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #6b7280 !important;
}

/* Form elements */
.signature-cell {
  width: 60pt;
  height: 16pt;
  border: none !important;
  border-bottom: 1px solid #000 !important;
}

.print-checkbox {
  width: 8pt !important;
  height: 8pt !important;
  border: 1px solid var(--print-gray-400) !important;
  border-radius: 2pt !important;
  display: block !important;
  background: white !important;
  margin: 0 auto !important;
}

.signature-line {
  border-bottom: 1px solid #000 !important;
  height: 12pt !important;
}

/* Summary boxes */
.print-summary-box {
  background: white !important;
  border: 1px solid #000 !important;
  border-radius: 3pt !important;
  padding: 8pt !important;
  display: flex !important;
  align-items: center;
}

.print-summary-box.total-registered {
  border-color: var(--print-primary) !important;
  background: linear-gradient(135deg, var(--print-primary-light) 0%, #bfdbfe 100%) !important;
}

.print-summary-box.present {
  border-color: var(--print-success) !important;
  background: linear-gradient(135deg, var(--print-success-light) 0%, #a7f3d0 100%) !important;
}

.print-summary-box.absent {
  border-color: var(--print-error) !important;
  background: linear-gradient(135deg, var(--print-error-light) 0%, #fecaca 100%) !important;
}

.summary-box-icon {
  width: 12pt !important;
  height: 12pt !important;
  border-radius: 3pt !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 6pt !important;
  flex-shrink: 0;
  color: white !important;
}

.total-registered .summary-box-icon {
  background: linear-gradient(135deg, var(--print-primary), var(--print-primary-dark)) !important;
}

.present .summary-box-icon {
  background: linear-gradient(135deg, var(--print-success), var(--print-success-dark)) !important;
}

.absent .summary-box-icon {
  background: linear-gradient(135deg, var(--print-error), var(--print-error-dark)) !important;
}

.summary-box-icon svg {
  width: 6pt !important;
  height: 6pt !important;
}

.summary-value {
  font-size: 12pt !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1;
}

.summary-value.fill-in {
  font-size: 10pt !important;
  color: var(--print-gray-500) !important;
  font-weight: 600 !important;
}

/* Supervisor fields */
.supervisor-field {
  background: white !important;
  border: 1px solid #000 !important;
  border-radius: 3pt !important;
  padding: 8pt !important;
  display: flex !important;
  align-items: flex-start;
}

/* Footer and watermark */
.print-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 6pt;
  border-top: 1px solid var(--print-gray-300) !important;
  padding-top: 3pt;
  background: white;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 6pt 12pt !important;
}

.page-numbering {
  font-size: 6pt !important;
  color: var(--print-gray-500) !important;
  font-weight: 500 !important;
}

.page-number::after {
  content: "Page " counter(page) " of " counter(pages);
}

.confidential-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 36pt;
  color: rgba(200, 200, 200, 0.2);
  z-index: -1;
  font-weight: bold;
}

/* Logo */
.print-logo {
  margin-top: 1rem;
  text-align: center;
  display: block;
  width: 100%;
}

.print-logo-image {
  height: 18px !important;
  width: auto !important;
  opacity: 0.6 !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Utility classes */
.print-block {
  display: block !important;
}

.print-table-cell {
  display: table-cell !important;
}

.print-center {
  text-align: center !important;
}

.print-hidden, .no-print {
  display: none !important;
}

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

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

/* Typography utilities */
.print-xs {
  font-size: 6pt !important;
}

.print-sm {
  font-size: 7pt !important;
}

.print-base {
  font-size: 8pt !important;
}

.print-lg {
  font-size: 9pt !important;
}

.print-bold {
  font-weight: 700 !important;
}

.print-semibold {
  font-weight: 600 !important;
}

/* Spacing utilities */
.print-mb-1 {
  margin-bottom: 1pt !important;
}

.print-mb-2 {
  margin-bottom: 2pt !important;
}

.print-mb-3 {
  margin-bottom: 3pt !important;
}

.print-mb-4 {
  margin-bottom: 4pt !important;
}

.print-mt-1 {
  margin-top: 1pt !important;
}

.print-mt-2 {
  margin-top: 2pt !important;
}

.print-mt-3 {
  margin-top: 3pt !important;
}

.print-mt-4 {
  margin-top: 4pt !important;
}

/* Screen preview styles */
@media screen {
  body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  .print-preview {
    max-width: 8.5in;
    margin: 2rem auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  .print-header, .print-instructions, .print-summary, .print-supervisor {
    box-shadow: var(--print-shadow) !important;
  }

  .info-card, .instruction-item {
    box-shadow: var(--print-shadow-sm) !important;
  }
}

/* Print-specific overrides */
@media print {
  @page {
    margin: 0.75in;
    size: A4;
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 8pt;
      color: #64748b;
    }
  }

  body {
    font-size: 11pt;
    line-height: 1.3;
    color: #000;
    background: white;
  }

  .print-preview {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .print-header {
    border: 1px solid var(--print-gray-300) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .print-instructions, .print-summary, .print-supervisor, .info-card, .instruction-item {
    box-shadow: none !important;
  }

  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30pt;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 8pt 12pt !important;
    border-top: 1px solid var(--print-gray-300) !important;
    background: white !important;
  }

  .page-numbering {
    font-size: 8pt !important;
    color: var(--print-gray-500) !important;
  }

  .page-number::after {
    content: "Page " counter(page);
  }
}


