/**
 * FI Framework Assessment Platform - Print Stylesheet
 * Optimized for printing assessments, reports, and documentation
 */

/* ========================================
   PRINT LAYOUT ADJUSTMENTS
   ======================================== */

@page {
  size: A4;
  margin: 2cm;
  widows: 3;
  orphans: 3;
}

@page :first {
  margin-top: 2cm;
}

@page :last {
  margin-bottom: 2cm;
}

/* ========================================
   VISIBILITY & LAYOUT
   ======================================== */

/* Hide navigation and interactive elements */
.navbar,
.role-selector,
.navbar-layer-indicator,
.role-selector-container,
.modal-backdrop,
.modal,
.toast-container,
.toast,
nav,
[role="navigation"],
.navigation,
.sidebar,
.split-sidebar,
.split-layout > :first-child,
.btn-print-hide,
[data-print="hide"],
.no-print,
.hidden-print {
  display: none !important;
}

/* ========================================
   GENERAL PRINT STYLES
   ======================================== */

* {
  background: transparent !important;
  color: black !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html,
body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  min-height: auto;
  font-size: 12pt;
  line-height: 1.5;
  background: white;
  color: black;
}

body {
  background-color: white;
}

main {
  min-height: auto;
  padding: 0;
}

/* ========================================
   TEXT STYLES
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
  page-break-inside: avoid;
  orphans: 3;
  widows: 3;
  color: #1B3A5C;
  margin: 0.5cm 0;
  font-weight: bold;
}

h1 {
  font-size: 28pt;
  margin: 0.75cm 0 0.5cm 0;
  border-bottom: 2px solid #1B3A5C;
  padding-bottom: 0.25cm;
}

h2 {
  font-size: 20pt;
  margin: 0.6cm 0 0.4cm 0;
}

h3 {
  font-size: 16pt;
  margin: 0.5cm 0 0.3cm 0;
}

h4, h5, h6 {
  font-size: 12pt;
  margin: 0.4cm 0 0.2cm 0;
}

p {
  margin: 0 0 0.5cm 0;
  line-height: 1.6;
  orphans: 2;
  widows: 2;
}

p:last-child {
  margin-bottom: 0;
}

/* ========================================
   LINKS & ANCHORS
   ======================================== */

a {
  color: #1B3A5C;
  text-decoration: underline;
  background: transparent;
}

a[href]:after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
}

/* Hide URLs for links within the document */
a[href^="#"]:after {
  content: "";
}

/* ========================================
   CONTAINERS & CARDS
   ======================================== */

.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.card {
  page-break-inside: avoid;
  border: 1px solid #E0DDD8;
  margin: 0.5cm 0;
  padding: 0.5cm;
  background: white;
  box-shadow: none;
}

.card-header {
  page-break-after: avoid;
  margin-bottom: 0.3cm;
  border-bottom: 1px solid #E0DDD8;
  padding-bottom: 0.2cm;
}

.card-title {
  font-size: 14pt;
  font-weight: bold;
  color: #1B3A5C;
  margin: 0;
}

.card-body {
  display: block;
}

.card-footer {
  page-break-before: avoid;
  margin-top: 0.3cm;
  padding-top: 0.2cm;
  border-top: 1px solid #E0DDD8;
  font-size: 10pt;
}

/* ========================================
   QUESTION CARDS
   ======================================== */

.question-card {
  page-break-inside: avoid;
  border: 1px solid #E0DDD8;
  border-left: 3pt solid #3A7D5E;
  margin: 0.6cm 0;
  padding: 0.5cm;
  background: white;
}

.question-card.completed {
  border-left-color: #4CAF50;
}

.question-card.warning {
  border-left-color: #E6A817;
}

.question-card.error {
  border-left-color: #B85C3A;
}

.question-number {
  display: inline-block;
  background-color: #1B3A5C;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9pt;
  font-weight: bold;
  margin-bottom: 0.2cm;
}

.question-text {
  font-size: 12pt;
  font-weight: bold;
  color: #1B3A5C;
  margin: 0.2cm 0;
}

.question-description {
  font-size: 10pt;
  color: #666;
  margin: 0.2cm 0;
  line-height: 1.5;
}

.question-body {
  margin: 0.3cm 0;
}

