/* ==========================================================================
   OrbisX — Invoices
   ========================================================================== */

/* ── List page ────────────────────────────────────────────────────────── */

.inv-list-table {
  display: flex;
  flex-direction: column;
}
.inv-list-row {
  display: grid;
  grid-template-columns: 110px 1fr 120px 120px 110px 90px;
  gap: var(--space-3);
  align-items: center;
  padding: 12px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-list-row:hover { background: var(--color-sidebar-hover); }
.inv-list-row:last-child { border-bottom: none; }
.inv-list-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 4px;
  cursor: default;
}
.inv-list-head:hover { background: transparent; }
.inv-list-number {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-list-amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .inv-list-row { grid-template-columns: 1fr 90px; gap: 4px; }
  .inv-list-head { display: none; }
  .inv-list-row > span:nth-child(3),
  .inv-list-row > span:nth-child(4) { display: none; }
  .inv-list-row {
    grid-template-areas:
      "number   status"
      "client   client"
      "amount   amount";
    grid-template-columns: 1fr auto;
  }
  .inv-list-row > span:nth-child(1) { grid-area: number; }
  .inv-list-row > span:nth-child(2) { grid-area: client; }
  .inv-list-row > span:nth-child(5) { grid-area: amount; }
  .inv-list-row > span:nth-child(6) { grid-area: status; justify-self: end; }
}

/* ── Editor layout ────────────────────────────────────────────────────── */

.inv-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.inv-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--color-bg-secondary);
  z-index: 3;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
  padding: var(--space-4) var(--space-6);
}
.inv-editor-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.inv-editor-title h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-text-primary);
}
.inv-editor-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: var(--text-sm);
}
.inv-back {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}
.inv-back:hover { border-color: var(--color-brand-emerald); color: var(--color-brand-emerald); }

.inv-editor-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ── Actions dropdown ─────────────────────────────────────────────────── */

.inv-actions-dropdown { position: relative; }
.inv-actions-dropdown .btn {
  gap: 6px;
}
.inv-actions-chev {
  transition: transform var(--duration-fast) var(--ease-default);
  opacity: 0.7;
}
.inv-actions-dropdown.open .inv-actions-chev { transform: rotate(180deg); }

.inv-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 30;
  animation: slideUp 150ms var(--ease-default);
}
.inv-actions-dropdown.open .inv-actions-menu { display: block; }

.inv-actions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-actions-item:hover { background: var(--color-sidebar-hover); color: var(--color-text-primary); }
.inv-actions-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-actions-item:disabled:hover { background: transparent; }
.inv-actions-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.inv-actions-item:hover svg { color: var(--color-brand-emerald); }

.inv-actions-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: 4px 6px;
}

.inv-actions-danger { color: var(--color-danger); }
.inv-actions-danger svg { color: var(--color-danger); }
.inv-actions-danger:hover { background: var(--color-danger-light); color: var(--color-danger); }
.inv-actions-danger:hover svg { color: var(--color-danger); }

.inv-btn-danger {
  background: var(--color-danger) !important;
  color: #fff;
}
.inv-btn-danger:hover {
  background: var(--color-danger-dark) !important;
}

.inv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}
.inv-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.inv-side { position: sticky; top: calc(var(--topbar-height) + 72px); }

/* ── Sections ────────────────────────────────────────────────────────── */

