/* Pay Budget Debt — SaaS refresh for the 12 calculator/tool workspaces only.
   Header, page shell, footer, and Tools.html intentionally untouched. */
:root{
  --tool-surface:#ffffff;
  --tool-surface-soft:#f7f9fc;
  --tool-surface-hover:#f2f7fd;
  --tool-text:#10213d;
  --tool-muted:#63738a;
  --tool-border:#dbe4ef;
  --tool-border-strong:#c9d5e4;
  --tool-primary:#2f9df4;
  --tool-primary-dark:#147bd3;
  --tool-navy:#0d2442;
  --tool-navy-2:#12355f;
  --tool-shadow:0 16px 42px rgba(13,36,66,.09);
  --tool-shadow-soft:0 8px 22px rgba(13,36,66,.07);
}

body.dark{
  --tool-surface:#102544;
  --tool-surface-soft:#0f1d33;
  --tool-surface-hover:#152d4d;
  --tool-text:#f3f7fc;
  --tool-muted:#b2bfd0;
  --tool-border:#274263;
  --tool-border-strong:#365578;
  --tool-navy:#0a1a30;
  --tool-navy-2:#12365d;
  --tool-shadow:0 18px 44px rgba(0,0,0,.25);
  --tool-shadow-soft:0 8px 22px rgba(0,0,0,.19);
}

/* Main calculator workspace */
.panel-shell .tool-wrap{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:22px !important;
}

.panel-shell .left-panel,
.panel-shell .right-panel{
  min-width:0;
  padding:26px !important;
  border:1px solid var(--tool-border) !important;
  border-radius:18px !important;
  background:var(--tool-surface) !important;
  color:var(--tool-text) !important;
  box-shadow:var(--tool-shadow) !important;
  overflow:hidden;
}

.panel-shell .left-panel{
  position:relative;
}
.panel-shell .left-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--tool-primary),#74bdff);
}

