/*!
 * Debt Snowball Calculator – Core styles (neutral)
 * Scope: .dsc-wrap
 * Notes:
 *  - Neutral palette via CSS variables.
 *  - Keep structure/spacing here; keep colors minimal/brand-agnostic.
 *  - Do not override global theme classes.
 */

.dsc-preview-table .dsc-download { display: none; }
.dsc-preview-table.dl-ready .dsc-download { display: block; }

.dsc-wrap {
  /* Neutral design tokens (override in brand CSS) */
  --dsc-bg: #ffffff;
  --dsc-text: #0f172a;           /* slate-900 */
  --dsc-subtle: #64748b;         /* slate-500 */
  --dsc-border: #d1d5db;         /* gray-300 */

  --dsc-row-bg: #f8fafc;         /* slate-50 */
  --dsc-row-alt: #f1f5f9;        /* slate-100 */
  --dsc-row-hover: #e2e8f0;      /* slate-200 */

  --dsc-input-bg: #ffffff;
  --dsc-input-text: #0f172a;

  --dsc-btn-bg: #111827;         /* neutral button bg */
  --dsc-btn-text: #ffffff;

  --dsc-accent: #2563eb;         /* focus ring, links */
  --dsc-danger: #dc2626;         /* delete hover */

  --dsc-radius: 8px;
  --dsc-radius-sm: 6px;
  --dsc-gap: 8px;
  --dsc-pad: 10px;
  --dsc-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: var(--dsc-text);
  background: var(--dsc-bg);
  font-family: var(--dsc-font);
  line-height: 1.45;
}

/* Headings inside the widget inherit brand fonts from theme; keep spacing subtle */
.dsc-wrap h3,
.dsc-wrap h4 { margin: 0.25rem 0 0.5rem; }

.dsc-wrap .dsc-rows { margin-top: 0.5rem; }

.dsc-wrap .dsc-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 40px; /* name, balance, rate, min, del */
  gap: var(--dsc-gap);
  padding: var(--dsc-pad) calc(var(--dsc-pad) + 2px);
  border-bottom: 1px solid var(--dsc-border);
  background: var(--dsc-row-bg);
  align-items: center;
}

.dsc-wrap .dsc-row:nth-child(even) { background: var(--dsc-row-alt); }
.dsc-wrap .dsc-row:hover { background: var(--dsc-row-hover); }

.dsc-wrap input[type="text"],
.dsc-wrap input[type="number"],
.dsc-wrap input[type="email"],
.dsc-wrap select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dsc-border);
  border-radius: var(--dsc-radius-sm);
  background: var(--dsc-input-bg);
  color: var(--dsc-input-text);
  line-height: 1.2;
  font: inherit;
}

.dsc-wrap input:focus,
.dsc-wrap select:focus,
.dsc-wrap button:focus {
  outline: 2px solid var(--dsc-accent);
  outline-offset: 2px;
}

.dsc-wrap .dsc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin: 14px 0 8px;
}

.dsc-wrap .dsc-controls > label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--dsc-subtle);
}

/* Buttons used by the widget (do not style global .btn classes) */
.dsc-wrap button {
  border-radius: var(--dsc-radius);
  padding: 8px 12px;
  border: 1px solid var(--dsc-border);
  background: var(--dsc-btn-bg);
  color: var(--dsc-btn-text);
  cursor: pointer;
  font: inherit;
}

/*-------------------------------------------------------------------*/
/* Add,Download,Send buttons                                         */
/*-------------------------------------------------------------------*/
.dsc-wrap .dsc-add, 
.dsc-wrap .dsc-download-csv{
  background: #28a745;      /* Green */
}
.dsc-wrap .dsc-add:hover,
.dsc-wrap .dsc-download-csv:hover{ 
  background: #218838;     /* Darker Green on hover */
}


/*-------------------------------------------------------------------*/
/* Calculate button                                                     */
/*-------------------------------------------------------------------*/
.dsc-wrap .dsc-preview,
.dsc-wrap .dsc-submit{
  background: #0d6efd;     /* Bootstrap blue */
}
.dsc-wrap .dsc-preview:hover,
.dsc-wrap .dsc-submit:hover{ 
  background: #0262ef;     /* Darker blue on hover */
}


/*-------------------------------------------------------------------*/
/* Delete button                                                     */
/*-------------------------------------------------------------------*/
.dsc-wrap .dsc-del {
  background: #d9534f;     /* Bootstrap red */
  color: #fff;             /* White text */
  border-radius: 50%;      /* Circle */
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-weight: 800;
  border: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 0;
}
.dsc-wrap .dsc-del::before { 
  content: "\2715"; 
  font-weight: 700; 
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dsc-wrap .dsc-del:hover { 
  background: #c9302c;     /* Darker red on hover */
}




/* Preview table shell */
.dsc-wrap .dsc-preview-table {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--dsc-border);
  border-radius: 10px;
  background: #fcfcff;
}
.dsc-wrap .dsc-preview-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dsc-wrap .dsc-preview-table th,
.dsc-wrap .dsc-preview-table td {
  border-bottom: 1px solid var(--dsc-border);
  padding: 8px 10px;
  text-align: left;
}

/* Keep the preview box from overflowing on narrow widths */
.dsc-wrap .dsc-preview-table {
  display: block;          /* so overflow works on the box itself */
  max-width: 100%;
  overflow-x: auto;        /* enable horizontal scroll if needed */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  border-radius: 10px;     /* keep your rounded box intact */
}

/* Prevent the table from forcing the box wider than the viewport */
.dsc-wrap .dsc-preview-table table {
  width: 100%;
  min-width: 560px;        /* ensure columns stay readable; adjust as you like */
  table-layout: fixed;     /* keeps column widths stable */
}

/* Nice numbers without wrapping; use scroll instead of overflow */
.dsc-wrap .dsc-preview-table th,
.dsc-wrap .dsc-preview-table td {
  white-space: nowrap;
}



/* Email dialog */
.dsc-wrap .dsc-gate {
  border: 1px solid var(--dsc-border);
  border-radius: 10px;
  padding: 16px;
}

/* Consent checkbox line */
.dsc-wrap .dsc-consent {
  display: flex;             /* let the box + text sit side by side */
  align-items: center;
  margin: 0.75rem 0;         /* adds top and bottom spacing */
}

/* Make sure the label text lines up with the input above */
.dsc-wrap .dsc-consent input[type="checkbox"] {
  margin-right: 0.5rem;      /* small gap between box and text */
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .dsc-wrap .dsc-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .dsc-wrap .dsc-del { grid-column: 2; justify-self: end; }
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce) {
  .dsc-wrap * { transition: none !important; }
}

/* Make the calculating icon spin */
.dsc-wrap .dsc-spin {
  display: inline-block;
  animation: dsc-spin 1s linear infinite;
}

@keyframes dsc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}