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

:root { --ctrl-h: 36px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  background: #f5f6fa;
  color: #222;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Browser banner */
#browser-banner {
  background: #e74c3c;
  color: #fff;
  padding: 14px 24px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
}

/* App shell */
#app {
  display: flex;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

/* ── Nav menu ── */
#nav-menu {
  width: 180px;
  min-width: 150px;
  background: #1e2335;
  color: #cdd6f4;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid #2a3050;
}

#nav-header {
  padding: 16px 14px 12px;
  border-bottom: 1px solid #2a3050;
}

#nav-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #89b4fa;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#nav-items {
  list-style: none;
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-item {
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #cdd6f4;
  transition: background .1s;
  user-select: none;
}
.nav-item:hover { background: #2a3050; }
.nav-item.active { background: #4f8ef7; color: #fff; }

#nav-footer {
  padding: 12px 10px;
  border-top: 1px solid #2a3050;
}

#grant-access-btn {
  width: 100%;
  padding: 8px 10px;
  background: #2a3050;
  color: #89b4fa;
  border: 1px solid #3a4570;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s;
  text-align: center;
}
#grant-access-btn:hover { background: #3a4570; color: #cdd6f4; }
#grant-access-btn:disabled { opacity: .45; cursor: default; }

/* ── Main ── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* File tab bar */
#file-tabs {
  display: flex;
  background: #252839;
  border-bottom: 1px solid #2a3050;
  min-height: 36px;
  overflow-x: auto;
  flex-shrink: 0;
}
#file-tabs::-webkit-scrollbar { height: 4px; }

.file-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 16px;
  height: 36px;
  background: #1e2335;
  color: #89b4fa;
  border-right: 1px solid #2a3050;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: background .1s;
  user-select: none;
  flex-shrink: 0;
}
.file-tab:hover { background: #2a3050; }
.file-tab.active {
  background: #f5f6fa;
  color: #222;
  border-top: 2px solid #4f8ef7;
}

.file-tab-close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  opacity: 0.45;
  padding: 0;
  flex-shrink: 0;
}
.file-tab-close:hover { background: rgba(0,0,0,.2); opacity: 1; }
.file-tab.active .file-tab-close:hover { background: rgba(0,0,0,.1); opacity: 1; }

/* Toolbar */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

#sheet-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.sheet-tab {
  padding: 6px 16px;
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #f3f4f6;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  transition: background .1s;
}
.sheet-tab:hover { background: #e5e7eb; }
.sheet-tab.active {
  background: #fff;
  color: #111;
  font-weight: 600;
  border-top: 2px solid #4f8ef7;
}

#toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#toolbar-actions button {
  padding: 7px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .1s;
}
#toolbar-actions button:disabled { opacity: .4; cursor: default; }

#add-row-btn { background: #e8f5e9; color: #2e7d32; }
#add-row-btn:not(:disabled):hover { background: #c8e6c9; }

#save-btn { background: #e3f2fd; color: #1565c0; }
#save-btn:not(:disabled):hover { background: #bbdefb; }
#save-btn.dirty { background: #fff3e0; color: #e65100; animation: pulse 1.8s ease infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

/* Status bar */
.status-msg {
  font-size: 12px;
  padding: 4px 16px;
  min-height: 24px;
  flex-shrink: 0;
}
.status-msg.error { color: #c0392b; }
.status-msg.info  { color: #27ae60; }

/* Table wrapper */
#table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

#table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sticky panel (title + controls) inside a view */
.view-panel {
  flex-shrink: 0;
  padding: 16px 24px 8px;
}

/* Scrollable table area */
.view-scroll-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  padding: 0 16px 16px;
}

/* White card for tables inside view-scroll-wrap */
.table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  /* no overflow:hidden — would intercept position:sticky on thead th */
}

.data-table {
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  width: 100%;
}

.data-table thead th {
  background: #1e2335;
  color: #cdd6f4;
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}

.data-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #f1f3f5;
  min-width: 80px;
  max-width: 260px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  cursor: text;
}
.data-table td:focus {
  outline: 2px solid #4f8ef7;
  outline-offset: -2px;
  background: #f0f7ff;
  overflow: visible;
  white-space: normal;
  z-index: 1;
  position: relative;
}

