@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #2563eb;
  --blue2: #0f4ac6;
  --ink: #0b1220;
  --muted: #64748b;
  --line: #e6ebf2;
  --panel: #fff;
  --bg: #f6f8fc;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Vazirmatn', 'Inter', sans-serif
}

.en {
  font-family: 'Inter', 'Vazirmatn', sans-serif
}

.app-shell {
  min-height: 100vh
}

.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 258px;
  background: #0a0f1c;
  color: #dbe3f1;
  padding: 18px 14px;
  overflow: auto hidden;
  z-index: 1030
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px
}

.brand-logo,
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2f80ff, #0d48c8);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(37, 99, 235, .28)
}

.brand strong {
  display: block;
  color: #fff
}

.brand small {
  color: #8fa0ba
}

.nav-section {
  font-size: 11px;
  color: #697a94;
  text-transform: uppercase;
  padding: 12px 11px 6px
}

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #bcc9dc;
  padding: 10px 12px;
  border-radius: 11px;
  margin: 2px 0;
  font-size: 14px
}

.side-link:hover,
.side-link.active {
  color: #fff;
  background: #151f33
}

.side-link.active {
  box-shadow: inset 3px 0 0 #3b82f6
}

.side-link i {
  width: 19px;
  text-align: center
}

.main {
  margin-inline-start: 258px;
  min-height: 100vh
}

.topbar {
  height: 72px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 1020
}

.content {
  padding: 26px
}

.page-title {
  font-weight: 800;
  margin: 0;
  font-size: 24px
}

.subtle {
  color: var(--muted)
}

.card-modern {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .045)
}

.metric {
  padding: 20px
}

.metric-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--blue);
  font-size: 19px
}

.metric .value {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 15px
}

.metric .label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px
}

.btn-primary {
  background: var(--blue);
  border-color: var(--blue)
}

.btn-primary:hover {
  background: var(--blue2);
  border-color: var(--blue2)
}

.btn-soft {
  background: #eef4ff;
  color: #1d4ed8;
  border: 0
}

.form-control,
.form-select {
  border-color: #dce4ee;
  border-radius: 11px;
  padding: .62rem .8rem
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
  border-color: #93b4f5
}

.table-card {
  padding: 16px
}

.table>thead th {
  font-size: 12px;
  color: #64748b;
  text-transform: none;
  border-bottom-color: #e7edf5;
  padding: 13px 10px
}

.table>tbody td {
  vertical-align: middle;
  border-bottom-color: #eef2f7;
  padding: 12px 10px
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #dce4ee;
  border-radius: 9px;
  padding: 6px 9px
}

.badge-soft-success {
  background: #ecfdf3;
  color: #15803d
}

.badge-soft-danger {
  background: #fef2f2;
  color: #b91c1c
}

.badge-soft-warning {
  background: #fff7ed;
  color: #c2410c
}

.badge-soft-primary {
  background: #eff6ff;
  color: #1d4ed8
}

.badge {
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 8px
}

.invoice-line {
  display: grid;
  grid-template-columns: minmax(250px, 2.2fr) minmax(92px, .72fr) minmax(145px, 1fr) minmax(118px, .9fr) minmax(118px, .9fr) 42px;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px
}

.invoice-line>div {
  min-width: 0
}

.invoice-line .form-label {
  height: 20px;
  margin-bottom: 6px;
  display: flex;
  align-items: center
}

.invoice-line .form-control,
.invoice-line .form-select,
.invoice-line .selectize-control,
.invoice-line .selectize-input {
  height: 42px !important;
  min-height: 42px !important
}

.invoice-line .conversion-text {
  min-height: 18px;
  line-height: 18px;
  margin-top: 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.line-remove-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  margin-top: 26px !important;
  display: grid;
  place-items: center
}

.pos-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px
}

.pos-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px
}

.pos-product {
  cursor: pointer;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: .15s
}

.pos-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(15, 23, 42, .08);
  border-color: #bfd2fb
}

.pos-product .price {
  font-weight: 800;
  color: #1d4ed8
}

.sticky-summary {
  position: sticky;
  top: 92px
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 20% 10%, #dbeafe, transparent 35%), #f7f9fd
}

.login-card {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .1);
  border-radius: 22px;
  padding: 30px
}

.login-card .brand-mark {
  margin-bottom: 18px
}

.modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .18)
}

.modal-header,
.modal-footer {
  border-color: #eef2f6
}

.statement-balance {
  font-size: 30px;
  font-weight: 800
}

.ltr {
  direction: ltr;
  text-align: left
}

.rtl {
  direction: rtl;
  text-align: right
}

.chart-wrap {
  height: 300px
}

.empty {
  padding: 38px;
  text-align: center;
  color: #94a3b8
}

.invoice-print {
  max-width: 900px;
  margin: auto;
  background: #fff;
  padding: 28px
}

.invoice-print .head {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #111827;
  padding-bottom: 16px;
  margin-bottom: 18px
}

@media(max-width:992px) {
  .sidebar {
    transform: translateX(-100%);
    transition: .2s
  }

  .rtl-ui .sidebar {
    transform: translateX(100%)
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .main {
    margin-inline-start: 0
  }

  .content {
    padding: 18px
  }

  .pos-grid {
    grid-template-columns: 1fr
  }

  .invoice-line {
    grid-template-columns: 1fr 1fr
  }

  .invoice-line .wide {
    grid-column: 1/-1
  }

  .invoice-line .line-remove-btn {
    grid-column: 2;
    justify-self: end;
    margin-top: 0 !important
  }
}

@media print {

  .no-print,
  .sidebar,
  .topbar {
    display: none !important
  }

  .main {
    margin: 0 !important
  }

  .content {
    padding: 0
  }

  .invoice-print {
    max-width: none
  }

  .card-modern {
    border: 0;
    box-shadow: none
  }
}

/* ===== 2026 UI refresh ===== */
:root {
  --blue: #2563eb;
  --blue2: #1d4ed8;
  --blue-soft: #eff6ff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dfe6ef;
  --line-strong: #cbd5e1;
  --panel: #ffffff;
  --bg: #f5f7fb;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --radius: 16px;
  --shadow: 0 12px 36px rgba(15, 23, 42, .06)
}

body {
  background: linear-gradient(180deg, #f8faff 0, #f5f7fb 160px);
  min-height: 100vh
}

.card-modern {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible
}

.table-card {
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-strong)
}

.table-card.table-loading {
  opacity: .7;
  pointer-events: none
}

.table-card:before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  opacity: .95
}

.table-responsive {
  border-radius: 14px;
  overflow: auto
}

/* Unified modern tables - DataTables and normal Bootstrap tables */
table.table,
table.modern-table,
table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  overflow: hidden
}

table.table thead th,
table.modern-table thead th,
table.dataTable thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--line-strong) !important;
  border-inline-end: 1px solid var(--line) !important;
  white-space: nowrap
}

table.table thead th:last-child,
table.modern-table thead th:last-child,
table.dataTable thead th:last-child {
  border-inline-end: 0 !important
}

table.table tbody td,
table.modern-table tbody td,
table.dataTable tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #e9eef5 !important;
  border-inline-end: 1px solid #eef2f7 !important;
  background: #fff;
  transition: .15s
}

table.table tbody td:last-child,
table.modern-table tbody td:last-child,
table.dataTable tbody td:last-child {
  border-inline-end: 0 !important
}

table.table tbody tr:last-child td,
table.modern-table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
  border-bottom: 0 !important
}

table.table tbody tr:hover td,
table.modern-table tbody tr:hover td,
table.dataTable tbody tr:hover td {
  background: #f8fbff !important
}

table.dataTable>tbody>tr.child ul.dtr-details {
  width: 100%;
  margin: 0
}

table.dataTable>tbody>tr.child span.dtr-title {
  min-width: 120px;
  color: #64748b
}

.table-empty-state {
  padding: 44px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  border: 0 !important
}

.table-empty-state i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px
}

.table-empty-state span {
  display: block
}

/* DataTables 2 controls */
div.dt-container {
  padding: 0 16px 14px
}

div.dt-container .dt-layout-row:first-child {
  padding: 14px 0 12px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between
}

div.dt-container .dt-layout-row:last-child {
  padding-top: 12px;
  margin: 0;
  border-top: 1px solid #edf1f6
}

