:root { --pad: 12px; --radius: 14px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #f7f7f7; }
.container { max-width: 940px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { margin: 8px 0 12px; }
.muted { color: #555; }
.small { font-size: 0.9rem; }
.card { background: #fff; border: 1px solid #ddd; border-radius: var(--radius); padding: var(--pad); margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.grid input, .grid select { padding: 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem; }

.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.start { justify-content: flex-start; }

.btn { padding: 10px 14px; border-radius: 12px; border: 1px solid #ccc; background: #f4f4f4; cursor: pointer; font-weight: 600; }
.btn.primary { border-color: #2d6cdf; background: #2d6cdf; color: #fff; }
.btn.danger  { border-color: #bf2d2d;  background: #bf2d2d;  color: #fff; }

/* --- Line item layout --- */
.line-grid {
  display: grid;
  gap: 12px;
  /* Size | Qty | Add Name | Unit | Total */
  grid-template-columns: 1.2fr 0.6fr 1.4fr 0.8fr 0.8fr;
  align-items: end;
}
.grid-item-full { grid-column: 1 / -1; }    /* makes the Item row span all columns */
.grid-item { display: flex; flex-direction: column; justify-content: flex-end; }

.line-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

/* Controls fill their grid cells and look consistent */
.line-grid input,
.line-grid select {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1.1rem;
}

/* --- ADD NAME STYLES (Consolidated & Updated) --- */
.nameWrap {
  padding-bottom: 0; /* Adjusted padding */
}

/* The bordered box containing the toggle and input */
.name-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #ccc; /* The border to match other inputs */
  border-radius: 10px;
  padding: 4px 12px;
  margin-top: 6px; /* Space from the label text */
}

/* The text input field for the name */
.name-input-group .nameInput {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 1.1rem;
  background: transparent;
}

/* The label for the toggle switch itself */
.cb-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
}

/* The actual checkbox element (hidden) */
.addNameCb {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visual track of the toggle switch */
.toggle-switch {
  height: 22px;
  width: 40px;
  background-color: #ccc;
  border-radius: 11px;
  display: inline-block;
  position: relative;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

/* The circle/thumb of the toggle switch */
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

/* Style for when the switch is ON */
.addNameCb:checked + .toggle-switch {
  background-color: #007bff;
}

.addNameCb:checked + .toggle-switch::after {
  transform: translateX(18px);
}
/* --- END OF ADD NAME STYLES --- */

/* Price fields */
.line-grid .unitPrice,
.line-grid .lineTotal { text-align: right; }

/* Item link under the selector */
.item-preview { padding-top: 8px; font-size: 0.9rem; }

/* Name/Title personalization */
.name-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.name-fields .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 700px) {
  .name-fields { grid-template-columns: 1fr; }
}

/* Small utilities that match your existing theme */
.small { font-size: 0.9rem; }
.muted { color: var(--muted, #666); }

/* Lookup table polish */
#lookupResult table th,
#lookupResult table td { border: 1px solid #ddd; padding: 8px; }
#lookupResult table th { background: #f6f7f8; text-align: left; }

.hidden { display: none; }
.total-bar { padding: 10px 0; }
.total-bar.grand { font-size: 1.2rem; border-top: 1px dashed #ddd; }

/* Mobile */
@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .line-grid { grid-template-columns: 1fr; }
}