.data-table tbody tr:hover { background: #f8f9ff; }
.data-table tbody tr:last-child td { border-bottom: none; }

.table-scroll {
  overflow-x: auto;
}
.table-scroll .data-table {
  border-radius: 0;
  box-shadow: none;
  min-width: max-content;
  width: 100%;
}

/* Inline messages */
.inline-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  padding: 16px 20px;
  color: #c53030;
  font-size: 13px;
  line-height: 1.5;
}

.empty-state-msg {
  color: #9ca3af;
  font-style: italic;
  padding: 32px;
  text-align: center;
}

/* Confirm dialog */
#confirm-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-box {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.confirm-box p {
  font-size: 15px;
  margin-bottom: 20px;
  color: #333;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.confirm-actions button {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .1s;
}
.confirm-actions [data-action="save"]    { background: #4f8ef7; color: #fff; }
.confirm-actions [data-action="save"]:hover { background: #3a7ce8; }
.confirm-actions [data-action="discard"] { background: #f1f3f5; color: #555; }
.confirm-actions [data-action="discard"]:hover { background: #e2e8f0; }
.confirm-actions [data-action="cancel"]  { background: #fff; color: #555; border: 1px solid #d1d5db; }
.confirm-actions [data-action="cancel"]:hover { background: #f9fafb; }

/* Scrollbar tweaks */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c8d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0a8b4; }

/* ── Nav groups ── */
.nav-group { padding: 8px 0 0; }

.nav-group-label {
  padding: 6px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6272a4;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-subitems { list-style: none; }

.nav-subitem {
  padding: 8px 16px 8px 24px;
  font-size: 12px;
}

/* ── Nav icons ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

.nav-item:hover .nav-icon  { opacity: 0.9; }
.nav-item.active .nav-icon { opacity: 1; }

.nav-group-label .nav-icon {
  opacity: 0.35;
  display: none;
}

#grant-access-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-icon--btn {
  filter: brightness(0) saturate(100%) invert(75%) sepia(30%) saturate(600%) hue-rotate(190deg);
  opacity: 1;
}

/* ── Nav toggle button ── */
#nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#nav-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .1s;
}
#nav-toggle-btn:hover { background: #2a3050; }
#nav-toggle-btn .nav-toggle-icon {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  opacity: 0.45;
}
#nav-toggle-btn:hover .nav-toggle-icon { opacity: 0.8; }

/* ── Collapsed nav ── */
#nav-menu {
  transition: width 0.2s ease, min-width 0.2s ease;
}

#nav-menu.nav--collapsed {
  width: 48px;
  min-width: 48px;
}

#nav-menu.nav--collapsed #nav-title { display: none; }
#nav-menu.nav--collapsed .nav-label { display: none; }

#nav-menu.nav--collapsed .nav-group-label { display: none; }

#nav-menu.nav--collapsed .nav-group + .nav-group {
  border-top: 1px solid #2a3050;
  margin-top: 4px;
  padding-top: 4px;
}

#nav-menu.nav--collapsed .nav-item {
  padding: 9px 0;
  margin: 2px 4px;
  justify-content: center;
}

#nav-menu.nav--collapsed #nav-footer { padding: 10px 4px; }
#nav-menu.nav--collapsed #grant-access-btn {
  padding: 8px;
  width: 100%;
  justify-content: center;
}

/* ── Nav tooltip ── */
#nav-tooltip {
  position: fixed;
  background: #1e2335;
  color: #cdd6f4;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #3a4570;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 500;
}
#nav-tooltip.nav-tooltip--visible { opacity: 1; }

/* ── Form views ── */
.form-view {
  flex: 1;
  overflow-y: auto;
  max-width: 520px;
  margin: 32px auto;
  padding: 0 24px;
}

.form-view-wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.form-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e2335;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

.data-form { display: flex; flex-direction: column; gap: 16px; }