div.dt-container .dt-length,
div.dt-container .dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px
}

div.dt-container .dt-length select,
div.dt-container .dt-search input {
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  min-height: 38px;
  padding: 7px 11px !important;
  outline: 0 !important;
  box-shadow: none !important
}

div.dt-container .dt-search input {
  min-width: 220px
}

div.dt-container .dt-length select:focus,
div.dt-container .dt-search input:focus {
  border-color: #93b4f5 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09) !important
}

div.dt-container .dt-info {
  color: #64748b;
  font-size: 12.5px;
  padding-top: 8px !important
}

div.dt-container .dt-paging {
  display: flex;
  gap: 4px;
  align-items: center
}

div.dt-container .dt-paging .dt-paging-button {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  border-radius: 9px !important;
  min-width: 36px;
  height: 36px;
  padding: 5px 9px !important;
  color: #475569 !important;
  margin: 0 2px !important
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important
}

div.dt-container .dt-paging .dt-paging-button:hover {
  background: #eff6ff !important;
  color: var(--blue) !important;
  border-color: #bfdbfe !important
}

div.dt-container .dt-paging .dt-paging-button.disabled {
  opacity: .45 !important
}

div.dt-container table.dataTable {
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  overflow: hidden
}

/* Built-in AJAX table fallback, used if DataTables CDN is unavailable */
.fallback-table-toolbar,
.fallback-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: #fff
}

.fallback-table-toolbar {
  border-bottom: 1px solid #edf1f6
}

.fallback-table-footer {
  border-top: 1px solid #edf1f6;
  color: #64748b;
  font-size: 12.5px
}

.fallback-length,
.fallback-search,
.fallback-pages {
  display: flex;
  align-items: center;
  gap: 8px
}

.fallback-length select {
  width: 76px
}

.fallback-search {
  position: relative
}

.fallback-search i {
  position: absolute;
  inset-inline-start: 12px;
  color: #94a3b8
}

.fallback-search input {
  padding-inline-start: 34px;
  min-width: 230px
}

.fallback-pages .btn {
  border: 1px solid var(--line)
}

.btn {
  border-radius: 10px;
  font-weight: 600
}

.btn-sm {
  border-radius: 9px
}

.btn-light {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155
}

.btn-light:hover {
  background: #f1f5f9;
  border-color: #cbd5e1
}

.btn-soft {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8
}

.btn-soft:hover {
  background: #dbeafe;
  color: #1d4ed8
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px
}

.form-control,
.form-select {
  border: 1px solid var(--line-strong);
  background: #fff;
  min-height: 43px
}

.form-control:hover,
.form-select:hover {
  border-color: #b8c5d6
}

.form-control[readonly] {
  background: #f8fafc
}

.modal-content {
  border: 1px solid rgba(203, 213, 225, .65)
}

.badge {
  border: 1px solid transparent
}

.badge-soft-success {
  border-color: #bbf7d0
}

.badge-soft-warning {
  border-color: #fed7aa
}

.badge-soft-danger {
  border-color: #fecaca
}

.badge-soft-primary {
  border-color: #bfdbfe
}

/* Topbar and dashboard */
.topbar {
  height: 74px;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02)
}

.page-title {
  font-size: 22px;
  letter-spacing: -.02em
}

.metric {
  position: relative;
  overflow: hidden
}

.metric:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #eff6ff;
  inset-inline-end: -32px;
  top: -38px;
  opacity: .75
}

.metric-icon,
.metric .value,
.metric .label {
  position: relative;
  z-index: 1
}

.today-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  margin-bottom: 18px;
  background: #0f172a;
  color: #fff;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12)
}

.today-strip .today-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1)
}

.today-strip .date-values {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.today-strip .date-pill {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px
}

/* Date picker */
.date-picker-wrap {
  position: relative
}

.date-picker-wrap>.form-control {
  padding-inline-end: 46px
}

.date-picker-btn {
  position: absolute;
  inset-inline-end: 7px;
  top: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  z-index: 2
}

.date-picker-btn:hover {
  background: #e2e8f0;
  color: var(--blue)
}

.date-picker-pop {
  display: none;
  position: absolute;
  z-index: 2055;
  top: calc(100% + 7px);
  inset-inline-start: 0;
  width: 300px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .16);
  padding: 12px
}

.date-picker-pop.open {
  display: block
}

.dp-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  text-align: center;
  margin-bottom: 8px
}

.dp-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #f8fafc;
  color: #475569
}

.dp-head button:hover {
  background: #eff6ff;
  color: var(--blue)
}

.dp-head strong {
  font-size: 14px
}

.dp-week,
.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px
}

.dp-week span {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 6px 0;
  font-weight: 700
}

.dp-days button {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #334155;
  font-size: 12.5px
}

.dp-days button:hover {
  background: #eff6ff;
  color: var(--blue)
}

.dp-days button.today {
  box-shadow: inset 0 0 0 1px #93c5fd;
  color: #1d4ed8
}

.dp-days button.selected {
  background: var(--blue);
  color: #fff;
  box-shadow: none
}

.dp-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #eef2f7;
  margin-top: 8px;
  padding-top: 8px
}

/* Help / guidance */
.help-hero {
  padding: 24px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(30, 64, 175, .15)
}

.help-hero p {
  color: #dbeafe;
  margin: 8px 0 0
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.guide-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035)
}

.guide-step {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 12px
}

.guide-card h6 {
  font-weight: 800;
  margin-bottom: 7px
}

.guide-card p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.8
}

.help-callout {
  border-inline-start: 4px solid var(--blue);
  background: #f8fbff;
  border-radius: 12px;
  padding: 14px 16px;
  color: #475569
}

/* Login redesign */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: radial-gradient(circle at 12% 15%, rgba(59, 130, 246, .17), transparent 28%), radial-gradient(circle at 88% 80%, rgba(15, 23, 42, .08), transparent 25%), #f6f8fc
}

.login-shell {
  width: min(980px, 96vw);
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .13)
}

.login-visual {
  padding: 44px;
  background: linear-gradient(145deg, #0b1220 0%, #102a57 58%, #1d4ed8 100%);
  color: #fff;
  position: relative;
  overflow: hidden
}

.login-visual:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  inset-inline-end: -110px;
  bottom: -110px
}

.login-visual .brand-mark {
  box-shadow: none;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .15)
}

.login-visual h2 {
  font-size: 30px;
  font-weight: 800;
  max-width: 430px;
  margin-top: 58px
}

.login-visual p {
  color: #cbd5e1;
  max-width: 430px;
  line-height: 1.9
}

.login-points {
  display: grid;
  gap: 12px;
  margin-top: 30px
}

.login-point {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #e2e8f0;
  font-size: 13px
}

.login-point i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  color: #bfdbfe
}

.login-form-side {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.login-form-side .login-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px
}

.login-form-side .form-control {
  min-height: 48px
}

.login-form-side .input-icon {
  position: relative
}

.login-form-side .input-icon>i {
  position: absolute;
  inset-inline-start: 14px;
  top: 16px;
  color: #94a3b8;
  z-index: 2
}

.login-form-side .input-icon>.form-control {
  padding-inline-start: 42px
}

.password-toggle {
  position: absolute;
  inset-inline-end: 7px;
  top: 7px;
  width: 34px;
  height: 34px;
  border: 0;
  background: #f8fafc;
  border-radius: 9px;
  color: #64748b
}

.login-security-note {
  margin-top: 22px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.7
}

/* Simple chart fallback */
.simple-chart {
  height: 100%;
  overflow: auto;
  padding: 8px
}

.simple-chart-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  margin: 11px 0
}

.simple-chart-label {
  font-size: 11px;
  color: #64748b
}

.simple-chart-bars {
  display: grid;
  gap: 4px
}

.simple-bar {
  height: 10px;
  border-radius: 999px;
  min-width: 2px
}

.simple-bar.sales,
.legend-dot.sales {
  background: #2563eb
}

.simple-bar.purchases,
.legend-dot.purchases {
  background: #94a3b8
}

.simple-chart-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  font-size: 12px;
  color: #64748b
}

.simple-chart-legend span {
  display: flex;
  align-items: center;
  gap: 6px
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block
}

