:root {
  --black: #0B0B0C;
  --accent: #FF4500;
  --accent-dim: #ffe4d6;
  --white: #FFFFFF;
  --gray-50: #FAFAFA;
  --gray-100: #F2F2F2;
  --gray-300: #D9D9D9;
  --gray-500: #8A8A8E;
  --gray-700: #3A3A3C;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--gray-50);
  color: var(--black);
}

/* -- Top bar ----------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--black);
  color: var(--white);
  padding: 14px 24px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  background: var(--accent);
  color: var(--white);
  font-weight: bold;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 14px;
}

.brand-name { font-size: 18px; font-weight: bold; letter-spacing: 0.2px; }
.accent { color: var(--accent); }

.location-picker { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.location-picker label { color: var(--gray-300); }
.location-picker select {
  background: var(--gray-700);
  color: var(--white);
  border: 1px solid #555;
  border-radius: var(--radius);
  padding: 6px 10px;
}

.employee-bar { display: flex; align-items: center; gap: 10px; }
.employee-status { color: var(--white); font-size: 13px; }
.employee-bar .btn-icon { color: var(--gray-300); font-size: 16px; }

/* -- Login gate ------------------------------ */
.login-gate {
  position: fixed;
  inset: 0;
  background: var(--gray-50);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 32px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* -- Tabs -------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  padding: 0 20px;
}

.tab {
  border: none;
  background: none;
  padding: 14px 16px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tab.active {
  color: var(--black);
  border-bottom-color: var(--accent);
  font-weight: bold;
}

.tab.disabled {
  color: var(--gray-300);
  cursor: not-allowed;
}

/* -- Main layout ------------------------- */
main { padding: 24px; max-width: 1200px; margin: 0 auto; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header h1 { font-size: 22px; margin: 0; }

/* -- Buttons ----------------------------- */
.btn {
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: #e03e00; }

.btn-ghost { background: transparent; color: var(--gray-700); border: 1px solid var(--gray-300); }
.btn-ghost:hover { background: var(--gray-100); }

.btn-icon {
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--gray-500);
  line-height: 1;
}

/* -- Filters ----------------------------- */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filters input, .filters select {
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: Arial, sans-serif;
}

#searchInput { flex: 1; min-width: 220px; }

/* -- Banner ------------------------------ */
.banner {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.hidden { display: none !important; }

/* -- Table ------------------------------- */
.table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: left;
  background: var(--gray-100);
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-300);
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}

tr:last-child td { border-bottom: none; }

tfoot td {
  background: var(--gray-100);
  padding: 10px 12px;
  border-top: 2px solid var(--gray-300);
}

.empty-state { text-align: center; color: var(--gray-500); padding: 30px !important; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: bold;
  text-transform: capitalize;
}

.badge-in_stock { background: #e3f6e8; color: #1e7a3e; }
.badge-sold { background: var(--gray-100); color: var(--gray-700); }
.badge-reserved { background: #fff4d9; color: #8a6a00; }
.badge-in_repair { background: var(--accent-dim); color: var(--accent); }
.badge-transferred { background: #e6eefc; color: #2952a3; }
.badge-rma { background: #fbe0e0; color: #a12b2b; }

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
}

/* -- Modal ------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,11,12,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--white);
  border-radius: var(--radius);
  width: 460px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.modal.modal-wide {
  width: 900px;
}

/* Repair ticket detail: widened a bit and its footer laid out as a
   deliberate 2x2 button grid (grouped by "still open" vs "closing the
   ticket") instead of cramming 4 buttons into one row. */
#repairDetailModal .modal {
  width: 620px;
}
#repairDetailModal .modal-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bulk-product-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
}
.bulk-product-results:empty { border: none; }
.bulk-product-results > div {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.bulk-product-results > div:hover { background: #f5f5f5; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-header h2 { font-size: 18px; margin: 0; }

.item-type-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: var(--radius);
}

.type-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-700);
  font-family: Arial, sans-serif;
}

.type-btn.active { background: var(--black); color: var(--white); }

.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 12px; font-weight: bold; color: var(--gray-700); }
.form-row input, .form-row select, .form-row textarea {
  padding: 9px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: Arial, sans-serif;
}

