*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* HPP Brand */
  --hpp-orange:      #E87820;
  --hpp-orange-dark: #C96318;
  --hpp-orange-lt:   #FEF0E4;
  --hpp-dark:        #1D1D1D;
  --hpp-dark-2:      #2C2C2C;
  --hpp-dark-3:      #3D3D3D;

  /* Neutrals */
  --bg:         #F4F5F7;
  --surface:    #FFFFFF;
  --border:     #E2E5EA;
  --border-2:   #CBD1DA;
  --text:       #1A1D23;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;

  /* Status */
  --success:    #16A34A;
  --success-lt: #DCFCE7;
  --danger:     #DC2626;
  --danger-lt:  #FEE2E2;
  --warning:    #D97706;
  --warning-lt: #FEF3C7;
  --info:       #2563EB;
  --info-lt:    #DBEAFE;

  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 2px 8px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.16);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
}

/* ════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════ */
.header {
  background: var(--hpp-dark);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.header-logo {
  background: #fff;
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 32px;
  display: block;
}

.header-nav {
  display: flex;
  gap: 2px;
}

/* ── Sidebar / Tab nav ── */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.nav-btn .nav-icon { font-size: 15px; }
.nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-btn.active {
  background: var(--hpp-orange);
  color: #fff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-tag {
  background: rgba(232,120,32,.15);
  border: 1px solid rgba(232,120,32,.3);
  color: var(--hpp-orange);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: .3px;
}

/* ════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════ */
.main { padding: 24px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title { font-size: 22px; font-weight: 700; color: var(--text); }
.page-sub   { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════
   STAT CARDS
════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--shadow); }

.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.orange { background: var(--hpp-orange-lt); }
.stat-icon.green  { background: var(--success-lt); }
.stat-icon.gray   { background: #F3F4F6; }
.stat-icon.blue   { background: var(--info-lt); }

.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }

/* ════════════════════════════════════════════════
   TOOLBAR
════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════
   INPUTS
════════════════════════════════════════════════ */
.input-search {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px 7px 34px;
  font-size: 13px;
  width: 240px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-search:focus {
  border-color: var(--hpp-orange);
  box-shadow: 0 0 0 3px rgba(232,120,32,.12);
  background-color: var(--surface);
}

.select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.select:focus { border-color: var(--hpp-orange); }

.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  border-color: var(--hpp-orange);
  box-shadow: 0 0 0 3px rgba(232,120,32,.12);
}

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .08s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--hpp-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(232,120,32,.35);
}
.btn-primary:hover {
  background: var(--hpp-orange-dark);
  box-shadow: 0 4px 12px rgba(232,120,32,.4);
}

.btn-secondary {
  background: var(--hpp-dark);
  color: #fff;
}
.btn-secondary:hover { background: var(--hpp-dark-3); }

.btn-outline {
  background: transparent;
  color: var(--hpp-orange);
  border: 1.5px solid var(--hpp-orange);
}
.btn-outline:hover { background: var(--hpp-orange-lt); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border: 1px solid transparent;
}
.btn-danger-ghost:hover { background: var(--danger-lt); }

.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  line-height: 1;
}
.btn-icon:hover { background: var(--bg); color: var(--text); }
.btn-icon.danger:hover { background: var(--danger-lt); color: var(--danger); }

/* ════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════ */
.table-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  background: #F8F9FB;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* orange left border on first col header */
.table thead th:first-child {
  border-left: 3px solid var(--hpp-orange);
}

.table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: #FAFBFC; }

.table tbody td {
  padding: 9px 14px;
  vertical-align: middle;
}

.table tbody td:first-child { border-left: 3px solid transparent; }
.table tbody tr:hover td:first-child { border-left-color: var(--hpp-orange); }

.empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px !important;
  font-size: 14px;
}

.empty-icon { font-size: 36px; display: block; margin-bottom: 8px; }