.inv-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
}
.inv-section h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.inv-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.inv-hint code {
  background: var(--color-bg-secondary);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.inv-callout {
  padding: 10px 12px;
  background: var(--tile-amber-bg);
  color: var(--tile-amber-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--tile-amber-fg);
}

.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.inv-pill-exempt { background: var(--tile-amber-bg); color: var(--tile-amber-fg); }
.inv-pill-neutral { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.inv-pill-warranty { background: var(--color-brand-emerald-50); color: var(--color-brand-emerald-deep); }

/* ── Fields ─────────────────────────────────────────────────────────── */

.inv-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inv-field > span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-field input,
.inv-field select,
.inv-field textarea {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  min-width: 0;
  width: 100%;
}
.inv-field textarea { resize: vertical; line-height: 1.4; }
.inv-field input:focus,
.inv-field select:focus,
.inv-field textarea:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}
.inv-field input:disabled,
.inv-field textarea:disabled {
  background: var(--color-bg-secondary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.inv-field-xs { max-width: 120px; }

/* Clear-button (×) inside a text input */
.inv-input-clear-wrap {
  position: relative;
  display: block;
}
.inv-input-clear-wrap > input {
  width: 100%;
  padding-right: 32px;
}
.inv-input-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}
.inv-input-clear:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}
/* Hide when the field is empty (placeholder is showing) */
.inv-input-clear-wrap > input:placeholder-shown ~ .inv-input-clear {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Info tooltip next to field labels */
.inv-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  color: var(--color-text-secondary);
  cursor: help;
  vertical-align: -2px;
  transition: color var(--duration-fast) var(--ease-default);
}
.inv-info:hover,
.inv-info:focus { color: var(--color-brand-emerald); outline: none; }
.inv-info-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--leading-normal);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-default), visibility 120ms;
  z-index: 40;
  white-space: normal;
  text-align: left;
}
.inv-info-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text-primary);
}
.inv-info:hover .inv-info-tip,
.inv-info:focus-within .inv-info-tip {
  visibility: visible;
  opacity: 1;
}

.inv-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.inv-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.inv-empty {
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.inv-recurring {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}
.inv-recurring-toggle { padding: 2px 0; }
.inv-recurring-grid { margin-top: var(--space-3); }

.inv-asset-type {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--color-text-body);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}
.inv-asset-type:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}

.inv-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-body);
  cursor: pointer;
  user-select: none;
}
.inv-inline-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-brand-emerald);
  cursor: pointer;
}

.inv-icon-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-icon-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

