/* ==========================================================================
   INCOME TAX CALCULATOR — STYLES
   Extends global design tokens from assets/css/style.css
   ========================================================================== */

.breadcrumb{padding:14px 0; font-size:13px; color:var(--muted);}
.breadcrumb ol{display:flex; gap:6px; flex-wrap:wrap;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:6px; color:var(--muted);}
.breadcrumb a{color:var(--teal); font-weight:600;}
.breadcrumb li[aria-current]{color:var(--text); font-weight:600;}

/* ---------------- Hero ---------------- */
.itc-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:56px 0 44px; text-align:center; margin-bottom:40px;
}
.itc-hero h1{color:#fff; font-size:clamp(28px,4vw,40px);}
.itc-hero p{color:#CFE0F5; max-width:600px; margin:0 auto 24px; font-size:16.5px;}
.itc-hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.itc-hero-note{font-size:12.5px; color:#9FB3D6; margin-top:14px;}

/* ---------------- Panels ---------------- */
.itc-panel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); margin-bottom:24px;
}
.itc-panel h3{font-size:16.5px; margin:22px 0 14px;}
.itc-panel h3:first-child{margin-top:0;}
.itc-optional-tag{font-size:12px; font-weight:500; color:var(--muted); text-transform:none;}
.itc-report-for{font-weight:700; color:var(--teal); font-size:14.5px; margin-bottom:14px;}
.itc-panel h4{font-size:14.5px; margin-bottom:10px;}
.itc-panel-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.itc-hint{font-size:13px; color:var(--muted); margin:-6px 0 14px;}
.itc-note{font-size:12.5px; color:var(--muted); margin-top:6px;}
.itc-error-msg{color:#E4572E; font-weight:600; font-size:13.5px; margin-top:12px;}

.itc-panel label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text);}
.itc-panel input, .itc-panel select{
  width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14.5px; font-family:inherit;
}

/* ---------------- Year Row ---------------- */
.itc-year-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:6px;}

/* ---------------- Taxpayer Type Chips ---------------- */
.itc-chip-select{display:flex; flex-wrap:wrap; gap:8px;}
.itc-chip{
  background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; transition:.15s;
}
.itc-chip:hover{border-color:var(--teal);}
.itc-chip.active{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---------------- Grids ---------------- */
.itc-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:6px;}
.itc-checkbox-field{display:flex; align-items:flex-end; padding-bottom:11px;}
.itc-checkbox-field label{display:flex !important; align-items:center; gap:8px; font-weight:500 !important; margin:0 !important;}
.itc-checkbox-field input{width:auto !important;}

.itc-gross-display{
  background:rgba(18,165,148,.08); border:1px solid rgba(18,165,148,.3); border-radius:10px;
  padding:14px 18px; font-size:15px; margin-bottom:16px;
}
.itc-gross-display strong{color:var(--teal); font-size:18px;}
.itc-house-display{margin-top:-2px;}

.itc-suggestions-box{
  background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.3); border-radius:12px;
  padding:18px 20px; margin-bottom:20px;
}
.itc-suggestions-box h4{margin-bottom:10px; font-size:14.5px;}
.itc-suggestions-box ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:13.5px; color:var(--muted);}
.itc-suggestions-box ul li::before{content:"💡 "; }

/* ---------------- Government Employee Panel ---------------- */
.itc-govt-panel{
  background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.3); border-radius:12px;
  padding:18px; margin:10px 0 18px;
}

/* ---------------- Deduction Accordion ---------------- */
.itc-accordion{display:grid; gap:10px;}
.itc-acc-item{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg);}
.itc-acc-header{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:none; border:none; font-weight:700; font-size:14px; color:var(--text);
}
.itc-acc-header .itc-acc-arrow{transition:.2s; color:var(--teal);}
.itc-acc-item.open .itc-acc-arrow{transform:rotate(180deg);}
.itc-acc-body{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.itc-acc-body-inner{padding:0 18px 18px;}
.itc-acc-field{margin-bottom:14px;}
.itc-acc-field label{display:flex; justify-content:space-between; font-size:13px;}
.itc-acc-field .itc-cap-badge{font-weight:400; color:var(--muted); font-size:11.5px;}
.itc-acc-field input{background:var(--card);}
.itc-acc-hint{font-size:12px; color:var(--muted); margin-top:4px;}
.itc-acc-disabled{opacity:.5; pointer-events:none;}
.itc-acc-badge-new{
  background:rgba(18,165,148,.15); color:var(--teal); font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:999px; margin-left:8px;
}

.itc-calc-btn{width:100%; margin-top:22px; font-size:16px; padding:16px;}

/* ---------------- Regime Comparison ---------------- */
.itc-compare-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px;}
.itc-compare-card{
  background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:22px;
  text-align:center; display:flex; flex-direction:column; gap:6px;
}
.itc-compare-label{font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.itc-compare-amount{font-size:26px; font-weight:800; color:var(--text);}
.itc-compare-highlight{background:linear-gradient(135deg, rgba(18,165,148,.12), rgba(255,176,32,.1)); border-color:var(--teal);}
.itc-compare-highlight .itc-compare-amount{color:var(--teal);}
.itc-compare-sub{font-size:12.5px; color:var(--muted);}
.itc-chart-wrap{max-width:500px; margin:0 auto;}

/* ---------------- Results ---------------- */
.itc-regime-toggle{display:flex; gap:8px;}
.itc-toggle-btn{
  background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:8px 16px; border-radius:9px; font-weight:600; font-size:13.5px; transition:.15s;
}
.itc-toggle-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}

.itc-results-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:20px 0;
}
.itc-result-row{background:var(--card); padding:14px 18px; display:flex; justify-content:space-between; font-size:13.5px;}
.itc-result-row strong{color:var(--text);}
.itc-result-row.itc-final{grid-column:1/-1; background:rgba(18,165,148,.08);}
.itc-result-row.itc-final strong{font-size:18px; color:var(--teal);}

.itc-charts-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0;}
.itc-chart-card{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:18px;}
.itc-chart-card canvas{max-height:260px;}

.itc-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.itc-status-msg{margin-top:12px; font-size:13.5px; font-weight:600; min-height:18px;}
.itc-status-msg.ok{color:var(--teal);}
.itc-status-msg.err{color:#E4572E;}

/* ---------------- Disclaimer ---------------- */
.itc-disclaimer{
  background:rgba(228,87,46,.06); border:1px solid rgba(228,87,46,.25); border-radius:12px;
  padding:18px 22px; font-size:13px; color:var(--muted); margin-bottom:30px; line-height:1.6;
}
.itc-disclaimer strong{color:var(--text);}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .itc-grid-3, .itc-compare-grid, .itc-charts-grid, .itc-results-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .itc-year-row, .itc-grid-3, .itc-compare-grid, .itc-charts-grid, .itc-results-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   PRINT LAYOUT — only the calculated report prints, sized for A4
   ========================================================================== */
@media print{
  .site-header, .mobile-drawer, .drawer-overlay, .breadcrumb, .itc-hero,
  #itcForm, .itc-toolbar, .section, .site-footer, .faq-list, .tool-grid{
    display:none !important;
  }
  #comparisonSection, #resultsSection, .itc-disclaimer{
    display:block !important; box-shadow:none !important; border:1px solid #ccc !important;
    page-break-inside:avoid; margin-bottom:14px !important;
  }
  body{background:#fff !important; color:#000 !important;}
  .itc-chart-card canvas, #comparisonChart{max-height:220px !important;}
  @page{ size:A4; margin:14mm; }
}