:root{
  --bg:#f6f7fb;
  --card:#fff;
  --muted:#6b7280;
  --accent-start:#7c3aed;
  --accent-end:#a78bfa;
  --sidebar-bg:#f1f3f9;
  --sidebar-border:#dfe3ef;
  --active:#ede9fe;
  --active-text:#4c1d95;
  --text:#111827;
}
*{box-sizing:border-box}
html{zoom:1}
body{
  margin:0; font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  min-width:1200px;
}
.topbar{
  background: linear-gradient(90deg,var(--accent-start),var(--accent-end));
  color:white; padding:10px 20px; min-height:58px;
}
.topbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:38px}
.title-group{display:flex;align-items:center;gap:12px}
.topbar h1{margin:0;font-size:18px;font-weight:600;line-height:1.2}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls input{padding:8px 10px;border-radius:8px;border:0;min-width:280px}
.toolbar-btn{
  border:none; border-radius:8px; padding:9px 14px; font-weight:600; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.toolbar-btn:hover{transform:translateY(-1px)}
.toolbar-btn.primary{background:#fff; color:#4c1d95}
.toolbar-btn.secondary{background:#1f2937; color:#fff}
.toolbar-btn.warning{background:#f59e0b; color:#fff}
.toolbar-btn.danger{background:#dc2626; color:#fff}
.location-switch{
  display:inline-flex; align-items:center; gap:0; padding:4px; border-radius:12px; background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.26); box-shadow:inset 0 1px 2px rgba(15,23,42,0.12);
}
.location-switch.hidden{ display:none; }
.location-switch-option{
  border:none; background:transparent; color:rgba(255,255,255,0.9); font-size:12px; font-weight:700;
  padding:7px 12px; border-radius:8px; cursor:pointer; transition:all .15s ease; min-width:72px;
}
.location-switch-option.active{
  background:#fff; color:#4c1d95; box-shadow:0 1px 2px rgba(15,23,42,0.12);
}
.active-db-badge{
  display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,0.16); color:#fff; border:1px solid rgba(255,255,255,0.26);
  font-size:12px; font-weight:700; letter-spacing:0.04em; min-width:110px; text-align:center;
}
.add-row-btn{
  width:28px; height:28px; border:none; border-radius:8px; background:#4c1d95; color:white;
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* Shift add-row button slightly to the right when it's used in the table header */
.add-row-col .add-row-btn { margin-left:12px; }
.workspace{display:flex;max-width:1400px;margin:20px auto;padding:0 16px;gap:16px;align-items:flex-start}
.sidebar{
  width:260px; background:var(--sidebar-bg); border:1px solid var(--sidebar-border);
  border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(12,14,20,0.04);
}
.sidebar-header{
  padding:14px 16px; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:#eef2ff; border-bottom:1px solid var(--sidebar-border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
#collectionSearch{
  width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13px; background:#fff;
}
.add-collection-btn{
  width:28px; height:28px; border:none; border-radius:8px; background:#4c1d95; color:white;
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.collection-list{list-style:none;margin:0;padding:10px}
.collection-list li{
  padding:10px 12px; border-radius:8px; font-size:14px; cursor:pointer; color:#1f2937;
  border:1px solid transparent; transition:all .15s ease;
}
.collection-list li:hover{background:#e5e7eb}
.collection-list li.active{
  background:var(--active); border-color:#c4b5fd; color:var(--active-text); font-weight:600;
}
.collection-list .loading-item{color:var(--muted); cursor:default}
.table-panel{flex:1; min-width:0}
.table-wrap{
  background:#f2f2f2; border:1px solid #a7a7a7; border-radius:0; box-shadow:none; overflow:auto;
  padding:0;
}
#inventory-table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:980px; background:#fff;
  border-left:1px solid #dfe3ef; border-right:1px solid #dfe3ef; border-bottom:1px solid #dfe3ef;
}
#inventory-table thead th{
  position:sticky; top:0; z-index:2; background:linear-gradient(180deg, #e5e7ef 0%, #dfe4ee 100%);
  color:#0f172a; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
  padding:14px 12px; border:1px solid #cbd5e1; text-align:center; box-shadow:inset 0 -1px 0 rgba(15,23,42,0.05);
}
#inventory-table tbody td{
  padding:14px 12px; border:1px solid #e2e8f0; font-size:13px; color:#111827; background:#fff; min-height:42px;
  vertical-align:middle; white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; transition:background-color .12s ease;
}
#inventory-table tbody td[data-field="brand"],
#inventory-table tbody td[data-field="made"],
#inventory-table tbody td[data-field="stock"],
#inventory-table tbody td[data-field="price"],
#inventory-table tbody td[data-field="stock on hand"],
#inventory-table tbody td[data-field="quantity"],
#inventory-table tbody td[data-field="qty"],
#inventory-table tbody td[data-field="restock"]{
  text-align:center;
}
#inventory-table tbody td[data-field="brand"]:focus,
#inventory-table tbody td[data-field="made"]:focus,
#inventory-table tbody td[data-field="stock"]:focus,
#inventory-table tbody td[data-field="price"]:focus,
#inventory-table tbody td[data-field="stock on hand"]:focus,
#inventory-table tbody td[data-field="quantity"]:focus,
#inventory-table tbody td[data-field="qty"]:focus,
#inventory-table tbody td[data-field="restock"]:focus{
  text-align:center;
}
#inventory-table tbody tr:nth-child(even) td{background:#f8fafc}
#inventory-table tbody tr:hover td{
  background:#eef6ff;
  box-shadow:inset 0 0 0 1px rgba(147, 197, 253, 0.35);
}
#inventory-table tbody td.editable-cell{min-width:130px; min-height:36px}
#inventory-table tbody td:first-child{font-weight:700; color:#0f172a; background:#f8fafc; text-align:center; width:58px}
#inventory-table .row-number-col{width:58px}
#inventory-table .add-row-col{width:52px; padding:0; text-align:center}
#inventory-table tbody tr:first-child td{border-top:none}
#inventory-table tbody td[data-field="price"],
#inventory-table tbody td[data-field="stock"],
#inventory-table tbody td[data-field="stock on hand"],
#inventory-table tbody td[data-field="quantity"],
#inventory-table tbody td[data-field="qty"],
#inventory-table tbody td[data-field="restock"]{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#inventory-table tbody td[data-field="stock"]{
  font-weight:700;
  transition:color .12s ease, background-color .12s ease;
}
#inventory-table tbody td[data-field="stock"].stock-in{
  color:#166534;
  background-color:#dcfce7 !important;
}
#inventory-table tbody td[data-field="stock"].stock-low{
  color:#b45309;
  background-color:#fef3c7 !important;
}
#inventory-table tbody td[data-field="stock"].stock-out{
  color:#991b1b;
  background-color:#fee2e2 !important;
}
#inventory-table tbody td[data-field="stock"]:focus{outline:2px solid rgba(124,58,237,0.35); outline-offset:-2px}
@media (max-width:720px){.workspace{flex-direction:column}.sidebar{width:100%}.controls input{min-width:140px}}