.inv-add-bottom {
  width: 100%;
  justify-content: center;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  margin-top: 8px;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-add-bottom:hover {
  border-color: var(--color-brand-emerald);
  color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}

/* ── Vehicles ─────────────────────────────────────────────────────────── */

.inv-vehicle-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.inv-vehicle-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.inv-vehicle-idx {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-brand-emerald);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.inv-vehicle-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.inv-vehicle-summary strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.inv-vehicle-summary span {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.inv-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

/* ── Line items table ─────────────────────────────────────────────────── */

.inv-items-table {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inv-items-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 70px 110px 180px 90px 32px;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-items-row:last-child { border-bottom: none; }
.inv-items-head {
  background: var(--color-bg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.inv-items-row select,
.inv-items-row input[type="number"],
.inv-items-row input[type="text"] {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  width: 100%;
}
.inv-items-row select:focus,
.inv-items-row input:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}
.inv-items-row input[type="number"] { font-variant-numeric: tabular-nums; }
.inv-item-name-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-item-name { font-weight: var(--weight-medium); }
.inv-item-desc { font-size: var(--text-xs); color: var(--color-text-secondary); }

.inv-tax-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inv-tax-cell select { font-size: var(--text-xs); padding: 4px 8px; }

.inv-line-total {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
  font-size: var(--text-sm);
}
.inv-items-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

/* ── Taxes ────────────────────────────────────────────────────────────── */

.inv-tax-row {
  display: grid;
  grid-template-columns: 1.5fr 100px 1.5fr;
  gap: var(--space-3);
  align-items: end;
}

/* ── Carfax ───────────────────────────────────────────────────────────── */

.inv-carfax-row {
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.inv-carfax-row + .inv-carfax-row { margin-top: 6px; }
.inv-carfax-row.is-off { opacity: 0.72; }
.inv-carfax-notes.is-disabled { opacity: 0.55; }

.inv-carfax-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inv-carfax-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  padding: 10px 12px;
  background: var(--color-bg-primary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.inv-carfax-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inv-carfax-field > span {
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  min-width: 88px;
}
.inv-carfax-field code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-primary);
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-callout-info {
  background: var(--color-brand-emerald-50);
  color: var(--color-brand-emerald-deep);
  border-left-color: var(--color-brand-emerald);
}

.inv-pill-warn {
  background: var(--tile-amber-bg);
  color: var(--tile-amber-fg);
}

@media (max-width: 640px) {
  .inv-carfax-preview { grid-template-columns: 1fr; }
}

/* ── Warranty list ────────────────────────────────────────────────────── */

.inv-warranty-list { display: flex; flex-direction: column; gap: 6px; }
.inv-warranty-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}
.inv-warranty-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inv-warranty-info strong {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.inv-warranty-info span {
  font-size: var(--text-xs);
}

/* ── Payments list ────────────────────────────────────────────────────── */

.inv-payments-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inv-payment-row {
  display: grid;
  grid-template-columns: 110px 120px 1fr auto 32px;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 12px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-payment-row:last-of-type { border-bottom: none; }
.inv-payment-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.inv-payment-method {
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
}
.inv-payment-note {
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-payment-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.inv-payment-total strong {
  color: var(--color-brand-emerald-deep);
  font-variant-numeric: tabular-nums;
}

/* ── Modal ────────────────────────────────────────────────────────────── */

.inv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.48);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
  animation: fadeIn 120ms var(--ease-default);
}
.inv-modal {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 180ms var(--ease-default);
}
/* Suppress modal entrance animation when the modal is merely re-rendering
   (e.g. POS tile tap, line-item pick). Only the first open plays it. */
.inv-editor.no-modal-anim .inv-modal-overlay,
.inv-editor.no-modal-anim .inv-modal {
  animation: none !important;
}
/* Likewise suppress any element-level entrance animations inside the editor
   while it's merely updating state. */
.inv-editor.no-modal-anim .cal-dropdown-panel,
.inv-editor.no-modal-anim .inv-actions-menu,
.inv-editor.no-modal-anim .inv-client-results {
  animation: none !important;
}
.inv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-modal-head h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-modal-body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}
.inv-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}
.inv-modal-wide { max-width: 780px; }

/* ── Flat-glass calculator ────────────────────────────────────────────── */

.inv-unit-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  gap: 2px;
  align-self: flex-start;
}
.inv-unit-toggle button {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-unit-toggle button:hover { color: var(--color-text-primary); }
.inv-unit-toggle button.on {
  background: var(--color-brand-emerald);
  color: #fff;
}

.inv-calc-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-primary);
}
.inv-calc-row {
  display: grid;
  grid-template-columns: 1.4fr 90px 90px 70px 90px 100px 32px;
  gap: var(--space-2);
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-calc-row:last-of-type { border-bottom: none; }
.inv-calc-head {
  background: var(--color-bg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-calc-row input {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.inv-calc-row input:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}
.inv-calc-area,
.inv-calc-sub {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  text-align: right;
}
.inv-calc-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.inv-calc-foot {
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
}
.inv-calc-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-brand-emerald-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-brand-emerald-light);
}
.inv-calc-totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-calc-totals span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-emerald-deep);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-calc-totals strong {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-emerald-deep);
  font-variant-numeric: tabular-nums;
}
.inv-calc-amount strong { font-size: var(--text-xl); }

@media (max-width: 720px) {
  .inv-calc-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 10px;
  }
  .inv-calc-head { display: none; }
  .inv-calc-row > * { grid-column: span 1; }
  .inv-calc-row > button { grid-column: 2; justify-self: end; }
}

/* ── Totals sidebar ───────────────────────────────────────────────────── */