/* ════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #F8F9FB;
  flex-wrap: wrap;
  gap: 8px;
}

.pag-info { font-size: 12px; color: var(--text-muted); }

.pag-controls { display: flex; align-items: center; gap: 4px; }

.pag-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  transition: background .12s, border-color .12s;
  min-width: 32px;
  text-align: center;
}
.pag-btn:hover:not(:disabled) { background: var(--hpp-orange-lt); border-color: var(--hpp-orange); color: var(--hpp-orange); }
.pag-btn.active { background: var(--hpp-orange); border-color: var(--hpp-orange); color: #fff; font-weight: 700; }
.pag-btn:disabled { opacity: .4; cursor: not-allowed; }

.pag-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════
   PRODUCT THUMBNAIL
════════════════════════════════════════════════ */
.thumb-wrap { width: 44px; }

.thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.thumb-placeholder {
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1.5px dashed var(--border-2);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-light);
}

/* ════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.badge-active       { background: var(--success-lt); color: var(--success); }
.badge-discontinued { background: #F3F4F6; color: #6B7280; }
.badge-units        { background: var(--info-lt); color: var(--info); }
.badge-m2           { background: var(--hpp-orange-lt); color: var(--hpp-orange-dark); }

/* ════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,20,32,.6);
  backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: modal-in .2s cubic-bezier(.34,1.4,.64,1);
}

.modal-sm  { max-width: 460px; }
.modal-lg  { max-width: 860px; }
.modal-xl  { max-width: 1080px; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(-16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header-left { display: flex; align-items: center; gap: 10px; }

.modal-icon {
  width: 36px; height: 36px;
  background: var(--hpp-orange-lt);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.modal-header h2 { font-size: 17px; font-weight: 700; }
.modal-header p  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.modal-close {
  background: none; border: none;
  font-size: 20px; color: var(--text-muted);
  cursor: pointer; padding: 2px 6px;
  border-radius: 6px; line-height: 1;
  transition: background .12s;
}
.modal-close:hover { background: var(--bg); color: var(--text); }

.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   FORMS
════════════════════════════════════════════════ */
.form-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--hpp-orange);
  margin-bottom: 12px;
}

.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  margin-bottom: 12px;
}

.form-row .form-group { margin-bottom: 0; }

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.req { color: var(--hpp-orange); }

/* ── Image dropzone ── */
.img-dropzone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  overflow: hidden;
  padding: 12px;
}
.img-dropzone:hover {
  border-color: var(--hpp-orange);
  background: var(--hpp-orange-lt);
}
.img-dropzone img {
  max-width: 100%; max-height: 140px;
  display: none;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.img-hint { color: var(--text-muted); font-size: 12px; text-align: center; pointer-events: none; }
.img-hint strong { display: block; color: var(--hpp-orange); font-size: 13px; margin-bottom: 2px; }

/* ════════════════════════════════════════════════
   BULK IMPORT
════════════════════════════════════════════════ */
.import-drop {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg);
}
.import-drop:hover, .import-drop.drag-over {
  border-color: var(--hpp-orange);
  background: var(--hpp-orange-lt);
}
.import-drop-icon { font-size: 42px; display: block; margin-bottom: 10px; }
.import-drop h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.import-drop p  { font-size: 13px; color: var(--text-muted); }
.import-drop .browse { color: var(--hpp-orange); font-weight: 600; text-decoration: underline; cursor: pointer; }

.import-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.import-counts { display: flex; gap: 10px; }
.count-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
}
.count-chip.ok    { background: var(--success-lt); color: var(--success); }
.count-chip.error { background: var(--danger-lt);  color: var(--danger);  }

.import-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