/* Toasts */
.app-toast-wrap {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 4000;
  display: grid;
  gap: 9px;
  width: min(360px, calc(100vw - 36px))
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .15);
  font-size: 13px;
  opacity: 0;
  transform: translateY(-8px);
  transition: .2s
}

.app-toast.show {
  opacity: 1;
  transform: none
}

.app-toast-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
  margin-top: 5px;
  flex: none
}

.app-toast-danger .app-toast-dot {
  background: #dc2626
}

@media(max-width:992px) {
  .guide-grid {
    grid-template-columns: 1fr 1fr
  }

  .login-shell {
    grid-template-columns: 1fr;
    max-width: 560px
  }

  .login-visual {
    display: none
  }

  .login-form-side {
    padding: 34px
  }

  .today-strip {
    align-items: flex-start
  }

  .today-strip .date-values {
    justify-content: flex-end
  }
}

@media(max-width:650px) {
  .guide-grid {
    grid-template-columns: 1fr
  }

  .fallback-table-toolbar,
  .fallback-table-footer {
    align-items: stretch;
    flex-direction: column
  }

  .fallback-search input {
    min-width: 0;
    width: 100%
  }

  div.dt-container .dt-layout-row {
    flex-direction: column;
    align-items: stretch !important
  }

  div.dt-container .dt-search input {
    min-width: 0;
    width: 100%
  }

  .date-picker-pop {
    width: min(300px, calc(100vw - 48px))
  }

  .today-strip {
    flex-direction: column
  }

  .login-form-side {
    padding: 26px
  }

  .content {
    padding: 14px
  }
}

.fallback-sortable {
  cursor: pointer;
  position: relative;
  padding-inline-end: 28px !important
}

.fallback-sortable:after {
  content: '↕';
  position: absolute;
  inset-inline-end: 10px;
  color: #cbd5e1;
  font-size: 11px
}

.fallback-sortable.sort-asc:after {
  content: '↑';
  color: var(--blue)
}

.fallback-sortable.sort-desc:after {
  content: '↓';
  color: var(--blue)
}

.rtl-ui .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important
}

.rtl-ui .me-1 {
  margin-left: .25rem !important;
  margin-right: 0 !important
}

.rtl-ui .me-2 {
  margin-left: .5rem !important;
  margin-right: 0 !important
}

.rtl-ui .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important
}

.rtl-ui .text-end {
  text-align: left !important
}

.rtl-ui .dropdown-menu-end {
  left: 0 !important;
  right: auto !important
}

/* ===== Store Pro additions: theme, Selectize, reports, invoice ===== */
.brand-logo-img {
  overflow: hidden;
  padding: 0;
  background: #fff
}

.brand-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px
}

.theme-toggle {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center
}

/* Selectize (official plugin + local fallback) */
.selectize-control {
  margin: 0
}

.selectize-control.single .selectize-input,
.selectize-input {
  min-height: 43px;
  border: 1px solid var(--line-strong) !important;
  border-radius: 11px !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: 10px 12px !important
}

.selectize-input.focus {
  border-color: #93b4f5 !important;
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12) !important
}

.selectize-dropdown,
.selectize-dropdown.form-control {
  z-index: 2200 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 11px !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
  overflow: hidden
}

.selectize-dropdown .option {
  padding: 9px 11px !important
}

.selectize-dropdown .active {
  background: #eff6ff !important;
  color: #1d4ed8 !important
}

.selectize-control .item {
  color: var(--ink) !important
}

.rtl-ui .selectize-input {
  text-align: right
}

.rtl-ui .selectize-control.single .selectize-input:after {
  right: auto;
  left: 15px
}

/* Cash / no-account selection hint */
.cash-party-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px dashed #bfdbfe;
  background: #f8fbff;
  color: #475569;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.7
}

.cash-party-hint i {
  color: #2563eb;
  margin-top: 3px
}

/* Dashboard period summaries */
.period-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 20px
}

.period-card {
  padding: 16px 17px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035)
}

.period-card .period-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px
}

.period-card .period-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: #2563eb
}

.period-card .period-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--muted)
}

.period-card .period-row strong {
  color: var(--ink);
  font-size: 13px
}

.period-card .profit {
  border-top: 1px dashed var(--line);
  margin-top: 5px;
  padding-top: 9px
}

/* Reports */
.report-filter {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.5fr auto auto;
  gap: 12px;
  align-items: end
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px
}

.report-kpi {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px
}

.report-kpi .kpi-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}

.report-kpi .kpi-value {
  font-size: 19px;
  font-weight: 800
}

.balance-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.balance-column {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.balance-column .balance-head {
  padding: 13px 15px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  font-weight: 800
}

.balance-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px
}

.balance-row:last-child {
  border-bottom: 0
}

.balance-total {
  background: #f8fbff;
  font-weight: 800
}

.net-assets-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  margin-top: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff
}

.report-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px
}

.report-section-title h5 {
  margin: 0;
  font-weight: 800
}

.report-print-header {
  display: none
}

/* Professional invoice */
.invoice-print {
  max-width: 920px;
  padding: 0 !important;
  overflow: hidden
}

.invoice-shell {
  padding: 30px
}

.invoice-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #0f172a
}

.invoice-heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  text-align: end;
  align-items: flex-end
}

.invoice-logo {
  width: 78px;
  height: 78px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden
}

.invoice-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.invoice-logo-fallback {
  font-size: 22px;
  font-weight: 900;
  color: #2563eb
}

.invoice-store h2 {
  font-size: 23px;
  font-weight: 900;
  margin: 0 0 4px
}

.invoice-store .slogan {
  color: var(--muted);
  font-size: 12.5px
}

.invoice-meta {
  text-align: end
}

.invoice-heading .invoice-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap
}

.invoice-heading .invoice-meta .small {
  margin-top: 0 !important
}

.invoice-meta .invoice-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b
}

.invoice-meta .invoice-number {
  font-size: 18px;
  font-weight: 900;
  margin-top: 3px
}

.invoice-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 11.5px;
  color: #475569
}

.invoice-contact>div {
  display: flex;
  gap: 7px;
  align-items: flex-start
}

.invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px
}

.invoice-party-box {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px
}

.invoice-party-box .label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px
}

.invoice-party-box strong {
  font-size: 14px
}

.invoice-summary {
  margin-inline-start: auto;
  width: min(390px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fbfdff
}

.invoice-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 5px 0;
  font-size: 13px
}

.invoice-summary-row.total {
  font-size: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 5px
}

.invoice-note {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  font-size: 12.5px
}

.invoice-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 55px
}

.signature-box {
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid #94a3b8;
  font-size: 12px;
  color: #475569
}

.invoice-footer {
  margin-top: 28px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11.5px;
  color: #64748b
}

/* Dark mode */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --line: #293449;
  --line-strong: #3a475d;
  --panel: #111827;
  --bg: #090f1a;
  --blue-soft: #102346
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #0b1220 0, #090f1a 180px);
  color: var(--ink)
}

html[data-theme="dark"] .topbar {
  background: rgba(10, 15, 28, .92);
  border-color: var(--line)
}

html[data-theme="dark"] .card-modern,
html[data-theme="dark"] .period-card,
html[data-theme="dark"] .report-kpi,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line)
}

html[data-theme="dark"] .btn-light {
  background: #182235;
  border-color: #334155;
  color: #e2e8f0
}

html[data-theme="dark"] .btn-light:hover {
  background: #22304a;
  border-color: #475569;
  color: #fff
}

html[data-theme="dark"] .btn-soft {
  background: #102346;
  border-color: #1e3a67;
  color: #93c5fd
}

html[data-theme="dark"] .form-label {
  color: #cbd5e1
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #36445b
}

html[data-theme="dark"] .form-control[readonly] {
  background: #111827
}

html[data-theme="dark"] .form-control::placeholder {
  color: #64748b
}

html[data-theme="dark"] table.table,
html[data-theme="dark"] table.modern-table,
html[data-theme="dark"] table.dataTable {
  background: #111827;
  color: #e5e7eb;
  border-color: #334155 !important
}

html[data-theme="dark"] table.table thead th,
html[data-theme="dark"] table.modern-table thead th,
html[data-theme="dark"] table.dataTable thead th {
  background: #172033 !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important
}