/* Form layout */
.panel-shell .tool-wrap .row{
  gap:16px !important;
  margin-bottom:16px !important;
}
.panel-shell .tool-wrap .col{
  min-width:0;
}
.panel-shell .tool-wrap .uniform label,
.panel-shell .tool-wrap .left-panel label{
  display:block;
  margin:0 0 8px 1px !important;
  color:var(--tool-muted) !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.panel-shell .tool-wrap .uniform input,
.panel-shell .tool-wrap .uniform select,
.panel-shell .tool-wrap .left-panel input:not([type="checkbox"]):not([type="radio"]),
.panel-shell .tool-wrap .left-panel select,
.panel-shell .tool-wrap .left-panel textarea{
  width:100%;
  height:50px !important;
  padding:0 14px !important;
  border:1px solid var(--tool-border-strong) !important;
  border-radius:11px !important;
  outline:none;
  background:var(--tool-surface-soft) !important;
  color:var(--tool-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.panel-shell .tool-wrap .left-panel textarea{
  min-height:94px !important;
  height:auto !important;
  padding-top:12px !important;
  resize:vertical;
}
.panel-shell .tool-wrap input::placeholder,
.panel-shell .tool-wrap textarea::placeholder{
  color:#8a99ad !important;
  opacity:1 !important;
  font-weight:500 !important;
}
.panel-shell .tool-wrap input:focus,
.panel-shell .tool-wrap select:focus,
.panel-shell .tool-wrap textarea:focus{
  border-color:var(--tool-primary) !important;
  background:var(--tool-surface) !important;
  box-shadow:0 0 0 4px rgba(47,157,244,.14) !important;
}
.panel-shell .tool-wrap select{
  appearance:auto !important;
}

/* Toggle-style controls */
.panel-shell .tool-wrap #debtToggle,
.panel-shell .tool-wrap button.uniform{
  min-height:50px !important;
  border:1px solid var(--tool-border-strong) !important;
  border-radius:11px !important;
  background:var(--tool-surface-soft) !important;
  color:var(--tool-text) !important;
  box-shadow:none !important;
}

/* Actions */
.panel-shell .tool-wrap .btn-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.panel-shell .tool-wrap .btn{
  min-height:44px !important;
  margin-top:4px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#42a8fb 0%,#258ee8 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(47,157,244,.24) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.005em;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.panel-shell .tool-wrap .btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.04);
  box-shadow:0 11px 25px rgba(47,157,244,.29) !important;
}
.panel-shell .tool-wrap .btn:active{
  transform:translateY(0);
}
.panel-shell .tool-wrap .btn.alt,
.panel-shell .tool-wrap .btn-secondary,
.panel-shell .tool-wrap .btn-ghost,
.panel-shell .tool-wrap .btn[style*="background:#1b3358"]{
  background:var(--tool-surface-soft) !important;
  color:var(--tool-text) !important;
  border-color:var(--tool-border) !important;
  box-shadow:none !important;
}
.panel-shell .tool-wrap .btn.alt:hover,
.panel-shell .tool-wrap .btn-secondary:hover,
.panel-shell .tool-wrap .btn-ghost:hover{
  border-color:#acc5e0 !important;
  box-shadow:var(--tool-shadow-soft) !important;
}

/* Result KPI cards */
.panel-shell .tool-wrap .result-boxes{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 0 20px !important;
}
.panel-shell .tool-wrap .result-boxes:has(.rbox:nth-child(3)){
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.panel-shell .tool-wrap .rbox{
  min-width:0 !important;
  min-height:116px !important;
  padding:18px 20px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(99,169,237,.34) !important;
  border-radius:14px !important;
  background:linear-gradient(140deg,var(--tool-navy) 0%,var(--tool-navy-2) 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 27px rgba(9,38,72,.15) !important;
}
.panel-shell .tool-wrap .rbox br{
  display:none;
}
.panel-shell .tool-wrap .rbox > strong:first-child{
  color:#bad8f7 !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.panel-shell .tool-wrap .rbox > strong:nth-of-type(2),
.panel-shell .tool-wrap .rbox > strong:last-of-type{
  color:#fff !important;
  font-size:27px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
  letter-spacing:-.03em;
}
.panel-shell .tool-wrap .rbox .edit-link{
  color:#b9d8f8 !important;
  font-size:12px !important;
  font-weight:750 !important;
  text-decoration:none !important;
}
.panel-shell .tool-wrap .right-panel h3{
  margin:2px 0 12px !important;
  color:var(--tool-text) !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
}
.panel-shell .tool-wrap .left-panel h3{
  margin:20px 0 12px !important;
  color:var(--tool-text) !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

/* Tables */
.panel-shell .tool-wrap .table-wrap{
  width:100%;
  max-height:360px !important;
  overflow:auto;
  border:1px solid var(--tool-border) !important;
  border-radius:13px !important;
  background:var(--tool-surface-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.panel-shell .tool-wrap .table-wrap table{
  width:100%;
  min-width:560px;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:transparent !important;
  color:var(--tool-text) !important;
}
.panel-shell .tool-wrap .table-wrap th,
.panel-shell .tool-wrap .table-wrap td{
  padding:12px 14px !important;
  border-bottom:1px solid var(--tool-border) !important;
  color:var(--tool-text) !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
.panel-shell .tool-wrap .table-wrap thead th{
  background:#edf4fb !important;
  color:#53667f !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase;
}
body.dark .panel-shell .tool-wrap .table-wrap thead th{
  background:#173252 !important;
  color:#b8c8da !important;
}
.panel-shell .tool-wrap .table-wrap tbody tr:last-child td{
  border-bottom:0 !important;
}
.panel-shell .tool-wrap .table-wrap tbody tr:hover td{
  background:rgba(47,157,244,.045) !important;
}

/* Segmented modes within calculators */
.panel-shell > .tabs{
  width:max-content;
  max-width:100%;
  margin-top:-10px !important;
  margin-bottom:18px !important;
  padding:4px !important;
  gap:4px !important;
  justify-content:flex-start !important;
  border:1px solid var(--tool-border) !important;
  border-radius:12px !important;
  background:var(--tool-surface) !important;
  box-shadow:var(--tool-shadow-soft) !important;
}
.panel-shell > .tabs .tab-btn{
  min-width:108px;
  min-height:38px;
  padding:0 15px !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  color:var(--tool-muted) !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:800 !important;
}
.panel-shell > .tabs .tab-btn[aria-selected="true"]{
  background:#e8f4ff !important;
  color:#1473c9 !important;
  box-shadow:inset 0 0 0 1px #d1e8ff !important;
}
body.dark .panel-shell > .tabs .tab-btn[aria-selected="true"]{
  background:#1c416d !important;
  color:#cae5ff !important;
  box-shadow:inset 0 0 0 1px #315f8e !important;
}

/* Dynamic debt and overtime rows */
.panel-shell .tool-wrap #debtList > .row,
.panel-shell .tool-wrap .ot-row{
  padding:12px !important;
  margin:0 0 10px !important;
  border:1px solid var(--tool-border) !important;
  border-radius:12px !important;
  background:var(--tool-surface-soft) !important;
}
.panel-shell .tool-wrap .ot-row{
  gap:12px !important;
}
.panel-shell .tool-wrap .del,
.panel-shell .tool-wrap .ot-remove{
  width:42px !important;
  height:42px !important;
  border:1px solid #efb7bd !important;
  border-radius:10px !important;
  background:#fff1f2 !important;
  color:#c43445 !important;
  box-shadow:none !important;
  font-size:18px !important;
}
body.dark .panel-shell .tool-wrap .del,
body.dark .panel-shell .tool-wrap .ot-remove{
  border-color:#6a3841 !important;
  background:#3a2028 !important;
  color:#ff9aa7 !important;
}

/* Mortgage chart / report summary area */
.panel-shell .tool-wrap .chart-wrap{
  margin-top:12px !important;
  padding:14px !important;
  border:1px solid var(--tool-border) !important;
  border-radius:14px !important;
  background:var(--tool-surface-soft) !important;
}
.panel-shell .tool-wrap #summaryBox{
  min-width:0 !important;
}

/* Export/report modal belongs to the calculator action flow */
.modal-backdrop{
  background:rgba(5,18,34,.56) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal{
  width:min(520px,calc(100vw - 32px)) !important;
  padding:24px !important;
  border:1px solid var(--tool-border) !important;
  border-radius:16px !important;
  background:var(--tool-surface) !important;
  color:var(--tool-text) !important;
  box-shadow:0 28px 70px rgba(7,25,47,.28) !important;
}
.modal h3{
  margin:0 0 16px !important;
  color:var(--tool-text) !important;
  font-size:21px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.025em;
}
.modal .actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.modal .actions .btn{
  min-height:42px !important;
  margin:0 !important;
  padding:0 16px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#42a8fb 0%,#258ee8 100%) !important;
  color:#fff !important;
  font-weight:800 !important;
}
.modal .actions .btn-secondary,
.modal .actions .btn-ghost{
  background:var(--tool-surface-soft) !important;
  color:var(--tool-text) !important;
  border-color:var(--tool-border) !important;
}

/* Focus treatment inside the tool only */
.panel-shell .tool-wrap button:focus-visible,
.panel-shell .tool-wrap input:focus-visible,
.panel-shell .tool-wrap select:focus-visible,
.panel-shell > .tabs button:focus-visible,
.modal button:focus-visible{
  outline:3px solid rgba(47,157,244,.28) !important;
  outline-offset:2px !important;
}

@media (max-width:1100px){
  .panel-shell .tool-wrap .rbox > strong:nth-of-type(2),
  .panel-shell .tool-wrap .rbox > strong:last-of-type{
    font-size:24px !important;
  }
}

@media (max-width:900px){
  .panel-shell .tool-wrap{
    grid-template-columns:1fr !important;
  }
  .panel-shell .tool-wrap .result-boxes:has(.rbox:nth-child(3)){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  .panel-shell .left-panel,
  .panel-shell .right-panel{
    padding:20px !important;
    border-radius:15px !important;
  }
  .panel-shell .tool-wrap .row{
    flex-direction:column !important;
    gap:12px !important;
  }
  .panel-shell .tool-wrap .result-boxes,
  .panel-shell .tool-wrap .result-boxes:has(.rbox:nth-child(3)){
    grid-template-columns:1fr !important;
  }
  .panel-shell > .tabs{
    width:100%;
  }
  .panel-shell > .tabs .tab-btn{
    flex:1 1 0;
    min-width:0;
  }
  .panel-shell .tool-wrap .ot-row{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:520px){
  .panel-shell .tool-wrap .btn-row .btn{
    flex:1 1 auto;
  }
}