tr.row-ok   { }
tr.row-err  { background: #fff5f5 !important; }
tr.row-err td { color: var(--danger); }

.err-cell { font-size: 11px; color: var(--danger); max-width: 200px; }

/* ════════════════════════════════════════════════
   WAREHOUSE LIST
════════════════════════════════════════════════ */
.wh-list { display: flex; flex-direction: column; gap: 8px; }

.wh-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.wh-item.wh-dragging   { opacity: 0.4; }
.wh-item.wh-drag-over  { border-color: var(--accent); background: var(--accent-soft, #fff4ee); }
.wh-item.wh-item-editing { align-items: flex-start; }

.wh-drag-handle {
  cursor: grab; color: var(--text-muted); font-size: 17px;
  padding: 0 4px; user-select: none; flex-shrink: 0; line-height: 1;
}
.wh-drag-handle:active { cursor: grabbing; }

.wh-info { flex: 1; min-width: 0; }
.wh-info strong { font-weight: 600; }
.wh-info .wh-name-ar { color: var(--text-muted); font-size: 12px; margin-left: 8px; font-family: inherit; }
.wh-info .wh-city { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.wh-info .wh-addr { display: block; color: var(--text-light); font-size: 11px; margin-top: 2px; }

.wh-actions { display: flex; gap: 4px; flex-shrink: 0; }

.wh-edit-form { flex: 1; }
.wh-edit-form .form-row { margin-bottom: 8px; }
.wh-edit-form .form-row:last-child { margin-bottom: 0; }
.wh-edit-form label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.wh-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.section-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; }

/* ════════════════════════════════════════════════
   CONFIRM DIALOG
════════════════════════════════════════════════ */
.confirm-body { text-align: center; padding: 24px 22px 8px; }
.confirm-icon { font-size: 44px; display: block; margin-bottom: 12px; }
.confirm-body h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.confirm-body p  { font-size: 13px; color: var(--text-muted); }

/* ════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--hpp-dark);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  pointer-events: none;
  max-width: 360px;
  border-left: 4px solid var(--hpp-orange);
}
.toast.show  { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); border-left-color: #991b1b; }
.toast.ok    { background: #14532d; border-left-color: var(--success); }
.toast.warn  { background: #92400E; border-left-color: #F59E0B; }

/* ════════════════════════════════════════════════
   MISC
════════════════════════════════════════════════ */
.sku-cell { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--hpp-dark); }
.dim-cell { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; }
.actions-cell { display: flex; gap: 2px; align-items: center; }

.pill {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════
   GOOGLE SHEETS
════════════════════════════════════════════════ */
.sheets-info-box {
  background: var(--info-lt);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: #1e40af;
  margin-bottom: 18px;
  line-height: 1.5;
}

.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Sync results table */
.sync-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sync-results-table th {
  text-align: left;
  padding: 8px 12px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.sync-results-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sync-results-table tr:last-child td { border-bottom: none; }

.sync-status-ok       { color: var(--success); font-weight: 700; }
.sync-status-error    { color: var(--danger);  font-weight: 700; }
.sync-status-missing  { color: var(--warning); font-weight: 700; }

.sync-summary {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: var(--success-lt);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sync-summary-item { font-size: 13px; }
.sync-summary-item strong { font-size: 20px; display: block; color: var(--success); }

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ════════════════════════════════════════════════
   INVENTORY MATRIX
════════════════════════════════════════════════ */
.inv-matrix-wrap { overflow-x: auto; max-height: calc(100vh - 220px); overflow-y: auto; }

.inv-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

/* Sticky header row */
.inv-matrix thead tr th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--hpp-dark);
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.inv-matrix thead .im-sku { text-align: left; }

/* Sticky first column */
.im-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
}
.inv-matrix thead .im-sticky { z-index: 4; }

/* Column widths */
.im-sku   { min-width: 150px; }
.im-col   { min-width: 80px; }
.im-wh    { min-width: 90px; }
.im-total { min-width: 90px; font-weight: 700; background: rgba(255,255,255,0.12) !important; }

/* Type group header — sticky just below the frozen warehouse header row */
.im-group-hdr td {
  position: sticky;
  top: 38px;          /* = thead row height (padding 10+10 + font ~17px + border 1px) */
  z-index: 2;
  background: #F1F3F5 !important;
  padding: 8px 14px;
  border-top: 3px solid #374151;
  border-bottom: 1px solid #D1D5DB;
  border-left: 5px solid var(--hpp-orange);
}
/* First cell: also freeze to the left, sit above everything else */
.im-group-hdr td.im-sticky {
  left: 0;
  z-index: 5;
}
/* Filler cell (spans remaining columns) — no redundant left border */
.im-group-hdr td.im-group-filler {
  border-left: none;
  padding: 0;
}
.im-group-hdr:first-child td { border-top: none; }
.im-type-name  { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: #1F2937; }
.im-type-count { font-size: 11px; font-weight: 400; color: #6B7280; margin-left: 10px; }

/* Data rows */
.im-row td {
  padding: 6px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-right: 1px solid rgba(0,0,0,0.04);
}
.im-sku-val   { text-align: left; font-weight: 600; font-size: 12px; white-space: nowrap; }
.im-col-val   { color: var(--text-muted); font-size: 12px; }
.im-qty       { font-variant-numeric: tabular-nums; font-weight: 600; }
.im-zero      { color: var(--text-light) !important; font-weight: 400; }
.im-total-val { font-weight: 700; border-left: 2px solid rgba(0,0,0,0.10); }
.im-reserved  { display: block; font-size: 10px; font-weight: 400; color: var(--hpp-orange); line-height: 1.2; }

/* Row + column hover crosshair */
.inv-matrix td, .inv-matrix th { position: relative; }
.inv-matrix td::after, .inv-matrix th::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(99,102,241,0.08);
  pointer-events: none; opacity: 0; transition: opacity 0.07s;
}
.inv-matrix tbody tr:hover td::after { opacity: 1; }
.inv-matrix td.col-hl::after, .inv-matrix th.col-hl::after { opacity: 1; }

/* Subtotal row */
.im-subtotal td {
  padding: 6px 12px;
  border-top: 2px solid rgba(0,0,0,0.12);
  border-bottom: 3px solid rgba(0,0,0,0.10);
}
.im-sub-label { font-weight: 600; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.im-sub-val   { text-align: center; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.im-sub-grand { font-weight: 800; border-left: 2px solid rgba(0,0,0,0.10); }

/* ════════════════════════════════════════════════
   PRODUCT SEARCH DROPDOWN (Reservation modal)
════════════════════════════════════════════════ */
.prod-search-wrap { position: relative; }

.prod-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  max-height: 220px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: var(--shadow-lg);
}
.prod-search-dropdown.open { display: block; }

.prod-dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.prod-dropdown-item:last-child { border-bottom: none; }
.prod-dropdown-item:hover { background: var(--bg); }
.prod-dropdown-item .item-sku { font-weight: 600; font-size: 13px; }
.prod-dropdown-item .item-meta { font-size: 12px; color: var(--text-muted); }

/* Legacy – kept in case still referenced elsewhere */
.selected-product-chip {
  display: none;
}

/* New full-width chip that replaces the search input */
.res-product-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--hpp-orange-lt);
  border: 1.5px solid var(--hpp-orange);
  border-radius: 8px;
  font-size: 13px;
  color: var(--hpp-orange-dark);
  box-sizing: border-box;
}
.res-chip-icon { flex-shrink: 0; font-size: 16px; }
.res-chip-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.res-chip-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--hpp-orange);
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity .15s, background .15s;
}
.res-chip-clear:hover {
  opacity: 1;
  background: rgba(232,120,32,.15);
}

/* ── Inventory reserved display ── */
.qty-cell { line-height: 1.3; }
.qty-reserved {
  font-size: 11px;
  font-weight: 400;
  color: var(--hpp-orange);
  display: block;
}

/* ── Reservation status badges ── */
.badge-reserved  { background: var(--hpp-orange-lt); color: var(--hpp-orange-dark); }
.badge-inactive  { background: var(--border);        color: var(--text-muted); }

/* ── Inventory incoming-orders badge ── */
.inv-inc-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 7px;
  background: #DBEAFE;
  color: #1D4ED8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: default;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s;
}
.inv-inc-badge:hover { background: #BFDBFE; }

/* ── Inventory incoming-orders tooltip ── */
#inv-tooltip {
  position: fixed;
  z-index: 8000;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 12px 14px;
  min-width: 320px;
  max-width: 420px;
  pointer-events: none;
}
.inv-tt-title {
  font-weight: 700;
  font-size: 12px;
  color: #1F2937;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid #F3F4F6;
}
.inv-tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.inv-tt-table thead th {
  background: #F9FAFB;
  color: #6B7280;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
}
.inv-tt-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #F3F4F6;
  color: #374151;
}
.inv-tt-table tbody tr:last-child td { border-bottom: none; }
.inv-tt-qty { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   ORDER DETAILS TABLE
═══════════════════════════════════════════════════════════ */
.ord-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ord-table thead th {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.ord-sku-col     { min-width: 160px; }
.ord-product-col { min-width: 200px; }
.ord-qty-col     { min-width: 90px;  text-align: right !important; }
.ord-status-col  { min-width: 110px; }

/* Container group header */
.ord-container-hdr td {
  background: #F1F3F5 !important;
  border-top: 3px solid #374151;
  border-bottom: 1px solid #D1D5DB;
  border-left: 5px solid var(--hpp-orange);
  padding: 0;
}
.ord-container-hdr:first-child td { border-top: none; }

.ord-hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.ord-hdr-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-hdr-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ord-container-code {
  font-weight: 700;
  font-size: 13px;
  color: #1F2937;
  letter-spacing: 0.02em;
}
.ord-line-count {
  font-size: 11px;
  color: #6B7280;
  font-weight: 400;
}
.ord-badge-warn {
  background: #FEF3C7;
  color: #92400E;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.ord-arrival {
  font-size: 12px;
  font-weight: 600;
  background: #DBEAFE;
  color: #1D4ED8;
  border-radius: 4px;
  padding: 2px 8px;
}
.ord-arrival-tbd {
  background: #F3F4F6;
  color: #9CA3AF;
}
.ord-warehouse {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* SKU rows */
.ord-row td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ord-row:hover td { background: var(--surface); }

.ord-sku-val {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ord-product-val {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px !important;
}
.ord-product-primary {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}
.ord-product-sku {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.ord-qty-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Status badges */
.ord-badge-transit  { background: #DBEAFE; color: #1D4ED8; font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.ord-badge-received { background: #D1FAE5; color: #065F46; font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }

/* Status toggle button */
.ord-action-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ord-action-btn:hover { background: var(--surface); color: var(--text); }

/* ── Order modal — line items ── */
.ord-lines-header {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ord-line-row {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
/* Product search wrapper — anchor for the floating dropdown */
.ord-line-product-wrap { position: relative; min-width: 0; }
.ord-line-dd {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: none;
}
.ord-line-dd.open { display: block; }
/* Chip inside a line row — same style as reservation but compact */
.ord-line-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--hpp-orange-lt);
  border: 1.5px solid var(--hpp-orange);
  border-radius: 8px;
  font-size: 12px;
  color: var(--hpp-orange-dark);
  box-sizing: border-box;
  width: 100%;
}
.ord-line-qty  { text-align: right; }
/* legacy – kept for any remaining references */
.ord-line-sku  { font-family: monospace; font-size: 13px; }
.ord-line-info { font-size: 12px; color: var(--text-muted); }
.ord-line-unmatched { color: var(--danger); font-weight: 500; }

/* ════════════════════════════════════════════════
   LOGIN OVERLAY
════════════════════════════════════════════════ */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--hpp-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 48px 40px 44px;
  text-align: center;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  max-width: 150px;
  margin-bottom: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--hpp-dark);
  margin-bottom: 8px;
}

.login-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.login-error {
  background: var(--danger-lt);
  color: var(--danger);
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.5;
}

.btn-google-signin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--surface);
  border: 2px solid var(--border-2);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}

.btn-google-signin:hover {
  border-color: var(--hpp-orange);
  background: var(--hpp-orange-lt);
  box-shadow: 0 2px 8px rgba(232,120,32,.18);
  color: var(--hpp-dark);
}

/* ── User info strip in header ── */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
}

.user-name {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Permission checkboxes in Users modal ── */
.perm-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  user-select: none;
  transition: border-color .12s, background .12s;
}

.perm-check:hover {
  border-color: var(--hpp-orange);
  background: var(--hpp-orange-lt);
}

.perm-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--hpp-orange);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