.inv-totals-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.inv-totals-card h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}
.inv-totals-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-totals-row.is-muted { color: var(--color-text-disabled); }
.inv-totals-row.is-muted strong { color: var(--color-text-disabled); }
.inv-totals-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-1) 0;
}
.inv-total { font-size: var(--text-base); }
.inv-total strong { font-size: var(--text-lg); }
.inv-due {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}
.inv-due span { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.inv-due strong {
  font-size: var(--text-xl);
  color: var(--color-brand-emerald-deep);
}

.inv-totals-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.inv-totals-row label > span {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.inv-totals-row input[type="number"],
.inv-totals-row select {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.inv-discount-input {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 4px;
}
.inv-fee-input { grid-template-columns: 1fr 34px; align-items: center; }
.inv-fee-unit {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

/* ── Inventory list ───────────────────────────────────────────────────── */

.inv-inv-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inv-inv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 110px 110px 32px;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-inv-row:last-of-type { border-bottom: none; }
.inv-inv-head {
  background: var(--color-bg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-inv-row > strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.inv-inv-row > span:nth-child(2),
.inv-inv-row > span:nth-child(3) { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .inv-inv-row { grid-template-columns: 1fr auto 32px; }
  .inv-inv-row > span:nth-child(2),
  .inv-inv-row > span:nth-child(3) { display: none; }
}

/* ── P&L card ─────────────────────────────────────────────────────────── */

.inv-pnl { background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-secondary)); }
.inv-pnl-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}
.inv-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}
.inv-pnl-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.inv-pnl-neg strong { color: var(--color-text-secondary); }
.inv-pnl-divider { height: 1px; background: var(--color-border-subtle); margin: 2px 0; }
.inv-pnl-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  font-weight: var(--weight-semibold);
}
.inv-pnl-total strong { font-size: var(--text-xl); }
.inv-pnl-total-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inv-pnl-total.is-pos span { color: var(--color-brand-emerald-deep); }
.inv-pnl-total.is-pos strong { color: var(--color-brand-emerald-deep); }
.inv-pnl-total.is-neg span { color: var(--color-danger); }
.inv-pnl-total.is-neg strong { color: var(--color-danger); }

/* Margin tier badge */
.inv-pnl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.inv-pnl-badge em {
  font-style: normal;
  font-weight: var(--weight-semibold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.inv-pnl-badge-loss        { background: var(--color-danger-light);          color: var(--color-danger-dark);          border-color: rgba(239, 68, 68, 0.2); }
.inv-pnl-badge-minimal     { background: var(--color-info-light);            color: var(--color-info-dark);            border-color: rgba(59, 130, 246, 0.2); }
.inv-pnl-badge-average     { background: var(--tile-amber-bg);               color: var(--tile-amber-fg);              border-color: rgba(245, 158, 11, 0.25); }
.inv-pnl-badge-healthy     { background: var(--color-brand-emerald-50);      color: var(--color-brand-emerald-deep);   border-color: var(--color-brand-emerald-light); }
.inv-pnl-badge-exceptional,
.inv-pnl-badge-exceptional em {
  color: #fff !important;
}
.inv-pnl-badge-exceptional {
  background: #10B981;        /* bright Tailwind emerald-500 */
  border-color: #059669;      /* emerald-600 */
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35);
}

/* Legend dots in the hint line */
.inv-pnl-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 3px 2px 4px;
  border: 1px solid transparent;
}
.inv-pnl-legend-dot.inv-pnl-badge-minimal     { background: var(--color-info);              border-color: transparent; }
.inv-pnl-legend-dot.inv-pnl-badge-average     { background: var(--color-warning);           border-color: transparent; }
.inv-pnl-legend-dot.inv-pnl-badge-healthy     { background: var(--color-brand-emerald-light); border-color: var(--color-brand-emerald); }
.inv-pnl-legend-dot.inv-pnl-badge-exceptional { background: var(--color-brand-emerald);     border-color: transparent; }

/* ── Warranty code pill ──────────────────────────────────────────────── */

.inv-warranty-code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  margin-left: 4px;
}

/* ── Billing address picker ───────────────────────────────────────────── */

.inv-address-box { position: relative; }
.inv-address-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inv-address-row input {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  width: 100%;
  min-width: 0;
}
.inv-address-row input:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}

.inv-address-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}
.inv-address-pick-btn:hover {
  border-color: var(--color-brand-emerald);
  color: var(--color-brand-emerald);
}
.inv-address-pick-btn.is-open {
  border-color: var(--color-brand-emerald);
  color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}
.inv-address-chev {
  transition: transform var(--duration-fast) var(--ease-default);
  opacity: 0.7;
}
.inv-address-pick-btn.is-open .inv-address-chev { transform: rotate(180deg); }

.inv-address-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.inv-address-menu-head {
  padding: 6px 10px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-address-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-primary);
  gap: 2px;
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-address-option:hover { background: var(--color-sidebar-hover); }
.inv-address-option.is-selected { background: var(--color-brand-emerald-50); }
.inv-address-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-emerald-deep);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-address-line {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.inv-address-menu-foot {
  padding: 6px 10px 4px;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 4px;
}

/* ── Toggle switch + row ──────────────────────────────────────────────── */

.inv-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border-subtle);
}
.inv-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px;
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-toggle-row:hover { background: var(--color-sidebar-hover); }
.inv-toggle-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.inv-toggle-row-main strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-toggle-row-main span {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.inv-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.inv-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.inv-switch-track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 11px;
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 17, 21, 0.2);
  transition: transform var(--duration-fast) var(--ease-default);
}
.inv-switch input:checked ~ .inv-switch-track { background: var(--color-brand-emerald); }
.inv-switch input:checked ~ .inv-switch-thumb { transform: translateX(18px); }
.inv-switch input:focus-visible ~ .inv-switch-track {
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}