.question-footer {
  margin-top: 0.3cm;
  padding-top: 0.2cm;
  border-top: 1px solid #E0DDD8;
  font-size: 9pt;
  color: #999;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

.form-group {
  page-break-inside: avoid;
  margin-bottom: 0.5cm;
}

label {
  display: block;
  font-weight: bold;
  color: #1B3A5C;
  margin-bottom: 0.1cm;
  font-size: 11pt;
}

label.required::after {
  content: " *";
  color: #B85C3A;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  border: 1px solid #E0DDD8;
  padding: 0.2cm;
  margin-bottom: 0.2cm;
  background: white;
  color: black;
  border-collapse: collapse;
  width: 100%;
  display: block;
  font-size: 11pt;
}

textarea {
  min-height: 3cm;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.2cm;
}

.form-help {
  font-size: 9pt;
  color: #666;
  margin-top: 0.1cm;
}

.form-error {
  font-size: 9pt;
  color: #B85C3A;
}

/* ========================================
   TABLES
   ======================================== */

.table-responsive {
  width: 100%;
  overflow: visible;
  margin: 0.5cm 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  page-break-inside: avoid;
  margin: 0.5cm 0;
  font-size: 10pt;
}

thead {
  display: table-header-group;
  background: #f5f5f5;
  font-weight: bold;
}

tbody {
  display: table-row-group;
}

th {
  background: #f5f5f5 !important;
  color: #1B3A5C !important;
  padding: 0.3cm;
  text-align: left;
  border-bottom: 2px solid #E0DDD8;
  font-weight: bold;
  font-size: 10pt;
}

td {
  padding: 0.3cm;
  border-bottom: 1px solid #E0DDD8;
  vertical-align: top;
}

tr {
  page-break-inside: avoid;
}

tbody tr:nth-child(even) {
  background: #fafaf8;
}

/* ========================================
   BADGES & STATUS INDICATORS
   ======================================== */

.badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #E0DDD8;
  border-radius: 2px;
  font-size: 9pt;
  font-weight: bold;
  background: white;
  color: #1B3A5C;
}

.badge-primary {
  background: white;
  color: #1B3A5C;
  border: 1px solid #1B3A5C;
}

.badge-success {
  background: white;
  color: #4CAF50;
  border: 1px solid #4CAF50;
}

.badge-warning {
  background: white;
  color: #E6A817;
  border: 1px solid #E6A817;
}

.badge-danger {
  background: white;
  color: #B85C3A;
  border: 1px solid #B85C3A;
}

.rag-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3cm;
  font-size: 10pt;
  font-weight: bold;
}

.rag-indicator::before {
  content: "●";
  font-size: 12pt;
}

.rag-green::before {
  color: #4CAF50;
}

.rag-amber::before {
  color: #E6A817;
}

.rag-red::before {
  color: #B85C3A;
}

.traffic-light {
  display: inline-flex;
  gap: 0.2cm;
}

.traffic-light-dot {
  width: 0.3cm;
  height: 0.3cm;
  border-radius: 50%;
  display: inline-block;
}

/* ========================================
   PROGRESS & HEALTH INDICATORS
   ======================================== */

.progress-bar {
  width: 100%;
  height: 0.2cm;
  background: #E0DDD8;
  border: 1px solid #E0DDD8;
  margin: 0.2cm 0;
  display: block;
}

.progress-bar-fill {
  height: 100%;
  background: #3A7D5E;
  display: block;
}

.layer-progress {
  page-break-inside: avoid;
  margin: 0.5cm 0;
}

.layer-step {
  display: inline-block;
  width: 20%;
  text-align: center;
  margin-bottom: 0.3cm;
  vertical-align: top;
}

.layer-step-number {
  display: inline-block;
  width: 0.8cm;
  height: 0.8cm;
  line-height: 0.8cm;
  border: 1px solid #E0DDD8;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  background: white;
  color: #1B3A5C;
  font-size: 9pt;
}