/* Modal for process order */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);align-items:center;justify-content:center;padding:20px;z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;padding:20px;border-radius:10px;max-width:820px;width:100%;box-shadow:0 10px 40px rgba(2,6,23,0.2)}
.process-order-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.modal-content h2{margin:0;font-size:22px}
.process-order-mode-toggle{display:inline-flex;align-items:center;gap:0;padding:4px;border:1px solid #d1d5db;border-radius:999px;background:#f3f4f6;box-shadow:inset 0 1px 2px rgba(15,23,42,0.04)}
.toggle-option{min-width:48px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#6b7280;text-align:center;cursor:pointer;transition:all .15s ease}
.toggle-option.active{background:#4c1d95;color:#fff;box-shadow:0 1px 2px rgba(76,29,149,0.2)}
.modal-content form label{display:block;margin-bottom:8px;font-size:14px}
.modal-content input[type=text], .modal-content textarea{width:100%;padding:9px 10px;border:1px solid #cfcfcf;border-radius:6px}
.process-order-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin:8px 0 12px}
.process-order-header-column{display:flex;flex-direction:column;gap:10px;min-width:0}
.process-order-header-row{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.inline-top-row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.inline-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.process-order-header-row-right{margin-left:auto;justify-content:flex-end;flex:0 0 auto}
.process-order-header label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#111827}
.process-order-header input,
.process-order-header select{width:220px;padding:9px 10px;border:1px solid #cfcfcf;border-radius:6px;font-size:14px}
.process-order-field{display:flex;align-items:center;gap:8px}
.client-field{min-width:300px}
#clientName{min-width:260px;font-size:16px;padding:10px 12px}
.process-order-header #clientDate{width:110px;font-size:12px;padding:6px 8px}
.process-order-header #invoiceNumber{width:180px;font-size:13px;padding:7px 10px}
.date-field{margin-top:0}
.invoice-field{margin-top:0}
.sample-template-table{width:100%;border-collapse:collapse;margin-top:8px}
.sample-template-table th,
.sample-template-table td{border:1px solid #111827;padding:6px;text-align:left;vertical-align:middle}
.sample-template-table th{background:#e5e7eb;font-size:12px;text-transform:none}
.sample-template-table input,
.sample-template-table select{width:100%;border:1px solid #d1d5db;border-radius:4px;padding:6px 8px;background:#fff;font-size:13px}
.sample-template-table td input,
.sample-template-table td select{min-height:32px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.modal-content .toolbar-btn{padding:8px 12px}
.records-modal{background:rgba(15,23,42,0.18)}
.records-modal .modal-content{max-width:1500px;width:96vw;min-width:1100px}
.low-stock-modal-content{max-width:900px;min-width:540px;width:70vw}
.low-stock-table{min-width:600px}
.records-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.records-header-row h2{margin:0;font-size:26px}
.records-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.records-toolbar{display:flex;justify-content:flex-start;margin:10px 0 8px}
.records-toolbar input{width:260px;padding:8px 10px;border:1px solid #cfcfcf;border-radius:6px;font-size:13px}
.records-table-wrap{max-height:440px;overflow:auto;border:1px solid #d1d5db;border-radius:8px;margin-top:10px}
.records-table{width:100%;min-width:1400px;border-collapse:collapse;background:#fff}
.records-table th,.records-table td{border:1px solid #d1d5db;padding:10px 12px;text-align:left;font-size:13px;white-space:nowrap}
.records-table th{background:#f3f4f6;position:sticky;top:0;font-size:13px}
.records-table th:nth-child(5), .records-table td:nth-child(5){min-width:220px}
.records-table tbody tr:nth-child(even){background:#f9fafb}
.records-bottom-actions{display:none}
.records-empty{text-align:center;color:#6b7280;padding:16px}

.collection-prompt-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15, 23, 42, 0.52);
  z-index:100;
}
.collection-prompt-modal[aria-hidden="false"]{
  display:flex;
}
.collection-prompt-dialog{
  width:min(420px, calc(100vw - 32px));
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,243,255,0.98));
  color:#111827;
  border-radius:14px;
  padding:20px 18px 16px;
  box-shadow:0 20px 40px rgba(76,29,149,0.2);
  border:1px solid rgba(124, 58, 237, 0.18);
}
.collection-prompt-dialog h3{
  margin:0 0 14px;
  font-size:18px;
  font-weight:700;
  color:#111827;
}
.collection-prompt-dialog input{
  width:100%;
  padding:10px 12px;
  border:1px solid #c4b5fd;
  border-radius:8px;
  background:#fff;
  color:#111827;
  font-size:14px;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,23,42,0.04);
}
.collection-prompt-dialog input:focus{
  border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(124,58,237,0.12);
}

.floating-actions{
  position:fixed;
  right:28px;
  bottom:26px;
  display:flex;
  gap:12px;
  z-index:120;
}
.tutorial-float-btn,
.profile-float-btn{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg, #4f46e5, #7c3aed);
  color:#fff;
  font-size:26px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(79,70,229,0.35);
}
.tutorial-float-btn:hover,
.profile-float-btn:hover{
  transform:translateY(-1px);
}
.tutorial-float-btn:active,
.profile-float-btn:active{
  transform:translateY(0);
}
.profile-float-btn{
  font-size:22px;
  background:linear-gradient(135deg, #0ea5e9, #2563eb);
}
.account-list-modal-content{max-width:700px;min-width:420px;width:70vw}
.account-list-table{min-width:360px}
.profile-float-btn.hidden{ display:none; }

.collection-prompt-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.collection-prompt-actions .toolbar-btn{
  min-width:86px;
  padding:8px 14px;
  border-radius:8px;
}
.collection-prompt-actions .toolbar-btn.primary{
  background:linear-gradient(90deg, #7c3aed, #a78bfa);
  color:#fff;
}
.collection-prompt-actions .toolbar-btn.secondary{
  background:#f3f4f6;
  color:#111827;
  border:1px solid #d1d5db;
}
.status-prompt-message{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#1f2937;
  word-break:break-word;
}