/* ── CC emails ────────────────────────────────────────────────────────── */

.inv-cc-box {
  position: relative;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}
.inv-cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.inv-cc-count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}
.inv-cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.inv-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-brand-emerald-light);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.inv-cc-chip > svg { color: var(--color-brand-emerald); flex-shrink: 0; }
.inv-cc-chip > span:not(.inv-cc-chip-email) {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-cc-chip-email {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
}
.inv-cc-chip-x {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-cc-chip-x:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.inv-cc-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--color-bg-primary);
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-cc-add:hover,
.inv-cc-add.is-open {
  border-color: var(--color-brand-emerald);
  color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
  border-style: solid;
}

.inv-cc-menu {
  margin-top: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.inv-cc-menu-head {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.inv-cc-menu-empty {
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-align: center;
}
.inv-cc-option {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  align-items: center;
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-cc-option:hover { background: var(--color-sidebar-hover); }
.inv-cc-option-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-emerald-50);
  color: var(--color-brand-emerald-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.inv-cc-option-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.inv-cc-option-top { display: flex; gap: 8px; align-items: baseline; }
.inv-cc-option-top strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-cc-option-label {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}
.inv-cc-option-email {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

.inv-cc-menu-custom {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}
.inv-cc-custom-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  background: var(--color-bg-primary);
  min-width: 0;
}
.inv-cc-custom-input:focus {
  outline: none;
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}

/* In the recurring card, a single toggle row — softer styling */
.inv-recurring .inv-toggle-row {
  background: transparent;
  padding: 10px 0;
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}
.inv-recurring .inv-toggle-row:hover { background: transparent; }

/* ── Travel surcharge preview ─────────────────────────────────────────── */

.inv-travel-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  padding: var(--space-3);
  background: var(--color-brand-emerald-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-brand-emerald-light);
}
.inv-travel-preview > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-brand-emerald-deep);
}
.inv-travel-preview strong {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-brand-emerald-deep);
}
.inv-travel-total {
  grid-column: 1 / -1;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-brand-emerald-light);
  font-size: var(--text-base) !important;
}
.inv-travel-total strong {
  font-size: var(--text-lg);
  color: var(--color-brand-emerald-deep);
}

/* ── POS grid ─────────────────────────────────────────────────────────── */

.inv-pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}
.inv-pos-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-primary);
  text-align: left;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-pos-tile:hover {
  border-color: var(--color-brand-emerald);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.inv-pos-tile.in-cart {
  border-color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}
.inv-pos-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inv-pos-tile-icon svg { width: 18px; height: 18px; }
.inv-pos-tile-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
}
.inv-pos-tile-price {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand-emerald-deep);
  font-variant-numeric: tabular-nums;
}
.inv-pos-tile-qty {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-brand-emerald);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-bold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}
.inv-pos-cart-summary {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-body);
}
.inv-pos-cart-summary strong { color: var(--color-text-primary); }

/* ── Client typeahead ─────────────────────────────────────────────────── */

.inv-client-box { position: relative; }

.inv-client-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.inv-client-search:focus-within {
  border-color: var(--color-brand-emerald);
  box-shadow: 0 0 0 3px var(--color-brand-emerald-glow);
}
.inv-client-search-icon {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.inv-client-search-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  width: 100%;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.inv-client-search-input::placeholder { color: var(--color-text-disabled); }

.inv-client-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  max-height: 360px;
  overflow-y: auto;
  animation: slideUp 140ms var(--ease-default);
}

.inv-client-result {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-primary);
  transition: background var(--duration-fast) var(--ease-default);
}
.inv-client-result:hover,
.inv-client-result:focus-visible {
  background: var(--color-sidebar-hover);
  outline: none;
}
.inv-client-result.is-selected {
  background: var(--color-brand-emerald-50);
}