.layer-step.completed .layer-step-number {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.layer-step-label {
  display: block;
  font-size: 9pt;
  font-weight: bold;
  margin-top: 0.1cm;
}

.health-score {
  page-break-inside: avoid;
  border: 1px solid #E0DDD8;
  padding: 0.5cm;
  margin: 0.5cm 0;
  text-align: center;
  background: white;
}

.health-score-value {
  font-size: 24pt;
  font-weight: bold;
  color: #1B3A5C;
  margin: 0.2cm 0;
}

.health-score-label {
  font-size: 9pt;
  color: #666;
}

/* ========================================
   DASHBOARD GRID
   ======================================== */

.dashboard-grid {
  display: block;
  margin-bottom: 0.5cm;
}

.dashboard-card {
  page-break-inside: avoid;
  border: 1px solid #E0DDD8;
  padding: 0.5cm;
  margin-bottom: 0.5cm;
  background: white;
}

.dashboard-card-title {
  font-size: 12pt;
  font-weight: bold;
  color: #1B3A5C;
  margin: 0 0 0.2cm 0;
}

.dashboard-card-description {
  font-size: 10pt;
  color: #666;
  margin: 0.2cm 0;
}

.dashboard-card-meta {
  font-size: 9pt;
  color: #999;
  margin-top: 0.3cm;
  padding-top: 0.2cm;
  border-top: 1px solid #E0DDD8;
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
  page-break-inside: avoid;
  border-left: 3pt solid;
  padding: 0.4cm;
  margin: 0.5cm 0;
  background: white;
}

.alert-info {
  border-left-color: #2E6DA4;
}

.alert-success {
  border-left-color: #4CAF50;
}

.alert-warning {
  border-left-color: #E6A817;
}

.alert-danger {
  border-left-color: #B85C3A;
}

.alert-title {
  font-weight: bold;
  margin-bottom: 0.1cm;
  font-size: 11pt;
}

.alert-content {
  font-size: 10pt;
}

/* ========================================
   PAGE BREAKS
   ======================================== */

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

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

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

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

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

/* ========================================
   FOOTER & HEADER
   ======================================== */

@page {
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 10pt;
    color: #999;
  }

  @top-center {
    content: "FI Framework Assessment Platform";
    font-size: 10pt;
    color: #999;
    padding-bottom: 0.3cm;
    border-bottom: 1px solid #E0DDD8;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.visually-hidden,
.sr-only,
[aria-hidden="true"] {
  display: none !important;
}

.print-only {
  display: block !important;
}

.no-print,
[data-print="hide"] {
  display: none !important;
}

.print-block {
  display: block !important;
}

.print-inline {
  display: inline !important;
}

.print-inline-block {
  display: inline-block !important;
}

/* ========================================
   SPACING FOR PRINT
   ======================================== */

.mt-sm { margin-top: 0.2cm; }
.mt-md { margin-top: 0.4cm; }
.mt-lg { margin-top: 0.6cm; }
.mt-xl { margin-top: 0.8cm; }

.mb-sm { margin-bottom: 0.2cm; }
.mb-md { margin-bottom: 0.4cm; }
.mb-lg { margin-bottom: 0.6cm; }
.mb-xl { margin-bottom: 0.8cm; }

.px-sm { padding-left: 0.2cm; padding-right: 0.2cm; }
.px-md { padding-left: 0.4cm; padding-right: 0.4cm; }
.px-lg { padding-left: 0.6cm; padding-right: 0.6cm; }

.py-sm { padding-top: 0.2cm; padding-bottom: 0.2cm; }
.py-md { padding-top: 0.4cm; padding-bottom: 0.4cm; }
.py-lg { padding-top: 0.6cm; padding-bottom: 0.6cm; }

/* ========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: none !important;
}

/* ========================================
   SPECIAL PRINT SECTIONS
   ======================================== */

.print-section {
  page-break-after: always;
  page-break-inside: avoid;
}

.print-section:last-child {
  page-break-after: auto;
}

.assessment-summary {
  page-break-inside: avoid;
  border: 2px solid #1B3A5C;
  padding: 0.6cm;
  margin: 0.8cm 0;
}

.assessment-metadata {
  display: block;
  font-size: 9pt;
  color: #666;
  margin-bottom: 0.3cm;
  padding-bottom: 0.3cm;
  border-bottom: 1px solid #E0DDD8;
}

.assessment-metadata-item {
  display: block;
  margin-bottom: 0.1cm;
}

.assessment-metadata-label {
  font-weight: bold;
  color: #1B3A5C;
}

/* ========================================
   RESPONSIVE PRINT
   ======================================== */

/* Ensure single column on print */
.grid,
.grid-2,
.grid-3,
.grid-4,
.dashboard-grid {
  display: block !important;
}

.split-layout {
  display: block !important;
}

.split-sidebar {
  display: block !important;
  border-right: none !important;
  margin-bottom: 0.5cm !important;
}

.split-main {
  display: block !important;
}

/* Ensure all widths are 100% */
.container {
  max-width: 100% !important;
}

/* Fix image sizes for print */
img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   ACCESSIBILITY IN PRINT
   ======================================== */

a {
  color: #1B3A5C;
}

a[href]:after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
  word-break: break-all;
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
  content: "";
}

abbr[title]:after {
  content: " (" attr(title) ")";
}