/* =========================================================
   Tynkr Kinetic theme — Cost Per Serving Calculator styles
   ========================================================= */
@import url("../kinetic.css");

/* Ledger Container & Grid */
.ledger-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.1fr 1fr 1.1fr 1.2fr 48px;
  gap: 12px;
  padding: 0 8px 12px;
  border-bottom: 2px solid var(--line-2);
  margin-bottom: 16px;
  align-items: center;
}

.ledger-header span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.ledger-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.1fr 1fr 1.1fr 1.2fr 48px;
  gap: 12px;
  align-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-s);
  padding: 12px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.ledger-row:focus-within {
  border-color: var(--accent);
}

.ledger-row .form-input {
  padding: 9px 12px;
  font-size: 13.5px;
}

.delete-row-btn {
  width: 38px;
  height: 38px;
  border: 2px solid var(--line-2);
  background: var(--surface);
  color: var(--neg);
  border-radius: var(--r-s);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}

.delete-row-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
  background: var(--surface-2);
}

.add-row-btn-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

/* Currency input wrapper */
.currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.currency-input-wrapper::before {
  content: "$";
  position: absolute;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}

.currency-input-wrapper input {
  padding-left: 24px !important;
}

/* Summary breakdown details */
.item-breakdown-details {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.item-breakdown-details b {
  color: var(--ink);
}

/* Mobile responsiveness */
@media (max-width: 900px) {
  .ledger-header {
    display: none;
  }
  
  .ledger-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }

  .ledger-row > div:nth-child(1) {
    grid-column: span 2;
  }
  
  .ledger-row > div:nth-child(2),
  .ledger-row > div:nth-child(3) {
    grid-column: span 1;
  }

  .ledger-row > div:nth-child(4),
  .ledger-row > div:nth-child(5) {
    grid-column: span 1;
  }
  
  .ledger-row > div:nth-child(6) {
    grid-column: span 1;
  }
  
  .ledger-row > div:nth-child(7) {
    grid-column: span 1;
    justify-self: end;
  }
}