/* ============================================================
   A4 REPORT STYLES - Portfolio Builder Pages Only
   ============================================================
   
   This CSS is EXCLUSIVELY for the 6 portfolio builder pages:
   - overview
   - pricePerformance
   - portfolioComposition
   - feesMins
   - distributions
   - aboutUs
   
   These pages use className="page" and className="sub_page"
   All other app pages use Dash Bootstrap Components defaults.
   
   Strategy: Let Bootstrap work everywhere, only apply specific
   custom styles needed for A4 report layout and branding.
   ============================================================ */

/* ============================================================
   A4 PAGE LAYOUT
   ============================================================ */

.page {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  padding: 0;
  margin: 10mm auto;
  border: 1px #D3D3D3 solid;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
}

.subpage,
.sub_page {
  padding: 2rem;
}

/* ============================================================
   HEADER STYLES
   ============================================================ */

.logo {
  max-height: 50px;
  margin: 0.5rem 0;
}

.a4-logo {
  max-height: 50px;
}

/* Navigation menu */
.a4-nav-link {
  color: #666;
  transition: all 0.2s;
}

.a4-nav-link:hover {
  color: #98151b;
  background-color: rgba(152, 21, 27, 0.1);
}

.a4-nav-link:focus,
.a4-nav-link.active {
  color: #fff;
  background-color: #98151b;
}

/* ============================================================
   SECTION HEADERS - Red left border (Report branding)
   ============================================================ */

.main-title {
  padding: 1rem 0;
  padding-left: 2rem;
  border-left: 12px solid #98151b;
  font-size: 1.75rem;
}

.subtitle {
  padding: 0.75rem 0;
  padding-left: 1.5rem;
  border-left: 8px solid #98151b;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

/* ============================================================
   ETF SELECTION TABLE
   ============================================================ */

.a4-etf-table thead th {
  font-weight: 600;
  border-bottom: 2px solid #dee2e6;
}

.a4-etf-table tbody tr:first-child td {
  font-weight: normal;
}

.a4-etf-table tbody tr:hover {
  background-color: rgba(152, 21, 27, 0.05);
}

/* ============================================================
   ETF MODAL STYLES
   ============================================================ */

.etf-cards-container {
  max-height: 500px;
}

/* ETF card styles removed as per request */

/* Wrapper div for clickable cards */
div[id*='etf-card'] {
  cursor: pointer;
}

/* ============================================================
   UTILITY CLASSES - Used in reports
   ============================================================ */

.padded {
  padding: 0.25rem 0.5rem;
  margin-top: 0.5rem;
}

div.padded {
  padding: 0.75rem;
}

.blue-text {
  color: #8496b8;
}

/* Row spacing for A4 pages */
.sub_page .row {
  margin-bottom: 1.5rem;
}

.sub_page .row:last-child {
  margin-bottom: 0;
}

/* RadioItems styling for A4 pages */
.sub_page .dash-radioitems label {
  display: inline-block;
  margin-right: 1.5rem;
  text-align: left;
}

/* ============================================================
   GRAPH HEIGHT CLASSES - For consistent graph sizing
   ============================================================ */

.graph-sm {
  height: 170px;
}

.graph-md {
  height: 200px;
}

.graph-lg {
  height: 250px;
}

.graph-xl {
  height: 260px;
}

.graph-2xl {
  height: 350px;
}

.graph-3xl {
  height: 600px;
}

/* ============================================================
   TABLE STYLES - Custom for reports
   ============================================================ */

table.tiny-header {
  width: 100%;
  border-collapse: collapse;
}

table.tiny-header tr:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
}

table.tiny-header td,
table.tiny-header th {
  padding: 0.5rem;
  border-bottom: 1px solid #E1E1E1;
}

table.reversed {
  width: 100%;
  border-collapse: collapse;
}

table.reversed tr:nth-child(odd) {
  background-color: #F5F5F5;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

table.reversed tr:nth-child(even) {
  background-color: white;
}

table.reversed td,
table.reversed th {
  padding: 0.5rem;
}

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

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

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  
  .no-print,
  .no-print * {
    display: none !important;
  }
}