.form-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
}
.form-row .form-group { flex: 1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.form-group input,
.filter-group input,
.form-select {
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #111;
  background: #fff;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.form-group input:focus,
.filter-group input:focus,
.form-select:focus { border-color: #4f8ef7; box-shadow: 0 0 0 3px rgba(79,142,247,.12); }

.req { color: #e74c3c; }

.form-actions { margin-top: 8px; }

.list-view-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.btn-primary {
  padding: 10px 24px;
  background: #4f8ef7;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: #3a7ce8; }
.btn-primary:disabled { opacity: .5; cursor: default; }

.btn-secondary {
  padding: 7px 14px;
  background: #f1f5f9;
  color: #1e2335;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-secondary:hover { background: #e2e8f0; }

.btn-warn {
  padding: 4px 10px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-warn:hover { background: #fed7aa; }

.btn-info {
  padding: 4px 10px;
  background: transparent;
  color: #3b82f6;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-info:hover { background: #eff6ff; }

.btn-danger {
  padding: 4px 10px;
  background: #fff5f5;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: #fee2e2; }

.form-status {
  font-size: 13px;
  margin-top: 4px;
  min-height: 20px;
}
.form-status.success { color: #27ae60; }
.form-status.error   { color: #c0392b; }

/* ── Order items table ── */
.order-items-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.order-items-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.order-items-table thead th {
  background: #1e2335;
  color: #cdd6f4;
  padding: 9px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.order-items-table th.order-loc-col,
.order-items-table td.order-loc-col { min-width: 130px; }
.order-items-table th:nth-child(2),
.order-items-table td:nth-child(2)  { min-width: 150px; }
.order-items-table th:nth-child(3),
.order-items-table td:nth-child(3)  { min-width: 220px; }
.order-items-table th:nth-child(4),
.order-items-table td:nth-child(4)  { min-width: 70px; }
.order-items-table th:nth-child(5),
.order-items-table td:nth-child(5)  { min-width: 70px; }
.order-items-table th:nth-child(6),
.order-items-table td:nth-child(6)  { min-width: 110px; }

.order-items-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
}

.order-items-table tbody tr:last-child td { border-bottom: none; }

.order-item-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.order-item-input:focus { border-color: #4f8ef7; }
.order-item-input[type=number] { text-align: right; }
.order-item-readonly { background: #f8fafc; color: #64748b; cursor: default; }

.order-item-total {
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: #1e2335;
  white-space: nowrap;
  min-width: 90px;
  padding-right: 12px;
}

.order-item-remove {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color .1s, background .1s;
}
.order-item-remove:hover { color: #e74c3c; background: #fff5f5; }

.order-grand-total {
  text-align: right;
  font-size: 15px;
  color: #374151;
  padding: 8px 4px;
}
.order-grand-total strong { color: #1e2335; font-size: 17px; }

/* ── List views (order history) ── */
.list-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list-back {
  background: none;
  border: none;
  color: #4f8ef7;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  display: block;
}
.list-back:hover { text-decoration: underline; }

.dir-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dir-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  user-select: none;
}
.dir-list-item:hover { background: #f0f7ff; border-color: #4f8ef7; }

.dir-icon { font-size: 16px; flex-shrink: 0; }

.dir-name {
  flex: 1;
  font-size: 14px;
  color: #1e2335;
  font-weight: 500;
}

.dir-arrow {
  color: #9ca3af;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Order item select ── */
.order-item-select {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  background: #fff;
  min-width: 160px;
}
.order-item-select:focus { border-color: #4f8ef7; }
.order-item-select:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Form notice ── */
.form-notice {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5f4339;
  margin-bottom: 16px;
}

/* ── Movement view ── */
.movement-view {
  padding: 32px 24px;
}

.movement-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
}


.filter-group-wide { flex: 1; min-width: 200px; }
.filter-group-wide .form-select { width: 100%; }

/* Uniform control height across all filter bars */
.movement-filters input,
.movement-filters select,
.movement-filters .btn-primary,
.movement-filters .btn-secondary {
  height: var(--ctrl-h);
}

.filter-group--inline { justify-content: flex-end; }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  padding: 7px 0;
}
.checkbox-label input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: #4f8ef7; }

.mv-table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.movement-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.movement-table thead th {
  background: #1e2335;
  color: #cdd6f4;
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

.movement-table thead tr:first-child th {
  position: sticky;
  top: 0;
}

.movement-table td {
  padding: 8px 14px;
  border-bottom: 1px solid #f1f3f5;
  border-right: 1px solid #e8ecf0;
  color: #374151;
}
.movement-table thead th {
  border-right: 1px solid #374162;
}
.movement-table th:last-child,
.movement-table td:last-child { border-right: none; }

.movement-table tbody tr:hover { background: #f8f9ff; }
.movement-table tbody tr:last-child td { border-bottom: none; }

.mv-date  { font-variant-numeric: tabular-nums; color: #6b7280; }
.mv-code  { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: #1e2335; font-weight: 600; }
.mv-ref   { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.mv-copy-btn {
  font-size: 11px; padding: 0 3px; cursor: pointer;
  background: none; border: 1px solid #e5e7eb; border-radius: 3px;
  color: #9ca3af; line-height: 1.3; vertical-align: middle; margin-left: 4px;
}
.mv-copy-btn:hover { border-color: #9ca3af; color: #374151; }
.mv-remarks { font-size: 12px; color: #6b7280; font-style: italic; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

.mv-qty   { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.mv-qty-in  { color: #16a34a; }
.mv-qty-out { color: #dc2626; }

.mv-balance { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: #1e2335; }

.mv-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.mv-badge-order      { background: #fff0e0; color: #c2410c; }
.mv-badge-restock    { background: #dcfce7; color: #15803d; }
.mv-badge-adjustment { background: #e0f2fe; color: #0369a1; }
.mv-badge-transfer   { background: #fce7f3; color: #be185d; }
.mv-badge-audit      { background: #ede9fe; color: #6d28d9; }

.mv-audit-row { background: #faf5ff !important; }
.mv-audit-row td { border-left: 2px solid #a78bfa; }

.mv-count {
  font-size: 12px;
  color: #9ca3af;
  padding: 10px 2px;
  text-align: right;
}

/* ── Pivot table ── */
.mv-pivot-table { min-width: max-content; }

.mv-pivot-date-hd {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}

.mv-pivot-bal-hd { text-align: right; min-width: 100px; }
.mv-pivot-end-hd { background: #2a3050; }

.mv-pivot-cell {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mv-pivot-bal {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e2335;
}

.mv-pivot-end-bal {
  background: #f0f7ff;
  border-left: 2px solid #4f8ef7;
}

.mv-pivot-row {
  cursor: pointer;
  transition: background .1s;
}
.mv-pivot-row:hover { background: #f0f7ff !important; }
.mv-pivot-row:hover .mv-pivot-end-bal { background: #dbeafe; }
.mv-pivot-row--active { background: #eff6ff !important; }
.mv-pivot-row--active .mv-pivot-end-bal { background: #dbeafe; }
.mv-pivot-row--active:hover { background: #dbeafe !important; }

.mv-row-chevron {
  display: inline-block;
  font-size: 10px;
  color: #94a3b8;
  margin-right: 6px;
  transition: color .1s;
}
.mv-pivot-row:hover .mv-row-chevron,
.mv-pivot-row--active .mv-row-chevron { color: #3b82f6; }

.mv-diff-warn { background: #fff7ed !important; color: #c2410c; font-weight: 700; }
.mv-pivot-row:hover .mv-diff-warn { background: #fed7aa !important; }

/* ── Inline expanded detail ── */
.mv-expanded-row { background: #f8fafc; }
.mv-expanded-row > td { padding: 0 !important; border-top: none !important; }
.mv-inline-detail {
  padding: 8px 16px 16px 32px;
  border-left: 3px solid #3b82f6;
  margin: 0;
}
.mv-inline-table {
  font-size: 12px;
  min-width: 600px;
}
.mv-inline-table th {
  font-size: 11px;
  padding: 5px 10px;
  background: #f1f5f9;
  color: #64748b;
}
.mv-inline-table td { padding: 5px 10px; }
.mv-inline-empty { padding: 10px 0; font-size: 13px; color: #94a3b8; }

/* ── Legend ── */
.mv-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.mv-legend-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-right: 2px;
}

.mv-sheet-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.mv-item-name {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Detail view ── */
.mv-detail { padding: 0; }

.mv-detail-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}

.mv-detail-name {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  flex: 1;
}

.mv-detail-range {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}
.mv-detail-range strong { color: #1e2335; }

/* ── Inventory List view ── */
.inv-list-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inv-list-header {
  flex-shrink: 0;
  padding: 16px 24px 8px;
}

.inv-list-header .movement-filters { margin-bottom: 0; }

.inv-list-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.inv-list-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  padding: 0 16px 16px;
}

/* Beg-bal shrinks so remarks gets more room — scoped to the Inventory List
   view only (this table markup is reused by other batch views where these
   two column keys don't apply the same way). */
#inv-list-content .col-beg-bal { width: 130px; max-width: 130px; }
#inv-list-content .col-remarks { min-width: 260px; }

.inv-mv-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 10px 16px;
  margin: 0 0 4px;
}

.mv-toggle-label {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* iOS-style pill toggle for .mv-toggle-label */
.mv-toggle-label input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  outline: none;
  opacity: 1;
}
.mv-toggle-label input[type=checkbox]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: #cbd5e1;
  transition: background .2s;
}
.mv-toggle-label input[type=checkbox]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .2s;
}
.mv-toggle-label input[type=checkbox]:checked::before { background: #4f8ef7; }
.mv-toggle-label input[type=checkbox]:checked::after  { left: 21px; }

.mv-computed-hd {
  background: #e2e8f0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-computed-cell {
  background: #f1f5f9;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #475569;
  padding: 6px 10px;
  white-space: nowrap;
}

.mv-chevron-col {
  width: 28px;
  text-align: center;
  padding: 4px;
}

/* ── Action panel (appears below filter panel after View is clicked) ── */
.action-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* ── Batch table (restock / adjustment) ── */
.batch-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.batch-table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  overflow: hidden;
  margin-bottom: 16px;
}
.batch-table-wrap {
  /* overflow handled by .view-scroll-wrap parent; no overflow here or sticky breaks */
}

/* ── Tab bar (Transfer / History) ── */
.view-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.view-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}
.view-tab:hover { color: #1e2335; }
.view-tab--active { color: #4f8ef7; border-bottom-color: #4f8ef7; }

/* ── Transfer view: two side-by-side panels ── */
.xfer-panels {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.xfer-panel {
  flex: 1;
  min-width: 0;
}
.xfer-panel-header {
  font-weight: 700;
  font-size: 13px;
  color: #374151;
  margin-bottom: 8px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qty-stepper input {
  width: 48px;
  text-align: center;
  padding: 6px 4px;
}
.qty-step-btn {
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.batch-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.batch-table thead th {
  background: #1e2335;
  color: #cdd6f4;
  padding: 9px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.batch-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.batch-qty-hd { text-align: center; }

.batch-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f3f5;
  border-right: 1px solid #e8ecf0;
  vertical-align: middle;
}
.batch-table thead th {
  border-right: 1px solid #374162;
}
.batch-table th:last-child,
.batch-table td:last-child { border-right: none; }

.batch-table tbody tr:last-child td { border-bottom: none; }

.batch-row-error { background: #fff5f5 !important; outline: 1px solid #fca5a5; }

.movement-filters .btn-primary,
.movement-filters .btn-secondary {
  padding: 7px 14px;
  font-size: 13px;
}

/* ── Print invoice ── */
#order-print-view { display: none; }

@media print {
  body > *:not(#order-print-view) { display: none !important; }
  #order-print-view { display: block !important; }
  .order-loc-col { display: none !important; }
}

.inv-doc {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #000;
  padding: 16px;
}

/* Two-column header */
.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.inv-store { line-height: 1.7; }
.inv-logo { display: block; max-height: 60px; margin-bottom: 6px; }
.inv-store-name {
  color: #cc0000;
  font-weight: 800;
  font-size: 16px;
  font-style: italic;
}
.inv-store div { font-style: italic; }

.inv-customer {
  text-align: right;
  line-height: 1.7;
}

/* Items table */
.inv-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.inv-items-table th,
.inv-items-table td {
  border: 1px solid #000;
  padding: 4px 8px;
}
.inv-items-table thead th {
  font-weight: 700;
  text-align: left;
}
.inv-items-table tfoot td { border-top: 2px solid #000; }

.inv-total-row td { font-weight: 700; }

.inv-center { text-align: center; }
.inv-right   { text-align: right; }

/* Remarks section */
.inv-remarks-section {
  margin-top: 16px;
  border: 1px solid #000;
  padding: 8px 12px;
  line-height: 1.7;
}
.inv-remarks-title { font-weight: 700; margin-bottom: 4px; }

/* ── Table column filter row ── */
.tbl-filter-row th {
  background: #e8ecf5;
  padding: 4px 5px;
  position: static;
  border-top: 2px solid #1e2335;
  border-bottom: 1px solid #c8d0e0;
}

.tbl-filter-input {
  width: 100%;
  min-width: 36px;
  padding: 3px 6px;
  border: 1px solid #9aa5bf;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  background: #fff;
  color: #1e2335;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}

.tbl-filter-input:focus {
  border-color: #4f8ef7;
  box-shadow: 0 0 0 2px rgba(79,142,247,.2);
  background: #fff;
}

.tbl-filter-input::placeholder {
  color: #9aa5bf;
  font-size: 14px;
  font-weight: 400;
}

.tbl-filter-select {
  padding: 3px 3px;
  cursor: pointer;
}

.tbl-filter-row--hidden { display: none !important; }

.tbl-filter-toggle {
  white-space: nowrap;
}
.tbl-filter-toggle::after {
  content: '▾';
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.tbl-filter-toggle--open::after {
  transform: rotate(180deg);
}
.tbl-filter-toggle--open {
  border-color: #94a3b8;
}
.tbl-filter-toggle--active {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
  font-weight: 600;
}

/* ── Loading spinner ── */
@keyframes spinner-ring {
  to { transform: rotate(360deg); }
}
.loading-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 12px;
}
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #cbd5e1;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spinner-ring 0.75s linear infinite;
}
.loading-msg {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

/* ── Empty state ── */
.empty-state-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
}
.empty-state-btn {
  margin-top: 4px;
}

/* ── Toast notifications ── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--hiding {
  opacity: 0;
  transform: translateY(12px);
}
.toast--success {
  background: #166534;
  color: #dcfce7;
  border-left: 4px solid #22c55e;
}
.toast--error {
  background: #7f1d1d;
  color: #fee2e2;
  border-left: 4px solid #ef4444;
}
.toast-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  padding: 0 2px;
  margin-left: auto;
}
.toast-close:hover { opacity: 1; }

/* ── Confirm modal ── */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.confirm-backdrop--visible {
  opacity: 1;
}
.confirm-modal {
  background: #1e2335;
  border: 1px solid #2d3554;
  border-radius: 12px;
  padding: 28px 32px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.confirm-message {
  margin: 0 0 24px;
  color: #e2e8f0;
  font-size: 15px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-modal--order {
  max-width: 720px;
  width: 100%;
}
.order-confirm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: -12px 0 16px;
  color: #cbd5e1;
  font-size: 13px;
}
.order-confirm-meta strong { color: #e2e8f0; }
.order-confirm-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #2d3554;
  border-radius: 8px;
  margin-bottom: 16px;
}
.order-confirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #e2e8f0;
}
.order-confirm-table th, .order-confirm-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #2d3554;
  white-space: nowrap;
}
.order-confirm-table thead th {
  position: sticky;
  top: 0;
  background: #232946;
  z-index: 1;
}
.order-confirm-table tbody tr:last-child td { border-bottom: none; }
.order-confirm-grand-total {
  text-align: right;
  color: #e2e8f0;
  font-size: 14px;
  margin-bottom: 20px;
}
.order-confirm-grand-total strong { font-size: 16px; }

/* Order create — sticky summary bar */
.order-summary-bar {
  position: sticky;
  bottom: 0;
  background: #1e2335;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  z-index: 10;
  flex-wrap: wrap;
}
.order-summary-bar .summary-total-label {
  margin-left: auto;
  font-size: 13px;
}
.order-summary-bar strong {
  font-size: 14px;
}

/* Tom Select — minimal dark-table theme override */
.ts-control, .ts-dropdown {
  background: #fff;
  border-color: #d1d5db;
  font-size: 13px;
  font-family: inherit;
}
.ts-dropdown .option.selected { background: #4f8ef7; color: #fff; }
.ts-dropdown .option:hover    { background: #e8f0fe; }
.ts-dropdown-content          { max-height: 320px !important; overflow-y: auto; }
.ts-dropdown                  { position: fixed !important; z-index: 1100; }
.ts-dropdown .optgroup-header { font-weight: 700; color: #1e2335; }