html[data-theme="dark"] table.table tbody td,
html[data-theme="dark"] table.modern-table tbody td,
html[data-theme="dark"] table.dataTable tbody td {
  background: #111827;
  border-color: #253148 !important
}

html[data-theme="dark"] table.table tbody tr:hover td,
html[data-theme="dark"] table.modern-table tbody tr:hover td,
html[data-theme="dark"] table.dataTable tbody tr:hover td {
  background: #162138 !important
}

html[data-theme="dark"] div.dt-container .dt-length select,
html[data-theme="dark"] div.dt-container .dt-search input,
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important
}

html[data-theme="dark"] .fallback-table-toolbar,
html[data-theme="dark"] .fallback-table-footer {
  background: #111827;
  border-color: #253148
}

html[data-theme="dark"] .metric:after {
  background: #102346
}

html[data-theme="dark"] .metric-icon,
html[data-theme="dark"] .period-icon {
  background: #102346;
  color: #60a5fa
}

html[data-theme="dark"] .cash-party-hint,
html[data-theme="dark"] .help-callout {
  background: #0e1a2e;
  color: #cbd5e1;
  border-color: #264d84
}

html[data-theme="dark"] .date-picker-pop {
  background: #111827;
  border-color: #334155
}

html[data-theme="dark"] .dp-head button,
html[data-theme="dark"] .date-picker-btn {
  background: #172033;
  color: #cbd5e1
}

html[data-theme="dark"] .dp-days button {
  color: #e2e8f0
}

html[data-theme="dark"] .dp-days button:hover {
  background: #102346
}

html[data-theme="dark"] .selectize-control.single .selectize-input,
html[data-theme="dark"] .selectize-input,
html[data-theme="dark"] .selectize-dropdown {
  background: #0f172a !important;
  color: #e5e7eb !important;
  border-color: #36445b !important
}

html[data-theme="dark"] .selectize-dropdown .active,
html[data-theme="dark"] .local-selectize .selectize-option:hover,
html[data-theme="dark"] .local-selectize .selectize-option.active {
  background: #102346 !important;
  color: #93c5fd !important
}

html[data-theme="dark"] .balance-column .balance-head,
html[data-theme="dark"] .balance-total,
html[data-theme="dark"] .invoice-contact {
  background: #172033
}

html[data-theme="dark"] .balance-row {
  border-color: #253148
}

html[data-theme="dark"] .invoice-shell {
  background: #111827
}

html[data-theme="dark"] .invoice-brand {
  border-color: #475569
}

html[data-theme="dark"] .invoice-logo {
  background: #fff
}

html[data-theme="dark"] .login-page {
  background: radial-gradient(circle at 12% 15%, rgba(37, 99, 235, .18), transparent 28%), #090f1a
}

html[data-theme="dark"] .login-shell {
  background: #111827;
  border-color: #334155
}

html[data-theme="dark"] .login-form-side {
  background: #111827
}

html[data-theme="dark"] .login-security-note {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8
}

@media(max-width:1200px) {
  .report-kpis {
    grid-template-columns: repeat(3, 1fr)
  }

  .period-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:768px) {
  .report-filter {
    grid-template-columns: 1fr 1fr
  }

  .report-filter .filter-wide {
    grid-column: 1/-1
  }

  .report-kpis {
    grid-template-columns: 1fr 1fr
  }

  .balance-sheet {
    grid-template-columns: 1fr
  }

  .period-grid {
    grid-template-columns: 1fr
  }

  .invoice-brand {
    grid-template-columns: auto 1fr
  }

  .invoice-heading {
    align-items: flex-start;
    text-align: start
  }

  .invoice-heading .invoice-meta {
    justify-content: flex-start
  }

  .invoice-meta {
    text-align: start
  }

  .invoice-contact {
    grid-template-columns: 1fr
  }

  .invoice-parties {
    grid-template-columns: 1fr
  }

  .invoice-signatures {
    gap: 28px
  }

  .invoice-shell {
    padding: 18px
  }
}

@media print {

  html,
  html[data-theme="dark"],
  html[data-theme="light"] {
    color-scheme: light !important
  }

  body,
  html[data-theme="dark"] body {
    background: #fff !important;
    color: #111827 !important
  }

  .invoice-shell,
  .card-modern,
  .report-kpi,
  .period-card,
  .balance-column {
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important
  }

  .report-print-header {
    display: block
  }

  .report-filter,
  .theme-toggle {
    display: none !important
  }

  .invoice-contact,
  .balance-column .balance-head,
  .balance-total {
    background: #f8fafc !important;
    color: #111827 !important
  }

  .invoice-signatures {
    break-inside: avoid
  }

  .content {
    padding: 0 !important
  }
}

.settings-logo-preview {
  height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  overflow: hidden
}

.settings-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px
}

.logo-placeholder {
  font-size: 34px;
  color: #94a3b8
}

html[data-theme="dark"] .settings-logo-preview {
  background: #0f172a
}

/* ===== UI polish v3.1: compact navigation, local searchable selects, dark-mode fixes ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  overflow-x: hidden
}

.brand {
  flex: none
}

.brand-copy {
  min-width: 0
}

.brand-copy strong,
.brand-copy small {
  display: block;
  max-width: 172px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px);
  padding-bottom: 10px
}

.sidebar-spacer {
  flex: 1;
  min-height: 14px
}

.nav-group {
  margin: 3px 0
}

.nav-group-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: #95a5bc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: start;
  transition: .15s
}

.nav-group-toggle:hover,
.nav-group.open>.nav-group-toggle {
  background: #10192a;
  color: #e2e8f0
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.nav-group-label>i {
  width: 19px;
  text-align: center;
  color: #7790b2
}

.nav-group.open .nav-group-label>i {
  color: #60a5fa
}

.nav-group-chevron {
  font-size: 10px;
  transition: transform .18s;
  color: #64748b
}

.nav-group.open .nav-group-chevron {
  transform: rotate(180deg)
}

.nav-group-items {
  display: none;
  padding: 2px 0 4px 12px;
  margin-inline-start: 18px;
  border-inline-start: 1px solid #1d2a40
}

.rtl-ui .nav-group-items {
  padding: 2px 12px 4px 0
}

.nav-group.open .nav-group-items {
  display: block
}

.nav-group-items .side-link {
  font-size: 13px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 9px
}

.nav-group-items .side-link i {
  font-size: 12px;
  color: #72839d
}

.nav-group-items .side-link.active i {
  color: #93c5fd
}

.nav-section {
  padding-top: 7px
}

.side-link {
  transition: background .15s, color .15s, transform .15s
}

.side-link:hover {
  transform: translateX(1px)
}

.rtl-ui .side-link:hover {
  transform: translateX(-1px)
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.user-menu-btn {
  max-width: 210px
}

.user-menu-name {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom
}

/* Local searchable Selectize plugin: always editable/searchable and offline. */
.local-selectize.selectize-control {
  margin: 0 !important
}

.local-selectize .selectize-input {
  padding: 0 !important;
  min-height: 43px !important
}

.local-selectize .selectize-search-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 41px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  padding: 9px 38px 9px 12px !important
}

.rtl-ui .local-selectize .selectize-search-input {
  padding: 9px 12px 9px 38px !important
}

.local-selectize .selectize-dropdown {
  top: calc(100% + 6px) !important
}

.local-selectize .option {
  padding: 9px 10px !important
}

.local-selectize .option.active,
.local-selectize .option:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important
}

.local-selectize .selectize-arrow {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 38px;
  height: 41px;
  display: grid;
  place-items: center;
  color: #94a3b8;
  z-index: 2
}

.local-selectize .selectize-arrow span {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor
}

/* Better generic UI surfaces */
.modal-header,
.modal-footer {
  border-color: var(--line)
}

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12)
}

.dropdown-item {
  border-radius: 8px;
  padding: 8px 10px
}

.alert {
  border-radius: 12px
}

.pos-product {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink)
}

.app-toast {
  background: var(--panel);
  color: var(--ink)
}

.form-check-label {
  color: var(--ink)
}

.input-group-text {
  border-color: var(--line-strong);
  background: #f8fafc;
  color: #475569
}

.table a:not(.btn) {
  font-weight: 600
}

.page-title {
  color: var(--ink)
}