.inv-client-result-avatar,
.inv-client-chip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-emerald-50);
  color: var(--color-brand-emerald-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.inv-client-result-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-client-result-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.inv-client-result-top strong {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.inv-client-result-company {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: 1px 8px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
}
.inv-client-result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.inv-client-result-meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-client-result-sep { color: var(--color-text-disabled); }

.inv-client-result-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 2px 8px;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  font-weight: var(--weight-semibold);
}

.inv-client-result mark,
.inv-client-chip-top mark {
  background: var(--color-brand-emerald-light);
  color: var(--color-brand-emerald-deep);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: var(--weight-semibold);
}

.inv-client-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.inv-client-results-foot {
  padding: 6px 10px;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 4px;
}
.inv-client-new-link {
  background: transparent;
  border: none;
  color: var(--color-brand-emerald);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 4px 0;
}
.inv-client-new-link:hover { text-decoration: underline; }

/* Selected-client chip */
.inv-client-chip {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
}
.inv-client-chip-avatar { width: 40px; height: 40px; font-size: 13px; }
.inv-client-chip-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-client-chip-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-client-chip-top strong {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.inv-client-chip-company {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: 2px 8px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}
.inv-client-chip-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 2px 8px;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  font-weight: var(--weight-semibold);
}
.inv-client-chip-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.inv-client-chip-sep { color: var(--color-text-disabled); }
.inv-client-chip-change {
  align-self: center;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-client-chip-change:hover {
  border-color: var(--color-brand-emerald);
  color: var(--color-brand-emerald);
}

/* ── File drop zone ───────────────────────────────────────────────────── */

.inv-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inv-dropzone-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-secondary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-align: left;
}
.inv-dropzone-zone:hover {
  border-color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}
.inv-dropzone.is-drag .inv-dropzone-zone {
  border-color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
  transform: scale(1.01);
}

.inv-dropzone-icon {
  width: 32px;
  height: 32px;
  color: var(--color-brand-emerald);
  flex-shrink: 0;
}

.inv-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-dropzone-text strong {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.inv-dropzone-text span {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.inv-dropzone-text u {
  color: var(--color-brand-emerald);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.inv-dropzone-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.inv-dropzone-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.inv-dropzone-file-icon {
  width: 24px;
  height: 24px;
  background: var(--color-brand-emerald-50);
  color: var(--color-brand-emerald-deep);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-dropzone-file-name {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-dropzone-file-size {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.inv-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  margin-left: 6px;
  background: var(--color-brand-emerald-50);
  color: var(--color-brand-emerald-deep);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  vertical-align: middle;
}

/* ── Commissions modal ────────────────────────────────────────────────── */

.inv-comm-value-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.inv-comm-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: var(--color-brand-emerald-50);
  border-radius: var(--radius-sm);
}
.inv-comm-preview span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-brand-emerald-deep);
  font-weight: var(--weight-semibold);
}
.inv-comm-preview strong {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-emerald-deep);
}

.inv-comm-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}
.inv-comm-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-bg-primary);
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-default);
}
.inv-comm-item:hover { border-color: var(--color-border); }
.inv-comm-item.checked {
  border-color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}
.inv-comm-item input[type="checkbox"] {
  accent-color: var(--color-brand-emerald);
  width: 16px;
  height: 16px;
}
.inv-comm-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.inv-comm-item-main strong {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.inv-comm-item-main span {
  font-size: var(--text-xs);
}
.inv-comm-item-amt {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

/* ── Activity log ─────────────────────────────────────────────────────── */

.inv-activity-feed {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
  position: relative;
}
.inv-activity-feed::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--color-border-subtle);
}

.inv-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 8px 0;
  position: relative;
}

.inv-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.inv-activity-icon svg { width: 14px; height: 14px; }