/* ── SKU cell inner layout: [💲 left] [SKU centered] [📦 right] ── */
.im-sku-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.im-sku-left,
.im-sku-right {
  flex: 0 0 28px;        /* fixed width so center is truly centered */
  display: flex;
  align-items: center;
}
.im-sku-right { justify-content: flex-end; }
.im-sku-center {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Price badge in inventory matrix SKU cell ── */
.inv-price-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 5px;
  background: #D1FAE5;
  color: #065F46;
  border-radius: 10px;
  font-size: 10px;
  cursor: default;
  user-select: none;
  vertical-align: middle;
  transition: background .12s;
}
.inv-price-badge:hover {
  background: #6EE7B7;
}

/* ── Price stack in products table ── */
.price-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.price-stack > span {
  color: var(--text);
}
.price-lbl {
  display: inline-block;
  width: 13px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 3px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════
   CUSTOMER TYPE BADGES
════════════════════════════════════════════════ */
.cust-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.cust-type-consumer   { background: var(--info-lt);        color: var(--info); }
.cust-type-contractor { background: var(--hpp-orange-lt);  color: var(--hpp-orange-dark); }
.cust-type-wholesale  { background: var(--success-lt);     color: var(--success); }
.cust-type-other      { background: #F3F4F6;               color: #6B7280; }

/* ════════════════════════════════════════════════
   SALES MODULE
════════════════════════════════════════════════ */

/* ── Sale list: expand button ── */
.sale-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .1s, color .1s;
  line-height: 1;
}
.sale-expand-btn:hover { background: var(--bg); color: var(--hpp-orange); }

.sale-summary-row { cursor: default; }
.sale-summary-row:hover td { background: #FAFBFC; }

/* ── Sale detail sub-row ── */
.sale-lines-detail-table {
  width: calc(100% - 16px);
  margin: 12px 8px 12px 0;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sale-lines-detail-table thead th {
  background: #F8F9FB;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.sale-lines-detail-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.sale-lines-detail-table tbody tr:last-child td { border-bottom: none; }
.sale-lines-detail-table tfoot td {
  background: #F8F9FB;
  font-size: 13px;
}

/* ── New sale modal: product lines ── */
.sale-lines-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.sale-line-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.sale-line-row:last-child { border-bottom: none; }

/* Product search column — wider to fit Type · Color · Length label */
.sale-line-product { flex: 4; min-width: 0; }

/* Selected product chip (mirrors customer chip style) */
.sale-line-prod-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: var(--hpp-orange-lt);
  border: 1px solid var(--hpp-orange);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hpp-orange-dark);
  min-height: 36px;
}
.sale-line-prod-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slpc-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hpp-orange);
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  opacity: .7;
}
.slpc-clear:hover { opacity: 1; color: var(--danger, #c0392b); }

/* Per-line product search input + dropdown */
.sale-line-search-wrap { position: relative; }
.sale-line-search-wrap .input { width: 100%; }

.sale-line-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  max-height: 420px;
  overflow-y: auto;
}
.sale-line-dropdown.open { display: block; }

.sale-line-dd-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sale-line-dd-item:last-child { border-bottom: none; }
.sale-line-dd-item:hover { background: #FFF5EE; }

/* Primary: Type (bold) — the main identifier */
.sld-primary   { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.sld-subtype   { font-weight: 400; color: #555; }
/* Secondary: Color · Length */
.sld-secondary { font-size: 12px; color: #444; font-weight: 500; }
/* SKU: small, grey, monospace — useful but not dominant */
.sld-sku       { font-size: 10px; color: #aaa; font-family: monospace; letter-spacing: .3px; }
/* m² badge inside dropdown item */
.sld-unit-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--hpp-orange-lt);
  color: var(--hpp-orange-dark);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* Quantity input */
.sale-line-qty { width: 80px !important; text-align: right; flex-shrink: 0; }

/* Price (per unit or per m²) */
.sale-line-price { flex: 0 0 105px; width: 105px !important; text-align: right; }

/* Line total */
.sale-line-total { flex: 0 0 90px; text-align: right; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; padding-top: 8px; }

/* Per-line warehouse */
.sale-line-wh-wrap { flex: 0 0 140px; }
.sale-line-wh { width: 100% !important; font-size: 12px; }

/* ── Payment status badges ── */
.pay-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pay-paid        { background: #d4edda; color: #155724; }
.pay-partly-paid { background: #fff3cd; color: #856404; }
.pay-unpaid      { background: #f8d7da; color: #721c24; }

/* ── ERP Posted toggle button ── */
.posted-toggle-btn {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.posted-toggle-btn:hover { opacity: .8; }
.posted-yes { background: #d4edda; color: #155724; }
.posted-no  { background: #e9ecef; color: #6c757d; }

/* ── ERP Posted checkbox in modal ── */
.posted-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}
.posted-checkbox-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--hpp-orange);
}
.posted-toggle-label {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  margin: 0;
  font-weight: 400;
}

/* ── m² column ── */
.sale-line-m2-wrap   { flex: 0 0 80px; display: flex; align-items: center; }
.sale-line-m2-inp    { width: 80px !important; text-align: right; }
/* ── Units column ── */
.sale-line-units-wrap { flex: 0 0 80px; display: flex; align-items: center; }
/* blank placeholder for units-only rows in m² column */
.sale-line-blank { display: block; width: 80px; text-align: right;
  color: var(--text-muted); font-size: 13px; padding-right: 4px; }

/* ── Grand total row ── */
.sale-grand-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 4px;
  font-size: 16px;
  font-weight: 700;
  border-top: 2px solid var(--border);
  margin-top: 8px;
  color: var(--text);
}
.sale-grand-total-row span:last-child {
  color: var(--hpp-orange);
  font-size: 20px;
}

/* ── Warehouse Access Panel (user management) ── */
.wh-access-panel {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
}
.wh-access-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.wh-scopes-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.wh-scope-block {
  flex: 1;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.wh-scope-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.wh-scope-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.wh-radios {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.wh-radio-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.wh-radio-opt input[type="radio"] {
  accent-color: var(--hpp-orange);
  cursor: pointer;
}
.wh-cbs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 4px;
}
.wh-cb-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.wh-cb-label input[type="checkbox"] {
  accent-color: var(--hpp-orange);
  cursor: pointer;
  width: 14px;
  height: 14px;
}
.wh-cbs-disabled {
  opacity: .4;
  pointer-events: none;
}
.wh-access-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.wh-saved-msg {
  font-size: 12px;
  color: #155724;
  font-style: italic;
}
.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

/* ── Customer phone rows (modal) ── */
.cust-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cust-phone-row .cust-phone-input {
  flex: 1;
}

/* ── Phone cell in customers table ── */
.phone-row-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.6;
}
.phone-label-tag {
  font-size: 10px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Branch badge in customers table ── */
.branch-badge {
  display: inline-block;
  background: rgba(232,120,32,.1);
  color: var(--hpp-orange-dark);
  border: 1px solid rgba(232,120,32,.25);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-icon.active {
  background: rgba(232,120,32,.15);
  color: var(--hpp-orange);
}
.user-main-row td { vertical-align: middle; }

/* ════════════════════════════════════════════════
   INVENTORY — Color-first column layout
════════════════════════════════════════════════ */

/* New sticky first column: Color ID */
.im-color-hdr {
  min-width: 110px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.im-sku-hdr {
  min-width: 130px;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.im-color-val {
  text-align: left;
  white-space: nowrap;
  background: #fff;
}
.im-color-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
.im-color-text {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  color: #1F2937;
  white-space: nowrap;
  text-align: left;
}
.im-color-badges {
  /* Fixed-width right slot — always 54px so text never shifts */
  flex: 0 0 54px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
/* SKU as de-emphasised third column */
.im-sku-secondary {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-align: left;
}

/* ════════════════════════════════════════════════
   RESERVATION — product search improvements
════════════════════════════════════════════════ */
.item-type-primary {
  font-weight: 600;
  font-size: 13px;
  color: #1F2937;
}
.item-sku-sub {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
}
.chip-sku-sub {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
}

/* ════════════════════════════════════════════════
   ORDER VIEW TOGGLE
════════════════════════════════════════════════ */
.view-toggle {
  display: flex;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.view-toggle-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.view-toggle-btn.active {
  background: #fff;
  color: var(--hpp-orange);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.view-toggle-btn:hover:not(.active) {
  background: rgba(0,0,0,.05);
  color: #374151;
}

/* ════════════════════════════════════════════════
   ORDERS — Product-First View
════════════════════════════════════════════════ */
.ord-pf-wrap { overflow: auto; max-height: 70vh; }

.ord-pf-table {
  border-collapse: separate;   /* required for position:sticky on td/th */
  border-spacing: 0;
  width: 100%;
  font-size: 12px;
}

/* ── Sticky header row (freeze top) ── */
.ord-pf-table thead tr th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* ── Freeze first 5 columns (left) ──
   Fixed widths so left offsets are exact:
   col1 Type=90px  col2 Color=90px  col3 Length=65px
   col4 OnHand=80px  col5 InTransit=80px               */
.ord-pf-table th:nth-child(1),
.ord-pf-table td:nth-child(1) { position: sticky; left: 0;     z-index: 2; width: 90px;  min-width: 90px; }
.ord-pf-table th:nth-child(2),
.ord-pf-table td:nth-child(2) { position: sticky; left: 90px;  z-index: 2; width: 90px;  min-width: 90px; }
.ord-pf-table th:nth-child(3),
.ord-pf-table td:nth-child(3) { position: sticky; left: 180px; z-index: 2; width: 65px;  min-width: 65px; }
.ord-pf-table th:nth-child(4),
.ord-pf-table td:nth-child(4) { position: sticky; left: 245px; z-index: 2; width: 80px;  min-width: 80px; }
.ord-pf-table th:nth-child(5),
.ord-pf-table td:nth-child(5) { position: sticky; left: 325px; z-index: 2; width: 80px;  min-width: 80px;
                                  border-right: 2px solid rgba(0,0,0,.12) !important; }

/* Corner cells are sticky both ways — need highest z-index */
.ord-pf-table thead th:nth-child(1),
.ord-pf-table thead th:nth-child(2),
.ord-pf-table thead th:nth-child(3),
.ord-pf-table thead th:nth-child(4),
.ord-pf-table thead th:nth-child(5) { z-index: 5; }

/* Sticky body cells need opaque backgrounds so scrolling content doesn't bleed */
.ord-pf-table tbody td:nth-child(1),
.ord-pf-table tbody td:nth-child(2),
.ord-pf-table tbody td:nth-child(3) { background: #fff; }
.ord-pf-table tbody td:nth-child(4),
.ord-pf-table tbody td:nth-child(5) { background: #F9FAFB; }

/* On hover, keep the sticky cells highlighted too */
.ord-pf-row:hover td:nth-child(1),
.ord-pf-row:hover td:nth-child(2),
.ord-pf-row:hover td:nth-child(3),
.ord-pf-row:hover td:nth-child(4),
.ord-pf-row:hover td:nth-child(5) { background: #FFF8F3; }

/* ── Attribute columns (Type / Color / Length) ── */
.ord-pf-attr-th {
  background: #1F2937;
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── On Hand / In Transit headers ── */
.ord-pf-num-th {
  background: #374151;
  color: rgba(255,255,255,.85);
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
}
.ord-pf-transit-th {
  border-right: 2px solid rgba(255,255,255,.15);
}

/* ── Container column headers ── */
.ord-pf-cont-th {
  padding: 7px 8px;
  text-align: center;
  vertical-align: top;
  overflow: hidden;
}
/* Top row of container header: code + edit button side-by-side */
.ord-pf-cont-hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.ord-pf-cont-code {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.ord-pf-edit-btn {
  flex: 0 0 auto;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  opacity: 0.7;
  transition: opacity .15s, background .15s;
}
.ord-pf-edit-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,.3);
}
.ord-pf-cont-meta {
  font-size: 10px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Data rows ── */
.ord-pf-row td {
  border-bottom: 1px solid rgba(0,0,0,.05);
  border-right: 1px solid rgba(0,0,0,.04);
  padding: 5px 8px;
}

/* Attribute cells */
.ord-pf-attr-td {
  text-align: left;
  padding: 5px 12px !important;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
}
.ord-pf-color-td { font-weight: 600; color: #1F2937; }
.ord-pf-len-td   { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Hover — only light cells, never overwrite the coloured qty cells */
.ord-pf-row:hover .ord-pf-attr-td,
.ord-pf-row:hover .ord-pf-num-td,
.ord-pf-row:hover .ord-pf-blank-td { background: #FFF8F3; }

/* Numeric cols */
.ord-pf-num-td {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #F9FAFB;
}
.ord-pf-transit-td {
  border-right: 2px solid rgba(0,0,0,.08) !important;
  color: #1D4ED8;
}
.ord-pf-zero { color: #D1D5DB !important; font-weight: 400; }

/* Container qty cells — coloured background, white text, NO hover override */
.ord-pf-qty-td {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: #fff !important;   /* keep white on hover */
  background: color-mix(in srgb, var(--cont-color, #374151) 70%, #fff 30%);
}
.ord-pf-blank-td { background: #FAFAFA; }

/* Orange left accent on rows that appear in at least one container */
.ord-pf-row-active .ord-pf-attr-td:first-child {
  border-left: 3px solid var(--hpp-orange);
}