/* Comprehensive dark theme: Bootstrap + app components */
html[data-theme="dark"] {
  --bs-body-color: #e5e7eb;
  --bs-body-bg: #090f1a;
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: #94a3b8;
  --bs-secondary-bg: #172033;
  --bs-tertiary-bg: #111827;
  --bs-border-color: #334155;
  --bs-link-color: #60a5fa;
  --bs-link-hover-color: #93c5fd
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main {
  color: #e5e7eb
}

html[data-theme="dark"] .subtle,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text {
  color: #94a3b8 !important
}

html[data-theme="dark"] .text-dark {
  color: #e5e7eb !important
}

html[data-theme="dark"] .bg-light {
  background: #172033 !important;
  color: #e5e7eb !important
}

html[data-theme="dark"] .bg-white {
  background: #111827 !important;
  color: #e5e7eb !important
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: #293449 !important
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: #293449
}

html[data-theme="dark"] .modal-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong {
  color: #f1f5f9
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
  opacity: .8
}

html[data-theme="dark"] .dropdown-item {
  color: #dbe4f0
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background: #18243a;
  color: #fff
}

html[data-theme="dark"] .dropdown-divider {
  border-color: #293449
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input {
  color-scheme: dark
}

html[data-theme="dark"] .form-select option {
  background: #0f172a;
  color: #e5e7eb
}

html[data-theme="dark"] .input-group-text {
  background: #172033;
  color: #cbd5e1;
  border-color: #36445b
}

html[data-theme="dark"] .form-check-input {
  background-color: #0f172a;
  border-color: #475569
}

html[data-theme="dark"] .form-check-input:checked {
  background-color: #2563eb;
  border-color: #2563eb
}

html[data-theme="dark"] .form-check-label {
  color: #dbe4f0
}

html[data-theme="dark"] .alert-success {
  background: #0d281a;
  border-color: #1e5e37;
  color: #bbf7d0
}

html[data-theme="dark"] .alert-danger {
  background: #301417;
  border-color: #71323a;
  color: #fecaca
}

html[data-theme="dark"] .alert-warning {
  background: #33220d;
  border-color: #73511f;
  color: #fde68a
}

html[data-theme="dark"] .alert-info {
  background: #0e2637;
  border-color: #22577a;
  color: #bae6fd
}

html[data-theme="dark"] .pos-product {
  background: #111827 !important;
  color: #e5e7eb;
  border-color: #293449
}

html[data-theme="dark"] .pos-product:hover {
  background: #152033 !important;
  border-color: #3b5f94;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .18)
}

html[data-theme="dark"] .pos-product .price {
  color: #60a5fa
}

html[data-theme="dark"] .invoice-summary,
html[data-theme="dark"] .invoice-party-box,
html[data-theme="dark"] .invoice-note {
  background: #111827;
  color: #e5e7eb;
  border-color: #334155
}

html[data-theme="dark"] .signature-box {
  color: #cbd5e1;
  border-color: #64748b
}

html[data-theme="dark"] .invoice-footer {
  color: #94a3b8;
  border-color: #334155
}

html[data-theme="dark"] .invoice-store .slogan,
html[data-theme="dark"] .invoice-meta .invoice-type {
  color: #94a3b8
}

html[data-theme="dark"] .app-toast {
  background: #111827;
  color: #e5e7eb;
  border-color: #334155;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3)
}

html[data-theme="dark"] .simple-chart-label,
html[data-theme="dark"] .simple-chart-legend {
  color: #94a3b8
}

html[data-theme="dark"] .local-selectize .selectize-input,
html[data-theme="dark"] .local-selectize .selectize-dropdown {
  background: #0f172a !important;
  border-color: #3a475d !important;
  color: #e5e7eb !important
}

html[data-theme="dark"] .local-selectize .selectize-search-input {
  color: #e5e7eb !important;
  background: transparent !important
}

html[data-theme="dark"] .local-selectize .option {
  color: #e5e7eb !important
}

html[data-theme="dark"] .local-selectize .option.active,
html[data-theme="dark"] .local-selectize .option:hover {
  background: #152a4f !important;
  color: #bfdbfe !important
}

html[data-theme="dark"] .date-picker-pop strong {
  color: #f1f5f9
}

html[data-theme="dark"] .dp-week {
  color: #94a3b8
}

html[data-theme="dark"] .dp-days button.today {
  border-color: #3b82f6
}

html[data-theme="dark"] .dp-days button.selected {
  background: #2563eb;
  color: #fff
}

html[data-theme="dark"] .settings-logo-preview {
  border-color: #3a475d
}

html[data-theme="dark"] .table-card:before {
  opacity: .8
}

@media(max-width:992px) {
  .topbar {
    padding-inline: 16px
  }

  .user-menu-name {
    display: none
  }

  .user-menu-btn {
    padding-inline: 10px
  }

  .sidebar {
    box-shadow: 0 0 40px rgba(0, 0, 0, .24)
  }
}

@media(max-width:560px) {
  .topbar-actions {
    gap: 5px
  }

  .topbar-help {
    display: none
  }

  .language-switch {
    min-width: 38px
  }

  .page-title {
    font-size: 19px
  }

  .topbar {
    height: 66px
  }

  .content {
    padding-top: 16px
  }
}

html[data-theme="dark"] hr {
  border-color: #334155;
  opacity: .75
}

html[data-theme="dark"] a:not(.btn):not(.side-link):not(.dropdown-item) {
  color: #60a5fa
}

html[data-theme="dark"] a:not(.btn):not(.side-link):not(.dropdown-item):hover {
  color: #93c5fd
}

html[data-theme="dark"] .guide-card p {
  color: #94a3b8
}

html[data-theme="dark"] .guide-step {
  background: #102346;
  color: #93c5fd
}

html[data-theme="dark"] .password-toggle {
  background: #172033;
  color: #94a3b8
}

html[data-theme="dark"] .password-toggle:hover {
  background: #22304a;
  color: #fff
}

html[data-theme="dark"] .login-form-side .input-icon>i {
  color: #71829a
}

html[data-theme="dark"] .badge-soft-success {
  background: #0e2a1b;
  color: #86efac;
  border-color: #1d5d37
}

html[data-theme="dark"] .badge-soft-danger {
  background: #301417;
  color: #fca5a5;
  border-color: #71323a
}

html[data-theme="dark"] .badge-soft-warning {
  background: #33220d;
  color: #fdba74;
  border-color: #73511f
}

html[data-theme="dark"] .badge-soft-primary {
  background: #102346;
  color: #93c5fd;
  border-color: #264d84
}

html[data-theme="dark"] .dp-foot {
  border-color: #293449
}

html[data-theme="dark"] .date-picker-btn:hover,
html[data-theme="dark"] .dp-head button:hover {
  background: #20304a;
  color: #93c5fd
}

html[data-theme="dark"] .report-kpi .kpi-label,
html[data-theme="dark"] .invoice-party-box .label {
  color: #94a3b8
}

html[data-theme="dark"] .net-assets-card strong {
  color: #fff
}

html[data-theme="dark"] .today-strip strong,
html[data-theme="dark"] .help-hero h1,
html[data-theme="dark"] .help-hero h2,
html[data-theme="dark"] .help-hero h3 {
  color: #fff
}

/* Dual-unit inventory */
.invoice-line {
  grid-template-columns: minmax(250px, 2.2fr) minmax(92px, .72fr) minmax(145px, 1fr) minmax(118px, .9fr) minmax(118px, .9fr) 42px
}

.invoice-line .conversion-text {
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-cart-line {
  padding: 10px 0;
  border-bottom: 1px solid var(--line)
}

.pos-cart-controls {
  display: grid;
  grid-template-columns: 74px minmax(105px, 1fr) minmax(110px, auto);
  gap: 8px;
  align-items: center
}

.pos-cart-line.stock-over {
  background: rgba(239, 68, 68, .035);
  border-radius: 10px;
  padding-inline: 8px
}

html[data-theme="dark"] .pos-cart-line.stock-over {
  background: rgba(248, 113, 113, .07)
}

@media(max-width:992px) {
  .invoice-line {
    grid-template-columns: 1fr 1fr
  }

  .invoice-line .wide {
    grid-column: 1/-1
  }

  .invoice-line .line-remove-btn {
    grid-column: 2;
    justify-self: end;
    margin-top: 0 !important
  }

  .pos-cart-controls {
    grid-template-columns: 78px 1fr
  }

  .pos-cart-controls>.text-end {
    grid-column: 1/-1;
    text-align: start !important
  }
}

/* ===== V6 UI polish: equal controls, plugin datepicker, accordion and thermal invoice ===== */
:root {
  --control-height: 42px
}

.form-control:not(textarea),
.form-select {
  height: var(--control-height);
  min-height: var(--control-height);
  padding-top: .45rem;
  padding-bottom: .45rem
}

.local-selectize.selectize-control,
.selectize-control.local-selectize {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  display: block
}

.local-selectize .selectize-input {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 !important;
  border-radius: 11px !important
}

.local-selectize .selectize-search-input {
  height: calc(var(--control-height) - 2px) !important;
  min-height: calc(var(--control-height) - 2px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: calc(var(--control-height) - 2px) !important;
  font-size: 1rem !important
}

.local-selectize .selectize-arrow {
  height: calc(var(--control-height) - 2px) !important
}

.form-select-sm,
.form-control-sm:not(textarea) {
  height: 34px;
  min-height: 34px;
  font-size: .875rem
}

.print-layout-select {
  width: 175px;
  min-width: 175px
}

/* Built-in fallback picker: direct month/year selectors. */
.dp-head {
  grid-template-columns: 34px 1fr 34px;
  gap: 7px
}

.dp-title-selects {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(82px, .8fr);
  gap: 6px
}

.dp-title-selects select {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  padding: 4px 7px;
  outline: 0
}

.dp-title-selects select:focus {
  border-color: #93b4f5;
  box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .1)
}

/* Persian Datepicker plugin integration. Keep it visually aligned with Store Pro. */
.datepicker-container {
  z-index: 12000 !important;
  font-family: 'Vazirmatn', 'Inter', sans-serif !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .18) !important;
  overflow: hidden
}

.datepicker-container .datepicker-plot-area {
  font-family: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 9px !important
}

.datepicker-container .datepicker-plot-area .datepicker-navigator {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important
}

.datepicker-container .datepicker-plot-area .datepicker-navigator .pwt-btn {
  border-radius: 8px !important
}

.datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span,
.datepicker-container .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
  border-radius: 8px !important
}

.datepicker-container .datepicker-plot-area .datepicker-year-view .year-item,
.datepicker-container .datepicker-plot-area .datepicker-month-view .month-item {
  border-radius: 8px !important
}

.datepicker-container .datepicker-plot-area .datepicker-year-view .year-item:hover,
.datepicker-container .datepicker-plot-area .datepicker-month-view .month-item:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important
}

.datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td.selected span,
.datepicker-container .datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-container .datepicker-plot-area .datepicker-month-view .month-item.selected {
  background: #2563eb !important;
  color: #fff !important
}

html[data-theme="dark"] .datepicker-container,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important
}

html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-navigator .pwt-btn,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item {
  color: #dbe4f0 !important
}

html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item:hover {
  background: #152a4f !important;
  color: #bfdbfe !important
}

html[data-theme="dark"] .dp-title-selects select {
  background: #0f172a;
  border-color: #3a475d;
  color: #e5e7eb
}

/* Sidebar groups behave as a true accordion. */
.nav-group-items {
  overflow: hidden
}

.nav-group:not(.open) .nav-group-items {
  display: none !important
}

.nav-group.open .nav-group-items {
  display: block !important
}

/* Print toolbar */
.invoice-print-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.invoice-print-toolbar .print-layout-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700
}

@media print {

  html,
  body {
    background: #fff !important;
    color: #000 !important
  }

  .invoice-print {
    page-break-inside: auto !important
  }

  .invoice-items tr,
  .invoice-party-box,
  .invoice-summary,
  .invoice-signatures {
    break-inside: avoid;
    page-break-inside: avoid
  }

  html.print-layout-a4 .invoice-print {
    width: auto !important;
    max-width: 190mm !important;
    margin: 0 auto !important
  }

  html.print-layout-a4 .invoice-shell {
    padding: 0 !important
  }

  html.print-layout-thermal80 body,
  html.print-layout-thermal58 body {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    background: #fff !important
  }

  html.print-layout-thermal80 .content,
  html.print-layout-thermal58 .content {
    padding: 0 !important;
    margin: 0 !important
  }

  html.print-layout-thermal80 .invoice-print,
  html.print-layout-thermal58 .invoice-print {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important
  }

  html.print-layout-thermal80 .invoice-print {
    width: 76mm !important;
    max-width: 76mm !important
  }

  html.print-layout-thermal58 .invoice-print {
    width: 55mm !important;
    max-width: 55mm !important
  }

  html.print-layout-thermal80 .invoice-shell {
    padding: 1.6mm !important;
    font-size: 9.5pt !important
  }

  html.print-layout-thermal58 .invoice-shell {
    padding: 1mm !important;
    font-size: 8.2pt !important
  }

  html.print-layout-thermal80 .invoice-brand,
  html.print-layout-thermal58 .invoice-brand {
    grid-template-columns: auto 1fr !important;
    gap: 2mm !important;
    align-items: center !important;
    padding-bottom: 2mm !important;
    margin-bottom: 2mm !important;
    border-bottom: 1px dashed #111 !important
  }

  html.print-layout-thermal80 .invoice-logo {
    width: 14mm !important;
    height: 14mm !important;
    border-radius: 2mm !important
  }

  html.print-layout-thermal58 .invoice-logo {
    width: 11mm !important;
    height: 11mm !important;
    border-radius: 1.5mm !important
  }

  html.print-layout-thermal80 .invoice-store h2 {
    font-size: 13pt !important;
    margin: 0 !important
  }

  html.print-layout-thermal58 .invoice-store h2 {
    font-size: 11pt !important;
    margin: 0 !important
  }

  html.print-layout-thermal80 .invoice-store .slogan,
  html.print-layout-thermal58 .invoice-store .slogan {
    font-size: 7.5pt !important;
    color: #333 !important
  }

  html.print-layout-thermal80 .invoice-meta,
  html.print-layout-thermal58 .invoice-meta {
    grid-column: 1/-1 !important;
    text-align: center !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1mm !important;
    border-top: 1px dotted #bbb !important;
    padding-top: 1.5mm !important
  }

  html.print-layout-thermal80 .invoice-meta .invoice-type,
  html.print-layout-thermal58 .invoice-meta .invoice-type {
    font-size: 7pt !important;
    color: #333 !important
  }

  html.print-layout-thermal80 .invoice-meta .invoice-number,
  html.print-layout-thermal58 .invoice-meta .invoice-number {
    font-size: 9.5pt !important;
    margin: 0 !important
  }

  html.print-layout-thermal80 .invoice-meta .small,
  html.print-layout-thermal58 .invoice-meta .small {
    grid-column: 1/-1 !important;
    font-size: 7.5pt !important;
    color: #333 !important
  }

  html.print-layout-thermal80 .invoice-contact,
  html.print-layout-thermal58 .invoice-contact {
    display: block !important;
    margin: 1.5mm 0 !important;
    padding: 1.5mm 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #aaa !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 7.5pt !important
  }

  html.print-layout-thermal80 .invoice-contact>div,
  html.print-layout-thermal58 .invoice-contact>div {
    display: inline-flex !important;
    margin-inline-end: 2mm !important;
    margin-bottom: .7mm !important
  }

  html.print-layout-thermal80 .invoice-parties,
  html.print-layout-thermal58 .invoice-parties {
    grid-template-columns: 1fr !important;
    gap: 1mm !important;
    margin-bottom: 1.5mm !important
  }

  html.print-layout-thermal80 .invoice-party-box,
  html.print-layout-thermal58 .invoice-party-box {
    padding: 1.2mm 1.5mm !important;
    border: 1px solid #bbb !important;
    border-radius: 1.5mm !important;
    background: #fff !important;
    color: #000 !important
  }

  html.print-layout-thermal80 .invoice-party-box .label,
  html.print-layout-thermal58 .invoice-party-box .label {
    font-size: 7pt !important;
    color: #555 !important;
    margin-bottom: .5mm !important
  }

  html.print-layout-thermal80 .invoice-party-box strong,
  html.print-layout-thermal58 .invoice-party-box strong {
    font-size: 8.5pt !important;
    color: #000 !important
  }

  html.print-layout-thermal80 .invoice-items,
  html.print-layout-thermal58 .invoice-items {
    width: 100% !important;
    table-layout: fixed !important;
    margin: 1.5mm 0 !important;
    font-size: 7.5pt !important
  }

  html.print-layout-thermal80 .invoice-items th,
  html.print-layout-thermal80 .invoice-items td,
  html.print-layout-thermal58 .invoice-items th,
  html.print-layout-thermal58 .invoice-items td {
    padding: 1mm .6mm !important;
    border-color: #bbb !important;
    white-space: normal !important;
    word-break: break-word !important;
    color: #000 !important;
    background: #fff !important
  }

  html.print-layout-thermal80 .invoice-items th:nth-child(1),
  html.print-layout-thermal58 .invoice-items th:nth-child(1) {
    width: 6% !important
  }

  html.print-layout-thermal80 .invoice-items th:nth-child(2) {
    width: 34% !important
  }

  html.print-layout-thermal58 .invoice-items th:nth-child(2) {
    width: 31% !important
  }

  html.print-layout-thermal80 .invoice-items th:nth-child(3) {
    width: 20% !important
  }

  html.print-layout-thermal58 .invoice-items th:nth-child(3) {
    width: 21% !important
  }

  html.print-layout-thermal80 .invoice-items th:nth-child(4) {
    width: 20% !important
  }

  html.print-layout-thermal58 .invoice-items th:nth-child(4) {
    width: 21% !important
  }

  html.print-layout-thermal80 .invoice-items th:nth-child(5) {
    width: 20% !important
  }

  html.print-layout-thermal58 .invoice-items th:nth-child(5) {
    width: 21% !important
  }

  html.print-layout-thermal80 .invoice-items .small,
  html.print-layout-thermal58 .invoice-items .small {
    font-size: 6.5pt !important;
    line-height: 1.2 !important;
    color: #444 !important
  }

  html.print-layout-thermal80 .invoice-summary,
  html.print-layout-thermal58 .invoice-summary {
    width: 100% !important;
    margin: 1.5mm 0 0 !important;
    padding: 1.3mm 1.5mm !important;
    border: 1px solid #999 !important;
    border-radius: 1.5mm !important;
    background: #fff !important;
    color: #000 !important
  }

  html.print-layout-thermal80 .invoice-summary-row,
  html.print-layout-thermal58 .invoice-summary-row {
    padding: .7mm 0 !important;
    font-size: 8pt !important;
    color: #000 !important
  }

  html.print-layout-thermal80 .invoice-summary-row.total,
  html.print-layout-thermal58 .invoice-summary-row.total {
    font-size: 9pt !important;
    padding-top: 1mm !important;
    margin-top: .5mm !important;
    border-color: #aaa !important
  }

  html.print-layout-thermal80 .invoice-note,
  html.print-layout-thermal58 .invoice-note {
    margin-top: 1.5mm !important;
    padding: 1.2mm !important;
    border-radius: 1mm !important;
    font-size: 7.5pt !important;
    color: #000 !important;
    background: #fff !important
  }

  html.print-layout-thermal80 .invoice-signatures {
    gap: 10mm !important;
    margin-top: 11mm !important
  }

  html.print-layout-thermal58 .invoice-signatures {
    gap: 5mm !important;
    margin-top: 9mm !important
  }

  html.print-layout-thermal80 .signature-box,
  html.print-layout-thermal58 .signature-box {
    padding-top: 1.5mm !important;
    font-size: 7pt !important;
    color: #000 !important;
    border-color: #777 !important
  }

  html.print-layout-thermal80 .invoice-footer,
  html.print-layout-thermal58 .invoice-footer {
    margin-top: 3mm !important;
    padding-top: 1.5mm !important;
    border-top: 1px dashed #aaa !important;
    font-size: 7pt !important;
    color: #333 !important
  }

  html.print-layout-thermal58 .invoice-contact i,
  html.print-layout-thermal80 .invoice-contact i {
    color: #000 !important
  }
}

