/* ═══════════════════════════════════════════════════════════════════
   CLIENT PORTAL DSTRC — Mutual Settlement CSS  v1.6.2
═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */
.cp-mutual-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Page header ───────────────────────────────────────────────── */
.cp-mutual-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.cp-mutual-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--cp-text, #0f172a);
}
.cp-mutual-subtitle {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--cp-muted, #64748b);
}

/* ── Summary cards ─────────────────────────────────────────────── */
.cp-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.cp-summary-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 26px;
  border-left: 5px solid transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .15s;
}
.cp-summary-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: translateY(-1px); }
.cp-summary-card--blue  { border-left-color: #2563eb; }
.cp-summary-card--red   { border-left-color: #dc2626; }
.cp-summary-card--green { border-left-color: #16a34a; }
.cp-summary-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
  margin-bottom: 10px;
}
.cp-summary-card__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.cp-summary-card--blue  .cp-summary-card__value { color: #2563eb; }
.cp-summary-card--red   .cp-summary-card__value { color: #dc2626; }
.cp-summary-card--green .cp-summary-card__value { color: #16a34a; }

/* ── Period card ───────────────────────────────────────────────── */
.cp-mutual-period-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .2s;
}
.cp-mutual-period-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
}

.cp-mutual-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 26px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
.cp-mutual-period-header__left  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-mutual-period-header__right { display: flex; align-items: center; gap: 12px; }

.cp-mutual-month-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.cp-mutual-period-title { font-size: 15px; font-weight: 600; color: #1e293b; }
.cp-mutual-period-desc  { font-size: 12px; color: #64748b; font-style: italic; }

.cp-mutual-total-badge {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1e40af;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.cp-mutual-total-badge--negative {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.cp-mutual-toggle-btn {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.cp-mutual-toggle-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

/* ── Quick summary row ─────────────────────────────────────────── */
.cp-mutual-quick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 26px;
  flex-wrap: wrap;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
.cp-mutual-quick-divider {
  font-size: 22px;
  font-weight: 300;
  color: #cbd5e1;
  padding: 0 4px;
}
.cp-mutual-quick-item { text-align: center; min-width: 100px; padding: 6px 8px; }
.cp-mutual-quick-item--plus  .cp-mutual-quick-value { color: #16a34a; }
.cp-mutual-quick-item--minus .cp-mutual-quick-value { color: #dc2626; }
.cp-mutual-quick-item--total .cp-mutual-quick-value { color: #2563eb; font-size: 20px; font-weight: 800; }
.cp-mutual-quick-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 600;
}
.cp-mutual-quick-value { display: block; font-size: 16px; font-weight: 700; }

/* ── Detail section (accordion body) ──────────────────────────── */
.cp-mutual-detail {
  padding: 24px 26px;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
}
.cp-mutual-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.cp-mutual-detail-col-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 7px 13px;
  border-radius: 7px;
  margin-bottom: 12px;
}
.cp-mutual-detail-col-header--plus  { background: #f0fdf4; color: #166534; }
.cp-mutual-detail-col-header--minus { background: #fef2f2; color: #991b1b; }

.cp-mutual-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.cp-mutual-detail-table th {
  background: #f8fafc;
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}
.cp-mutual-detail-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: #334155;
}
.cp-mutual-detail-table tfoot td {
  background: #f8fafc;
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
}
.cp-muted-text { font-size: 11px; color: #94a3b8; }

.cp-mutual-period-final {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 16px 0 0;
  border-top: 1.5px solid #e2e8f0;
  font-size: 14px;
  color: #64748b;
  flex-wrap: wrap;
}

/* ── Live calculation cards (v1.6.2) ─────────────────────── */
.cp-summary-card__hint {
  margin-top:8px;
  color:#64748b;
  font-size:11px;
  line-height:1.4;
}
.cp-mutual-current-formula,
.cp-mutual-current-missing {
  grid-column:1 / -1;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f8fbff;
  padding:16px 18px;
}
.cp-mutual-current-formula__title {
  margin-bottom:12px;
  color:#334155;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.cp-mutual-current-formula__row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.cp-mutual-formula-value {
  min-width:122px;
  padding:9px 11px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
}
.cp-mutual-formula-value small {
  display:block;
  margin-bottom:4px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase;
}
.cp-mutual-formula-value strong {
  display:block;
  color:#0f172a;
  font-size:15px;
  white-space:nowrap;
}
.cp-mutual-formula-value.is-debt strong {
  color:#1d4ed8;
}
.cp-mutual-formula-value.is-accrual strong {
  color:#15803d;
}
.cp-mutual-formula-value.is-credit strong,
.cp-mutual-formula-value.is-total.is-negative strong {
  color:#b91c1c;
}
.cp-mutual-formula-value.is-total {
  border-color:#bfdbfe;
  background:#eff6ff;
}
.cp-mutual-formula-value.is-total strong {
  color:#1d4ed8;
  font-size:17px;
}
.cp-mutual-formula-operator {
  color:#64748b;
  font-size:22px;
  font-weight:700;
}
.cp-mutual-current-missing {
  border-color:#fde68a;
  background:#fffbeb;
  color:#92400e;
  font-size:13px;
  line-height:1.55;
}
.cp-mutual-live-state {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px 14px;
  flex-wrap:wrap;
  padding:10px 14px;
  border:1px solid #bbf7d0;
  border-radius:10px;
  background:#f0fdf4;
  color:#166534;
  font-size:12px;
  line-height:1.5;
}
.cp-mutual-live-state.is-stale {
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
.cp-mutual-live-dot {
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.13);
}
.cp-mutual-live-state.is-stale .cp-mutual-live-dot {
  background:#f97316;
  box-shadow:0 0 0 4px rgba(249,115,22,.13);
}
.cp-mutual-live-time,
.cp-mutual-live-mode {
  color:#475569;
}
.cp-mutual-period-card.is-current {
  border-color:#93c5fd;
  box-shadow:0 0 0 2px rgba(37,99,235,.08), 0 2px 12px rgba(0,0,0,.06);
}
.cp-mutual-period-card.is-future {
  opacity:.86;
}
.cp-mutual-period-state {
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid #93c5fd;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
}
.cp-mutual-period-state.is-future {
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#64748b;
}
.cp-mutual-period-state.is-auto {
  border-color:#ddd6fe;
  background:#f5f3ff;
  color:#6d28d9;
}
.cp-mutual-period-state.is-base {
  border-color:#fde68a;
  background:#fffbeb;
  color:#92400e;
}
.cp-mutual-quick-item--carry-debt .cp-mutual-quick-value {
  color:#1d4ed8;
}
.cp-mutual-quick-item--carry-credit .cp-mutual-quick-value {
  color:#b91c1c;
}
.cp-mutual-quick-item--total.is-negative .cp-mutual-quick-value {
  color:#dc2626;
}
.cp-mutual-carry-notice {
  margin:0 0 18px;
  padding:10px 13px;
  border:1px solid #bfdbfe;
  border-radius:9px;
  background:#eff6ff;
  color:#1e40af;
  font-size:12px;
  line-height:1.5;
}
.cp-mutual-carry-notice.is-overpayment {
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}
.cp-mutual-no-entries,
.cp-mutual-empty {
  padding:34px 24px;
  text-align:center;
  color:#94a3b8;
}
.cp-text-right {
  text-align:right !important;
}
.cp-money-plus {
  color:#15803d !important;
  font-weight:700;
}
.cp-money-minus {
  color:#b91c1c !important;
  font-weight:700;
}
.cp-money-carry-debt {
  color:#1d4ed8;
  font-weight:700;
}
.cp-money-carry-credit {
  color:#b91c1c;
  font-weight:700;
}
.cp-mutual-equation-sign {
  margin:0 4px;
  color:#94a3b8;
}
.cp-mutual-period-final strong {
  color:#2563eb;
  font-size:18px;
}
.cp-mutual-period-final strong.is-negative {
  color:#dc2626;
}

@media (max-width: 782px) {
  .cp-summary-cards {
    grid-template-columns:1fr;
  }
  .cp-mutual-period-header,
  .cp-mutual-quick-row,
  .cp-mutual-detail {
    padding-left:16px;
    padding-right:16px;
  }
  .cp-mutual-period-header__right {
    width:100%;
    justify-content:space-between;
  }
  .cp-mutual-detail-grid {
    grid-template-columns:1fr;
  }
  .cp-mutual-detail-table {
    display:block;
    overflow-x:auto;
  }
  .cp-mutual-period-final {
    justify-content:flex-start;
  }
  .cp-mutual-current-formula__row {
    align-items:stretch;
    flex-direction:column;
  }
  .cp-mutual-formula-value {
    width:100%;
    box-sizing:border-box;
  }
  .cp-mutual-formula-operator {
    align-self:center;
    line-height:1;
  }
}