/* Card wrapper to blend with Woo checkout panel */
.wc-budget-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin: 12px 0 24px;
}

/* Table look similar to WC form tables */
.wc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.wc-table th,
.wc-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.wc-table thead th {
  font-weight: 600;
  color: #222;
  background: #fafafa;
  border-bottom: 1px solid #e6e6e6;
}

/* Inputs/selects harmonized with Woo fields */
.wc-table select,
.wc-table input[type="number"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  line-height: 1.2;
}

.wc-table .calc-sub,
.wc-grand {
  text-align: right;
  font-weight: 600;
}

.wc-grand-label {
  text-align: right;
  font-weight: 600;
}

.wc-action {
  cursor: pointer;
  color: #0073aa;
  user-select: none;
}
.wc-action:hover {
  text-decoration: underline;
}

/* --- existing styles above --- */

/* Make form elements behave well in tight spaces */
.wc-table select,
.wc-table input[type="number"] {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Buttons align better on small widths */
.wc-action {
  white-space: nowrap;
}

/* ======= Responsive: stack rows as cards ======= */
@media (max-width: 768px) {
  .wc-table {
    border: 0;
  }
  .wc-table thead {
    /* hide header row on mobile; labels come from data-label */
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
  }
  .wc-table tbody,
  .wc-table tfoot,
  .wc-table tr,
  .wc-table td,
  .wc-table th {
    display: block;
    width: 100%;
  }

  /* Each table row becomes a card */
  .wc-table tbody tr.wc-row {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 10px 0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  /* Each cell: label on left, control/value on right */
  .wc-table tbody td {
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .wc-table tbody td:last-child {
    border-bottom: 0;
  }

  /* The label pulled from data-label */
  .wc-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #444;
    flex: 0 0 42%;
    max-width: 46%;
  }

  /* Control/value side */
  .wc-table tbody td > * {
    flex: 1 1 58%;
    max-width: 58%;
  }

  /* Subtotal should align right like money */
  .wc-table tbody td.calc-sub {
    justify-content: space-between;
    font-weight: 600;
  }

  /* Footer: actions + grand total grid */
  .wc-table tfoot tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    align-items: center;
    padding-top: 6px;
  }
  #wc-add-row,
  #wc-export {
    grid-column: span 1;
    padding: 12px 6px;
  }
  .wc-grand-label,
  #wc-grand-total {
    grid-column: span 1;
    text-align: right;
    padding: 12px 6px;
  }

  /* Make the card wrapper breathe on mobile */
  .wc-budget-card {
    padding: 12px;
    border-radius: 8px;
  }
}

/* Slightly tighter layout for very small phones */
@media (max-width: 420px) {
  .wc-table tbody td::before {
    flex-basis: 48%;
    max-width: 52%;
  }
  .wc-table tbody td > * {
    flex-basis: 52%;
    max-width: 52%;
  }
}