/* v7 datepicker: local, always-visible month/year controls */
.store-datepicker .date-picker-pop {
  width: 330px;
  max-width: calc(100vw - 36px)
}

.store-datepicker .dp-head {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px
}

.store-datepicker .dp-title-selects {
  grid-template-columns: minmax(0, 1.35fr) minmax(95px, .85fr)
}

.store-datepicker .dp-title-selects select {
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.store-datepicker .dp-nav {
  height: 38px !important;
  width: 38px !important
}

.store-datepicker .dp-foot {
  justify-content: space-between;
  gap: 8px
}

.store-datepicker .dp-foot .btn {
  min-width: 78px
}

.store-datepicker .dp-empty {
  height: 34px
}

/* v7 searchable select behavior polish */
.local-selectize .selectize-input {
  cursor: text;
  user-select: none
}

.local-selectize .selectize-search-input {
  user-select: text !important;
  caret-color: var(--blue)
}

.local-selectize .selectize-input.focus .selectize-search-input {
  cursor: text
}

.local-selectize .selectize-dropdown {
  user-select: none
}

/* v7 print header layouts */
@media print {
  html.print-layout-a4 .invoice-brand {
    display: grid !important;
    grid-template-columns: 30mm minmax(0, 1fr) !important;
    gap: 8mm !important;
    align-items: center !important;
    padding-bottom: 6mm !important;
    border-bottom: 1.2pt solid #111 !important
  }

  html.print-layout-a4 .invoice-logo {
    width: 26mm !important;
    height: 26mm !important;
    border-radius: 3mm !important
  }

  html.print-layout-a4 .invoice-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: end !important;
    gap: 3mm !important
  }

  html[dir="rtl"].print-layout-a4 .invoice-heading {
    align-items: flex-start !important;
    text-align: start !important
  }

  html.print-layout-a4 .invoice-heading .invoice-meta {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4mm !important;
    align-items: baseline !important;
    flex-wrap: wrap !important
  }

  html[dir="rtl"].print-layout-a4 .invoice-heading .invoice-meta {
    justify-content: flex-start !important
  }

  html.print-layout-a4 .invoice-store h2 {
    font-size: 20pt !important;
    margin: 0 !important
  }

  html.print-layout-a4 .invoice-meta .invoice-number {
    font-size: 14pt !important
  }

  html.print-layout-thermal80 .invoice-brand,
  html.print-layout-thermal58 .invoice-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1.5mm !important
  }

  html.print-layout-thermal80 .invoice-heading,
  html.print-layout-thermal58 .invoice-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1mm !important;
    width: 100% !important
  }

  html.print-layout-thermal80 .invoice-meta,
  html.print-layout-thermal58 .invoice-meta,
  html.print-layout-thermal80 .invoice-heading .invoice-meta,
  html.print-layout-thermal58 .invoice-heading .invoice-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4mm !important;
    width: 100% !important;
    text-align: center !important;
    border-top: 1px dotted #bbb !important;
    padding-top: 1.5mm !important
  }

  html.print-layout-thermal80 .invoice-logo,
  html.print-layout-thermal58 .invoice-logo {
    margin: 0 auto !important
  }
}

/* ===== V8: modern POS + optional product images ===== */
.product-table-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
  background: var(--panel)
}

.product-table-placeholder {
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 16px;
  background: #f8fafc
}

.product-image-editor {
  height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center
}

.product-image-editor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff
}

.product-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px
}

.product-image-empty i {
  font-size: 30px;
  color: #94a3b8
}

.pos-layout-modern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start
}

.pos-catalog {
  min-width: 0
}

.pos-checkout {
  min-width: 0;
  position: sticky;
  top: 90px
}

.pos-toolbar {
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}

.pos-search-wrap {
  position: relative;
  flex: 1;
  max-width: 650px
}

.pos-search-wrap>i {
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  z-index: 2
}

.pos-search-wrap .form-control {
  padding-inline-start: 43px;
  padding-inline-end: 50px;
  height: 48px !important;
  border-radius: 14px;
  font-size: 15px;
  background: var(--panel)
}

.pos-search-hint {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #64748b;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700
}

.pos-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap
}

.pos-toolbar-meta span {
  display: flex;
  align-items: center;
  gap: 6px
}

