/* ==========================================================
   COMPOUND INTEREST CALCULATOR
   Extracted from calculator-tools.css (lines 3344-3991)
   ========================================================== */
/* ----------------------------------------------------------
   COMPOUND INTEREST CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== STACKED BAR CHART ===== */
.ct-cmp-chart-wrap {
  padding      : var(--ct-sp-lg);
  background   : var(--ct-input-bg);
  border       : 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-cmp-stacked-bar {
  display       : flex;
  width         : 100%;
  height        : 42px;
  border-radius : var(--ct-r-md);
  overflow      : hidden;
  box-shadow    : inset 0 2px 6px rgba(0, 0, 0, .08);
  margin-bottom : 12px;
}

.ct-cmp-bar-principal,
.ct-cmp-bar-contrib,
.ct-cmp-bar-interest {
  height     : 100%;
  min-width  : 0;
  transition : flex-basis 1.2s cubic-bezier(.4, 0, .2, 1);
  position   : relative;
  display    : flex;
  align-items: center;
  justify-content: center;
  font-size  : 11px;
  font-weight: 800;
  color      : #fff;
  white-space: nowrap;
  overflow   : hidden;
}

.ct-cmp-bar-principal {
  background  : linear-gradient(135deg, #6366f1, #4f46e5);
  flex-basis  : 0%;
}

.ct-cmp-bar-contrib {
  background  : linear-gradient(135deg, #3b82f6, #2563eb);
  flex-basis  : 0%;
}

.ct-cmp-bar-interest {
  background  : linear-gradient(135deg, #10b981, #059669);
  flex-basis  : 0%;
}

/* Legend */
.ct-cmp-bar-legend {
  display        : flex;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : 16px;
}

.ct-cmp-legend-item {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
}

.ct-cmp-dot {
  width        : 12px;
  height       : 12px;
  border-radius: 3px;
  flex-shrink  : 0;
}

.ct-cmp-dot-principal { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ct-cmp-dot-contrib   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ct-cmp-dot-interest  { background: linear-gradient(135deg, #10b981, #059669); }

/* ===== COMPOUND VS SIMPLE ADVANTAGE ===== */
.ct-cmp-advantage {
  margin-top    : var(--ct-sp-md);
  padding       : 12px 20px;
  border-radius : var(--ct-r-md);
  text-align    : center;
  font-size     : 15px;
  font-weight   : 700;
}

.ct-cmp-advantage:empty { display: none; }

.ct-cmp-advantage-positive {
  background: rgba(16, 185, 129, .08);
  color     : #059669;
  border    : 1px solid rgba(16, 185, 129, .2);
}

/* ===== FORMULA DISPLAY ===== */
.ct-cmp-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-cmp-formula:empty { display: none; }

.ct-cmp-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-cmp-formula-text {
  display       : block;
  font-size     : 18px;
  font-weight   : 800;
  color         : var(--ct-primary);
  font-family   : 'Courier New', Consolas, monospace;
  letter-spacing: .3px;
  line-height   : 1.6;
  word-break    : break-word;
}

.ct-cmp-formula-sub {
  display    : block;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 8px;
  line-height: 1.6;
}

/* ===== GROWTH BAR in table ===== */
.ct-cmp-mini-bar {
  display       : inline-block;
  height        : 8px;
  border-radius : 4px;
  background    : linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light));
  vertical-align: middle;
  margin-right  : 6px;
  min-width     : 4px;
  max-width     : 100px;
  transition    : width .6s cubic-bezier(.4, 0, .2, 1);
}

/* Highlight start and end rows */
.ct-cmp-row-start {
  background: rgba(99, 102, 241, .04) !important;
}

.ct-cmp-row-end {
  background: rgba(16, 185, 129, .06) !important;
  font-weight: 700;
}

.ct-cmp-row-end td {
  color: var(--ct-success) !important;
  font-weight: 700 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-cmp-stacked-bar {
    height: 34px;
  }

  .ct-cmp-bar-legend {
    gap: 10px;
  }

  .ct-cmp-legend-item {
    font-size: 11px;
  }

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

@media (max-width: 480px) {
  .ct-cmp-stacked-bar {
    height: 28px;
  }

  .ct-cmp-bar-principal,
  .ct-cmp-bar-contrib,
  .ct-cmp-bar-interest {
    font-size: 9px;
  }

  .ct-cmp-bar-legend {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 6px;
  }

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

  .ct-cmp-advantage {
    font-size: 13px;
  }
}
/* ----------------------------------------------------------
   COMPOUND INTEREST — RESPONSIVE OVERFLOW FIX (COMPLETE)
   ---------------------------------------------------------- */

/* ===== RESULT VALUES — PREVENT OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-result-value {
  font-size      : clamp(18px, 4vw, 26px);
  word-break     : break-word;
  overflow-wrap  : break-word;
  hyphens        : auto;
  line-height    : 1.2;
  max-width      : 100%;
  display        : block;
  padding        : 0 4px;
}

/* ===== RESULT CARDS — FLEX SHRINK ===== */
.ct-tool-section[data-tool="compound"] .ct-result-card {
  min-width  : 0;
  overflow   : hidden;
  word-break : break-word;
  padding    : var(--ct-sp-md) var(--ct-sp-sm);
}

/* ===== RESULT GRID — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-3 {
  gap: var(--ct-sp-sm);
}

.ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-2 {
  gap: var(--ct-sp-sm);
}

/* ===== DETAIL LIST — VALUE WRAPPING ===== */
.ct-tool-section[data-tool="compound"] .ct-detail-item {
  flex-wrap : wrap;
  gap       : 4px;
}

.ct-tool-section[data-tool="compound"] .ct-detail-val {
  word-break    : break-word;
  overflow-wrap : break-word;
  max-width     : 100%;
  text-align    : right;
  flex-shrink   : 1;
  min-width     : 0;
}

.ct-tool-section[data-tool="compound"] .ct-detail-key {
  flex-shrink: 0;
  min-width  : 0;
  max-width  : 55%;
}

/* ===== SUMMARY — TEXT WRAP ===== */
.ct-tool-section[data-tool="compound"] .ct-result-summary {
  word-break   : break-word;
  overflow-wrap: break-word;
  hyphens      : auto;
  font-size    : 14px;
  line-height  : 1.6;
}

/* ===== FORMULA — PREVENT OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-formula {
  overflow     : hidden;
  max-width    : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
  word-break   : break-all;
  overflow-wrap: break-word;
  font-size    : clamp(12px, 2.5vw, 18px);
  line-height  : 1.8;
  max-width    : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
  word-break   : break-all;
  overflow-wrap: break-word;
  font-size    : clamp(10px, 2vw, 12px);
  line-height  : 1.8;
}

/* ===== ADVANTAGE BOX — WRAP ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
  word-break   : break-word;
  overflow-wrap: break-word;
  font-size    : clamp(12px, 2.5vw, 15px);
  line-height  : 1.5;
}

/* ===== TABLE — HORIZONTAL SCROLL + COMPACT ===== */
.ct-tool-section[data-tool="compound"] .ct-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-table {
  min-width  : 560px;
  font-size  : 13px;
}

.ct-tool-section[data-tool="compound"] .ct-table th,
.ct-tool-section[data-tool="compound"] .ct-table td {
  padding    : 8px 10px;
  white-space: nowrap;
  font-size  : 12px;
}

.ct-tool-section[data-tool="compound"] .ct-table th {
  font-size  : 11px;
  padding    : 8px 8px;
}

/* ===== STACKED BAR — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
  max-width : 100%;
  overflow  : hidden;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-bar-principal,
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-contrib,
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-interest {
  overflow  : hidden;
  min-width : 0;
  font-size : clamp(8px, 1.8vw, 11px);
}

/* ===== CHART WRAP — OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
  overflow  : hidden;
  max-width : 100%;
}

/* ===== LEGEND — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-legend {
  flex-wrap : wrap;
  gap       : 8px;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-legend-item {
  font-size : clamp(10px, 2vw, 13px);
  min-width : 0;
  word-break: break-word;
}

/* ===== MINI BAR IN TABLE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
  max-width : 60px;
}

/* =============================================================
   BREAKPOINT: ≤ 1199px (Tablet Landscape)
   ============================================================= */
@media (max-width: 1199px) {
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size: clamp(15px, 3vw, 22px);
  }
}

/* =============================================================
   BREAKPOINT: ≤ 768px (Tablet / Small Screens)
   ============================================================= */
@media (max-width: 768px) {
  /* Cards → 1 column for 3-col grids */
  .ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-3 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-2 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  /* Result values — bigger on single column */
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size  : 22px;
    text-align : center;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding   : var(--ct-sp-md);
    text-align: center;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size: 11px;
  }

  /* Detail items → stack vertically */
  .ct-tool-section[data-tool="compound"] .ct-detail-item {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
    padding       : var(--ct-sp-sm) var(--ct-sp-md);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    max-width  : 100%;
    font-size  : 13px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    text-align : left;
    font-size  : 14px;
    max-width  : 100%;
    padding-left: 28px;
  }

  /* Summary */
  .ct-tool-section[data-tool="compound"] .ct-result-summary {
    font-size  : 13px;
    padding    : var(--ct-sp-sm) var(--ct-sp-md);
  }

  /* Formula */
  .ct-tool-section[data-tool="compound"] .ct-cmp-formula {
    padding: 14px 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size  : 13px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
    font-size  : 11px;
  }

  /* Table */
  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 500px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    padding  : 6px 6px;
    font-size: 11px;
  }

  /* Stacked bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
    height: 32px;
  }

  /* Legend → column */
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-legend {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 4px;
  }

  /* Advantage box */
  .ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
    font-size: 13px;
    padding  : 10px 14px;
  }

  /* Mini bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
    max-width: 40px;
  }

  /* Chart wrap */
  .ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
    padding: var(--ct-sp-md);
  }

  /* Compare section */
  .ct-tool-section[data-tool="compound"] .ct-cmp-compare .ct-result-grid.ct-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   BREAKPOINT: ≤ 480px (Small Mobile)
   ============================================================= */
@media (max-width: 480px) {
  /* Result value even smaller */
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size  : 18px;
    letter-spacing: -0.5px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding: 12px 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size     : 10px;
    letter-spacing: .5px;
  }

  /* Detail list — more compact */
  .ct-tool-section[data-tool="compound"] .ct-detail-item {
    padding: 6px var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    font-size: 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    font-size   : 13px;
    padding-left: 24px;
  }

  /* Formula */
  .ct-tool-section[data-tool="compound"] .ct-cmp-formula {
    padding: 10px 8px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size: 11px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
    font-size: 10px;
  }

  /* Summary */
  .ct-tool-section[data-tool="compound"] .ct-result-summary {
    font-size: 12px;
    padding  : 8px 10px;
  }

  /* Stacked bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
    height: 24px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-principal,
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-contrib,
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-interest {
    font-size: 8px;
  }

  /* Legend */
  .ct-tool-section[data-tool="compound"] .ct-cmp-legend-item {
    font-size: 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-dot {
    width : 10px;
    height: 10px;
  }

  /* Table */
  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 450px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    padding  : 5px 4px;
    font-size: 10px;
  }

  /* Advantage */
  .ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
    font-size: 11px;
    padding  : 8px 10px;
  }

  /* Mini bar hidden on very small */
  .ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
    max-width: 30px;
  }

  /* Chart wrap */
  .ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
    padding: 10px;
  }

  /* Detail box */
  .ct-tool-section[data-tool="compound"] .ct-detail-box {
    padding: var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-title {
    font-size: 13px;
  }

  /* Result heading */
  .ct-tool-section[data-tool="compound"] .ct-result-heading {
    font-size: 16px;
  }

  /* Divider text */
  .ct-tool-section[data-tool="compound"] .ct-divider-text {
    font-size: 11px;
  }
}

/* =============================================================
   BREAKPOINT: ≤ 360px (Very Small)
   ============================================================= */
@media (max-width: 360px) {
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size: 15px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding: 10px 8px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size: 9px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    font-size: 11px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    font-size: 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size: 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 400px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    font-size: 9px;
    padding  : 4px 3px;
  }
}