/* v1.6.8 — Appearance only, tuned to match the provided screenshot.
   - White card background
   - Soft gray table headers
   - Pill buttons: Add (black), Reset (gray), Email (teal/green)
   - Tabs: pill style; active = black/white
   - Summary chips: light gray boxes
*/
.mccpp-note {padding-top:12px !important;}
.mccpp { --mccpp-accent:#111827; --mccpp-gray:#6b7280; --mccpp-green:#0ea5a9; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.mccpp-title { margin: 0 0 6px; color:#111827; font-size: 24px; font-weight: 800; display:none; }

.mccpp-brand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.mccpp-logo { height:34px; width:auto; object-fit:contain; }

.mccpp-modes label { margin-right:16px; font-weight:700; color:#111827; }
.mccpp-controls { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin:12px 0 0; }
.mccpp-flex { display:flex; align-items:center; gap:8px; }

.mccpp-control { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px; }
.mccpp-control input { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.mccpp-control input:focus { outline: none; border-color:#cfd4dc; box-shadow: 0 0 0 2px rgba(17,24,39,.06); }

.mccpp-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.mccpp-table th { background:#f9fafb; text-align:left; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb; padding:12px 12px; }
.mccpp-table td { border-bottom:1px solid #f3f4f6; padding:10px 12px; vertical-align:middle; }
.mccpp-table tr:last-child td { border-bottom:none; }
.mccpp-table input { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.mccpp-table .mccpp-pay { font-weight:600; color:#111827; }

.mccpp-total-row { background:#f9fafb; font-weight:600; }
.mccpp-total-label { color:#374151; }

/* Action buttons */
.mccpp-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 6px; }
.mccpp-actions button { appearance:none; border-radius:35px; padding:10px 14px; font-weight:500; cursor:pointer; }
.mccpp-add { background:#111827; color:#fff; border:1px solid #111827; }
.mccpp-add:hover { filter:brightness(0.95); }
.mccpp-reset { background:#6b7280; color:#fff; border:1px solid #6b7280; }
.mccpp-reset:hover { filter:brightness(0.96); }
.mccpp-email-btn, .mccpp-email-send { background:#0ea5a9; color:#fff; border:1px solid #0ea5a9; }
.mccpp-email-btn:hover, .mccpp-email-send:hover { filter:brightness(0.97); }

/* Remove button (danger) */
.mccpp-del { background:#ef4444; color:#fff; border:1px solid #ef4444; border-radius:35px; padding:8px 12px; font-weight:500; cursor:pointer; }
.mccpp-del:hover { filter:brightness(0.96); }

/* Tabs */
.mccpp-tabs { display:flex; gap:8px; margin-top:10px; }
.mccpp-tab { border:1px solid #111827; background:#fff; padding:8px 14px; border-radius:35px; cursor:pointer; color:#111827; font-weight:500; }
.mccpp-tab:hover { border-color:#111827; }
.mccpp-tab.active { background:#111827; color:#fff; border-color:#111827; }

/* Panels */
.mccpp-panel { display:none; border:1px solid #e5e7eb; background:#fff; padding:14px; border-radius:10px; margin-top:10px; }
.mccpp-panel.active { display:block; }

/* Summary chips */
.mccpp-summary { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px; }
.mccpp-summary > div { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-weight:500; color:#111827; }
.mccpp-summary strong { margin-right:6px; }

/* Mini tables */
.mccpp-mini { width:100%; border-collapse:separate; border-spacing:0; }
.mccpp-mini th { text-align:left; background:#f9fafb; border-bottom:1px solid #e5e7eb; padding:10px 12px; font-weight:600; color:#374151; }
.mccpp-mini td { border-bottom:1px solid #f3f4f6; padding:10px 12px; }
.mccpp-mini tr:last-child td { border-bottom:none; }

/* Email area */
.mccpp-email { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin-top:8px; }
.mccpp-email-fields { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:center; }
.mccpp-email-fields input[type="text"], .mccpp-email-fields input[type="email"] { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.mccpp-email-fields .mccpp-email-send { padding:10px 16px;border-radius:35px; }

/* Disclaimer */
.mccpp-disclaimer { font-size:12px; color:#6b7280; margin-top:10px; }

@media (max-width: 720px){
  .mccpp-controls { grid-template-columns: 1fr; }
  .mccpp-email-fields { grid-template-columns: 1fr; }
}
#mccpp-months {
  max-width:150px;
}
.mccpp-schedule-btn {
  border-radius:35px;
}

  /* All header cells stick to the top */
  .mccpp .mccpp-schedule .mccpp-mini thead th {
    position: sticky;
    top: 0;
    z-index: 3;                /* month headers */
    background: #f9fafb;       /* header bg */
  }

  /* First column (header + body) sticks to the left */
  .mccpp .mccpp-schedule .mccpp-mini thead th:first-child,
  .mccpp .mccpp-schedule .mccpp-mini tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;          /* body cell bg */
    z-index: 4;                /* above month headers */
    box-shadow: 2px 0 0 #e5e7eb inset; /* vertical divider */
  }

  /* Top-left cell ("Card / Month") needs to be above everything */
  .mccpp .mccpp-schedule .mccpp-mini thead th:first-child {
    top: 0;
    background: #f9fafb;       /* match header row bg */
    z-index: 6;                /* highest to prevent overlap */
  }








/* --- Mobile stacking for top controls + mode toggles --- */
@media (max-width: 640px) {
  /* Stack the mode options (Target Months / Monthly Budget) */
  .mccpp .mccpp-modes {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
  }
  .mccpp .mccpp-modes label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  /* Stack the two top controls (Months / Budget) */
  .mccpp .mccpp-controls {
    /* If it was grid, collapse to 1 col; if flex, force column */
    grid-template-columns: 1fr !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mccpp .mccpp-control {
    width: 100%;
    flex: 1 1 100%;
  }
  .mccpp .mccpp-control .mccpp-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Make the inputs fill the row nicely */
  .mccpp #mccpp-months,
  .mccpp #mccpp-budget {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }


    #mccpp-months {
    width:40% !important;
  }
  .entry-content table {
    word-break:inherit !important;
}

  .mccpp-table {
    margin-top:10px !important;
  }

  .mccpp-del {
    padding:0px 0px 4px 0px !important;
  }



}




/* ===== Mobile card-row layout ===== */
@media (max-width: 640px) {
  /* Hide table header on phones */
  .mccpp .mccpp-table thead { display: none !important; }

  /* Make the body rows render as cards using a 2-col grid */
  .mccpp .mccpp-table tbody { display: block; }
  .mccpp .mccpp-table tr.mccpp-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two columns on mobile */
    gap: 12px;
    padding: 8px 0;
    margin: 8px 0;
  }

  /* Cells become vertical stacks: label (via ::before) + control/value */
  .mccpp .mccpp-table tr.mccpp-row > td {
    display: flex;
    flex-direction: column;
  }
  .mccpp .mccpp-table tr.mccpp-row > td::before {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #6b7280; /* neutral label; matches existing tone */
    margin-bottom: 4px;
    content: ""; /* default, overridden below per column */
  }

  /* Label text per column */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(1)::before { content: "Card Nickname"; }
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(2)::before { content: "Balance"; }
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(3)::before { content: "APR (%)"; }
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(4)::before { content: "Minimum Payment"; }
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(5)::before { content: "Current Monthly Payment"; }
  /* sixth cell is the remove button—no label */

  /* Place cells into the grid:
     Row 1: Card Nickname | Balance
     Row 2: APR (%)       | Minimum Payment
     Row 3: Current Monthly Payment (full width)
     Row 4: Remove button (full width)
  */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(1) { grid-column: 1; }          /* name */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(2) { grid-column: 2; }          /* balance */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(3) { grid-column: 1; }          /* apr */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(4) { grid-column: 2; }          /* min */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(5) { grid-column: 1 / -1; }     /* current pay */
  .mccpp .mccpp-table tr.mccpp-row > td:nth-child(6) { grid-column: 1 / -1; }     /* remove btn */

  /* Make inputs fill nicely on mobile */
  .mccpp .mccpp-row input[type="text"],
  .mccpp .mccpp-row input[type="number"],
  .mccpp #mccpp-rows .mccpp-money,
  .mccpp #mccpp-rows .mccpp-pay {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Full-width Remove button */
  .mccpp .mccpp-row .mccpp-del {
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }

  /* Keep table footer normal; no change needed */

  /* --- Mobile: stack Total monthly (current) label and amount --- */
@media (max-width: 640px) {
  .mccpp .mccpp-table tfoot { display: block; }
  .mccpp .mccpp-table tfoot .mccpp-total-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
  }
  .mccpp .mccpp-table tfoot .mccpp-total-row .mccpp-total-label {
    grid-column: 1 / -1;
  }
  .mccpp .mccpp-table tfoot .mccpp-total-row #mccpp-total {
    grid-column: 1 / -1;         /* put amount on its own line */
    white-space: nowrap;          /* keep $2,345.67 on one line */
    word-break: normal;
    overflow-wrap: normal;
    font-weight: 600;
    /* text-align: right; */      /* ← uncomment if you prefer right-aligned */
  }
  /* Hide the trailing empty cell in the footer row */
  .mccpp .mccpp-table tfoot .mccpp-total-row td:last-child { display: none; }
}

/* ===== Mobile: Month-By-Month table readability ===== */
@media (max-width: 640px) {
  /* Make the schedule area horizontally scrollable */
  .mccpp .mccpp-schedule {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the table size to its content instead of shrinking to the viewport */
  .mccpp .mccpp-schedule .mccpp-mini {
    table-layout: auto !important;
    width: max-content;           /* grow as needed; enables horizontal scroll */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Keep numbers/headers on one line; tighten padding + font size a bit */
  .mccpp .mccpp-schedule .mccpp-mini th,
  .mccpp .mccpp-schedule .mccpp-mini td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding: 6px 10px;
    font-size: 12px;              /* smaller text for narrow screens */
  }

  /* Give columns a sensible minimum so $ amounts don’t crush */
  .mccpp .mccpp-schedule .mccpp-mini th:not(:first-child),
  .mccpp .mccpp-schedule .mccpp-mini td:not(:first-child) {
    min-width: 9ch;               /* ~width for '$1,234.56' */
  }

  /* First column (card name) a bit wider; optional sticky for easier reading */
  .mccpp .mccpp-schedule .mccpp-mini th:first-child,
  .mccpp .mccpp-schedule .mccpp-mini td:first-child {
    min-width: 14ch;
    background: #fff;
    position: sticky;             /* comment these 2 lines out if you dislike sticky */
    left: 0;
    z-index: 1;
  }

  /* Optional: keep the header visible while scrolling */
  .mccpp .mccpp-schedule .mccpp-mini thead th {
    position: sticky; top: 0; z-index: 2;
    background: #f9fafb;
  }
}

/* --- Mobile: keep "Card / Month" visible while scrolling --- */
@media (max-width: 640px) {
  /* All header cells stick to the top */
  .mccpp .mccpp-schedule .mccpp-mini thead th {
    position: sticky;
    top: 0;
    z-index: 3;                /* month headers */
    background: #f9fafb;       /* header bg */
  }

  /* First column (header + body) sticks to the left */
  .mccpp .mccpp-schedule .mccpp-mini thead th:first-child,
  .mccpp .mccpp-schedule .mccpp-mini tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;          /* body cell bg */
    z-index: 4;                /* above month headers */
    box-shadow: 2px 0 0 #e5e7eb inset; /* vertical divider */
  }

  /* Top-left cell ("Card / Month") needs to be above everything */
  .mccpp .mccpp-schedule .mccpp-mini thead th:first-child {
    top: 0;
    background: #f9fafb;       /* match header row bg */
    z-index: 6;                /* highest to prevent overlap */
  }
}


}