.inv-activity-icon-plus   { background: var(--color-brand-emerald-50); color: var(--color-brand-emerald-deep); border-color: var(--color-brand-emerald-light); }
.inv-activity-icon-send   { background: var(--tile-cyan-bg);    color: var(--tile-cyan-fg);    border-color: var(--tile-cyan-bg); }
.inv-activity-icon-eye    { background: var(--tile-violet-bg);  color: var(--tile-violet-fg);  border-color: var(--tile-violet-bg); }
.inv-activity-icon-cash   { background: var(--color-brand-emerald-50); color: var(--color-brand-emerald-deep); border-color: var(--color-brand-emerald-light); }
.inv-activity-icon-shield { background: var(--tile-amber-bg);   color: var(--tile-amber-fg);   border-color: var(--tile-amber-bg); }

.inv-activity-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}
.inv-activity-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.inv-activity-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex;
  gap: 4px;
  align-items: center;
}
.inv-activity-meta strong {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
}
.inv-activity-meta time { font-variant-numeric: tabular-nums; }

/* ── Synced records ───────────────────────────────────────────────────── */

.inv-synced-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 820px) { .inv-synced-grid { grid-template-columns: 1fr; } }

.inv-synced-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.inv-synced-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.inv-synced-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-synced-name strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.inv-synced-name span {
  font-size: var(--text-xs);
}

.inv-sync-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}
/* Brand approximations — replace with real wordmark SVGs later */
.inv-sync-logo-qbo  { background: #2CA01C; }   /* QuickBooks green */
.inv-sync-logo-xero { background: #13B5EA; }   /* Xero cyan */

.inv-synced-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.inv-synced-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.inv-synced-status-synced       { background: var(--color-brand-emerald-50); color: var(--color-brand-emerald-deep); }
.inv-synced-status-pending      { background: var(--tile-amber-bg);          color: var(--tile-amber-fg); }
.inv-synced-status-failed       { background: var(--color-danger-light);     color: var(--color-danger-dark); }
.inv-synced-status-disconnected { background: var(--color-bg-secondary);     color: var(--color-text-secondary); }

.inv-synced-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 14px;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.inv-synced-fields > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.inv-synced-fields dt {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inv-synced-fields dd {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  word-break: break-all;
}

.inv-synced-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: auto;
}
.inv-synced-unlink {
  margin-left: auto;
  color: var(--color-text-secondary);
}
.inv-synced-unlink:hover { color: var(--color-danger); }

/* Subtle accent stripe per status */
.inv-synced-card { border-top: 3px solid var(--color-border-subtle); }
.inv-synced-card.inv-synced-synced  { border-top-color: var(--color-brand-emerald); }
.inv-synced-card.inv-synced-pending { border-top-color: var(--tile-amber-fg); }
.inv-synced-card.inv-synced-failed  { border-top-color: var(--color-danger); }

/* ── Send modal radios ────────────────────────────────────────────────── */

.inv-send-radio-group,
.inv-send-link-kind {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-send-link-kind { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }

.inv-field-group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.inv-send-radio {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  align-items: flex-start;
}
.inv-send-radio input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--color-brand-emerald);
}
.inv-send-radio div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.inv-send-radio strong {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.inv-send-radio span { font-size: var(--text-xs); }
.inv-send-radio input[type="datetime-local"] {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
}
.inv-send-radio:hover { border-color: var(--color-brand-emerald); }
.inv-send-radio.on {
  border-color: var(--color-brand-emerald);
  background: var(--color-brand-emerald-50);
}
.inv-send-radio.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .inv-grid { grid-template-columns: 1fr; }
  .inv-side { position: static; }
  .inv-vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .inv-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-items-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: var(--space-3);
  }
  .inv-items-head { display: none; }
  .inv-items-row { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: 6px; }
  .inv-tax-row { grid-template-columns: 1fr; }
  .inv-field-xs { max-width: none; }
  .inv-editor-header {
    position: static;
    margin: 0;
    padding: 0 0 var(--space-3);
  }
}

@media (max-width: 900px) {
  .inv-grid-3 { grid-template-columns: 1fr; }
  .inv-payment-row { grid-template-columns: 1fr auto 32px; }
  .inv-payment-row > span:nth-child(1),
  .inv-payment-row > span:nth-child(3) { display: none; }
}

@media (max-width: 480px) {
  .inv-grid-2 { grid-template-columns: 1fr; }
  .inv-vehicle-grid { grid-template-columns: 1fr 1fr; }
  .inv-editor-title h1 { font-size: var(--text-xl); }
}