body { background:#f4f7fb; }
.app-main { max-width: 100%; }
.card { border:0; border-radius:16px; box-shadow:0 8px 24px rgba(16,24,40,.06); }
.btn-touch { min-height:48px; font-size:1rem; border-radius:12px; }
.item-button { min-height:104px; border-radius:16px; padding:14px 10px; white-space:normal; }
.pos-grid { display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap:16px; align-items:start; }
.sticky-pay { position:sticky; top:82px; }
.small-muted { color:#667085; font-size:.9rem; }
.search-wrap { position:relative; }
.search-dropdown { position:absolute; z-index:2000; left:0; right:0; top:100%; max-height:300px; overflow:auto; background:#fff; border:1px solid #d0d5dd; border-radius:12px; box-shadow:0 12px 30px rgba(16,24,40,.16); display:none; }
.search-result { padding:12px 14px; cursor:pointer; border-bottom:1px solid #f2f4f7; }
.search-result:hover { background:#eff8ff; }
.search-result:last-child { border-bottom:0; }
.document-toolbar { width:100%; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; padding:12px; background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(16,24,40,.06); margin-bottom:16px; }
.web-document { max-width:210mm; min-height:297mm; margin:0 auto; background:#fff; padding:12mm; color:#111827; font-size:12px; box-shadow:0 8px 30px rgba(16,24,40,.12); }
.web-document.compact { font-size:11px; padding:9mm; }
.doc-title { font-size:26px; font-weight:800; letter-spacing:.06em; }
.doc-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; }
.doc-zone-full { grid-column:1 / -1; }
.doc-block { border:1px solid #e4e7ec; border-radius:10px; padding:10px; margin-bottom:10px; break-inside:avoid; }
.doc-block h4 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; color:#344054; }
.web-document table { width:100%; border-collapse:collapse; }
.web-document th, .web-document td { border-bottom:1px solid #eaecf0; padding:6px; vertical-align:top; }
.web-document th { background:#f9fafb; font-weight:700; }
.receipt { width:80mm; margin:0 auto; background:#fff; padding:8px; font-size:12px; color:#111; }
.receipt .center { text-align:center; }
.receipt table { width:100%; border-collapse:collapse; }
.receipt td { padding:3px 0; border-bottom:1px dotted #ccc; }
@media (max-width: 992px) { .pos-grid { grid-template-columns:1fr; } .sticky-pay { position:static; } .doc-grid { grid-template-columns:1fr; } }
@media print {
  body { background:#fff; }
  .navbar, .no-print, .document-toolbar { display:none !important; }
  .app-main { padding:0 !important; }
  .web-document { box-shadow:none; margin:0; max-width:none; min-height:auto; width:100%; padding:8mm; }
  .receipt { box-shadow:none; width:76mm; margin:0; padding:0; }
  @page { size:A4; margin:8mm; }
}
.font-small { font-size: 0.88em; }
.font-normal { font-size: 1em; }
.font-large { font-size: 1.12em; }

/* POS workflow/search corrections */
.search-wrap .input-group { position: relative; z-index: 1; }
.search-trigger { min-width: 96px; }
.search-result.is-selected { background:#dbeafe; }
.search-result.is-empty { cursor: default; }
.search-result.is-empty:hover { background:#fff; }
.pos-extra-details summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; }
.pos-extra-details summary::-webkit-details-marker { display:none; }
.pos-form input[type="search"] { min-height:48px; }
.cart-line input { min-height:44px; }
@media (max-width: 576px) { .search-trigger { min-width: 78px; padding-left:10px; padding-right:10px; } }

/* Module 02: modal search workflow */
.search-dropdown { display: none !important; }
.modal-search-panel {
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  padding: 14px;
  background: #f9fafb;
}
.modal-results-panel {
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.modal-result-table-wrap {
  max-height: 52vh;
  overflow: auto;
  border: 1px solid #eaecf0;
  border-radius: 12px;
}
.modal-result-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f2f4f7;
  white-space: nowrap;
}
.modal-result-table tbody tr { cursor: pointer; }
.modal-select-button { min-width: 78px; }
.search-launcher { cursor: pointer; background: #fff; }
.quote-lines-workspace { min-height: 260px; }
@media (max-width: 768px) {
  .modal-result-table { font-size: .9rem; }
  .modal-result-table th:nth-child(3),
  .modal-result-table td:nth-child(3),
  .modal-result-table th:nth-child(5),
  .modal-result-table td:nth-child(5) { display:none; }
}

/* Module 04: uniform dashboard cards and configurable accent colour */
:root {
  --app-accent-soft: rgba(var(--app-accent-rgb), .10);
  --app-accent-mid: rgba(var(--app-accent-rgb), .22);
  --app-card-radius: 18px;
  --app-card-shadow: 0 10px 28px rgba(16, 24, 40, .07);
}
.app-navbar { background: var(--app-accent) !important; }
.app-navbar .navbar-brand,
.app-navbar .navbar-text,
.app-navbar .nav-link { color: var(--app-accent-contrast) !important; }
.app-navbar .nav-link { opacity: .75; }
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active { opacity: 1; font-weight: 700; }
.card { border-radius: var(--app-card-radius); box-shadow: var(--app-card-shadow); }
a { color: var(--app-accent); }
a:hover { color: var(--app-accent); opacity: .85; }
.btn-primary {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
  --bs-btn-active-bg: var(--app-accent);
  --bs-btn-active-border-color: var(--app-accent);
  --bs-btn-disabled-bg: var(--app-accent);
  --bs-btn-disabled-border-color: var(--app-accent);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 .25rem rgba(var(--app-accent-rgb), .16);
}
.dashboard-hero {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:#fff;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  padding:22px 26px;
  border-left:6px solid var(--app-accent);
}
.dashboard-hero h1 { margin:0; font-size:1.75rem; font-weight:800; }
.dashboard-hero p { margin:.25rem 0 0; color:#667085; }
.dashboard-date { color:#667085; font-weight:700; white-space:nowrap; }
.dashboard-grid { display:grid; gap:16px; }
.dashboard-grid-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid-main { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); align-items:stretch; }
.dashboard-card {
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  padding:22px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  color:#101828;
  position:relative;
  overflow:hidden;
}
.dashboard-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--app-accent);
}
.dashboard-card:hover { color:#101828; transform:translateY(-1px); transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 14px 34px rgba(16,24,40,.10); }
.dashboard-card-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dashboard-kicker { display:block; color:#667085; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin-bottom:4px; }
.dashboard-card h2 { margin:0; font-size:1.2rem; font-weight:800; }
.dashboard-card p { color:#667085; margin:18px 0 0; line-height:1.4; }
.dashboard-icon {
  flex:0 0 auto;
  min-width:54px;
  height:54px;
  padding:0 8px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--app-accent-soft);
  color:var(--app-accent);
  font-weight:900;
  font-size:.9rem;
  letter-spacing:.04em;
}
.dashboard-stat-value { font-size:2.8rem; line-height:1; font-weight:300; margin-top:20px; }
.dashboard-stat-subtitle { font-weight:800; font-size:1.05rem; color:#101828; margin-top:8px; }
.dashboard-link-text { color:var(--app-accent); font-weight:800; margin-top:16px; display:inline-block; }
.dashboard-table-card { min-height:260px; }
.dashboard-table { margin-bottom:0; }
.dashboard-table thead th { color:#475467; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; }
.dashboard-alert-card { min-height:260px; }
.settings-section-title { font-size:.95rem; font-weight:800; color:#344054; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #eaecf0; padding-bottom:8px; margin-bottom:12px; }
.accent-preview { width:74px; height:48px; border-radius:14px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.12); }
.accent-colour-input { width:72px; min-height:44px; padding:.25rem; }
@media (max-width: 1200px) {
  .dashboard-grid-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid-main { grid-template-columns:1fr; }
}
@media (max-width: 576px) {
  .dashboard-hero { align-items:flex-start; flex-direction:column; padding:18px; }
  .dashboard-grid-top { grid-template-columns:1fr; }
  .dashboard-card { min-height:170px; padding:18px; }
  .dashboard-date { white-space:normal; }
}

/* Module 05: POS visual refresh using the same uniform card/accent design */
.pos-page { --pos-panel-gap: 18px; }
.pos-hero {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:#fff;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  padding:22px 26px;
  border-left:6px solid var(--app-accent);
}
.pos-hero h1 { margin:0; font-size:1.75rem; font-weight:800; }
.pos-hero p { margin:.25rem 0 0; color:#667085; }
.pos-hero-actions { flex:0 0 auto; }
.pos-workspace-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 440px);
  gap:var(--pos-panel-gap);
  align-items:start;
}
.pos-card {
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.pos-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--app-accent);
}
.pos-card-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.pos-card-header h2 { margin:0; font-size:1.2rem; font-weight:800; color:#101828; }
.pos-search-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.pos-search-card {
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid #eaecf0;
  border-radius:16px;
  padding:16px;
  background:linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.pos-search-icon,
.pos-cart-icon {
  flex:0 0 auto;
  min-width:48px;
  height:48px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--app-accent-soft);
  color:var(--app-accent);
  font-weight:900;
  font-size:.86rem;
}
.pos-search-content { min-width:0; flex:1 1 auto; }
.pos-input-group .btn { min-width:160px; }
.pos-input-group .form-control[readonly] { background:#fff; cursor:pointer; }
.pos-notes-panel {
  border:1px dashed var(--app-accent-mid);
  border-radius:16px;
  padding:12px;
  background:rgba(var(--app-accent-rgb), .035);
}
.pos-notes-panel summary { margin-bottom:0; }
.pos-section-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  margin:18px 0 12px;
}
.pos-section-heading h3 { margin:0; font-size:1.2rem; font-weight:800; color:#101828; }
.pos-help-text { color:#667085; font-size:.92rem; font-weight:700; }
.quick-add-tile {
  min-height:118px;
  height:100%;
  border:1px solid #eaecf0;
  border-top:6px solid var(--tile-colour, var(--app-accent));
  border-radius:18px;
  background:#fff;
  color:#101828;
  padding:16px 14px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  box-shadow:0 8px 20px rgba(16,24,40,.055);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.quick-add-tile:hover,
.quick-add-tile:focus {
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(16,24,40,.10);
  border-color:var(--tile-colour, var(--app-accent));
  outline:none;
}
.quick-add-name { font-weight:800; font-size:1rem; line-height:1.15; }
.quick-add-price { color:var(--tile-colour, var(--app-accent)); font-size:1.18rem; font-weight:900; }
.quick-add-meta { color:#667085; font-size:.86rem; }
.pos-cart-card { min-height:420px; }
.pos-empty-cart {
  border:1px solid rgba(var(--app-accent-rgb), .18);
  background:var(--app-accent-soft);
  color:#344054;
  border-radius:14px;
  padding:16px;
  line-height:1.4;
}
.pos-cart-lines { display:flex; flex-direction:column; gap:10px; }
.pos-cart-line {
  border:1px solid #eaecf0;
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(16,24,40,.045);
}
.pos-total-panel {
  margin:18px 0;
  padding:16px 0;
  border-top:1px solid #eaecf0;
  border-bottom:1px solid #eaecf0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.pos-total-panel span { font-weight:800; color:#101828; font-size:1.05rem; }
.pos-total-panel strong { font-size:2rem; line-height:1; }
.pos-payment-panel { margin-bottom:18px; }
.pos-complete-btn:disabled { opacity:.58; cursor:not-allowed; }
@media (max-width: 1200px) {
  .pos-workspace-grid { grid-template-columns:1fr; }
  .sticky-pay { position:static; }
}
@media (max-width: 768px) {
  .pos-hero { align-items:flex-start; flex-direction:column; padding:18px; }
  .pos-search-grid { grid-template-columns:1fr; }
  .pos-card { padding:18px; }
  .pos-section-heading { align-items:flex-start; flex-direction:column; }
  .pos-input-group { flex-direction:column; }
  .pos-input-group > .form-control,
  .pos-input-group > .btn { width:100%; border-radius:12px !important; }
  .pos-input-group .btn { min-width:0; }
  .pos-total-panel strong { font-size:1.65rem; }
}

/* Module 06: global project visual system + system theme colour */
html { scroll-behavior:smooth; }
body {
  background: linear-gradient(180deg, rgba(var(--app-accent-rgb), .045) 0%, #f4f7fb 230px, #f4f7fb 100%);
  color:#101828;
  font-size:16px;
}
.app-main { padding:20px 18px 32px !important; }
.card {
  border:1px solid #eef2f7 !important;
  border-radius:var(--app-card-radius) !important;
  box-shadow:var(--app-card-shadow) !important;
  position:relative;
  overflow:hidden;
  background:#fff;
}
.card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--app-accent);
}
.card > * { position:relative; z-index:1; }
.card h1,.card h2,.card h3,.card h4,.card h5 { color:#101828; font-weight:800; }
.card h3:first-child,.card h4:first-child { margin-top:6px; }
.card p { color:#475467; }
.app-navbar { box-shadow:0 8px 20px rgba(16,24,40,.10); }
.navbar-brand { letter-spacing:-.02em; }
.navbar .btn-light { border-radius:10px; font-weight:700; }
.btn { border-radius:12px; font-weight:700; }
.btn-sm { border-radius:9px; }
.btn-touch { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-outline-primary {
  --bs-btn-color: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
  --bs-btn-active-bg: var(--app-accent);
  --bs-btn-active-border-color: var(--app-accent);
}
.btn-group .btn.active,
.btn-group .btn:active {
  background:var(--app-accent) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-accent-contrast) !important;
}
.form-control,.form-select {
  min-height:46px;
  border-radius:12px;
  border-color:#d0d5dd;
}
textarea.form-control { min-height:82px; }
.form-label { font-weight:800; color:#344054; margin-bottom:6px; }
.form-check-input:checked { background-color:var(--app-accent); border-color:var(--app-accent); }
.table { --bs-table-bg:transparent; margin-bottom:0; }
.table thead th {
  background:#f8fafc;
  color:#475467;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:900;
  border-bottom:1px solid #e4e7ec;
  white-space:nowrap;
}
.table tbody td { vertical-align:middle; color:#101828; border-color:#eaecf0; }
.table tbody tr:hover { background:rgba(var(--app-accent-rgb), .04); }
.table-responsive { border:1px solid #eaecf0; border-radius:16px; overflow:auto; }
.alert { border-radius:14px; border:0; box-shadow:0 8px 20px rgba(16,24,40,.055); }
.alert-info { background:var(--app-accent-soft); color:#344054; }
.badge { border-radius:999px; padding:.45em .7em; }
hr { border-color:#d0d5dd; opacity:.7; }
pre { background:#0b1220; color:#e5e7eb; border-radius:14px; padding:14px; overflow:auto; }
.app-page-hero {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:#fff;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  padding:22px 26px;
  border-left:6px solid var(--app-accent);
  margin-bottom:18px;
}
.app-page-hero h1 { margin:0; font-size:1.75rem; font-weight:900; letter-spacing:-.025em; }
.app-page-hero p { margin:.25rem 0 0; color:#667085; }
.app-card-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.app-card-title-row h3,.app-card-title-row h4 { margin:0; }
.app-card-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.app-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.app-toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  background:#fff;
  border-radius:var(--app-card-radius);
  box-shadow:var(--app-card-shadow);
  border:1px solid #eef2f7;
  padding:14px;
  margin-bottom:16px;
}
.app-stat-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--app-accent-soft);
  color:var(--app-accent);
  font-weight:900;
}
.settings-section-title,
.pos-section-heading h3 {
  color:#101828;
}
.document-toolbar {
  border:1px solid #eef2f7;
  border-top:5px solid var(--app-accent);
}
.web-document {
  border-top:7px solid var(--app-accent);
}
.doc-title { color:#101828; }
.doc-block h4 { color:var(--app-accent); }
.receipt { border-top:5px solid var(--app-accent); }
.modal-content { border:0; border-radius:22px; box-shadow:0 24px 80px rgba(16,24,40,.22); overflow:hidden; }
.modal-header { background:var(--app-accent); color:var(--app-accent-contrast); }
.modal-header .btn-close { filter:brightness(0) invert(1); opacity:.85; }
.modal-title { font-weight:900; }
.modal-search-panel { background:linear-gradient(180deg,#fff 0%,rgba(var(--app-accent-rgb),.04) 100%); }
.modal-result-table thead th { background:var(--app-accent-soft); color:#344054; }
@media (max-width: 1200px) { .app-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) {
  .app-main { padding:14px 10px 26px !important; }
  .app-page-hero { flex-direction:column; align-items:flex-start; padding:18px; }
  .app-toolbar { flex-direction:column; align-items:stretch; }
  .app-toolbar .btn { width:100%; }
  .table-responsive { border-radius:12px; }
}
@media (max-width: 576px) { .app-quick-grid { grid-template-columns:1fr; } }
/* Theme all main positive/action buttons with selected system colour. Warning/danger remain semantic. */
.btn-success {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
  --bs-btn-active-bg: var(--app-accent);
  --bs-btn-active-border-color: var(--app-accent);
  --bs-btn-disabled-bg: var(--app-accent);
  --bs-btn-disabled-border-color: var(--app-accent);
  color: var(--app-accent-contrast) !important;
}
.btn-outline-success {
  --bs-btn-color: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
  color: var(--app-accent);
}
.badge.bg-secondary { background:rgba(var(--app-accent-rgb), .12) !important; color:var(--app-accent) !important; }


/* Module 07: optimized navigation - admin/system change pages under Business Settings dropdown */
.app-nav-dropdown {
  border:0;
  border-radius:16px;
  padding:10px;
  min-width:300px;
  box-shadow:0 18px 45px rgba(16,24,40,.18);
}
.app-nav-dropdown .dropdown-item {
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  white-space:normal;
}
.app-nav-dropdown .dropdown-item-title {
  font-weight:800;
  color:#101828;
}
.app-nav-dropdown .dropdown-item small {
  color:#667085;
  line-height:1.25;
}
.app-nav-dropdown .dropdown-item:hover,
.app-nav-dropdown .dropdown-item:focus {
  background:var(--app-accent-soft);
}
.app-nav-dropdown .dropdown-item.active,
.app-nav-dropdown .dropdown-item:active {
  background:var(--app-accent);
  color:var(--app-accent-contrast);
}
.app-nav-dropdown .dropdown-item.active .dropdown-item-title,
.app-nav-dropdown .dropdown-item.active small,
.app-nav-dropdown .dropdown-item:active .dropdown-item-title,
.app-nav-dropdown .dropdown-item:active small {
  color:var(--app-accent-contrast);
}
.app-navbar .dropdown-menu { margin-top:10px; }
.app-navbar .dropdown-toggle::after { vertical-align:.14em; }
@media (max-width: 992px) {
  .app-nav-dropdown {
    min-width:0;
    width:100%;
    margin-top:6px;
    box-shadow:none;
    border-radius:12px;
  }
  .app-navbar .navbar-text { display:block; margin:10px 0 !important; }
}

.permission-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  padding:1rem;
  border-top:4px solid var(--app-accent);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.permission-card h5{font-size:1rem;margin-bottom:.75rem;color:#111827;}
.permission-card .form-check{padding-top:.15rem;padding-bottom:.15rem;}

/* Module 09B: POS tendering and cash-up control */
.pos-tender-panel,
.pos-reference-panel {
  border: 1px solid var(--card-border, #d8dee9);
  border-radius: 16px;
  padding: 14px;
  background: #f8fbff;
}
.pos-change-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--card-border, #d8dee9);
}
.pos-change-panel strong {
  font-size: 1.5rem;
  color: var(--theme-colour, #0d6efd);
}

/* Table tools: column visibility + quick visible-row sorting */
.table-tools{border:1px solid rgba(var(--app-accent-rgb),.12);background:rgba(var(--app-accent-rgb),.04);border-radius:14px;padding:.55rem .75rem;}
.table-sortable-header::after{content:' ⇅';font-size:.8em;color:#94a3b8;font-weight:400;}
.table-sortable-header[data-sort-dir="asc"]::after{content:' ▲';color:var(--app-accent);}
.table-sortable-header[data-sort-dir="desc"]::after{content:' ▼';color:var(--app-accent);}
.table-column-menu{max-height:320px;overflow:auto;}

/* Module 13A — RetailPro-style dark POS view */
.pos-retail-page{margin:-1rem;}
.pos-retail-shell{min-height:calc(100vh - 70px);display:grid;grid-template-columns:220px 1fr;background:#0b0f13;color:#e9eef4;border-radius:0;overflow:hidden;}
.pos-retail-sidebar{background:#050708;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;min-height:calc(100vh - 70px);}
.pos-retail-brand{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.pos-retail-brand-main{display:block;font-weight:900;font-size:1.45rem;letter-spacing:.02em;color:#fff}.pos-retail-brand-sub{display:block;color:#8a94a3;font-size:.8rem}.pos-retail-status{font-size:.75rem;color:#54e37f;}
.pos-retail-nav{padding:18px 12px;display:grid;gap:8px}.pos-retail-nav a{color:#c9d2dd;text-decoration:none;padding:14px 16px;border-radius:14px;font-weight:700;display:block}.pos-retail-nav a:hover,.pos-retail-nav a.active{background:rgba(13,110,253,.18);color:#fff;}
.pos-retail-lock{margin-top:auto;padding:18px 24px;color:#c9d2dd;text-decoration:none;border-top:1px solid rgba(255,255,255,.08);}
.pos-retail-main{background:radial-gradient(circle at top,#171d23 0,#0b0f13 42%,#07090c 100%);padding:18px 22px 24px;min-width:0;}
.pos-retail-topbar{height:66px;display:grid;grid-template-columns:180px minmax(280px,1fr) 220px;gap:22px;align-items:center;margin-bottom:18px}.pos-retail-topbar h1{font-size:1.6rem;margin:0;color:#fff}.pos-retail-muted{color:#9aa5b1;font-size:.85rem}.pos-retail-search-wrap{display:flex;gap:10px}.pos-retail-search{background:#10161c!important;border:1px solid rgba(255,255,255,.1)!important;color:#fff!important;height:50px}.pos-retail-search::placeholder{color:#768293}.pos-retail-user{text-align:right;color:#fff}.pos-retail-user span{display:block;color:#9aa5b1;font-size:.8rem}
.pos-retail-layout{display:grid;grid-template-columns:520px 1fr;gap:18px;align-items:start}.pos-retail-cart-panel,.pos-retail-products-panel{background:rgba(21,27,33,.82);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 60px rgba(0,0,0,.35);border-radius:18px;}.pos-retail-cart-panel{padding:18px;position:sticky;top:92px}.pos-retail-products-panel{padding:6px;}
.pos-retail-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.pos-retail-kicker{display:block;text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:.14em;color:#8b97a8}.pos-retail-panel-head h2{margin:2px 0 0;color:#fff;font-size:1.35rem}.pos-retail-customer-box{background:#0f141a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;color:#cbd5e1;margin-bottom:14px}.pos-retail-empty{background:#102532;border:1px solid rgba(65,180,255,.2);color:#bfeeff;border-radius:14px;padding:14px;margin-bottom:10px}
.pos-retail-cart-table-head{display:grid;grid-template-columns:1fr 72px 96px 110px;gap:8px;color:#8b97a8;font-size:.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.pos-retail-cart-lines{max-height:330px;overflow:auto}.pos-retail-cart-line{display:grid;grid-template-columns:1fr 72px 96px 110px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}.pos-retail-cart-line .form-control{background:#0c1116;border:1px solid rgba(255,255,255,.1);color:#fff}.pos-retail-item-meta strong{display:block;color:#fff;font-size:.9rem}.pos-retail-item-meta small{color:#8b97a8}.pos-retail-line-total{text-align:right}.pos-retail-line-total strong{display:block;color:#fff}.pos-retail-line-total button{background:transparent;border:0;color:#9aa5b1;font-size:1.2rem;line-height:1}.pos-retail-line-total button:hover{color:#ff7676}.pos-retail-notes{border:1px dashed rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;margin:12px 0;color:#cbd5e1}.pos-retail-notes summary{cursor:pointer;font-weight:800}.pos-retail-notes .form-control,.pos-retail-tender .form-control,#paymentReferencePanel .form-control{background:#0c1116;border:1px solid rgba(255,255,255,.12);color:#fff}.pos-retail-totals{margin-top:18px;border-top:1px solid rgba(255,255,255,.09);padding-top:16px;display:grid;gap:10px}.pos-retail-totals>div{display:flex;justify-content:space-between;color:#cbd5e1}.pos-retail-totals .total{font-size:1.35rem;color:#fff}.pos-retail-totals .total strong{font-size:2rem}.pos-retail-payment-row{display:grid;grid-template-columns:1fr 100px;gap:10px;margin-top:16px}.pos-retail-payment-row .form-select{height:52px;background:#0c1116;border:1px solid rgba(255,255,255,.12);color:#fff}.pos-retail-tender label,.pos-retail-label{color:#cbd5e1;font-weight:800}.pos-retail-cash-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.pos-retail-change{display:flex;justify-content:space-between;align-items:center;background:#0c1116;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;margin-top:10px;color:#cbd5e1}.pos-retail-change strong{color:#5db7ff;font-size:1.35rem}.pos-retail-pay-btn{margin-top:18px;width:100%;height:64px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--app-accent),#1e9bff);color:#fff;font-size:1.05rem;font-weight:900;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 16px 38px rgba(var(--app-accent-rgb),.28)}.pos-retail-pay-btn:disabled{opacity:.45;filter:grayscale(.3)}
.pos-retail-category-tabs{display:flex;gap:8px;padding:0 0 12px;overflow:auto}.pos-retail-category-tabs button{height:48px;border:1px solid rgba(255,255,255,.08);background:#151b21;color:#cbd5e1;border-radius:10px;padding:0 22px;font-weight:800;white-space:nowrap}.pos-retail-category-tabs button.active,.pos-retail-category-tabs button:hover{background:var(--app-accent);color:#fff;border-color:var(--app-accent)}.pos-retail-products-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px}.pos-product-card{min-height:190px;text-align:left;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#161d24,#121820);border-radius:12px;color:#fff;display:flex;flex-direction:column;padding:14px;transition:.15s transform,.15s border-color,.15s box-shadow}.pos-product-card:hover{transform:translateY(-2px);border-color:var(--tile-colour);box-shadow:0 12px 30px rgba(0,0,0,.25)}.pos-product-image{height:78px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle,var(--tile-colour),#232c35);font-weight:900;font-size:2rem;margin-bottom:12px}.pos-product-name{font-weight:900;font-size:.95rem}.pos-product-code{color:#9aa5b1;font-size:.78rem;margin-top:2px}.pos-product-price{font-weight:900;margin-top:auto;font-size:1rem;color:#fff}.pos-product-stock{color:#9aa5b1;font-size:.78rem;margin-top:4px}
@media(max-width:1200px){.pos-retail-shell{grid-template-columns:1fr}.pos-retail-sidebar{display:none}.pos-retail-layout{grid-template-columns:1fr}.pos-retail-cart-panel{position:relative;top:auto}.pos-retail-products-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}.pos-retail-topbar{grid-template-columns:1fr}}
@media(max-width:760px){.pos-retail-page{margin:-.75rem}.pos-retail-main{padding:12px}.pos-retail-products-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.pos-retail-cart-table-head,.pos-retail-cart-line{grid-template-columns:1fr 62px 80px}.pos-retail-cart-table-head span:nth-child(4),.pos-retail-line-total{grid-column:1/-1}.pos-retail-topbar{height:auto}.pos-retail-search-wrap{flex-direction:column}.pos-retail-totals .total strong{font-size:1.5rem}}

/* Module 13A: Dark retail POS visual refresh */
.pos-dark-form{margin:-1rem;}
.pos-dark-shell{min-height:calc(100vh - 58px);display:grid;grid-template-columns:190px 1fr;background:radial-gradient(circle at top left,#1c2630 0,#0d1117 38%,#050607 100%);color:#e5e7eb;overflow:hidden;}
.pos-dark-sidebar{background:rgba(0,0,0,.55);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;min-height:calc(100vh - 58px);}
.pos-dark-brand{font-size:1.45rem;font-weight:900;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.06);letter-spacing:.2px}.pos-dark-brand span{color:#38bdf8}
.pos-dark-side-nav{padding:14px 10px;display:flex;flex-direction:column;gap:6px}.pos-dark-side-nav a{color:#cbd5e1;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:700}.pos-dark-side-nav a:hover,.pos-dark-side-nav a.active{background:rgba(59,130,246,.18);color:#fff}
.pos-dark-side-bottom{margin-top:auto;padding:18px 14px;border-top:1px solid rgba(255,255,255,.06)}.pos-dark-lock{display:block;color:#d1d5db;text-decoration:none;margin-bottom:18px}.pos-dark-online{font-size:.9rem;color:#d1d5db}.pos-dark-online span{display:inline-block;width:9px;height:9px;background:#22c55e;border-radius:50%;margin-right:8px}
.pos-dark-main{min-width:0}.pos-dark-header{height:74px;display:grid;grid-template-columns:180px minmax(280px,1fr) 210px;gap:20px;align-items:center;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(17,24,39,.55);backdrop-filter:blur(14px)}.pos-dark-header h1{font-size:1.6rem;margin:0;color:#fff}.pos-dark-subtitle{color:#94a3b8;font-size:.85rem}
.pos-dark-searchbar{height:48px;border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;background:rgba(0,0,0,.25);overflow:hidden}.pos-dark-search-button,.pos-dark-customer-button{border:0;background:transparent;color:#cbd5e1;height:100%;padding:0 16px;font-weight:800}.pos-dark-customer-button{background:rgba(59,130,246,.18);color:#fff}.pos-dark-search-input{flex:1;background:transparent!important;border:0!important;color:#fff!important;box-shadow:none!important;height:100%;font-size:1rem}.pos-dark-search-input::placeholder{color:#94a3b8}.pos-dark-user{text-align:right}.pos-dark-user strong{display:block;color:#fff}.pos-dark-user span{color:#94a3b8;font-size:.85rem}
.pos-dark-content{display:grid;grid-template-columns:480px 1fr;gap:12px;padding:16px;height:calc(100vh - 132px);min-height:680px}.pos-dark-cart-panel,.pos-dark-products-panel{background:rgba(17,24,39,.78);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden}.pos-dark-cart-panel{display:flex;flex-direction:column;padding:16px}.pos-dark-products-panel{padding:12px;overflow:auto}.pos-dark-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.pos-dark-panel-head h2{margin:0;font-size:1.3rem;color:#fff}.pos-dark-panel-head span{color:#94a3b8}.pos-dark-small-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:8px 12px;font-weight:800}
.pos-dark-cart-table-head,.pos-dark-cart-line{display:grid;grid-template-columns:1fr 62px 82px 82px 36px;gap:10px;align-items:center}.pos-dark-cart-table-head{color:#94a3b8;text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.08);padding:10px 4px}.pos-dark-empty{border:1px dashed rgba(148,163,184,.35);background:rgba(148,163,184,.08);border-radius:12px;padding:18px;color:#cbd5e1;text-align:center;margin:12px 0}.pos-dark-cart-lines{overflow:auto;min-height:120px;max-height:35vh}.pos-dark-cart-line{border-bottom:1px solid rgba(255,255,255,.06);padding:12px 4px}.pos-dark-cart-line input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:8px 7px;width:100%}.pos-dark-cart-line button{border:0;background:transparent;color:#94a3b8;font-size:1.4rem}.pos-dark-line-item{display:flex;gap:10px;align-items:center;min-width:0}.pos-dark-line-item strong{display:block;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-dark-line-item span{display:block;color:#94a3b8;font-size:.82rem}.pos-dark-line-thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--app-accent),#111827);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}.line-total{color:#fff;text-align:right}
.pos-dark-notes{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;margin:12px 0;background:rgba(255,255,255,.04)}.pos-dark-notes summary{cursor:pointer;font-weight:800;color:#cbd5e1}.pos-dark-notes textarea{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.12)}
.pos-dark-totals{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}.pos-dark-totals div{display:flex;justify-content:space-between;align-items:center;padding:6px 0;color:#cbd5e1}.pos-dark-totals strong{color:#fff}.pos-dark-grand{font-size:1.25rem}.pos-dark-grand strong{font-size:1.7rem}.pos-dark-payment-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.pos-dark-payment-row .form-select,.pos-dark-payment-row .form-control{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.12)}.pos-dark-payment-row option{color:#111827}
.pos-dark-cash-panel{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;margin-top:12px;background:rgba(255,255,255,.04)}.pos-dark-cash-input label{font-weight:800;color:#cbd5e1}.pos-dark-cash-input input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}.pos-dark-cash-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.pos-dark-cash-buttons button{border:1px solid rgba(var(--app-accent-rgb),.65);background:rgba(var(--app-accent-rgb),.13);color:#000000;border-radius:8px;padding:6px 10px;font-weight:800}.pos-dark-change{display:flex;justify-content:space-between;background:rgba(0,0,0,.22);border-radius:10px;margin-top:10px;padding:10px 12px}.pos-dark-change strong{font-size:1.25rem;color:#60a5fa}
.pos-dark-actions{display:grid;grid-template-columns:100px 1fr;gap:10px;margin-top:14px}.pos-dark-action{border:0;border-radius:10px;padding:15px 18px;font-weight:900;color:#fff}.pos-dark-action.secondary{background:rgba(255,255,255,.08)}.pos-dark-action.pay{background:linear-gradient(135deg,var(--app-accent),#1d4ed8);display:flex;justify-content:space-between;align-items:center}.pos-dark-action:disabled{opacity:.45;cursor:not-allowed}
.pos-dark-tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 12px}.pos-dark-tabs button{white-space:nowrap;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#cbd5e1;padding:12px 18px;font-weight:900}.pos-dark-tabs button.active,.pos-dark-tabs button:hover{background:linear-gradient(135deg,var(--app-accent),#1d4ed8);color:#fff}.pos-dark-product-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.pos-dark-product-card{min-height:210px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.05);border-radius:12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;padding:14px;color:#fff;position:relative;overflow:hidden}.pos-dark-product-card:hover{transform:translateY(-1px);border-color:rgba(var(--app-accent-rgb),.65);background:rgba(var(--app-accent-rgb),.13)}.pos-dark-product-card:before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--tile-colour)}.pos-dark-product-image{position:absolute;top:18px;left:18px;width:82px;height:82px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.03));display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:900;color:#e5e7eb}.pos-dark-product-name{font-weight:900;font-size:1rem}.pos-dark-product-meta{color:#94a3b8;font-size:.84rem;min-height:36px}.pos-dark-product-card strong{color:#fff;margin-top:8px}
@media(max-width:1200px){.pos-dark-shell{grid-template-columns:1fr}.pos-dark-sidebar{display:none}.pos-dark-header{grid-template-columns:1fr}.pos-dark-user{display:none}.pos-dark-content{grid-template-columns:1fr;height:auto}.pos-dark-cart-panel{order:2}.pos-dark-products-panel{order:1}.pos-dark-product-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}}
@media(max-width:768px){.pos-dark-form{margin:-.75rem}.pos-dark-content{padding:10px}.pos-dark-product-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.pos-dark-cart-table-head{display:none}.pos-dark-cart-line{grid-template-columns:1fr 70px;gap:8px}.pos-dark-cart-line .price,.pos-dark-cart-line .line-total{grid-column:auto}.pos-dark-payment-row{grid-template-columns:1fr}.pos-dark-searchbar{flex-wrap:nowrap}.pos-dark-header{height:auto}.pos-dark-actions{grid-template-columns:1fr}.pos-dark-product-card{min-height:170px}}


/* --------------------------------------------------------------------------
   POS Current Sale layout hotfix - v1.0.3d
   Keeps long imported product names from overlapping Qty/Price/Total inputs.
   -------------------------------------------------------------------------- */
.pos-dark-cart-table-head,
.pos-dark-cart-line {
    grid-template-columns: minmax(0, 1fr) 56px 76px 82px 28px;
    gap: 8px;
}

.pos-dark-cart-line {
    min-width: 0;
}

.pos-dark-line-item {
    min-width: 0;
    overflow: hidden;
}

.pos-dark-line-item > div {
    min-width: 0;
    overflow: hidden;
}

.pos-dark-line-item strong {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-dark-line-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-dark-cart-line input.qty,
.pos-dark-cart-line input.price {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: right;
    padding-left: 5px;
    padding-right: 5px;
    font-variant-numeric: tabular-nums;
}

.pos-dark-cart-line .line-total {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: clip;
}

.pos-dark-cart-line button {
    width: 28px;
    min-width: 28px;
    height: 32px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1100px) {
    .pos-dark-content {
        grid-template-columns: minmax(420px, 480px) 1fr;
    }
    .pos-dark-cart-table-head,
    .pos-dark-cart-line {
        grid-template-columns: minmax(0, 1fr) 52px 70px 76px 26px;
        gap: 6px;
    }
    .pos-dark-line-thumb {
        width: 34px;
        height: 34px;
        font-size: .8rem;
    }
}

@media (max-width: 820px) {
    .pos-dark-content {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .pos-dark-cart-panel,
    .pos-dark-products-panel {
        overflow: visible;
    }
}


/* VST SmartPOS v1.0.3h consolidated menu hotfix */
.app-navbar .navbar-brand{
    white-space: nowrap;
    margin-right: 1rem;
}
.app-navbar .navbar-nav{
    align-items: center;
    gap: .15rem;
}
.app-navbar .nav-link{
    border-radius: .75rem;
    padding: .45rem .62rem;
    font-weight: 700;
    white-space: nowrap;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active{
    background: rgba(255,255,255,.14);
}
.app-navbar .dropdown-menu{
    min-width: 260px;
}
.app-navbar .navbar-text{
    white-space: nowrap;
}
@media (min-width: 992px){
    .app-navbar .container-fluid{
        gap: .5rem;
    }
    .app-navbar .navbar-collapse{
        min-width: 0;
    }
    .app-navbar .navbar-text{
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 991.98px){
    .app-navbar .navbar-nav{
        align-items: stretch;
        gap: .25rem;
        margin-top: .75rem;
    }
    .app-navbar .nav-link{
        padding: .65rem .8rem;
    }
}
.backup-status-card{
    border: 1px solid rgba(25,135,84,.25);
    background: rgba(25,135,84,.06);
    border-radius: 1rem;
    padding: 1rem;
}



/* VST SmartPOS v1.0.3h sidebar navigation */
:root{
    --app-sidebar-width: 278px;
    --app-topbar-height: 58px;
}
.app-topbar{
    min-height: var(--app-topbar-height);
    z-index: 1040;
}
.app-sidebar-toggle{
    font-weight: 800;
    border-radius: .8rem;
}
.app-sidebar{
    position: fixed;
    top: var(--app-topbar-height);
    left: 0;
    bottom: 0;
    width: var(--app-sidebar-width);
    background: #fff;
    border-right: 1px solid rgba(15,23,42,.1);
    box-shadow: 14px 0 32px rgba(15,23,42,.10);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform .22s ease;
}
.app-sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.app-sidebar-nav{
    padding: .75rem;
    display: grid;
    gap: .35rem;
    overflow-y: auto;
}
.app-sidebar-link{
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .9rem;
    border-radius: 1rem;
    color: #1f2937;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid transparent;
}
.app-sidebar-link:hover,
.app-sidebar-link:focus{
    color: #111827;
    background: rgba(var(--app-accent-rgb), .08);
    border-color: rgba(var(--app-accent-rgb), .16);
}
.app-sidebar-link.active{
    color: var(--app-accent);
    background: rgba(var(--app-accent-rgb), .13);
    border-color: rgba(var(--app-accent-rgb), .26);
}
.app-sidebar-icon{
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--app-accent-rgb), .10);
    color: var(--app-accent);
    font-size: .78rem;
    font-weight: 900;
}
.app-sidebar-footer{
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(15,23,42,.08);
}
.app-sidebar-backdrop{
    display: none;
}
.app-main-with-sidebar{
    transition: margin-left .22s ease;
}
body.app-with-sidebar:not(.sidebar-collapsed) .app-main-with-sidebar{
    margin-left: var(--app-sidebar-width);
}
body.app-with-sidebar.sidebar-collapsed .app-sidebar,
html.app-sidebar-collapsed-init body.app-with-sidebar .app-sidebar{
    transform: translateX(calc(-1 * var(--app-sidebar-width) - 14px));
}
html.app-sidebar-collapsed-init body.app-with-sidebar .app-main-with-sidebar{
    margin-left: 0;
}
body.app-with-sidebar.sidebar-collapsed .app-main-with-sidebar{
    margin-left: 0;
}
.app-navbar .navbar-brand{
    white-space: nowrap;
}
.app-navbar .navbar-nav{
    align-items: center;
    gap: .15rem;
}
.app-navbar .nav-link{
    border-radius: .75rem;
    padding: .45rem .62rem;
    font-weight: 800;
    white-space: nowrap;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active{
    background: rgba(255,255,255,.14);
}
.app-navbar .dropdown-menu{
    min-width: 270px;
}
.app-navbar .navbar-text{
    white-space: nowrap;
}
@media (max-width: 991.98px){
    :root{
        --app-sidebar-width: min(86vw, 320px);
    }
    body.app-with-sidebar:not(.sidebar-collapsed) .app-main-with-sidebar{
        margin-left: 0;
    }
    body.app-with-sidebar:not(.sidebar-collapsed) .app-sidebar-backdrop{
        display: block;
        position: fixed;
        top: var(--app-topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15,23,42,.45);
        z-index: 1030;
    }
    .app-sidebar{
        top: var(--app-topbar-height);
    }
    body.app-with-sidebar.sidebar-collapsed .app-sidebar{
        transform: translateX(calc(-1 * var(--app-sidebar-width) - 14px));
    }
    .app-navbar .navbar-nav{
        align-items: stretch;
        gap: .25rem;
        margin-top: .75rem;
    }
    .app-navbar .nav-link{
        padding: .65rem .8rem;
    }
}
.backup-status-card{
    border: 1px solid rgba(25,135,84,.25);
    background: rgba(25,135,84,.06);
    border-radius: 1rem;
    padding: 1rem;
}

/* VST SmartPOS v1.0.3i POS system theme override */
.pos-dark-form{
    margin: 0;
    background: transparent;
    color: #111827;
}
.pos-dark-shell,
.pos-system-shell{
    display: block;
    min-height: auto;
    background: transparent;
    color: #111827;
    overflow: visible;
}
.pos-dark-main,
.pos-system-main{
    min-width: 0;
    min-height: auto;
    background: transparent;
    color: #111827;
    padding: 0;
}
.pos-dark-header{
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 1.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 26px rgba(15,23,42,.06);
    color: #111827;
}
.pos-dark-header h1{
    color: #111827;
}
.pos-dark-subtitle,
.pos-dark-user span,
.pos-dark-panel-head span,
.pos-dark-product-meta,
.pos-dark-cart-table-head,
.pos-dark-totals span{
    color: #64748b;
}
.pos-dark-user strong{
    color: #111827;
}
.pos-dark-searchbar{
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: none;
}
.pos-dark-search-button,
.pos-dark-customer-button,
.pos-dark-tabs button.active{
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    border-color: var(--app-accent);
}
.pos-dark-search-button:hover,
.pos-dark-customer-button:hover,
.pos-dark-tabs button.active:hover{
    filter: brightness(.96);
}
.pos-dark-search-input{
    background: #fff;
    color: #111827;
    border-color: rgba(15,23,42,.12);
}
.pos-dark-search-input::placeholder{
    color: #94a3b8;
}
.pos-dark-content{
    display: grid;
    grid-template-columns: minmax(390px,.9fr) minmax(420px,1.4fr);
    gap: 1rem;
    align-items: start;
}
.pos-dark-cart-panel,
.pos-dark-products-panel{
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 1.25rem;
    box-shadow: 0 8px 26px rgba(15,23,42,.06);
    color: #111827;
    padding: 1rem;
}
.pos-dark-panel-head h2,
.pos-dark-line-item strong,
.pos-dark-product-name,
.pos-dark-totals strong,
.pos-dark-grand strong,
.pos-dark-empty{
    color: #111827;
}
.pos-dark-small-btn,
.pos-dark-action.secondary,
.pos-dark-tabs button{
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15,23,42,.14);
}
.pos-dark-small-btn:hover,
.pos-dark-action.secondary:hover,
.pos-dark-tabs button:hover{
    background: rgba(var(--app-accent-rgb),.08);
    color: var(--app-accent);
    border-color: rgba(var(--app-accent-rgb),.28);
}
.pos-dark-empty,
.pos-dark-notes,
.pos-dark-cash-panel{
    background: #f8fafc;
    border-color: rgba(15,23,42,.10);
    color: #334155;
}
.pos-dark-cart-table-head{
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.pos-dark-cart-line{
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    color: #111827;
    box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.pos-dark-line-thumb,
.pos-dark-product-image{
    background: rgba(var(--app-accent-rgb),.12);
    color: var(--app-accent);
}
.pos-dark-cart-line input,
.pos-dark-payment-row .form-select,
.pos-dark-payment-row .form-control,
.pos-dark-cash-input input,
.pos-dark-notes .form-control{
    background: #fff;
    color: #111827;
    border: 1px solid rgba(15,23,42,.14);
}
.pos-dark-cart-line input:focus,
.pos-dark-payment-row .form-select:focus,
.pos-dark-payment-row .form-control:focus,
.pos-dark-cash-input input:focus,
.pos-dark-notes .form-control:focus,
.pos-dark-search-input:focus{
    border-color: rgba(var(--app-accent-rgb),.48);
    box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb),.13);
}
.pos-dark-cart-line button{
    color: #64748b;
    background: transparent;
    border: 0;
}
.pos-dark-cart-line button:hover{
    color: #dc3545;
}
.pos-dark-product-grid{
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
}
.pos-dark-product-card{
    background: #fff;
    color: #111827;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.pos-dark-product-card:hover{
    border-color: rgba(var(--app-accent-rgb),.35);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
    transform: translateY(-1px);
}
.pos-dark-product-card strong{
    color: var(--app-accent);
}
.pos-dark-product-card.is-hidden{
    display: none;
}
.pos-dark-totals{
    border-top: 1px solid rgba(15,23,42,.08);
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.pos-dark-grand strong{
    font-size: clamp(1.55rem, 2vw, 2.15rem);
}
.pos-dark-action.pay{
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    border-color: var(--app-accent);
}
.pos-dark-action.pay:hover:not(:disabled){
    filter: brightness(.96);
}
.pos-dark-action.pay:disabled{
    opacity: .55;
}
@media (max-width: 1100px){
    .pos-dark-content{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px){
    .pos-dark-header{
        display: block;
    }
    .pos-dark-searchbar{
        margin-top: 1rem;
    }
    .pos-dark-content{
        gap: .75rem;
    }
}

/* VST SmartPOS v1.0.3j POS contrast/readability override */
.pos-dark-form{
    background: transparent !important;
    color: #0f172a !important;
}
.pos-dark-shell,
.pos-system-shell{
    background: #e8eef6 !important;
    color: #0f172a !important;
    padding: 1rem !important;
    border-radius: 1rem !important;
}
.pos-dark-main,
.pos-system-main{
    background: transparent !important;
    color: #0f172a !important;
}
.pos-dark-header{
    height: auto !important;
    min-height: 88px !important;
    display: grid !important;
    grid-template-columns: minmax(190px,.45fr) minmax(360px,1.35fr) minmax(190px,.35fr) !important;
    align-items: center !important;
    gap: 1rem !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.16) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.09) !important;
}
.pos-dark-header h1{
    color: #0f172a !important;
    font-size: 1.65rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 .25rem !important;
}
.pos-dark-subtitle{
    color: #334155 !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.pos-dark-user strong{
    color: #0f172a !important;
    font-weight: 900 !important;
}
.pos-dark-user span{
    color: #475569 !important;
    font-weight: 700 !important;
}
.pos-dark-searchbar{
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.22) !important;
    box-shadow: inset 0 1px 0 rgba(15,23,42,.03) !important;
}
.pos-dark-search-button,
.pos-dark-customer-button,
.pos-dark-tabs button.active{
    color: var(--app-accent-contrast) !important;
}
.pos-dark-search-input{
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 700 !important;
}
.pos-dark-search-input::placeholder{
    color: #475569 !important;
    opacity: 1 !important;
}
.pos-dark-content{
    background: #e8eef6 !important;
    padding: .25rem 0 0 !important;
}
.pos-dark-cart-panel,
.pos-dark-products-panel{
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.14) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.10) !important;
}
.pos-dark-panel-head h2{
    color: #0f172a !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
}
.pos-dark-panel-head span,
.pos-dark-product-meta,
.pos-dark-totals span{
    color: #334155 !important;
    font-weight: 700 !important;
}
.pos-dark-cart-table-head{
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(15,23,42,.16) !important;
    padding-bottom: .65rem !important;
}
.pos-dark-empty,
.pos-dark-notes,
.pos-dark-cash-panel{
    background: #f3f6fb !important;
    border: 1px solid rgba(15,23,42,.15) !important;
    color: #1f2937 !important;
}
.pos-dark-empty{
    font-weight: 700 !important;
}
.pos-dark-notes summary{
    color: #334155 !important;
    font-weight: 900 !important;
}
.pos-dark-cart-line{
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.15) !important;
    color: #0f172a !important;
}
.pos-dark-line-item strong,
.pos-dark-product-name,
.pos-dark-totals strong,
.pos-dark-grand strong{
    color: #0f172a !important;
    font-weight: 900 !important;
}
.pos-dark-totals{
    border-top: 1px solid rgba(15,23,42,.16) !important;
    border-bottom: 1px solid rgba(15,23,42,.16) !important;
}
.pos-dark-grand{
    color: #0f172a !important;
}
.pos-dark-grand strong{
    color: #0f172a !important;
}
.pos-dark-cart-line input,
.pos-dark-payment-row .form-select,
.pos-dark-payment-row .form-control,
.pos-dark-cash-input input,
.pos-dark-notes .form-control{
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid rgba(15,23,42,.24) !important;
    font-weight: 700 !important;
}
.pos-dark-cash-input label,
.pos-dark-payment-row label{
    color: #334155 !important;
    font-weight: 800 !important;
}
.pos-dark-action.secondary,
.pos-dark-small-btn,
.pos-dark-tabs button{
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: rgba(15,23,42,.22) !important;
    font-weight: 900 !important;
}
.pos-dark-action.pay{
    font-weight: 900 !important;
}
.pos-dark-product-card{
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15,23,42,.15) !important;
}
.pos-dark-product-card strong{
    color: #0f172a !important;
    font-weight: 900 !important;
}
.pos-dark-product-card .pos-dark-product-price,
.pos-dark-product-price{
    color: var(--app-accent) !important;
    font-weight: 900 !important;
}
.pos-dark-line-thumb,
.pos-dark-product-image{
    color: var(--app-accent) !important;
    background: rgba(var(--app-accent-rgb),.16) !important;
    font-weight: 900 !important;
}
@media (max-width: 1100px){
    .pos-dark-header{
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px){
    .pos-dark-shell,
    .pos-system-shell{
        padding: .75rem !important;
    }
    .pos-dark-header{
        gap: .75rem !important;
    }
}

/* VST SmartPOS v1.0.3m smooth transitions and motion polish */
:root{
    --app-motion-fast: 160ms;
    --app-motion-normal: 280ms;
    --app-motion-slow: 380ms;
    --app-ease-out: cubic-bezier(.22,.61,.36,1);
    --app-ease-soft: cubic-bezier(.16,1,.3,1);
}
.app-main{
    animation: appPageFadeIn var(--app-motion-normal) var(--app-ease-out) both;
}
@keyframes appPageFadeIn{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
}
.app-sidebar{
    transition:
        transform var(--app-motion-slow) var(--app-ease-soft),
        box-shadow var(--app-motion-normal) ease,
        border-color var(--app-motion-normal) ease !important;
    will-change: transform;
}
.app-main-with-sidebar{
    transition:
        margin-left var(--app-motion-slow) var(--app-ease-soft),
        padding var(--app-motion-normal) ease !important;
}
.app-sidebar-toggle,
.app-sidebar-link,
.app-navbar .nav-link,
.app-navbar .dropdown-item,
.btn,
.card,
.document-toolbar,
.dashboard-hero,
.quick-action-card,
.help-topic,
.pos-dark-cart-panel,
.pos-dark-products-panel,
.pos-dark-header,
.pos-dark-product-card,
.pos-dark-cart-line,
.pos-dark-action,
.pos-dark-small-btn,
.search-result{
    transition:
        background-color var(--app-motion-normal) ease,
        border-color var(--app-motion-normal) ease,
        color var(--app-motion-normal) ease,
        box-shadow var(--app-motion-normal) ease,
        transform var(--app-motion-fast) var(--app-ease-out),
        opacity var(--app-motion-normal) ease !important;
}
.app-sidebar-link:hover,
.app-sidebar-link:focus,
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.btn:hover,
.quick-action-card:hover,
.help-topic:hover,
.pos-dark-product-card:hover,
.search-result:hover{
    transform: translateY(-1px);
}
.app-sidebar-link:active,
.btn:active,
.pos-dark-product-card:active,
.pos-dark-action:active{
    transform: translateY(0) scale(.99);
}
.app-navbar .dropdown-menu{
    transform-origin: top center;
    transition:
        opacity var(--app-motion-fast) ease,
        transform var(--app-motion-fast) var(--app-ease-out) !important;
}
.app-navbar .dropdown-menu.show{
    animation: appDropdownIn var(--app-motion-fast) var(--app-ease-out) both;
}
@keyframes appDropdownIn{
    from{ opacity: 0; transform: translateY(-6px) scale(.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
.modal.fade .modal-dialog{
    transition: transform var(--app-motion-normal) var(--app-ease-soft), opacity var(--app-motion-normal) ease !important;
    transform: translateY(14px) scale(.98);
}
.modal.show .modal-dialog{
    transform: translateY(0) scale(1);
}
.search-dropdown{
    transition:
        opacity var(--app-motion-fast) ease,
        transform var(--app-motion-fast) var(--app-ease-out),
        box-shadow var(--app-motion-normal) ease !important;
    transform-origin: top center;
}
.search-dropdown[style*="display: block"]{
    animation: appDropdownIn var(--app-motion-fast) var(--app-ease-out) both;
}
.form-control,
.form-select,
.form-check-input{
    transition:
        border-color var(--app-motion-fast) ease,
        box-shadow var(--app-motion-fast) ease,
        background-color var(--app-motion-fast) ease,
        color var(--app-motion-fast) ease !important;
}
.pos-dark-product-grid,
.pos-dark-cart-lines{
    transition: opacity var(--app-motion-normal) ease;
}
.pos-dark-cart-line{
    animation: appLineIn var(--app-motion-normal) var(--app-ease-out) both;
}
@keyframes appLineIn{
    from{ opacity: 0; transform: translateY(5px); }
    to{ opacity: 1; transform: translateY(0); }
}
@media (max-width: 991.98px){
    .app-sidebar-backdrop{
        display: block !important;
        position: fixed;
        top: var(--app-topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15,23,42,.45);
        z-index: 1030;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--app-motion-normal) ease !important;
    }
    body.app-with-sidebar:not(.sidebar-collapsed) .app-sidebar-backdrop{
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* VST SmartPOS v1.0.3n decluttered topbar and sidebar sections */
.app-topbar .container-fluid.app-topbar-grid{
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(160px, 1fr) minmax(260px, .9fr);
    align-items: center;
    gap: 1rem;
    min-height: var(--app-topbar-height);
}
.app-topbar-left,
.app-topbar-user{
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.app-topbar-user{
    justify-content: flex-end;
}
.app-brand-compact{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-topbar-title{
    justify-self: center;
    max-width: min(540px, 100%);
    color: #0d1935;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .98rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-topbar-title.public{
    margin-left: auto;
}
.app-user-summary{
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar{
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.app-sidebar-header{
    flex: 0 0 auto;
}
.app-sidebar-section{
    margin: .25rem .65rem;
}
.app-sidebar-section-toggle{
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: .85rem;
    background: rgba(var(--app-accent-rgb), .08);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .55rem .75rem;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition:
        background-color var(--app-motion-normal,280ms) ease,
        color var(--app-motion-normal,280ms) ease,
        transform var(--app-motion-fast,160ms) var(--app-ease-out,cubic-bezier(.22,.61,.36,1));
}
.app-sidebar-section-toggle:hover,
.app-sidebar-section-toggle:focus{
    background: rgba(var(--app-accent-rgb), .15);
    color: var(--app-accent);
    outline: none;
}
.app-sidebar-section.active .app-sidebar-section-toggle{
    background: rgba(var(--app-accent-rgb), .18);
    color: var(--app-accent);
}
.app-sidebar-section-chevron{
    font-size: .9rem;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform var(--app-motion-normal,280ms) var(--app-ease-out,cubic-bezier(.22,.61,.36,1));
}
.app-sidebar-section-toggle[aria-expanded="true"] .app-sidebar-section-chevron{
    transform: rotate(0deg);
}
.app-sidebar-section-body{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height var(--app-motion-slow,380ms) var(--app-ease-soft,cubic-bezier(.16,1,.3,1)),
        opacity var(--app-motion-normal,280ms) ease,
        transform var(--app-motion-normal,280ms) ease;
}
.app-sidebar-section-body.is-open{
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
    padding-top: .35rem;
}
.app-sidebar-section-body .app-sidebar-link{
    margin-left: .15rem;
    margin-right: .15rem;
}
.app-sidebar-divider{
    margin: .45rem .75rem;
    border-color: rgba(15,23,42,.12);
}
.app-sidebar-footer{
    margin-top: auto;
}
@media (max-width: 1100px){
    .app-topbar .container-fluid.app-topbar-grid{
        grid-template-columns: minmax(170px, .9fr) minmax(120px, 1fr) minmax(180px, .8fr);
        gap: .6rem;
    }
    .app-user-summary{
        max-width: 170px;
    }
}
@media (max-width: 768px){
    .app-topbar .container-fluid.app-topbar-grid{
        grid-template-columns: auto 1fr auto;
        gap: .5rem;
    }
    .app-brand-compact{
        display: none;
    }
    .app-topbar-title{
        font-size: .82rem;
        padding: .28rem .65rem;
        letter-spacing: .04em;
    }
    .app-user-summary,
    .app-topbar-user .btn[href="change_password.php"]{
        display: none;
    }
}
@media (max-width: 480px){
    .app-topbar-user .btn{
        padding-left: .55rem;
        padding-right: .55rem;
    }
    .app-sidebar-toggle{
        padding-left: .55rem;
        padding-right: .55rem;
    }
}

/* VST SmartPOS v1.0.3o mobile title and sidebar account polish */
.app-topbar-title{
    font-size: 1.08rem;
    padding: .4rem 1.15rem;
}
.app-sidebar-account{
    display: none;
    margin: .35rem .65rem .55rem;
    padding: .85rem;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 1rem;
    background: rgba(var(--app-accent-rgb), .08);
    color: #0f172a;
}
.app-sidebar-account-label{
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.app-sidebar-account-name{
    color: #0f172a;
    font-weight: 900;
    line-height: 1.2;
    word-break: break-word;
}
.app-sidebar-account-role{
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    margin-top: .1rem;
}
.app-sidebar-account-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .75rem;
}
.app-sidebar-account-actions a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: .75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,.14);
    color: #0f172a;
    text-decoration: none;
    font-weight: 900;
    font-size: .86rem;
    transition:
        background-color var(--app-motion-normal,280ms) ease,
        color var(--app-motion-normal,280ms) ease,
        border-color var(--app-motion-normal,280ms) ease,
        transform var(--app-motion-fast,160ms) var(--app-ease-out,cubic-bezier(.22,.61,.36,1));
}
.app-sidebar-account-actions a:hover,
.app-sidebar-account-actions a:focus{
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
    transform: translateY(-1px);
}
@media (max-width: 768px){
    .app-topbar .container-fluid.app-topbar-grid{
        grid-template-columns: auto minmax(0,1fr);
        gap: .55rem;
    }
    .app-topbar-left{
        min-width: auto;
    }
    .app-topbar-user{
        display: none !important;
    }
    .app-topbar-title{
        justify-self: center;
        max-width: 100%;
        font-size: 1.05rem;
        padding: .42rem .95rem;
        letter-spacing: .055em;
    }
    .app-sidebar-account{
        display: block;
    }
}
@media (max-width: 420px){
    .app-topbar-title{
        font-size: .98rem;
        padding-left: .7rem;
        padding-right: .7rem;
        letter-spacing: .04em;
    }
    .app-sidebar-account-actions{
        grid-template-columns: 1fr;
    }
}

/* VST SmartPOS v1.0.3p mobile full-width sidebar */
@media (max-width: 991.98px){
    .app-sidebar{
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        transform: translateX(-100%) !important;
    }
    body.app-with-sidebar:not(.sidebar-collapsed) .app-sidebar{
        transform: translateX(0) !important;
    }
    body.app-with-sidebar.sidebar-collapsed .app-sidebar{
        transform: translateX(-100%) !important;
    }
    .app-main-with-sidebar{
        margin-left: 0 !important;
    }
    .app-sidebar-header{
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        border-bottom: 1px solid rgba(15,23,42,.10);
    }
    .app-sidebar-footer{
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    body.app-with-sidebar:not(.sidebar-collapsed){
        overflow: hidden;
    }
    body.app-with-sidebar:not(.sidebar-collapsed) .app-sidebar-backdrop{
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* VST SmartPOS v1.0.3q sidebar search/chat tools */
.app-sidebar-bottom-tools{
    margin: auto .65rem .45rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(15,23,42,.10);
}
.app-sidebar-bottom-tools .app-sidebar-link{
    margin-left: 0;
    margin-right: 0;
}
.app-sidebar-bottom-tools .app-sidebar-link:first-child{
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    border-color: var(--app-accent);
    font-weight: 900;
}
.app-sidebar-bottom-tools .app-sidebar-link:first-child .app-sidebar-icon{
    background: rgba(255,255,255,.18);
    color: var(--app-accent-contrast);
}
.app-sidebar-footer{
    margin-top: 0 !important;
}
@media (max-width: 991.98px){
    .app-sidebar-bottom-tools{
        margin-top: auto;
        padding-bottom: .35rem;
    }
}

/* VST SmartPOS v1.0.3r scrollable sidebar */
.app-sidebar{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,23,42,.28) transparent;
}
.app-sidebar::-webkit-scrollbar{
    width: 9px;
}
.app-sidebar::-webkit-scrollbar-track{
    background: transparent;
}
.app-sidebar::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.app-sidebar::-webkit-scrollbar-thumb:hover{
    background: rgba(15,23,42,.34);
    background-clip: padding-box;
}
.app-sidebar-header{
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}
.app-sidebar-footer{
    flex: 0 0 auto;
}
.app-sidebar-bottom-tools{
    flex: 0 0 auto;
}
@media (max-width: 991.98px){
    .app-sidebar{
        height: calc(100dvh - var(--app-topbar-height)) !important;
        max-height: calc(100dvh - var(--app-topbar-height)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* VST SmartPOS v1.0.3s mobile sidebar scroll hard fix */
@media (max-width: 991.98px){
    body.app-with-sidebar:not(.sidebar-collapsed){
        overflow: hidden !important;
    }
    .app-sidebar{
        display: block !important;
        top: var(--app-topbar-height) !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    .app-sidebar > *{
        flex: none !important;
    }
    .app-sidebar-section,
    .app-sidebar-account,
    .app-sidebar-bottom-tools,
    .app-sidebar-footer{
        flex: none !important;
    }
    .app-sidebar-section-body.is-open{
        max-height: none !important;
        overflow: visible !important;
    }
    .app-sidebar-bottom-tools{
        margin-top: .65rem !important;
    }
    .app-sidebar-footer{
        margin-top: .35rem !important;
        padding-bottom: .75rem !important;
    }
}

/* VST SmartPOS v1.0.3t browser print hardening
   Use the browser print dialog directly. Do not force PDF conversion. */
@media print {
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.app-with-sidebar,
  body.sidebar-collapsed {
    padding: 0 !important;
  }

  .app-topbar,
  .app-navbar,
  .app-sidebar,
  .app-sidebar-overlay,
  .app-sidebar-backdrop,
  .app-mobile-account,
  .no-print,
  .document-toolbar,
  .toast,
  .modal,
  .modal-backdrop {
    display: none !important;
  }

  .app-shell,
  .app-main,
  .app-content,
  .app-page,
  main,
  main.container,
  main.container-fluid,
  .container,
  .container-fluid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .card,
  .dashboard-hero,
  .print-document,
  .web-document,
  .doc-block {
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .print-document,
  .web-document {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8mm !important;
    color: #000000 !important;
  }

  .print-document.card,
  .web-document.card,
  .card.print-document {
    border: 0 !important;
    border-radius: 0 !important;
  }

  .table,
  table {
    page-break-inside: auto;
    break-inside: auto;
  }

  tr,
  .doc-block,
  .card,
  .receipt {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  a,
  a:visited {
    color: #000000 !important;
    text-decoration: none !important;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    box-shadow: none !important;
  }

  @page {
    size: A4;
    margin: 10mm;
  }
}

@media print {
  body.receipt-print-page {
    background: #ffffff !important;
  }

  body.receipt-print-page .receipt {
    width: 76mm !important;
    max-width: 76mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #000000 !important;
  }

  body.receipt-print-page .receipt table {
    width: 100% !important;
  }
}

/* VST SmartPOS v1.0.3u WYSIWYG print preview */
.vst-print-preview-open{
    overflow: hidden !important;
}
.vst-print-preview-overlay{
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
}
.vst-print-preview-topbar{
    min-height: 66px;
    padding: .85rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(15,23,42,.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
}
.vst-print-preview-kicker{
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
    color: var(--app-accent, #0d6efd);
}
.vst-print-preview-title{
    font-weight: 900;
    color: #0f172a;
}
.vst-print-preview-actions{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vst-print-preview-scroll{
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
}
.vst-print-preview-sheet{
    background: #ffffff;
    color: #000000;
    margin: 0 auto 2rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    border-radius: 6px;
    overflow: hidden;
    transform-origin: top center;
}
.vst-print-preview-sheet-a4{
    width: 210mm;
    min-height: 297mm;
    padding: 10mm;
}
.vst-print-preview-sheet-receipt{
    width: 84mm;
    max-width: 84mm;
    min-height: 140mm;
    padding: 3mm;
}
.vst-print-preview-sheet .web-document,
.vst-print-preview-sheet .print-document,
.vst-print-preview-sheet .statement-document{
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.vst-print-preview-sheet .receipt{
    width: 76mm !important;
    max-width: 76mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
}
.vst-print-frame{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 991.98px){
    .vst-print-preview-topbar{
        align-items: flex-start;
    }
    .vst-print-preview-scroll{
        padding: .75rem;
    }
    .vst-print-preview-sheet-a4{
        width: 210mm;
        transform: scale(.46);
        margin-bottom: -150mm;
    }
    .vst-print-preview-sheet-receipt{
        width: 84mm;
        max-width: 84mm;
    }
}
@media (max-width: 575.98px){
    .vst-print-preview-topbar{
        flex-direction: column;
    }
    .vst-print-preview-actions{
        width: 100%;
        justify-content: stretch;
    }
    .vst-print-preview-actions .btn{
        flex: 1 1 auto;
    }
    .vst-print-preview-sheet-a4{
        transform: scale(.40);
        margin-left: 50%;
        translate: -50% 0;
        margin-bottom: -175mm;
    }
}
@media print{
    .vst-print-preview-overlay{
        display: none !important;
    }
}