/* ==========================================================
   LOAN EMI CALCULATOR
   Extracted from calculator-tools.css (lines 4975-5293)
   ========================================================== */
/* ----------------------------------------------------------
   LOAN EMI CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== TENURE WRAP (input + unit select side by side) ===== */
.ct-emi-tenure-wrap {
  display: flex;
  gap    : 0;
}

.ct-emi-tenure-input {
  flex         : 1;
  border-radius: var(--ct-r-md) 0 0 var(--ct-r-md) !important;
  border-right : none !important;
}

.ct-emi-tenure-unit {
  width        : 110px;
  flex-shrink  : 0;
  border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0 !important;
  border-left  : 1px solid var(--ct-input-border) !important;
  font-size    : 13px !important;
  padding      : 10px 30px 10px 10px !important;
}

/* ===== CSS-ONLY DONUT CHART ===== */
.ct-emi-donut-wrap {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 32px;
  flex-wrap      : wrap;
  padding        : var(--ct-sp-lg) 0;
}

.ct-emi-donut {
  position     : relative;
  width        : 180px;
  height       : 180px;
  border-radius: 50%;
  flex-shrink  : 0;
  transition   : all 1s cubic-bezier(.4, 0, .2, 1);
}

.ct-emi-donut-center {
  position       : absolute;
  top            : 50%;
  left           : 50%;
  transform      : translate(-50%, -50%);
  text-align     : center;
  width          : 110px;
  height         : 110px;
  background     : var(--ct-card-bg);
  border-radius  : 50%;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  box-shadow     : inset 0 0 8px rgba(0, 0, 0, .04);
}

.ct-emi-donut-label {
  font-size   : 11px;
  font-weight : 700;
  color       : var(--ct-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ct-emi-donut-total {
  font-size   : 15px;
  font-weight : 800;
  color       : var(--ct-text);
  word-break  : break-word;
  max-width   : 100px;
  text-align  : center;
  line-height : 1.2;
  margin-top  : 2px;
}

/* Legend */
.ct-emi-donut-legend {
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

.ct-emi-legend-item {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
}

.ct-emi-leg-dot {
  width        : 16px;
  height       : 16px;
  border-radius: 4px;
  flex-shrink  : 0;
  margin-top   : 2px;
}

.ct-emi-leg-principal { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ct-emi-leg-interest  { background: linear-gradient(135deg, #f59e0b, #d97706); }

.ct-emi-legend-item strong {
  display   : block;
  font-size : 13px;
  color     : var(--ct-text);
}

.ct-emi-legend-item span {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ct-text);
}

.ct-emi-legend-item small {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-muted);
  margin-left: 4px;
}

/* ===== AMORTIZATION HEADER ===== */
.ct-emi-amort-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  flex-wrap      : wrap;
  gap            : 10px;
}

.ct-emi-amort-toggle {
  display: flex;
  gap    : 4px;
}

.ct-emi-view-btn {
  padding  : 6px 14px !important;
  font-size: 12px !important;
}

.ct-emi-view-active,
.ct-emi-view-active:hover {
  background  : var(--ct-primary) !important;
  color       : #fff !important;
  border-color: var(--ct-primary) !important;
}

/* ===== FORMULA ===== */
.ct-emi-formula {
  margin-top    : var(--ct-sp-lg);
  padding       : 20px 24px;
  background    : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border        : 1px solid rgba(99, 102, 241, .12);
  border-radius : var(--ct-r-md);
  text-align    : center;
}

.ct-emi-formula:empty { display: none; }

.ct-emi-formula-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--ct-text-muted);
  margin-bottom : 8px;
}

.ct-emi-formula-text {
  display       : block;
  font-size     : 17px;
  font-weight   : 800;
  color         : var(--ct-primary);
  font-family   : 'Courier New', monospace;
  word-break    : break-word;
  line-height   : 1.6;
}

.ct-emi-formula-sub {
  display    : block;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 6px;
  word-break : break-word;
}

/* Amortization row highlights */
.ct-emi-row-last {
  background : rgba(16, 185, 129, .06) !important;
}
.ct-emi-row-last td {
  color      : var(--ct-success) !important;
  font-weight: 700 !important;
}

/* Balance progress bar in table */
.ct-emi-bal-bar {
  display       : inline-block;
  height        : 6px;
  border-radius : 3px;
  background    : linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light));
  vertical-align: middle;
  margin-left   : 6px;
  min-width     : 2px;
  max-width     : 80px;
}

/* ===== RESPONSIVE — EMI SPECIFIC ===== */

/* Result values overflow fix */
.ct-tool-section[data-tool="emi"] .ct-result-value {
  font-size     : clamp(16px, 3.5vw, 26px);
  word-break    : break-word;
  overflow-wrap : break-word;
  line-height   : 1.2;
  max-width     : 100%;
  padding       : 0 2px;
}

.ct-tool-section[data-tool="emi"] .ct-result-card {
  min-width : 0;
  overflow  : hidden;
  padding   : var(--ct-sp-md) var(--ct-sp-sm);
}

.ct-tool-section[data-tool="emi"] .ct-detail-val {
  word-break   : break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .ct-tool-section[data-tool="emi"] .ct-result-grid.ct-cols-3 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  .ct-emi-donut-wrap {
    flex-direction: column;
    gap           : 20px;
  }

  .ct-emi-donut {
    width : 150px;
    height: 150px;
  }

  .ct-emi-donut-center {
    width : 90px;
    height: 90px;
  }

  .ct-emi-donut-total {
    font-size: 13px;
  }

  .ct-emi-donut-legend {
    flex-direction: row;
    gap           : 20px;
    flex-wrap     : wrap;
    justify-content: center;
  }

  .ct-emi-tenure-unit {
    width: 95px;
  }

  .ct-tool-section[data-tool="emi"] .ct-detail-item {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
  }

  .ct-tool-section[data-tool="emi"] .ct-detail-val {
    text-align  : left;
    padding-left: 28px;
  }

  .ct-emi-formula-text {
    font-size: 14px;
  }

  .ct-emi-amort-header {
    flex-direction: column;
    align-items   : flex-start;
  }
}

@media (max-width: 480px) {
  .ct-emi-donut {
    width : 130px;
    height: 130px;
  }

  .ct-emi-donut-center {
    width : 78px;
    height: 78px;
  }

  .ct-emi-donut-total {
    font-size : 12px;
    max-width : 70px;
  }

  .ct-emi-donut-label {
    font-size: 9px;
  }

  .ct-emi-formula-text {
    font-size: 12px;
  }

  .ct-emi-bal-bar {
    max-width: 40px;
  }
}