.pos-toolbar-meta i {
  color: var(--blue)
}

.pos-products-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 13px
}

.pos-product-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-width: 0;
  position: relative
}

.pos-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
  border-color: #a9c3f5
}

.pos-product-card.is-out {
  opacity: .55
}

.pos-product-card.is-out .pos-add-btn {
  background: #e2e8f0;
  color: #94a3b8
}

.pos-product-media {
  height: 128px;
  background: #f5f7fb;
  position: relative;
  overflow: hidden
}

.pos-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pos-product-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 35px;
  color: #b4c0d0;
  background: linear-gradient(145deg, #f8fafc, #eef3f9)
}

.pos-stock-pill {
  position: absolute;
  inset-inline-end: 9px;
  top: 9px;
  background: rgba(15, 23, 42, .82);
  color: #fff;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(5px);
  max-width: calc(100% - 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-product-body {
  padding: 12px
}

.pos-product-title {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink)
}

.pos-product-code {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-product-unit {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  background: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px
}

.pos-product-price {
  font-size: 15px;
  font-weight: 850;
  color: #1d4ed8;
  min-width: 0
}

.pos-product-price small {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted)
}

.pos-add-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eaf2ff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: .15s
}

.pos-add-btn:hover {
  background: #2563eb;
  color: #fff;
  transform: scale(1.04)
}

.pos-no-results {
  padding: 55px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted)
}

.pos-no-results i {
  font-size: 28px;
  color: #94a3b8
}

.pos-no-results strong {
  color: var(--ink)
}

.pos-checkout-card {
  padding: 18px
}

.pos-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.pos-cart-head h5 {
  margin: 1px 0 0;
  font-weight: 850
}

.pos-cart-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700
}

.pos-cart-count {
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #eaf2ff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800
}

.pos-cart-list {
  max-height: 43vh;
  overflow: auto;
  padding-inline-end: 3px;
  scrollbar-width: thin
}

.pos-cart-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
  margin-bottom: 9px;
  background: var(--panel);
  transition: .15s
}

.pos-cart-item.stock-over {
  border-color: #fecaca;
  background: #fffafa
}

.pos-cart-item-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: center
}

.pos-cart-thumb {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #94a3b8
}

.pos-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pos-cart-info {
  min-width: 0
}

.pos-cart-info strong {
  font-size: 12.5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-cart-info span {
  font-size: 10.5px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pos-remove-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #ef4444;
  border-radius: 8px;
  display: grid;
  place-items: center
}

.pos-remove-btn:hover {
  background: #fef2f2
}

.pos-cart-item-bottom {
  display: grid;
  grid-template-columns: 126px minmax(95px, 1fr) minmax(95px, auto);
  gap: 7px;
  align-items: center;
  margin-top: 9px
}

.pos-qty-stepper {
  height: 36px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel)
}

.pos-qty-stepper button {
  border: 0;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  display: grid;
  place-items: center
}

.pos-qty-stepper button:hover {
  background: #eaf2ff;
  color: #1d4ed8
}

.pos-qty-stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  outline: 0;
  -moz-appearance: textfield
}

.pos-qty-stepper input::-webkit-outer-spin-button,
.pos-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.pos-unit-select {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 11px;
  padding: .35rem 1.8rem .35rem .55rem
}

.pos-line-total {
  text-align: end;
  min-width: 0
}

.pos-line-total strong {
  font-size: 12px;
  white-space: nowrap
}

.pos-line-total span {
  font-size: 9.5px;
  color: var(--muted);
  display: block;
  white-space: nowrap;
  margin-top: 2px
}

.pos-stock-warning {
  margin-top: 7px;
  color: #dc2626;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 5px
}

.pos-cart-empty {
  padding: 35px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--muted);
  gap: 5px
}

.pos-cart-empty>div {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 20px;
  margin-bottom: 4px
}

.pos-cart-empty strong {
  color: var(--ink);
  font-size: 13px
}

.pos-cart-empty span {
  font-size: 11px
}

.pos-checkout-divider {
  height: 1px;
  background: var(--line);
  margin: 13px 0
}

.pos-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

.pos-field.full {
  grid-column: 1/-1
}

.pos-field label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
  display: block
}

.pos-field .form-control,
.pos-field .form-select,
.pos-field .selectize-control,
.pos-field .selectize-input {
  height: 40px !important;
  min-height: 40px !important
}

.pos-total-box {
  margin-top: 13px;
  border-radius: 13px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #0f172a, #1e3a66);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.pos-total-box span {
  font-size: 12px;
  opacity: .75
}

.pos-total-box strong {
  font-size: 21px;
  letter-spacing: .01em
}

.pos-save-btn {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border-radius: 12px;
  font-weight: 800
}

.pos-shortcut-note {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 9.5px
}

.pos-shortcut-note kbd {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: 9px;
  padding: 2px 5px
}

html[data-theme="dark"] .product-table-placeholder,
html[data-theme="dark"] .product-image-editor,
html[data-theme="dark"] .pos-product-media,
html[data-theme="dark"] .pos-product-placeholder,
html[data-theme="dark"] .pos-product-unit,
html[data-theme="dark"] .pos-cart-thumb,
html[data-theme="dark"] .pos-cart-empty>div {
  background: #0f172a;
  color: #64748b;
  border-color: #334155
}

html[data-theme="dark"] .product-image-editor img {
  background: #0b1220
}

html[data-theme="dark"] .pos-product-card {
  background: #111827;
  border-color: #293449
}

html[data-theme="dark"] .pos-product-card:hover {
  border-color: #3b5f94;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22)
}

html[data-theme="dark"] .pos-search-hint,
html[data-theme="dark"] .pos-shortcut-note kbd,
html[data-theme="dark"] .pos-qty-stepper button {
  background: #172033;
  color: #94a3b8;
  border-color: #334155
}

html[data-theme="dark"] .pos-add-btn,
html[data-theme="dark"] .pos-cart-count {
  background: #102346;
  color: #93c5fd
}

html[data-theme="dark"] .pos-product-price {
  color: #60a5fa
}

html[data-theme="dark"] .pos-cart-item {
  background: #111827;
  border-color: #293449
}

html[data-theme="dark"] .pos-cart-item.stock-over {
  background: #231316;
  border-color: #71323a
}

html[data-theme="dark"] .pos-remove-btn:hover {
  background: #301417
}

html[data-theme="dark"] .pos-qty-stepper {
  background: #0f172a;
  border-color: #3a475d
}

html[data-theme="dark"] .pos-qty-stepper input {
  border-color: #334155;
  color: #e5e7eb
}

html[data-theme="dark"] .pos-total-box {
  background: linear-gradient(135deg, #0b1220, #173054)
}

@media(max-width:1200px) {
  .pos-layout-modern {
    grid-template-columns: minmax(0, 1fr) 350px
  }

  .pos-products-modern {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr))
  }

  .pos-cart-item-bottom {
    grid-template-columns: 118px minmax(90px, 1fr);
  }

  .pos-line-total {
    grid-column: 1/-1;
    text-align: start
  }
}

@media(max-width:992px) {
  .pos-layout-modern {
    grid-template-columns: 1fr
  }

  .pos-checkout {
    position: static;
    order: -1
  }

  .pos-cart-list {
    max-height: none
  }

  .pos-toolbar-meta .pos-scan-note {
    display: none
  }

  .pos-products-modern {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr))
  }
}

@media(max-width:560px) {
  .pos-toolbar {
    display: block
  }

  .pos-toolbar-meta {
    margin-top: 9px;
    justify-content: space-between
  }

  .pos-products-modern {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px
  }

  .pos-product-media {
    height: 105px
  }

  .pos-product-body {
    padding: 10px
  }

  .pos-product-title {
    font-size: 12.5px
  }

  .pos-product-price {
    font-size: 13px
  }

  .pos-cart-item-bottom {
    grid-template-columns: 1fr 1fr
  }

  .pos-line-total {
    grid-column: 1/-1
  }

  .pos-fields {
    grid-template-columns: 1fr
  }

  .pos-field.full {
    grid-column: auto
  }

  .pos-shortcut-note {
    display: none
  }
}

.pos-no-results[hidden],
.pos-product-card[hidden] {
  display: none !important
}