.form-row.two-col { flex-direction: row; gap: 12px; }
.form-row.two-col > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.form-row.two-col label { font-size: 12px; font-weight: bold; color: var(--gray-700); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* -- Toast ------------------------------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 200;
}
.toast.error { background: #c0392b; }

/* -- Product search & quick add ------------- */
.search-results {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.search-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.search-result-row:last-child { border-bottom: none; }

.sr-name { font-weight: bold; font-size: 13px; }
.sr-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.hint { font-size: 12px; color: var(--gray-500); }

.product-info-card {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.badge-out_of_stock { background: #fbe0e0; color: #a12b2b; }
.badge-waiting-part { background: #f0e6fb; color: #6b3fa0; }

/* -- Home screen grid ------------------------ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 20px auto;
}

.home-box {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--black);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.home-box:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border-color: var(--accent);
}

.home-box:disabled {
  color: var(--gray-300);
  cursor: not-allowed;
  background: var(--gray-50);
}

.home-icon { font-size: 30px; }

.panel-header-left { display: flex; align-items: center; gap: 10px; }
.back-btn { font-size: 20px; }

.location-locked {
  background: var(--gray-700);
  color: var(--white);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: bold;
}

.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex: 1; }

/* -- Checkout -------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.customer-bar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.customer-bar .form-row { margin-bottom: 0; flex: 1; max-width: 280px; }
.customer-bar #customerLookupNote { flex: 1; text-align: right; }

.side-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.side-card h3 { margin: 0 0 10px; font-size: 14px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}

.totals-card { font-size: 14px; }
.totals-row { display: flex; justify-content: space-between; padding: 4px 0; }
.totals-final { font-weight: bold; font-size: 17px; border-top: 1px solid var(--gray-300); margin-top: 6px; padding-top: 10px; }

.btn-full { width: 100%; padding: 14px; font-size: 15px; }

.cart-qty-input { width: 55px; padding: 4px 6px; border: 1px solid var(--gray-300); border-radius: 4px; }

.payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.payment-grid .type-btn { padding: 10px 4px; }

.cart-price-input { width: 75px; padding: 4px 6px; border: 1px solid var(--gray-300); border-radius: 4px; }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
}

/* -- Receipt --------------------------------- */
.receipt-modal { width: 340px; }
.receipt {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #000;
}
.receipt .r-center { text-align: center; }
.receipt hr { border: none; border-top: 1px dashed #999; margin: 8px 0; }
.receipt .r-line { display: flex; justify-content: space-between; }
.receipt .r-total { font-weight: bold; font-size: 15px; }
.receipt .r-policy { font-size: 11px; color: #444; text-align: center; }

/* -- Printable label ------------------------- */
.label-modal { width: 300px; }
.label-print {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}
.label-copy {
  border: 1px dashed var(--gray-300);
  padding: 14px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.label-copy .l-name { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.label-copy .l-price { font-size: 15px; font-weight: bold; color: var(--black); margin: 2px 0; }
.label-copy .l-code { font-size: 9px; color: var(--gray-500); margin-top: 2px; letter-spacing: 0.5px; }
.label-copy .barcode-svg { width: 100%; height: 34px; margin: 2px 0; }

.label-copy-repair { text-align: left; }
.label-copy-repair .l-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-copy-repair .l-name { font-size: 11px; margin-bottom: 2px; }
.label-copy-repair .l-ticket { font-size: 10px; font-weight: bold; }
.label-copy-repair .l-meta { font-size: 9px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media print {
  /* Named pages -- lets receipts (thermal roll) and labels (fixed sticker
     stock) each get their own correct physical page size from the same
     stylesheet, since only one of these ever prints at a time. */
  @page receipt {
    size: 80mm 250mm;
    margin: 0;
  }
  @page label {
    size: 3.5in 1.125in;
    margin: 0;
  }

  body.printing-label {
    page: label;
  }
  /* Same fix as receipts: fully REMOVE everything else from layout
     (not just hide it) while printing a label -- a large hidden DOM
     elsewhere on the page is what caused Chrome's print engine to hang
     or produce multiple stray pages. */
  body.printing-label > *:not(#labelModal) {
    display: none !important;
  }
  #labelModal {
    position: static !important;
    background: none !important;
    display: block !important;
  }
  .label-print {
    max-height: none;
    overflow: visible;
  }
  .label-copy {
    /* Fill whatever the actual physical page turns out to be, in
       whichever orientation the DYMO driver ends up using for its own
       "30252 Address" definition -- vw/vh are relative to the real
       rendered page, unlike a hardcoded inch value that assumes a
       specific orientation and can mismatch what the driver reports. */
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    border: none;
    padding: 3vh 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .label-modal .modal-footer, .label-modal > .form-row { display: none !important; }

  /* Proportional (vh-based) type sizing, so text scales to whatever the
     real page dimensions end up being instead of a fixed px guess that
     could be far too big or too small depending on orientation. */
  .label-copy .l-name { font-size: 9vh !important; margin-bottom: 1vh; }
  .label-copy .l-price { font-size: 11vh !important; margin: 1vh 0; }
  .label-copy .l-code { font-size: 6vh !important; margin-top: 1vh; }
  .label-copy .barcode-svg { width: 90% !important; height: 22vh !important; margin: 1vh 0; }

  .label-copy-repair .l-name { font-size: 8vh !important; margin-bottom: 1vh; }
  .label-copy-repair .l-ticket { font-size: 7vh !important; margin-bottom: 1vh; }
  .label-copy-repair .l-meta { font-size: 6vh !important; line-height: 1.3; }
}

@media print {
  body.printing-receipt {
    page: receipt;
  }
  /* Fully REMOVE every other top-level section from layout (not just make
     it invisible) while printing a receipt. The previous approach only
     hid everything else with visibility:hidden, which still leaves it
     occupying layout space -- with a page this large (e.g. the full
     product catalog table), that appears to make the browser's print
     page-count calculation hang indefinitely ("Total: Can't calculate"
     with a spinner that never resolves), which explains both the
     endless-paper and the stuck-preview symptoms. */
  body.printing-receipt > *:not(#receiptModal) {
    display: none !important;
  }
  #receiptModal {
    position: static !important;
    background: none !important;
    display: block !important;
  }
  .receipt {
    position: static;
    width: 100%;
    /* No max-height/overflow clip here on purpose -- that was cutting off
       real content (like a long policy section) instead of just
       preventing a runaway page. If a receipt is unusually long it will
       flow onto a second page, which is correct; losing text is not. */
    padding: 6px 8px;
    /* Screen size (13px) reads fine in the popup but prints too small on
       thermal paper -- bump it up specifically for the printed copy. */
    font-size: 16px !important;
    /* Color alone (#000) isn't enough on thermal printers - a normal-weight
       thin font prints noticeably lighter/weaker than bold text even at
       the same color value. Previously this was only applied to the
       policy section, leaving the rest of the receipt comparatively faint
       next to it. Bolding the whole receipt makes it consistently dark. */
    font-weight: 600 !important;
  }
  .receipt .r-total { font-size: 19px !important; }
  .receipt .r-policy {
    font-size: 13px !important;
    color: #000 !important;
    font-weight: 600 !important;
  }
  .modal-footer { display: none !important; }
}

.history-customer-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
}
.history-sale-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.history-sale-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 6px; }
.history-line { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--gray-700); }

.repair-part-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--gray-100); }

.company-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--gray-100); }

.report-section { margin-bottom: 20px; }
.report-section h3 { margin-bottom: 8px; }
.report-grand-total {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.task-notes-log {
  max-height: 140px;
  overflow-y: auto;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.task-note-entry { padding: 4px 0; border-bottom: 1px solid var(--gray-300); }
.task-note-entry:last-child { border-bottom: none; }
.task-note-time { color: var(--gray-500); font-weight: bold; margin-right: 6px; }

.readonly-banner {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 14px;
}

/* -- Pattern lock grid ----------------------- */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 180px;
  margin: 8px auto;
  padding: 14px;
  background: var(--gray-100);
  border-radius: var(--radius);
}
.pattern-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gray-500);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--gray-500);
  user-select: none;
}
.pattern-dot.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.pattern-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

@media (max-width: 700px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  main { padding: 14px; }
  .form-row.two-col { flex-direction: column; }
}