:root {
  color-scheme: light;
  --ink: #172333;
  --muted: #667485;
  --line: #dbe3ee;
  --panel: #ffffff;
  --page: #f7f9fc;
  --brand: #aa3232;
  --brand-strong: #842525;
  --gold: #b98418;
  --mint: #128168;
  --blue: #2563a7;
  --warn: #aa5a00;
  --accent: #2563a7;
  --surface-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  --surface-soft: #f8fbff;
  --brand-tint: #fff1f1;
  --mint-tint: #eaf8f4;
  --blue-tint: #eef6ff;
  --gold-tint: #fff7e8;
  --shadow: 0 12px 32px rgba(33, 47, 67, 0.08);
  --shadow-soft: 0 2px 7px rgba(33, 47, 67, 0.05);
}

body[data-ui-theme="fresh"] {
  --brand: #16805f;
  --brand-strong: #0d5f46;
  --brand-tint: #eaf8f2;
  --accent: #16805f;
  --blue: #1f7a8c;
  --blue-tint: #edf9fb;
  --page: #f4fbf7;
  --surface-soft: #f7fcfa;
}

body[data-ui-theme="royal"] {
  --brand: #2563a7;
  --brand-strong: #1d4e86;
  --brand-tint: #eef6ff;
  --accent: #2563a7;
  --blue: #2563a7;
  --blue-tint: #eef6ff;
  --page: #f6f9fe;
  --surface-soft: #f8fbff;
}

body[data-ui-theme="premium"] {
  --brand: #8f2d56;
  --brand-strong: #681f3f;
  --brand-tint: #fff0f6;
  --accent: #8f2d56;
  --blue: #6b4ea0;
  --blue-tint: #f5f1ff;
  --page: #fbf7fa;
  --surface-soft: #fff9fc;
}

body[data-ui-theme="graphite"] {
  --brand: #334155;
  --brand-strong: #1f2937;
  --brand-tint: #f1f5f9;
  --accent: #475569;
  --blue: #334155;
  --blue-tint: #f1f5f9;
  --page: #f6f8fb;
  --surface-soft: #f8fafc;
}

body[data-ui-theme="column-focus"] {
  --brand: #1f4f8f;
  --brand-strong: #143660;
  --brand-tint: #e7f0ff;
  --accent: #9a275f;
  --blue: #1f4f8f;
  --blue-tint: #eaf2ff;
  --gold: #b7791f;
  --gold-tint: #fff3d8;
  --mint: #08795f;
  --mint-tint: #ddf8ee;
  --line: #c8d7ea;
  --page: #f3f7fc;
  --surface-soft: #f7fbff;
}

body[data-ui-theme="custom"] {
  --page: #f7f9fc;
  --surface-soft: #f8fbff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #ffffff 0, var(--page) 190px),
    var(--page);
  color: var(--ink);
  font-family: var(--ui-font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: rgba(37, 99, 167, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 167, 0.12);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(37, 99, 167, 0.22);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  --sidebar-open-width: 280px;
  --sidebar-compact-width: 88px;
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 88px minmax(0, 1fr);
}

.sidebar {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-right: 1px solid var(--line);
  box-shadow: 10px 0 28px rgba(33, 47, 67, 0.06);
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}

.brand-mark {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid #d6e0ec;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  padding: 3px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

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

.brand strong {
  display: block;
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: calc(100% + 8px);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  line-height: 1;
  z-index: 5;
}

.sidebar-toggle span,
.sidebar-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sidebar-toggle:hover {
  border-color: #d9aaaa;
  background: var(--brand-tint);
  color: #8d1f2d;
}

.logged-out .sidebar-toggle {
  display: none;
}

.nav-list {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 6px;
  min-height: 0;
}

.sidebar-environment-slot {
  display: grid;
  margin-top: auto;
  min-width: 0;
}

.nav-group {
  position: relative;
  display: grid;
  gap: 4px;
}

.nav-list > .nav-group > button,
.nav-link-button {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  color: #415164;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.nav-list > .nav-group > button:hover,
.nav-list > .nav-group > button.active,
.nav-link-button:hover {
  color: var(--brand);
  background: linear-gradient(180deg, #fffafa, var(--brand-tint));
  box-shadow: inset 0 0 0 1px rgba(170, 50, 50, 0.12);
}

.nav-submenu {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px 36px;
  border-left: 3px solid #ead5d5;
  padding-left: 12px;
}

.nav-submenu > strong {
  display: none;
}

.nav-submenu button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  background: transparent;
  color: #697789;
  font-size: 14px;
  text-align: left;
}

.nav-submenu button:hover,
.nav-submenu button.active {
  color: var(--brand);
  background: var(--brand-tint);
}

body.sidebar-collapsed .sidebar {
  gap: 18px;
  padding: 18px 12px;
}

body.sidebar-collapsed .brand {
  justify-content: center;
}

body.sidebar-collapsed .brand > div:not(.brand-mark),
body.sidebar-collapsed .nav-list > .nav-group > button span,
body.sidebar-collapsed .nav-link-button span {
  display: none;
}

body.sidebar-collapsed .brand-mark {
  width: 54px;
  height: 54px;
}

body.sidebar-collapsed .sidebar-toggle {
  right: -16px;
}

body.sidebar-collapsed .nav-list {
  gap: 10px;
}

body.sidebar-collapsed .sidebar-environment-slot {
  display: none;
}

body.sidebar-collapsed .nav-list > .nav-group > button,
body.sidebar-collapsed .nav-link-button {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 54px;
  padding: 0;
}

body.sidebar-collapsed .nav-list > .nav-group > button svg,
body.sidebar-collapsed .nav-link-button svg {
  width: 24px;
  height: 24px;
}

body.sidebar-collapsed .nav-submenu {
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  z-index: 40;
  display: none;
  min-width: 230px;
  max-width: 280px;
  max-height: min(460px, calc(100vh - 72px));
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-gloss);
  box-shadow: 0 18px 45px rgba(33, 47, 67, 0.16);
}

body.sidebar-collapsed .nav-group:hover .nav-submenu,
body.sidebar-collapsed .nav-group:focus-within .nav-submenu {
  display: grid;
}

body.sidebar-collapsed .nav-submenu > strong {
  display: block;
  margin: 0 0 4px;
  padding: 6px 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

body.sidebar-collapsed .nav-submenu button {
  min-height: 36px;
  padding: 8px 10px;
}

@media (max-width: 1366px) {
  body.sidebar-overlay-mode .app-shell {
    grid-template-columns: 88px minmax(1040px, 1fr);
    overflow-x: auto;
  }

  body.sidebar-overlay-mode.sidebar-expanded .app-shell {
    grid-template-columns: 88px minmax(1040px, 1fr);
  }

  body.sidebar-overlay-mode .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 88px;
    min-width: 88px;
    height: 100vh;
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    min-width: 280px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    box-shadow: 18px 0 44px rgba(15, 23, 42, 0.18);
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar::after {
    content: "";
    position: fixed;
    left: 280px;
    top: 0;
    width: calc(100vw - 280px);
    height: 100vh;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar-toggle {
    right: -14px;
  }

  body.sidebar-overlay-mode .workspace {
    min-width: 0;
  }

  body.sidebar-overlay-mode .content-grid,
  body.sidebar-overlay-mode .panel.wide,
  body.sidebar-overlay-mode .smart-table-shell {
    min-width: 0;
  }
}

svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace {
  min-width: 0;
  padding: 24px;
}

body.pos-fullscreen-mode {
  overflow: hidden;
}

body.pos-fullscreen-mode .app-shell {
  display: block;
  min-height: 100vh;
}

body.pos-fullscreen-mode .sidebar,
body.pos-fullscreen-mode .topbar {
  display: none;
}

body.pos-fullscreen-mode .workspace {
  height: 100vh;
  padding: 8px;
  overflow: hidden;
}

body.pos-fullscreen-mode .content-grid {
  grid-template-columns: 1fr;
  height: 100%;
  gap: 0;
}

body.pos-fullscreen-mode .pos-cashier-board.pos-fast-board {
  height: calc(100vh - 16px);
  min-height: 0;
}

/* Keep POS fullscreen simple for reliable pointer and scroll behavior in kiosk use. */
body.pos-fullscreen-mode .pos-fast-board,
body.pos-fullscreen-mode .pos-fast-shell,
body.pos-fullscreen-mode .pos-fast-counter,
body.pos-fullscreen-mode .pos-fast-rail,
body.pos-fullscreen-mode .pos-payment-strip,
body.pos-fullscreen-mode .pos-fast-table-wrap,
body.pos-fullscreen-mode .pos-fast-products {
  contain: none;
}

body.pos-fullscreen-mode .panel,
body.pos-fullscreen-mode .pos-fast-topbar,
body.pos-fullscreen-mode .pos-fast-table-wrap,
body.pos-fullscreen-mode .pos-quick-actions,
body.pos-fullscreen-mode .pos-info-card,
body.pos-fullscreen-mode .pos-payment-strip,
body.pos-fullscreen-mode .pos-total-metrics,
body.pos-fullscreen-mode .pos-action,
body.pos-fullscreen-mode .pos-quick-action,
body.pos-fullscreen-mode .pos-fast-products button,
body.pos-fullscreen-mode .product-palette button,
body.pos-fullscreen-mode .pos-pay-action {
  box-shadow: none !important;
}

body.pos-fullscreen-mode .panel,
body.pos-fullscreen-mode .pos-fast-topbar,
body.pos-fullscreen-mode .pos-fast-table-wrap,
body.pos-fullscreen-mode .pos-info-card,
body.pos-fullscreen-mode .pos-total-metrics,
body.pos-fullscreen-mode .pos-fast-products button,
body.pos-fullscreen-mode .product-palette button {
  background: #ffffff !important;
}

body.pos-fullscreen-mode .pos-quick-actions,
body.pos-fullscreen-mode .pos-payment-strip {
  background: #f7fbff !important;
}

body.pos-fullscreen-mode .pos-pay-action {
  background: #26394a !important;
}

body.pos-fullscreen-mode .pos-pay-action.active,
body.pos-fullscreen-mode .pos-pay-action.save,
body.pos-fullscreen-mode .pos-action.primary,
body.pos-fullscreen-mode .pos-quick-action.primary {
  background: #128168 !important;
}

body.pos-fullscreen-mode .pos-pay-action.print {
  background: #334155 !important;
}

body.pos-fullscreen-mode .pos-pay-action.clear {
  background: #ffffff !important;
}

body.pos-fullscreen-mode .cashier-product-palette button,
body.pos-fullscreen-mode .product-palette button,
body.pos-fullscreen-mode .pos-action,
body.pos-fullscreen-mode .pos-quick-action,
body.pos-fullscreen-mode .pos-pay-action {
  transition: none;
}

body.pos-fullscreen-mode .cashier-product-palette button:hover,
body.pos-fullscreen-mode .product-palette button:hover {
  transform: none;
}

body.pos-fullscreen-mode tbody tr:hover td {
  background: inherit;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 28px;
}

h2 {
  margin-bottom: 14px;
  font-size: 17px;
}

.topbar-actions {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: end;
  gap: 12px;
}

.global-search-shell {
  position: relative;
  display: grid;
  flex: 1 1 420px;
  min-width: min(420px, 34vw);
  max-width: 560px;
  gap: 6px;
  color: #667485;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.global-search-shell input {
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(204, 217, 231, 0.95);
  border-radius: 8px;
  padding: 0 14px;
  background: #ffffff;
  color: #203147;
  font-size: 14px;
  font-weight: 650;
  text-transform: none;
  box-shadow:
    0 10px 24px rgba(33, 47, 67, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.global-search-shell input:focus {
  outline: 2px solid rgba(37, 99, 167, 0.18);
  border-color: rgba(37, 99, 167, 0.42);
}

#globalSearchPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: min(520px, calc(100vw - 48px));
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: start;
  }

  .global-search-shell {
    flex: 1 1 260px;
    min-width: min(100%, 240px);
  }

  #sessionBadge {
    margin-left: auto;
  }

  #globalSearchPanel {
    right: auto;
    left: 0;
  }
}

.global-search-panel {
  border: 1px solid rgba(205, 219, 232, 0.95);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(33, 47, 67, 0.18);
}

.global-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 10px;
  color: #667485;
}

.global-search-head strong {
  color: #263449;
  font-size: 13px;
}

.global-search-head span {
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.global-search-panel button {
  display: grid;
  width: 100%;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 2px 10px;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #263449;
  text-align: left;
  cursor: pointer;
}

.global-search-panel button:hover,
.global-search-panel button:focus-visible {
  outline: none;
  background: #f3f7fb;
}

.global-search-panel small {
  grid-row: span 2;
  align-self: center;
  color: #2563a7;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.global-search-panel strong,
.global-search-panel span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-panel span {
  color: #667485;
  font-size: 12px;
}

.top-icon-button {
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(204, 217, 231, 0.95);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.92));
  box-shadow:
    0 10px 24px rgba(33, 47, 67, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.top-icon-button {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 44px;
  place-items: center;
  padding: 0;
  color: #6f7378;
  font-weight: 900;
}

.top-icon-button:hover {
  border-color: rgba(37, 99, 167, 0.28);
  box-shadow:
    0 12px 26px rgba(33, 47, 67, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.top-icon-button.has-badge span {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #ed1c24;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(237, 28, 36, 0.26);
}

.top-icon-button.alert-button {
  color: #6f7378;
}

.top-icon-button.alert-button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

.session-badge {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  padding: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.52), transparent 32%),
    linear-gradient(180deg, #43aee0 0%, #127dae 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(25, 112, 160, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -10px 18px rgba(5, 74, 114, 0.12);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.session-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(25, 112, 160, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    inset 0 -10px 18px rgba(5, 74, 114, 0.14);
}

#sessionBadge {
  position: relative;
  display: flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-width: 0;
  justify-self: end;
}

#sessionBadge:empty {
  display: none;
}

.environment-badge {
  display: grid;
  min-width: 168px;
  max-width: 260px;
  border: 1px solid #d6e2ef;
  border-radius: 8px;
  padding: 6px 10px;
  background: #ffffff;
  color: #102033;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(21, 44, 76, 0.08);
}

.sidebar-environment-slot .environment-badge {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.environment-badge strong,
.environment-badge span,
.environment-badge b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.environment-badge-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.environment-badge strong {
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}

.environment-badge b {
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(20, 91, 72, 0.1);
  color: #145b48;
  font-size: 10px;
  line-height: 1.2;
}

.environment-badge span {
  margin-top: 2px;
  font-size: 11px;
  color: #607080;
}

.environment-badge.ok {
  border-color: #bfe6d8;
  background: #f4fffa;
}

.environment-badge.warn {
  border-color: #f1d7a8;
  background: #fffaf0;
}

.credential-grid .health-card {
  display: grid;
  gap: 4px;
  min-height: 92px;
  align-content: start;
}

.credential-grid .health-card span,
.credential-grid .health-card strong,
.credential-grid .health-card em {
  display: block;
}

.credential-grid .health-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.credential-otp {
  color: #145b48;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.role-matrix-cell {
  text-align: center;
}

.role-matrix-check,
.role-matrix-no {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.role-matrix-check {
  background: #eaf8f1;
  color: #145b48;
}

.role-matrix-no {
  background: #f3f6f9;
  color: #8b98a7;
}

.workspace {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 249, 252, 0.92) 280px),
    var(--page);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 34;
  margin: -24px -24px 14px;
  border-bottom: 1px solid rgba(207, 219, 232, 0.78);
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(33, 47, 67, 0.08);
}

.topbar > div:first-child,
.topbar h1 {
  min-width: 0;
}

.topbar h1 {
  color: #0d1b2d;
  line-height: 1.1;
}

.workspace-pulse {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(132px, 0.8fr)) minmax(160px, auto);
  align-items: stretch;
  gap: 10px;
  margin: 0 0 16px;
  border: 1px solid rgba(205, 219, 232, 0.95);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
  box-shadow: 0 14px 38px rgba(33, 47, 67, 0.08);
}

.workspace-pulse[hidden],
body .workspace-pulse,
body.pos-fullscreen-mode .workspace-pulse {
  display: none !important;
}

.workspace-pulse-hero,
.workspace-pulse-card,
.workspace-pulse-actions {
  min-width: 0;
  border: 1px solid rgba(214, 225, 237, 0.94);
  border-radius: 8px;
  background: #ffffff;
}

.workspace-pulse-hero {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, var(--brand-tint), #ffffff 58%, var(--blue-tint));
}

.workspace-pulse-hero p,
.workspace-pulse-hero strong,
.workspace-pulse-hero span,
.workspace-pulse-card small,
.workspace-pulse-card strong,
.workspace-pulse-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-pulse-hero p,
.workspace-pulse-card small {
  margin: 0;
  color: #657385;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workspace-pulse-hero strong {
  color: #0d1b2d;
  font-size: 19px;
  line-height: 1.12;
}

.workspace-pulse-hero span,
.workspace-pulse-card em {
  color: #687789;
  font-size: 12px;
  font-style: normal;
}

.workspace-pulse-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 82px;
  padding: 10px;
  color: inherit;
  text-align: left;
}

button.workspace-pulse-card,
.workspace-pulse-action {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

button.workspace-pulse-card:hover,
.workspace-pulse-action:hover {
  border-color: rgba(37, 99, 167, 0.34);
  box-shadow: 0 12px 24px rgba(33, 47, 67, 0.1);
  transform: translateY(-1px);
}

.workspace-pulse-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-pulse-card strong {
  color: #0d1b2d;
  font-size: 18px;
  line-height: 1.15;
}

.workspace-pulse-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: #42607f;
  background: #f2f6fb;
}

.workspace-pulse-card.ok .workspace-pulse-icon {
  color: var(--mint);
  background: var(--mint-tint);
}

.workspace-pulse-card.warn .workspace-pulse-icon {
  color: var(--warn);
  background: var(--gold-tint);
}

.workspace-pulse-card.watch .workspace-pulse-icon {
  color: var(--blue);
  background: var(--blue-tint);
}

.workspace-pulse-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 6px;
}

.workspace-pulse-action {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid rgba(215, 225, 237, 0.95);
  border-radius: 8px;
  padding: 6px 9px;
  color: #223149;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.workspace-pulse-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-pulse-action svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1320px) {
  .workspace-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-pulse-hero,
  .workspace-pulse-actions {
    grid-column: 1 / -1;
  }

  .workspace-pulse-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .workspace-pulse {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px;
  }

  .workspace-pulse-hero,
  .workspace-pulse-actions {
    grid-column: auto;
  }

  .workspace-pulse-actions {
    grid-template-columns: 1fr;
  }

  .workspace-pulse-card {
    min-height: 74px;
  }
}

#notificationPanel {
  position: relative;
}

.notification-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 25;
  display: grid;
  gap: 10px;
  width: 380px;
  max-height: min(560px, calc(100vh - 96px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.16);
}

.notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-head strong {
  font-size: 16px;
  font-weight: 800;
}

.notification-head small {
  color: var(--muted);
  font-size: 11px;
}

.notification-head span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.notification-list {
  display: grid;
  gap: 6px;
  max-height: min(400px, calc(100vh - 210px));
  overflow-y: auto;
  padding-right: 2px;
}

.notification-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff8eb;
  color: var(--ink);
  text-align: left;
}

.notification-list button:hover {
  border-color: rgba(37, 99, 170, 0.45);
  background: #fffaf2;
}

.notification-list .notification-alert-status {
  min-width: 58px;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(161, 91, 0, 0.1);
  color: #8a4b00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.notification-alert-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-alert-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-list span {
  color: var(--muted);
  font-size: 12px;
}

.notification-alert-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-alert-reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
}

.notification-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.notification-popover-actions button {
  min-height: 34px;
}

.session-badge span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-badge strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.16);
}

.user-menu > strong,
.user-menu > span {
  display: block;
}

.user-menu > span {
  color: var(--muted);
  font-size: 13px;
  text-transform: none;
}

.user-menu > strong {
  font-size: 18px;
  font-weight: 800;
}

.user-menu dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.user-menu dl div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 6px;
}

.user-menu dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-menu dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.user-menu-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.user-menu-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1f7;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.user-menu-actions .danger-action {
  border-color: transparent;
  background: #f54868;
  color: #ffffff;
}

.logged-out .alert-strip,
.logged-out .topbar-actions {
  display: none;
}

.logged-out .app-shell {
  display: block;
  min-height: 100vh;
}

.logged-out .sidebar,
.logged-out .topbar {
  display: none;
}

.logged-out .workspace {
  min-height: 100vh;
  padding: 0;
}

.logged-out .content-grid {
  display: block;
}

.non-overview-view .alert-strip {
  display: none;
}

.search-box {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.search-box input,
select,
textarea {
  width: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
}

select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

textarea {
  width: 100%;
  resize: vertical;
}

input[readonly] {
  background: #f3f6f8;
  color: var(--muted);
  cursor: not-allowed;
}

.primary-button,
.ghost-button,
.alert-strip button,
.button-grid button,
.report-grid button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 800;
}

a.primary-button,
a.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.primary-button {
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.primary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.button-grid button:hover,
.report-grid button:hover,
.mini-action:hover {
  transform: translateY(-1px);
}

.primary-button:active,
.ghost-button:active,
.danger-button:active,
.button-grid button:active,
.report-grid button:active,
.mini-action:active {
  transform: translateY(0);
}

.table-action-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  white-space: nowrap;
}

.action-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.danger-button {
  min-height: 40px;
  border: 1px solid #f0c2c2;
  border-radius: 8px;
  padding: 0 14px;
  background: linear-gradient(180deg, #fffafa, #fff1f1);
  color: var(--brand);
  font-weight: 800;
}

.ghost-button,
.button-grid button,
.report-grid button {
  border-color: var(--line);
  background: var(--surface-gloss);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.ghost-button:hover,
.button-grid button:hover,
.report-grid button:hover {
  border-color: rgba(37, 99, 167, 0.28);
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
}

.integration-portal-link {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid rgba(37, 99, 167, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  color: #1d4e86;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.integration-portal-link:hover {
  border-color: rgba(37, 99, 167, 0.38);
  background: linear-gradient(180deg, #f9fcff, #eaf3ff);
  color: #174f8f;
  transform: translateY(-1px);
}

.integration-portal-link span,
.integration-portal-link strong,
.integration-portal-link small {
  min-width: 0;
}

.integration-portal-link span {
  display: grid;
  gap: 2px;
}

.integration-portal-link strong,
.integration-portal-link small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-portal-link small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.integration-toolbar-link {
  white-space: nowrap;
}

.settings-submenu.collapsed .integration-portal-link {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 8px;
}

.settings-submenu.collapsed .integration-portal-link span {
  display: none;
}

body[data-ui-mode="night"] .integration-portal-link {
  border-color: #416a9d;
  background: #162942;
  color: #dbeafe;
  box-shadow: none;
}

body[data-ui-mode="night"] .integration-portal-link:hover {
  border-color: #5b86bd;
  background: #1b3454;
  color: #ffffff;
}

body.integrations-portal-mode .topbar .eyebrow {
  color: #1d4e86;
}

body.integrations-portal-mode .integration-detail-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.report-grid button.active {
  border-color: var(--brand);
  background: #fff4f4;
  color: var(--brand);
}

.mini-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

.pos-icon-action {
  position: relative;
  display: inline-grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
}

.pos-icon-action svg {
  width: 17px;
  height: 17px;
}

.pos-icon-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pos-icon-action.whatsapp {
  border-color: #a9e6d8;
  background: linear-gradient(180deg, #f8fffc, #ecfbf5);
  color: #117c66;
}

.pos-icon-action.back-office {
  border-color: #b9d0ec;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  color: #245b9d;
}


.pos-icon-action.cash-handover {
  border-color: #c8d7ef;
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  color: #245b9d;
}

.pos-icon-action.stock-register {
  border-color: #d2e5d8;
  background: linear-gradient(180deg, #ffffff, #effbf4);
  color: #177245;
}

.pos-icon-action.labelled {
  grid-template-columns: auto auto;
  gap: 6px;
  width: auto;
  min-width: 82px;
  padding: 0 10px;
}

.pos-icon-action.labelled span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: currentColor;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.pos-icon-action.print,
.pos-icon-action.preview,
.pos-icon-action.return,
.pos-icon-action.test {
  border-color: #c9dce5;
}

.pos-icon-action.void {
  color: var(--brand);
}

.action-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.alert-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid #ead7b4;
  border-left: 6px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff8eb;
}

.alert-strip strong,
.alert-strip span {
  display: block;
}

.alert-strip span {
  color: var(--muted);
  margin-top: 2px;
}

.alert-strip button {
  background: var(--gold);
  color: #ffffff;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.metrics-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.dashboard-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(180px, 1fr) minmax(160px, 0.8fr) auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.dashboard-filters > *,
.dashboard-date-trigger {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #f7f8fb;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.dashboard-date-filter {
  position: relative;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.dashboard-date-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.dashboard-date-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 24;
  display: grid;
  gap: 4px;
  width: min(360px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.16);
}

.dashboard-date-menu button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: transparent;
  color: #6f7484;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}

.dashboard-date-menu button:hover,
.dashboard-date-menu button.active {
  background: #eef5ff;
  color: #2355d8;
}

.dashboard-custom-dates {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
}

.dashboard-custom-dates.active {
  display: grid;
}

.dashboard-custom-dates label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-custom-dates input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #f7f8fb;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-filters select {
  width: 100%;
}

.dashboard-scope {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-filters > span {
  display: grid;
  align-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.dashboard-filters > span strong {
  color: var(--brand);
  font-size: 14px;
  text-transform: none;
}

.sync-button {
  min-width: 44px;
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
  gap: 16px;
  align-items: start;
  font-family: "Segoe UI Variable", Inter, "Segoe UI", Arial, sans-serif;
}

.dashboard-kpi-panel {
  gap: 12px;
  padding: 12px;
}

.dashboard-kpi-head {
  display: grid;
  gap: 4px;
  border: 1px solid #dbe7f1;
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.dashboard-kpi-head strong,
.dashboard-kpi-head span {
  display: block;
}

.dashboard-kpi-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.dashboard-kpi-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-kpi-panel .dashboard-filters {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(76px, .55fr) minmax(116px, .95fr) minmax(108px, .9fr) minmax(74px, auto);
  gap: 6px;
  padding-top: 0;
  padding-bottom: 8px;
}

.dashboard-kpi-panel .dashboard-filters > *,
.dashboard-kpi-panel .dashboard-date-trigger {
  min-height: 32px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
}

.dashboard-kpi-panel .dashboard-filters select,
.dashboard-kpi-panel .dashboard-date-trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-date-trigger b {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
}

.dashboard-kpi-panel .dashboard-filters .sync-button {
  display: inline-flex;
  min-width: 74px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(33, 47, 67, 0.12);
}

.dashboard-kpi-panel .dashboard-filters .sync-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.dashboard-kpi-panel .dashboard-filters .sync-button span {
  font-size: 11px;
  font-weight: 700;
}

.dashboard-kpi-panel .dashboard-date-menu {
  gap: 2px;
  width: min(220px, calc(100vw - 40px));
  padding: 6px;
}

.dashboard-kpi-panel .dashboard-date-menu button {
  min-height: 30px;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
}

.dashboard-kpi-panel .dashboard-custom-dates {
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
}

.dashboard-kpi-panel .dashboard-custom-dates label {
  font-size: 10px;
  font-weight: 500;
}

.dashboard-kpi-panel .dashboard-custom-dates input {
  padding: 6px;
  font-size: 11px;
  font-weight: 500;
}

.dashboard-kpi-panel .dashboard-filters > span {
  min-height: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 500;
}

.dashboard-kpi-panel .dashboard-filters > span strong {
  font-size: 11px;
  font-weight: 600;
}

.dashboard-kpi-panel .dashboard-scope {
  margin-top: -5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.owner-dashboard-v2 {
  display: grid;
  gap: 16px;
}

.owner-dashboard-filterbar {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 10px;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.owner-dashboard-date-control {
  display: grid;
  gap: 3px;
  min-width: min(240px, 100%);
  margin: 0;
}

.owner-dashboard-date-control > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.owner-dashboard-filterbar .dashboard-date-trigger {
  min-height: 38px;
  border-color: #c8d8ed;
  background: var(--surface-soft);
  color: #0d1b2d;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.owner-dashboard-filterbar .dashboard-date-trigger:hover,
.owner-dashboard-filterbar .dashboard-date-trigger[aria-expanded="true"] {
  border-color: #9bb8df;
  background: #ffffff;
}

.owner-dashboard-filterbar .dashboard-date-trigger span {
  line-height: 1;
}

.dashboard-date-chevron {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: var(--brand);
  background: var(--brand-tint);
}

.dashboard-date-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
  transition: transform 0.16s ease;
}

.dashboard-date-trigger[aria-expanded="true"] .dashboard-date-chevron svg {
  transform: rotate(180deg);
}

.owner-dashboard-filterbar .dashboard-date-menu {
  width: min(320px, calc(100vw - 40px));
  gap: 3px;
  border-color: #c8d8ed;
  padding: 8px;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
}

.owner-dashboard-filterbar .dashboard-date-menu button {
  min-height: 34px;
  border-radius: 7px;
  padding: 0 11px;
  color: #53657a;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.15;
}

.owner-dashboard-filterbar .dashboard-date-menu button:hover,
.owner-dashboard-filterbar .dashboard-date-menu button.active {
  background: #eef5ff;
  color: #2454a6;
}

.owner-dashboard-go {
  justify-content: center;
  min-width: 72px;
  min-height: 38px;
}

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

.owner-v2-kpi {
  display: grid;
  min-height: 118px;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.owner-v2-kpi:hover,
.owner-v2-kpi:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.owner-v2-kpi i,
.owner-collection-card svg {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--brand);
}

.owner-v2-kpi svg,
.owner-collection-card svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.owner-v2-kpi span,
.owner-v2-kpi small,
.owner-collection-card span,
.owner-collection-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.owner-v2-kpi strong {
  align-self: center;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.05;
}

.owner-v2-kpi.featured {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background: linear-gradient(135deg, var(--brand-tint), #ffffff 62%);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--brand), var(--shadow-soft);
}

.owner-v2-kpi.featured span,
.owner-v2-kpi.featured small,
.owner-v2-kpi.featured strong {
  color: inherit;
}

.owner-v2-kpi.featured i {
  background: var(--brand);
  color: #ffffff;
}

.owner-v2-kpi.net i {
  background: #e8f8f0;
  color: #087044;
}

.owner-v2-kpi.warn i {
  background: #fff4df;
  color: #985c00;
}

.owner-v2-kpi.purchase i {
  background: var(--blue-tint);
  color: var(--blue);
}

.owner-v2-kpi.expense i {
  background: #fff0f4;
  color: #9b2455;
}

.owner-insight-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.owner-insight-pill {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.owner-insight-pill.ok {
  border-left-color: #087044;
}

.owner-insight-pill.warn {
  border-left-color: #985c00;
  background: #fffaf0;
}

.owner-insight-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.owner-insight-pill strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.owner-insight-pill small {
  color: #53657a;
  font-size: 12px;
  font-weight: 800;
}

.owner-collection-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.owner-collection-panel {
  display: grid;
  gap: 12px;
}

.owner-collection-panel .owner-panel-head > strong {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 18px;
}

.owner-collection-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.owner-collection-card svg {
  grid-row: span 3;
}

.owner-collection-card strong {
  color: var(--ink);
  font-size: 19px;
}

.owner-dashboard-partition-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.owner-dashboard-partition {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px;
  background: #ffffff;
}

.owner-dashboard-partition:nth-child(2n) {
  border-right: 0;
}

.owner-dashboard-partition:nth-child(n+3) {
  border-bottom: 0;
}

.owner-dashboard-partition-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.owner-dashboard-partition-head strong {
  color: #111827;
  font-size: 0.98rem;
  font-weight: 900;
}

.owner-dashboard-partition-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: right;
}

.owner-sales-pie-layout {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(140px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
}

.owner-sales-pie {
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(15, 23, 42, 0.08);
  display: grid;
  justify-self: center;
  place-items: center;
  width: min(190px, 100%);
}

.owner-sales-pie > div {
  align-content: center;
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 3px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  width: 58%;
}

.owner-sales-pie strong {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.owner-sales-pie span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.owner-sales-legend {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.owner-sales-legend-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  gap: 8px;
  min-width: 0;
}

.owner-sales-legend-row span {
  align-items: center;
  color: #1f2937;
  display: flex;
  gap: 7px;
  font-size: 12px;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-sales-legend-row i {
  border-radius: 999px;
  flex: 0 0 10px;
  height: 10px;
  width: 10px;
}

.owner-sales-legend-row strong,
.owner-sales-legend-row em {
  color: #111827;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.owner-sales-legend-row em {
  color: var(--muted);
  text-align: right;
}

.owner-order-calendar {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.owner-order-calendar > b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.owner-calendar-day {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  justify-items: center;
  min-height: 36px;
  padding: 5px;
  position: relative;
}

.owner-calendar-day.blank {
  visibility: hidden;
}

.owner-calendar-day strong {
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}

.owner-calendar-day em {
  align-items: center;
  background: #047857;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  height: 17px;
  justify-content: center;
  min-width: 17px;
  padding: 0 4px;
  position: absolute;
  right: 3px;
  top: 3px;
}

.owner-calendar-day.has-orders {
  background: #ecfdf5;
  border-color: rgba(4, 120, 87, 0.3);
}

.owner-order-mini-list,
.owner-raw-stock-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.owner-order-mini-list div,
.owner-raw-stock-list div {
  align-items: center;
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
  display: grid;
  gap: 8px;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  min-width: 0;
  padding-top: 7px;
}

.owner-order-mini-list span,
.owner-order-mini-list em,
.owner-raw-stock-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.owner-order-mini-list strong,
.owner-raw-stock-list strong {
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-order-mini-list em {
  color: #111827;
  white-space: nowrap;
}

.owner-raw-stock-total {
  background: #f8fafc;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.owner-raw-stock-total strong {
  color: #111827;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.owner-raw-stock-total span,
.owner-raw-stock-total em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.owner-raw-stock-list div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.owner-raw-stock-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-raw-stock-list b {
  background: #eef4ff;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  padding: 5px 8px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .owner-sales-pie-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .owner-dashboard-partition {
    padding: 12px;
  }
  .owner-dashboard-partition-box {
    grid-template-columns: 1fr;
  }

  .owner-dashboard-partition,
  .owner-dashboard-partition:nth-child(2n),
  .owner-dashboard-partition:nth-child(n+3) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .owner-dashboard-partition:last-child {
    border-bottom: 0;
  }

  .owner-dashboard-partition-head {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .owner-dashboard-partition-head span {
    text-align: left;
  }

  .owner-sales-pie-layout {
    grid-template-columns: 1fr;
  }

  .owner-sales-pie {
    width: min(220px, 78vw);
  }

  .owner-sales-legend-row,
  .owner-order-mini-list div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .owner-sales-legend-row em {
    grid-column: 1 / -1;
    text-align: left;
  }

  .owner-store-equation-item,
  .owner-store-total-card {
    flex: 1 1 132px;
  }

  .owner-store-plus,
  .owner-store-equals {
    min-height: 42px;
  }
}
.owner-store-panel {
  display: grid;
  gap: 12px;
}

.owner-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.owner-panel-head h2 {
  margin: 0;
}

.owner-panel-head span {
  color: var(--muted);
  font-weight: 800;
}

.owner-store-equation-grid {
  display: grid;
  gap: 12px;
}

.owner-store-equation-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.owner-store-equation-card.sales {
  border-color: rgba(22, 163, 74, 0.28);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), #fff 72%);
}

.owner-store-equation-card.expenses {
  border-color: rgba(220, 38, 38, 0.24);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), #fff 72%);
}

.owner-store-equation-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.owner-store-equation-head div {
  display: grid;
  gap: 3px;
}

.owner-store-equation-head strong {
  color: #111827;
  font-size: 0.95rem;
}

.owner-store-equation-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.owner-store-equation-head b {
  color: #111827;
  font-size: 1rem;
  white-space: nowrap;
}

.owner-store-equation-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.owner-store-equation-item,
.owner-store-total-card {
  display: grid;
  flex: 0 1 150px;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.owner-store-equation-item b,
.owner-store-total-card strong {
  align-items: center;
  border-radius: 8px;
  display: grid;
  min-height: 58px;
  padding: 8px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.08;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.owner-store-equation-item.sales b {
  background: #c9f5ee;
  color: #0f172a;
}

.owner-store-equation-item.expenses b {
  background: #fde2e2;
  color: #0f172a;
}

.owner-store-equation-item strong,
.owner-store-total-card span {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.owner-store-equation-item span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
}

.owner-store-total-card {
  flex-basis: 190px;
}

.owner-store-total-card strong {
  min-height: 72px;
  font-size: 24px;
}
.owner-store-total-card strong {
  background: #111827;
  color: #fff;
}

.owner-store-total-card.sales strong {
  background: #047857;
}

.owner-store-total-card.expenses strong {
  background: #b91c1c;
}

.owner-store-plus,
.owner-store-equals {
  align-items: center;
  align-self: start;
  color: #111827;
  display: inline-flex;
  font-size: 28px;
  font-weight: 900;
  justify-content: center;
  min-height: 58px;
  padding-top: 1px;
}

.owner-store-equals {
  padding-inline: 2px;
}
.owner-dashboard-equation-partition .owner-store-panel,
.owner-dashboard-equation-partition .owner-store-equation-grid {
  gap: 8px;
}

.owner-dashboard-equation-partition .owner-store-equation-card {
  padding: 9px;
}

.owner-dashboard-equation-partition .owner-store-equation-head {
  margin-bottom: 7px;
}

.owner-dashboard-equation-partition .owner-store-equation-head strong {
  font-size: 0.78rem;
}

.owner-dashboard-equation-partition .owner-store-equation-head span {
  font-size: 0.68rem;
}

.owner-dashboard-equation-partition .owner-store-equation-list {
  align-items: flex-start;
  gap: 5px;
}

.owner-dashboard-equation-partition .owner-store-equation-item {
  flex: 0 1 58px;
  gap: 3px;
}

.owner-dashboard-equation-partition .owner-store-total-card {
  flex: 0 1 88px;
  gap: 4px;
}

.owner-dashboard-equation-partition .owner-store-equation-item b,
.owner-dashboard-equation-partition .owner-store-total-card strong {
  border-radius: 7px;
  font-size: 13px;
  min-height: 36px;
  padding: 5px;
}

.owner-dashboard-equation-partition .owner-store-total-card strong {
  font-size: 16px;
  min-height: 44px;
}

.owner-dashboard-equation-partition .owner-store-equation-item strong,
.owner-dashboard-equation-partition .owner-store-total-card span {
  font-size: 0.72rem;
}

.owner-dashboard-equation-partition .owner-store-equation-item span {
  font-size: 0.62rem;
}

.owner-dashboard-equation-partition .owner-store-plus,
.owner-dashboard-equation-partition .owner-store-equals {
  font-size: 18px;
  min-height: 36px;
  padding-top: 0;
}
@media (max-width: 760px) {
  .owner-dashboard-filterbar {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-v2-kpi-grid,
  .owner-insight-strip,
  .owner-collection-strip {
    grid-template-columns: 1fr;
  }

  .owner-dashboard-date-control,
  .owner-dashboard-go {
    width: 100%;
  }

  .owner-v2-kpi.featured {
    grid-column: auto;
  }
}

.dashboard-empty-range-note {
  display: grid;
  gap: 3px;
  border: 1px solid #f1d3a5;
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff8eb;
  color: #8a3e00;
}

.dashboard-empty-range-note strong,
.dashboard-empty-range-note span {
  display: block;
}

.dashboard-empty-range-note strong {
  font-size: 13px;
}

.dashboard-empty-range-note span {
  color: #7c5a2c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-owner-command {
  display: grid;
  gap: 12px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 16px 34px rgba(31, 41, 51, 0.06);
}

.owner-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.owner-command-head h2,
.owner-command-head p {
  margin: 0;
}

.owner-command-head h2 {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.owner-command-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.owner-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.owner-command-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
}

.owner-command-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.owner-command-action:hover {
  border-color: rgba(26, 97, 177, 0.48);
  background: #f3f8ff;
}

.owner-command-head .sync-button {
  display: inline-flex;
  min-width: 92px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  appearance: none;
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(33, 47, 67, 0.12);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.owner-command-head .sync-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.owner-command-head .sync-button span {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.owner-command-head .sync-button:hover,
.owner-command-head .sync-button:focus-visible {
  border-color: var(--brand-strong);
  background: linear-gradient(180deg, var(--brand-strong), var(--brand));
  outline: 2px solid var(--brand-tint);
  outline-offset: 2px;
}

.owner-command-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.owner-command-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: 4px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.owner-command-metric.featured {
  grid-column: span 2;
}

.owner-command-metric i {
  display: inline-grid;
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--brand);
}

.owner-command-metric i svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.owner-command-metric span,
.owner-command-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-command-metric small {
  line-height: 1.25;
  white-space: normal;
}

.owner-command-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-command-metric.featured strong {
  font-size: 24px;
}

.pending-work-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.pending-work-card {
  display: grid;
  gap: 3px;
  min-height: 72px;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.pending-work-card strong {
  color: var(--brand);
  font-size: 20px;
  line-height: 1;
}

.pending-work-card span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.pending-work-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.pending-work-card.gold {
  border-color: #f2c576;
  background: #fff8eb;
}

.pending-work-card.rose {
  border-color: #ffc7c7;
  background: #fff5f5;
}

.pending-work-card.violet {
  border-color: #d8cffb;
  background: #f7f4ff;
}

.owner-command-metric.mint {
  border-color: #bce6d3;
  background: #f0fbf6;
}

.owner-command-metric.warn {
  border-color: #f1d3a5;
  background: #fff8eb;
}

.owner-command-payment-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.owner-payment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.owner-payment-card svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.owner-payment-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-payment-card strong {
  overflow: hidden;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-command-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.owner-command-detail-grid article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.owner-command-detail-grid article > strong {
  color: var(--ink);
  font-size: 13px;
}

.owner-command-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  min-width: 0;
  border-top: 1px solid #eef2f7;
  padding-top: 7px;
}

.owner-command-list-row span,
.owner-command-list-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-command-list-row span {
  color: var(--ink);
  font-size: 12px;
}

.owner-command-list-row b {
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.owner-command-list-row small {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .owner-command-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .owner-command-detail-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-signal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .owner-command-head {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-command-actions {
    justify-content: stretch;
  }

  .owner-command-action {
    flex: 1 1 112px;
    justify-content: center;
  }

  .owner-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-command-metric.featured {
    grid-column: 1 / -1;
  }

  .owner-command-payment-strip,
  .dashboard-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dashboard-tile-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 20px 22px;
}

.dashboard-kpi-panel .dashboard-tile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-kpi-panel .dashboard-tile-grid.dashboard-core-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-tile {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 106px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.dashboard-tile strong {
  display: grid;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  place-items: center;
  border-radius: 8px;
  padding: 8px;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.08;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.dashboard-kpi-panel .dashboard-tile {
  gap: 5px;
  min-height: 72px;
}

.dashboard-kpi-panel .dashboard-tile strong {
  min-height: 38px;
  padding: 6px;
  font-size: 17px;
  font-weight: 600;
}

.dashboard-tile span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #424957;
  font-size: 16px;
  font-weight: 700;
}

.dashboard-kpi-panel .dashboard-tile span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.dashboard-signal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.dashboard-signal {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 74px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.dashboard-signal span,
.dashboard-signal small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-signal strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-signal:hover {
  border-color: rgba(26, 97, 177, 0.48);
  background: #f8fbff;
}

.dashboard-tile:hover strong,
.store-sales-row:hover {
  outline: 2px solid rgba(37, 99, 167, 0.18);
}

.dashboard-tile.mint strong {
  background: #c9f5ee;
}

.dashboard-tile.blue strong {
  background: #dcebfb;
}

.dashboard-tile.violet strong {
  background: #e9defb;
}

.dashboard-tile.rose strong {
  background: #fde0e3;
}

.dashboard-alert-panel,
.dashboard-chart-grid,
.dashboard-table-grid {
  grid-column: 1 / -1;
}

.dashboard-alert-panel {
  display: grid;
  gap: 14px;
}

.dashboard-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-chart-head h2 {
  margin: 0;
}

.dashboard-chart-head span {
  color: var(--muted);
  font-weight: 700;
}

.dashboard-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.dashboard-legend .sales {
  background: #0ea5e9;
}

.dashboard-legend .purchase {
  background: #12d38f;
}

.dashboard-alert-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-alert-list button {
  display: grid;
  gap: 5px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.dashboard-alert-list button.warn {
  border-left-color: var(--brand);
  background: #fff8eb;
}

.dashboard-alert-list button.ok {
  border-left-color: var(--mint);
}

.dashboard-alert-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-updates-panel {
  display: grid;
  gap: 12px;
  align-self: stretch;
}

.dashboard-updates-panel .dashboard-chart-head h2 {
  font-size: 18px;
  font-weight: 600;
}

.dashboard-updates-panel .dashboard-chart-head span {
  font-size: 13px;
  font-weight: 500;
}

.dashboard-updates-panel .mini-action {
  font-size: 12px;
  font-weight: 500;
}

.dashboard-update-section {
  display: grid;
  gap: 8px;
}

.dashboard-update-section.minimized {
  gap: 0;
}

.dashboard-update-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.dashboard-update-section-head div {
  display: grid;
  gap: 2px;
}

.dashboard-update-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-update-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-update-list {
  display: grid;
  gap: 8px;
}

.dashboard-update-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}

.dashboard-update-row.warn {
  border-left-color: var(--brand);
  background: #fff8eb;
}

.dashboard-update-row.ok {
  border-left-color: var(--mint);
}

.dashboard-update-row:hover {
  outline: 2px solid rgba(37, 99, 167, 0.18);
}

.dashboard-update-row strong,
.dashboard-update-row span {
  display: block;
}

.dashboard-update-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.dashboard-update-row strong {
  font-size: 13px;
  font-weight: 600;
}

.dashboard-update-row small {
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.dashboard-bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 260px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.dashboard-bar-group {
  display: grid;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.dashboard-bar-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 5px;
  height: 210px;
  border-bottom: 1px solid #dfe5ed;
  padding: 0 6px;
}

.dashboard-bar-pair i {
  display: block;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
}

.dashboard-bar-pair .sales {
  background: #0ea5e9;
}

.dashboard-bar-pair .purchase {
  background: #12d38f;
}

.dashboard-bar-group span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-payment-chart {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.payment-row {
  display: grid;
  grid-template-columns: 84px minmax(120px, 1fr) 110px 64px;
  align-items: center;
  gap: 10px;
}

.payment-row span,
.payment-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.payment-row div {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
}

.payment-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #6d5dfc;
}

.payment-row strong {
  text-align: right;
}

.dashboard-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 118px;
  padding: 18px;
}

.metric span,
.metric small,
.outlet-row span,
.work-row span,
.recipe-card span,
.forecast span {
  color: var(--muted);
}

.metric strong {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.panel {
  min-width: 0;
  padding: 20px;
}

.panel > h2:first-child {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.panel.wide,
.content-grid > .wide {
  grid-column: 1 / -1;
}

.outlet-row,
.work-row,
.store-sales-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 220px) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.store-sales-row {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.work-row {
  grid-template-columns: minmax(160px, 1fr) auto;
}

.outlet-row:first-of-type,
.store-sales-row:first-of-type,
.work-row:first-of-type {
  border-top: 0;
}

.outlet-row strong,
.outlet-row span,
.store-sales-row strong,
.store-sales-row span,
.work-row strong,
.work-row span {
  display: block;
}

.bar,
.mini-bar {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: #e9edf2;
}

.mini-bar {
  width: 100%;
  min-width: 120px;
}

.bar i,
.mini-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.pill.ok {
  color: #0f684f;
  background: #dff7ed;
}

.pill.warn {
  color: #8a3e00;
  background: #fff1d6;
}

.muted-line {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.smart-table-shell {
  min-width: 0;
}

.table-wrap table {
  min-width: 760px;
}

.smart-table-shell.has-column-widths .table-wrap table {
  table-layout: fixed;
}

.table-wrap th {
  position: relative;
}

.table-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding-right: 12px;
  text-align: left;
}

.table-header-content .table-sort-button {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

/* Column alignment utilities — applied to th, cascades to matching td via nth-child */
th.col-numeric .table-header-content,
th.col-numeric .table-sort-button {
  justify-content: flex-end;
  text-align: right;
}
th.col-numeric {
  text-align: right;
}

th.col-center .table-header-content,
th.col-center .table-sort-button {
  justify-content: center;
  text-align: center;
}
th.col-center {
  text-align: center;
}

.table-column-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  z-index: 3;
  width: 10px;
  min-width: 10px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
}

.table-column-resizer[hidden] {
  display: none !important;
}

.table-column-resizer::after {
  content: "";
  position: absolute;
  top: 28%;
  bottom: 28%;
  left: 4px;
  width: 1px;
  border-radius: 999px;
  background: rgba(99, 117, 138, 0.12);
}

.table-column-resizer:hover::after,
.table-column-resizer:focus-visible::after,
.table-column-resizing-shell .table-column-resizer::after {
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: rgba(43, 101, 170, 0.48);
}

.table-column-resizer:focus-visible {
  outline: 2px solid rgba(43, 101, 170, 0.34);
  outline-offset: -2px;
}

body.table-column-resizing {
  cursor: col-resize;
  user-select: none;
}

body.table-column-resizing * {
  cursor: col-resize !important;
}

body[data-ui-theme="column-focus"] .table-wrap {
  border-color: #9fb7d3;
  box-shadow: 0 10px 24px rgba(31, 79, 143, 0.12);
}

body[data-ui-theme="column-focus"] .table-wrap thead th {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, #245b9c, #173e70);
  color: #ffffff;
  letter-spacing: 0;
}

body[data-ui-theme="column-focus"] .table-wrap thead th:first-child {
  border-top-left-radius: 7px;
}

body[data-ui-theme="column-focus"] .table-wrap thead th:last-child {
  border-right: 0;
  border-top-right-radius: 7px;
}

body[data-ui-theme="column-focus"] .table-sort-button,
body[data-ui-theme="column-focus"] .table-sort-button:hover,
body[data-ui-theme="column-focus"] .table-sort-button.active {
  color: inherit;
}

body[data-ui-theme="column-focus"] .table-sort-button:hover .table-sort-label,
body[data-ui-theme="column-focus"] .table-sort-button.active .table-sort-label {
  color: #ffdc75;
}

body[data-ui-theme="column-focus"] .table-sort-icon {
  color: rgba(255, 255, 255, 0.72);
}

body[data-ui-theme="column-focus"] .table-column-resizer::after {
  background: rgba(255, 255, 255, 0.32);
}

body[data-ui-theme="column-focus"] .table-column-resizer:hover::after,
body[data-ui-theme="column-focus"] .table-column-resizer:focus-visible::after,
body[data-ui-theme="column-focus"] .table-column-resizing-shell .table-column-resizer::after {
  background: #ffdc75;
}

body[data-ui-theme="column-focus"] .table-wrap tbody td {
  border-color: #d3dfed;
}

body[data-ui-theme="column-focus"] .table-wrap tbody td:nth-child(odd) {
  background: rgba(31, 79, 143, 0.045);
}

body[data-ui-theme="column-focus"] .table-wrap tbody td:nth-child(even) {
  background: rgba(154, 39, 95, 0.025);
}

body[data-ui-theme="column-focus"] .table-wrap tbody tr:hover td {
  background: #fff6df;
}

body[data-ui-theme="column-focus"] .table-wrap td strong,
body[data-ui-theme="column-focus"] .settings-card strong,
body[data-ui-theme="column-focus"] .metric strong,
body[data-ui-theme="column-focus"] .dashboard-tile strong,
body[data-ui-theme="column-focus"] .module-toolbar strong {
  color: #122d52;
  font-weight: 850;
}

body[data-ui-theme="column-focus"] .pill {
  border: 1px solid rgba(31, 79, 143, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  font-weight: 850;
}

body[data-ui-theme="column-focus"] .pill.ok {
  border-color: #8dd7b7;
  background: #cdf4df;
  color: #064e3b;
}

body[data-ui-theme="column-focus"] .pill.warn {
  border-color: #f1cf87;
  background: #fff0c7;
  color: #7c3a00;
}

body[data-ui-theme="column-focus"] .settings-card.active,
body[data-ui-theme="column-focus"] .settings-card:hover {
  border-color: rgba(31, 79, 143, 0.34);
  background: linear-gradient(180deg, #ffffff, #eaf2ff);
}

body[data-ui-theme="column-focus"] .primary-button {
  background: linear-gradient(180deg, #9a275f, #761744);
}

body[data-ui-theme="column-focus"] .ghost-button:hover {
  border-color: rgba(31, 79, 143, 0.36);
  background: linear-gradient(180deg, #ffffff, #eaf2ff);
  color: #143660;
}

body[data-ui-column-style="strong"] .table-wrap {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  box-shadow: 0 10px 24px rgba(31, 79, 143, 0.1);
}

body[data-ui-column-style="strong"] .table-wrap thead th {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, var(--blue), var(--brand-strong));
  color: #ffffff;
  letter-spacing: 0;
}

body[data-ui-column-style="strong"] .table-wrap thead th:first-child {
  border-top-left-radius: 7px;
}

body[data-ui-column-style="strong"] .table-wrap thead th:last-child {
  border-right: 0;
  border-top-right-radius: 7px;
}

body[data-ui-column-style="strong"] .table-sort-button,
body[data-ui-column-style="strong"] .table-sort-button:hover,
body[data-ui-column-style="strong"] .table-sort-button.active {
  color: inherit;
}

body[data-ui-column-style="strong"] .table-sort-button:hover .table-sort-label,
body[data-ui-column-style="strong"] .table-sort-button.active .table-sort-label {
  color: #ffdc75;
}

body[data-ui-column-style="strong"] .table-sort-icon {
  color: rgba(255, 255, 255, 0.72);
}

body[data-ui-column-style="strong"] .table-column-resizer::after {
  background: rgba(255, 255, 255, 0.32);
}

body[data-ui-column-style="strong"] .table-column-resizer:hover::after,
body[data-ui-column-style="strong"] .table-column-resizer:focus-visible::after,
body[data-ui-column-style="strong"] .table-column-resizing-shell .table-column-resizer::after {
  background: #ffdc75;
}

body[data-ui-column-style="strong"] .table-wrap tbody td {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
}

body[data-ui-column-style="strong"] .table-wrap tbody td:nth-child(odd) {
  background: color-mix(in srgb, var(--blue-tint) 58%, #ffffff);
}

body[data-ui-column-style="strong"] .table-wrap tbody td:nth-child(even) {
  background: color-mix(in srgb, var(--brand-tint) 34%, #ffffff);
}

body[data-ui-column-style="strong"] .table-wrap tbody tr:hover td {
  background: var(--gold-tint);
}

body[data-ui-column-style="strong"] .table-wrap td strong,
body[data-ui-column-style="strong"] .settings-card strong,
body[data-ui-column-style="strong"] .metric strong,
body[data-ui-column-style="strong"] .dashboard-tile strong,
body[data-ui-column-style="strong"] .module-toolbar strong {
  color: var(--brand-strong);
  font-weight: 850;
}

.table-wrap th.action-column,
.table-wrap td.action-column {
  width: 220px;
  min-width: 220px;
  white-space: nowrap;
}

.table-wrap td.action-column {
  overflow: visible;
}

.table-wrap td.action-column .row-actions,
.table-wrap td.action-column .table-action-row,
.table-wrap td.action-column .module-actions {
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: max-content;
  white-space: nowrap;
}

.table-wrap td.action-column .mini-action,
.table-wrap td.action-column .ghost-button,
.table-wrap td.action-column .primary-button,
.table-wrap td.action-column .danger-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.table-wrap[data-table-id="stock-transfer-request"] table {
  min-width: 1300px;
  table-layout: fixed;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] table {
  min-width: 1420px;
  table-layout: fixed;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(1),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(1) {
  width: 84px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(2),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(2) {
  width: 52px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(3),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(3) {
  width: 118px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(4),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(4) {
  width: 96px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(5),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(5) {
  width: 205px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(6),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(6),
.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(7),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(7),
.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(8),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(8),
.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(9),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(9),
.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(10),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(10),
.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(11),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(11) {
  width: 104px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(12),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(12) {
  width: 118px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] th:nth-child(13),
.table-wrap[data-table-id="inventory-current-pos-stock"] td:nth-child(13) {
  width: 228px;
  min-width: 228px;
  white-space: nowrap;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(1),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(1) {
  width: 205px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(2),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(2) {
  width: 124px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(3),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(3),
.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(4),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(4) {
  width: 105px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(5),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(5) {
  width: 210px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(6),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(6) {
  width: 128px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(7),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(7) {
  width: 110px;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(8),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(8) {
  width: 140px;
  min-width: 140px;
  white-space: normal;
}

.table-wrap[data-table-id="stock-transfer-request"] th:nth-child(9),
.table-wrap[data-table-id="stock-transfer-request"] td:nth-child(9) {
  width: 180px;
  min-width: 180px;
}

.table-wrap[data-table-id="stock-transfer-request"] td.action-column,
.table-wrap[data-table-id="stock-transfer-request"] td.action-cell {
  overflow: hidden;
}

.table-wrap[data-table-id="stock-transfer-request"] td.action-column.action-cell {
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  white-space: normal;
}

.table-wrap[data-table-id="stock-transfer-request"] td.action-column.action-cell .mini-action,
.table-wrap[data-table-id="stock-transfer-request"] td.action-column.action-cell .ghost-button,
.table-wrap[data-table-id="stock-transfer-request"] td.action-column.action-cell .primary-button,
.table-wrap[data-table-id="stock-transfer-request"] td.action-column.action-cell .danger-button {
  flex: 1 1 72px;
  max-width: 100%;
  min-width: 68px;
  padding: 0 9px;
  line-height: 1.15;
  white-space: normal;
}

.stock-request-cell-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stock-request-ref-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.stock-request-ref-cell strong,
.stock-request-ref-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-request-ref-cell strong {
  color: #122033;
  font-weight: 900;
}

.stock-request-ref-cell span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.stock-request-cell-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.3;
}

.stock-request-cell-line b {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.stock-request-cell-line,
.table-wrap[data-table-id="stock-transfer-request"] td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.stock-request-cell-list.qty-list .stock-request-cell-line {
  grid-template-columns: 22px minmax(0, 1fr);
  font-variant-numeric: tabular-nums;
}

.stock-request-expand-button {
  justify-self: start;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.stock-request-ref-cell {
  min-width: 0;
}

.stock-request-ref-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-request-timeline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  max-width: 100%;
  vertical-align: middle;
}

.stock-request-timeline span {
  width: 8px;
  height: 8px;
  border: 1px solid #cbd8e6;
  border-radius: 999px;
  background: #ffffff;
}

.stock-request-timeline span.done {
  border-color: #0f8a66;
  background: #28b487;
}

.stock-line-peek {
  position: relative;
  display: inline-grid;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  outline: none;
}

.stock-line-peek-summary {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-line-peek-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 120;
  display: none;
  width: min(360px, calc(100vw - 48px));
  max-height: 236px;
  overflow: auto;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.stock-line-peek.open-up .stock-line-peek-panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.stock-line-peek.qty .stock-line-peek-panel {
  right: 0;
  left: auto;
}

.stock-line-peek:hover .stock-line-peek-panel,
.stock-line-peek:focus .stock-line-peek-panel,
.stock-line-peek:focus-within .stock-line-peek-panel {
  display: grid;
  gap: 7px;
}

.stock-line-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: 6px;
}

.stock-line-peek-head b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.stock-line-peek-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.stock-line-peek-list {
  display: grid;
  gap: 4px;
}

.stock-line-peek-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 6px 7px;
  background: #f8fbff;
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
}

.stock-line-peek-row b {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.stock-line-peek-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-line-peek-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.table-wrap[data-table-id="stock-transfer-request"] td:has(.stock-line-peek:hover),
.table-wrap[data-table-id="stock-transfer-request"] td:has(.stock-line-peek:focus),
.table-wrap[data-table-id="stock-transfer-request"] td:has(.stock-line-peek:focus-within),
.table-wrap[data-table-id="stock-transfer"] td:has(.stock-line-peek:hover),
.table-wrap[data-table-id="stock-transfer"] td:has(.stock-line-peek:focus),
.table-wrap[data-table-id="stock-transfer"] td:has(.stock-line-peek:focus-within) {
  position: relative;
  z-index: 30;
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.table-sort-label {
  min-width: 0;
  flex: 0 1 auto;
  text-align: center;
}

.table-sort-button:hover,
.table-sort-button.active {
  color: var(--accent);
}

.table-sort-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 10px;
  height: 12px;
  flex: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.56;
}

.table-sort-icon::before {
  content: "\2193";
}

.sort-arrow {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.table-sort-icon.sort-ascending::before {
  content: "\2191";
}

.table-sort-icon.sort-descending::before {
  content: "\2193";
}

.table-sort-button:hover .table-sort-icon,
.table-sort-button.active .table-sort-icon {
  color: var(--accent);
  opacity: 1;
}

.table-wrap col[hidden],
.table-wrap col.table-column-hidden {
  display: none !important;
  visibility: collapse;
  width: 0 !important;
  min-width: 0 !important;
}

.table-wrap th[hidden],
.table-wrap td[hidden],
.table-column-hidden {
  display: none !important;
}

[data-paginate-table] tr[hidden],
[data-paginate-list] > [hidden] {
  display: none !important;
}

.table-pagination {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(56px, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  border: 1px solid rgba(216, 226, 237, 0.95);
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94));
  color: #667485;
  font-size: 13px;
  font-weight: 400;
  box-shadow: var(--shadow-soft);
}

.smart-table-shell > .table-pagination:first-child {
  margin-top: 0;
  margin-bottom: 10px;
}

.table-pagination-summary {
  grid-template-columns: minmax(220px, max-content) 1fr auto;
}

.table-pagination-pager {
  grid-template-columns: minmax(56px, 1fr) auto minmax(56px, 1fr);
}

.table-page-spacer {
  min-width: 0;
}

.table-summary-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.table-page-size,
.table-page-center,
.table-page-settings {
  display: flex;
  align-items: center;
  min-width: 0;
}

.table-page-size {
  gap: 9px;
  color: #22324a;
  font-weight: 400;
}

.table-page-settings-inline {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.table-page-size select {
  width: 64px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: #ffffff;
  color: #0f1f33;
  font: inherit;
  font-weight: 500;
}

.table-page-center {
  gap: 8px;
  justify-content: center;
}

.table-page-settings {
  justify-content: flex-end;
}

.table-page-size span,
.table-page-number span {
  white-space: nowrap;
}

.table-page-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #263449;
  font-size: 13px;
  font-weight: 500;
}

.table-page-number input {
  width: 54px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: #ffffff;
  color: #0f1f33;
  font: inherit;
  font-weight: 500;
  text-align: center;
}

.table-icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #63758a;
  cursor: pointer;
}

.table-icon-button svg {
  width: 18px;
  height: 18px;
}

.table-icon-button:hover:not(:disabled),
.table-settings-picker > summary:hover {
  border-color: rgba(99, 117, 138, 0.22);
  background: #f3f7fb;
  color: #263449;
}

.table-icon-button:disabled {
  color: #c9d4df;
  cursor: not-allowed;
}

.table-settings-picker {
  position: relative;
  z-index: 9;
}

.table-settings-picker > summary {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(216, 226, 237, 0.95);
  border-radius: 50%;
  background: #ffffff;
  color: #5b6c80;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 1px 3px rgba(33, 47, 67, 0.06);
}

.table-settings-picker > summary svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

.table-settings-picker > summary::-webkit-details-marker {
  display: none;
}

.table-settings-picker > summary > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.table-settings-picker[open] > summary {
  border-color: rgba(43, 101, 170, 0.34);
  background: #f7fbff;
  color: #2563a7;
}

.table-settings-menu {
  position: absolute;
  right: calc(100% + 8px);
  bottom: 0;
  z-index: 35;
  display: grid;
  gap: 3px;
  width: min(248px, calc(100vw - 48px));
  max-height: min(520px, calc(100vh - 140px));
  overflow: visible;
  border: 1px solid rgba(205, 218, 232, 0.96);
  border-radius: 10px;
  padding: 7px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(16, 31, 52, 0.14);
}

.table-settings-picker.open-right .table-settings-menu {
  right: auto;
  left: calc(100% + 8px);
}

.table-settings-picker.open-left .table-settings-menu {
  right: calc(100% + 8px);
  left: auto;
}

.table-settings-picker.open-above .table-settings-menu {
  right: 0;
  bottom: calc(100% + 8px);
  left: auto;
}

.table-settings-section {
  display: grid;
  gap: 8px;
}

.table-settings-section > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #52657a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-settings-section > strong span {
  color: #1f6fba;
  letter-spacing: 0;
  text-transform: none;
}

.table-settings-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 9px;
  background: transparent;
  color: #425970;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.table-settings-action::-webkit-details-marker,
.table-settings-nested > summary::-webkit-details-marker {
  display: none;
}

.table-settings-action svg {
  width: 17px;
  height: 17px;
  color: #6a7d91;
  flex: 0 0 auto;
}

.table-settings-action:hover {
  border-color: #d7e7f7;
  background: #f5f9fd;
  color: #174f87;
}

.table-settings-action.subtle {
  min-height: 32px;
  padding: 7px 10px;
  color: #6b7f94;
  font-size: 12px;
  font-weight: 500;
}

.table-settings-nested {
  display: grid;
  position: relative;
}

.table-settings-nested[open] > summary {
  color: #2563a7;
}

.table-settings-nested > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  color: #8ea0b3;
  transform: rotate(-45deg);
  transition: transform .14s ease, color .14s ease;
}

.table-settings-nested[open] > summary::after {
  color: #2563a7;
  transform: rotate(45deg);
}

.table-settings-submenu {
  display: grid;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 4px;
  background: #fbfdff;
}

.table-settings-flyout {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 42;
  display: none;
  gap: 6px;
  width: min(270px, calc(100vw - 48px));
  max-height: min(390px, calc(100vh - 96px));
  overflow: auto;
  border: 1px solid rgba(205, 218, 232, 0.96);
  border-radius: 10px;
  padding: 7px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(16, 31, 52, 0.14);
}

.table-settings-nested[open] > .table-settings-flyout {
  display: grid;
}

.table-settings-nested.flyout-right > .table-settings-flyout {
  right: auto;
  left: calc(100% + 8px);
}

.table-settings-nested.flyout-left > .table-settings-flyout {
  right: calc(100% + 8px);
  left: auto;
}

.table-settings-nested.flyout-inline > .table-settings-flyout {
  position: static;
  width: 100%;
  max-height: min(300px, calc(100vh - 180px));
  margin-top: 4px;
  box-shadow: none;
}

.table-settings-flyout .table-column-menu,
.table-settings-flyout .table-settings-submenu {
  border: 0;
  padding: 0;
  background: transparent;
}

.table-column-flyout .table-settings-action.subtle {
  border-top: 1px solid #edf2f7;
  border-radius: 0;
  padding-top: 8px;
}

.table-settings-submenu .table-settings-action {
  min-height: 32px;
  padding-left: 18px;
  color: #526b81;
  font-size: 12.5px;
  font-weight: 500;
}

.table-column-menu {
  display: grid;
  gap: 3px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 6px;
  background: #fbfdff;
}

.table-column-menu label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 28px;
  border-radius: 6px;
  padding: 5px 7px;
  color: #34485d;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.table-column-menu label:hover {
  background: #eef6ff;
}

.table-column-menu input {
  width: 14px;
  height: 14px;
  accent-color: #1f6fba;
}

.production-focus-card .table-wrap {
  overflow: hidden;
}

.production-focus-card .table-wrap table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.production-focus-card table {
  white-space: normal;
}

.production-focus-card th,
.production-focus-card td {
  padding: 10px 8px;
  font-size: 13px;
  line-height: 1.35;
}

.production-focus-card th:nth-child(1),
.production-focus-card td:nth-child(1) {
  width: 32%;
}

.production-focus-card th:nth-child(2),
.production-focus-card td:nth-child(2) {
  width: 30%;
}

.production-focus-card th:nth-child(3),
.production-focus-card td:nth-child(3) {
  width: 20%;
}

.production-focus-card th:nth-child(4),
.production-focus-card td:nth-child(4) {
  width: 18%;
}

.production-focus-card .mini-bar {
  min-width: 0;
}

.production-focus-card .pill {
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  text-align: center;
  white-space: normal;
}

.production-focus-card .action-cell {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
}

.production-focus-card .action-cell .mini-action {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.production-focus-card .action-cell .mini-action span {
  display: none;
}

.production-focus-card .action-cell .mini-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th,
td {
  border-top: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

/* td alignment matching th column classes */
td.col-numeric {
  text-align: right;
}

td.col-center {
  text-align: center;
}

tbody tr:first-child td {
  border-top: 0;
}

.attention-row td {
  background: #fff8eb;
}

.inventory-health-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 18px;
}

.inventory-health-grid .kitchen-kpi strong {
  font-size: 21px;
}

.department-kpi-grid {
  margin-bottom: 14px;
}

.department-control-card table td {
  vertical-align: top;
}

.department-control-card td strong {
  color: var(--ink);
}

.department-control-card .row-actions {
  justify-content: flex-start;
}

.department-attention-table {
  margin-top: 16px;
}

.department-attention-table h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 16px;
}

.inventory-alert-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f1d2a2;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  background: #fff8eb;
}

.inventory-alert-strip strong {
  color: var(--ink);
}

.inventory-alert-strip span {
  color: var(--muted);
  font-weight: 700;
}

.pos-stock-filter-tabs,
.pos-stock-request-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.pos-stock-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-stock-filter-tabs button.active {
  border-color: #9fc3ea;
  background: var(--blue-tint);
  color: var(--blue);
}

.pos-stock-filter-tabs strong {
  min-width: 24px;
  border-radius: 999px;
  padding: 2px 7px;
  background: #edf2f8;
  color: var(--ink);
  text-align: center;
  font-size: 11px;
}

.pos-stock-compact-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}

.pos-stock-compact-toolbar .pos-stock-filter-tabs {
  margin-bottom: 0;
  gap: 8px;
}

.pos-stock-compact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  margin-left: auto;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.pos-stock-compact-actions .mini-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pos-stock-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-stock-count-pill strong {
  color: var(--ink);
  font-size: 14px;
}

.pos-stock-count-pill em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.pos-stock-request-bar {
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #cde4da;
  border-radius: 8px;
  background: #f4fbf8;
}

.pos-stock-request-bar > div:first-child {
  display: grid;
  gap: 3px;
}

.pos-stock-request-bar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pos-stock-request-bar .row-actions {
  justify-content: flex-end;
}

.current-pos-stock-action-cell {
  min-width: 0;
}

.current-pos-stock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(62px, 1fr));
  gap: 6px;
  align-items: center;
  width: 100%;
}

.current-pos-stock-actions .pos-icon-action.labelled {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  justify-content: center;
  padding: 0 8px;
}

.current-pos-stock-actions .pos-icon-action.labelled svg {
  width: 15px;
  height: 15px;
}

.current-pos-stock-actions .pos-icon-action.labelled span {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-stock-request-helper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  padding: 9px 12px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #f8fbff;
  color: #334155;
}

.pos-stock-request-helper strong {
  color: #122033;
  font-size: 13px;
  font-weight: 900;
}

.pos-stock-request-helper span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.pos-stock-request-helper em {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e9f7f0;
  color: #0c7659;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.pos-stock-request-select-cell {
  text-align: center;
}

.pos-stock-request-toggle,
.pos-stock-request-state {
  display: inline-grid;
  justify-items: center;
  gap: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.pos-stock-request-toggle {
  cursor: pointer;
}

.pos-stock-request-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pos-stock-request-toggle span,
.pos-stock-request-state svg {
  width: 26px;
  height: 26px;
}

.pos-stock-request-toggle span {
  display: grid;
  place-items: center;
  border: 1px solid #bdd2ec;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.pos-stock-request-toggle span svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.pos-stock-request-toggle input:checked + span,
.pos-stock-request-toggle.selected span {
  border-color: #16805f;
  background: #16805f;
  color: #ffffff;
}

.pos-stock-request-toggle input:checked + span svg,
.pos-stock-request-toggle.selected span svg {
  opacity: 1;
  transform: scale(1);
}

.pos-stock-request-toggle.selected em,
.pos-stock-request-state.requested em {
  color: #0c7659;
}

.pos-stock-request-state.requested svg {
  padding: 5px;
  border-radius: 8px;
  background: #e9f7f0;
  color: #16805f;
}

.pos-stock-request-state.muted {
  color: #94a3b8;
  font-size: 14px;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] tr.selected-request-row td {
  background: #f2fbf7;
}

.table-wrap[data-table-id="inventory-current-pos-stock"] tr.selected-request-row td:first-child {
  box-shadow: inset 4px 0 0 #16805f;
}

@media (max-width: 760px) {
  .pos-stock-request-helper {
    grid-template-columns: 1fr;
  }

  .pos-stock-request-helper em {
    justify-self: start;
  }
}

.table-input {
  width: 100%;
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.compact-input {
  max-width: 120px;
}

.action-list {
  margin: 0;
  padding-left: 20px;
}

.action-list li {
  margin: 10px 0;
}

.button-grid,
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.report-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.report-category-grid button {
  display: grid;
  gap: 3px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.report-category-grid button strong,
.report-category-grid button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-category-grid button strong {
  font-size: 13px;
  font-weight: 700;
}

.report-category-grid button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.report-category-grid button.active {
  border-color: rgba(37, 99, 167, 0.55);
  background: #eef6ff;
  color: #1d4e86;
}

.report-category-grid button.active span {
  color: #456783;
}

.report-query-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 0.22fr)) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.report-query-bar.has-store-filter {
  grid-template-columns: repeat(2, minmax(140px, 0.18fr)) minmax(180px, 0.28fr) minmax(260px, 1fr) auto;
}

.report-query-bar label {
  display: grid;
  gap: 5px;
  color: #667485;
  font-size: 12px;
  font-weight: 600;
}

.report-query-bar input,
.report-query-bar select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d2deeb;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
}

.report-query-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.report-query-actions .icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.report-query-actions .icon-action svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.report-query-actions .report-search-icon {
  width: 38px;
  min-width: 38px;
  padding-inline: 0;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.settings-layout-simple {
  gap: 14px;
}

.settings-page-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: var(--shadow-soft);
}

.settings-page-head div {
  display: grid;
  gap: 5px;
}

.settings-page-head h2 {
  font-size: 28px;
}

.settings-page-head span {
  color: var(--muted);
}

.settings-page-head small {
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
  background: #ffffff;
}

.settings-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.settings-hero-main {
  display: grid;
  gap: 8px;
  align-content: center;
}

.settings-hero-main h2 {
  font-size: 30px;
}

.settings-hero-main span {
  color: var(--muted);
  line-height: 1.5;
}

.settings-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.settings-checklist div {
  display: grid;
  gap: 5px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.settings-checklist div.done {
  border-top: 4px solid var(--mint);
}

.settings-checklist div.pending {
  border-top: 4px solid var(--gold);
}

.settings-checklist strong {
  color: var(--brand);
  font-size: 12px;
  text-transform: uppercase;
}

.settings-checklist span {
  color: var(--ink);
  font-weight: 900;
  line-height: 1.25;
}

.settings-checklist small {
  color: var(--muted);
  font-weight: 800;
}

.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.settings-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon detail"
    "status status";
  gap: 4px 10px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.settings-card svg {
  grid-area: icon;
  align-self: start;
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.settings-card strong {
  grid-area: title;
  font-size: 15px;
}

.settings-card span {
  grid-area: detail;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.settings-card small {
  grid-area: status;
  align-self: end;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef2f7;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
  white-space: normal;
}

.setup-workspace,
.device-workspace,
.backup-workspace {
  display: grid;
  gap: 14px;
}

.setup-readiness-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.setup-readiness-score {
  display: grid;
  min-height: 118px;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(177, 223, 202, 0.95);
  border-radius: 8px;
  padding: 14px;
  background: #f3fbf7;
  color: #0b7a4f;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.setup-readiness-score strong {
  color: #071a2e;
  font-size: 34px;
  line-height: 1;
}

.setup-readiness-score span {
  color: #64748b;
  font-weight: 900;
}

.setup-readiness-score.action-score {
  cursor: pointer;
}

.setup-step-grid,
.device-url-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.setup-step-card,
.device-url-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.setup-step-card {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
}

.setup-step-card.is-ready {
  border-color: rgba(177, 223, 202, 0.95);
}

.setup-step-card.needs-check {
  border-color: rgba(245, 196, 115, 0.95);
  background: #fffaf1;
}

.setup-step-card .ghost-button {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: start;
}

.setup-step-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eef4fb;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.setup-step-card strong,
.device-url-card strong {
  display: block;
  color: #071a2e;
  font-size: 13px;
  line-height: 1.25;
}

.setup-step-card span,
.device-url-card span,
.device-url-card small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  line-height: 1.4;
}

.setup-step-card span {
  display: none;
}

.device-url-card code {
  display: block;
  overflow: auto;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f7fafd;
  color: #203147;
  font-size: 12px;
  white-space: nowrap;
}

.settings-card.active,
.settings-card:hover {
  border-color: #9fc6f1;
  background: #f3f8ff;
}

.settings-card.active small {
  background: #dff4ed;
  color: var(--mint);
}

.general-settings-workspace {
  display: grid;
  gap: 12px;
}

.general-settings-tabs {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.general-settings-tabs .settings-card {
  min-height: 98px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.general-settings-tabs .settings-card small {
  width: max-content;
}

.general-settings-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.import-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.import-export-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.import-export-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.import-export-card strong,
.import-export-card span,
.import-export-card small {
  overflow-wrap: anywhere;
}

.import-export-card span,
.import-export-card small {
  color: var(--muted);
  font-weight: 800;
}

.import-export-card small {
  font-size: 12px;
}

.import-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .general-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .general-settings-tabs {
    grid-template-columns: 1fr;
  }
}

.settings-section-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.settings-section-picker strong,
.settings-section-picker span {
  display: block;
}

.settings-section-picker span {
  color: var(--muted);
}

.settings-section-picker label {
  display: grid;
  gap: 5px;
  min-width: 240px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-section-picker select {
  width: 100%;
}

.inventory-panels {
  min-width: 0;
}

.login-wrap {
  display: grid;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(255, 204, 98, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 204, 98, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(255, 188, 82, 0.22), transparent 28%),
    linear-gradient(135deg, #5a0515 0%, #7b071f 42%, #4a0615 100%);
  background-size: auto, 54px 54px, auto, auto;
}

.login-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr);
  gap: 0;
  width: min(1180px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 48px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(241, 190, 91, 0.68);
  border-radius: 18px;
  background: rgba(255, 252, 245, 0.92);
  box-shadow: 0 28px 80px rgba(28, 5, 10, 0.34);
}

.login-image-panel {
  min-width: 0;
  min-height: 100%;
  background: #650719;
}

.login-image-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-showcase {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  padding: 62px 46px 46px;
  color: #781323;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(72, 4, 18, 0.78), rgba(123, 7, 31, 0.88)),
    #69091b;
  overflow: hidden;
}

.login-showcase::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(241, 190, 91, 0.46);
  border-radius: 14px;
  pointer-events: none;
}

.login-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 68%, rgba(241, 190, 91, 0.18) 68% 69%, transparent 69% 100%),
    linear-gradient(45deg, transparent 0 75%, rgba(241, 190, 91, 0.14) 75% 76%, transparent 76% 100%);
  pointer-events: none;
}

.login-lanterns {
  position: absolute;
  top: 0;
  left: 42px;
  right: 42px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.login-lanterns span {
  position: relative;
  width: 2px;
  height: 118px;
  background: linear-gradient(#d99a31, rgba(217, 154, 49, 0));
}

.login-lanterns span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 30px;
  height: 44px;
  border: 1px solid rgba(255, 213, 126, 0.82);
  border-radius: 14px 14px 18px 18px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 223, 130, 0.92), rgba(255, 160, 52, 0.38) 36%, rgba(129, 18, 35, 0.42) 70%),
    rgba(85, 6, 20, 0.8);
  box-shadow: 0 0 22px rgba(255, 191, 75, 0.34);
  transform: translateX(-50%);
}

.login-arch-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(450px, 100%);
  border: 2px solid rgba(201, 139, 38, 0.78);
  border-radius: 120px 120px 18px 18px / 86px 86px 18px 18px;
  padding: 88px 34px 54px;
  background:
    linear-gradient(180deg, rgba(255, 249, 234, 0.98), rgba(255, 235, 195, 0.95));
  box-shadow:
    inset 0 0 0 5px rgba(255, 252, 243, 0.88),
    0 20px 40px rgba(37, 4, 11, 0.28);
}

.login-arch-card::after {
  content: "";
  width: 170px;
  height: 1px;
  margin: 22px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(120, 19, 35, 0.65), transparent);
}

.login-arch-mark {
  display: inline-grid;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: #7d1024;
  color: #ffeac1;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 5px rgba(244, 196, 90, 0.34);
}

.login-arch-card strong {
  display: block;
  color: #741424;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.04;
}

.login-arch-card span {
  display: block;
  margin-top: 6px;
  color: #7f1d2d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
}

.login-arch-card small {
  display: block;
  color: #8f2b39;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.login-sweets-tray {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 13px;
  width: min(430px, 88%);
  border-bottom: 12px solid rgba(196, 139, 46, 0.72);
  border-radius: 0 0 50% 50%;
  padding: 0 20px 10px;
  filter: drop-shadow(0 16px 18px rgba(44, 5, 12, 0.28));
}

.login-sweets-tray span {
  display: block;
  width: 72px;
  height: 60px;
  border: 1px solid rgba(255, 228, 168, 0.72);
  box-shadow: inset 0 8px 20px rgba(255, 255, 255, 0.38);
}

.login-sweets-tray .sweet-round {
  border-radius: 50%;
  background: linear-gradient(145deg, #f2a33c, #d8761e);
}

.login-sweets-tray .sweet-square {
  border-radius: 12px;
  background: linear-gradient(145deg, #f6dfb1, #e7ba68);
}

.login-sweets-tray .pale {
  background: linear-gradient(145deg, #fff1ce, #e8c489);
}

.login-sweets-tray .saffron {
  background: linear-gradient(145deg, #f2c344, #ce8123);
}

.login-entry {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: clamp(28px, 5vw, 60px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 242, 0.98));
}

.login-stage .login-panel {
  display: grid;
  gap: 17px;
  width: 100%;
  max-width: 420px;
  justify-self: center;
  border: 1px solid rgba(205, 157, 80, 0.42);
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 36px);
  background: #ffffff;
  box-shadow: 0 22px 50px rgba(88, 21, 35, 0.12);
  backdrop-filter: none;
}

.login-wrap > .login-panel {
  width: min(460px, 100%);
}

.password-change-wrap {
  overflow: auto;
  padding: clamp(18px, 4vw, 34px);
}

.password-change-wrap .first-login-panel {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  border: 1px solid rgba(205, 157, 80, 0.38);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 247, 0.98));
  box-shadow: 0 24px 62px rgba(38, 6, 13, 0.18);
}

.password-change-wrap .login-brand {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 2px;
}

.password-change-wrap .login-brand img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(124, 16, 38, 0.14);
}

.password-change-wrap .login-brand h2 {
  margin: 2px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.08;
}

.password-change-wrap .login-brand .eyebrow {
  margin-bottom: 4px;
}

.password-setup-note {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(205, 157, 80, 0.34);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 248, 235, 0.96), rgba(255, 255, 255, 0.96));
  color: #6f1425;
}

.password-setup-note strong {
  color: #8d2639;
  font-size: 13px;
  font-weight: 760;
  text-transform: uppercase;
}

.password-setup-note span,
.password-rule-note {
  color: #647286;
  font-size: 13px;
  line-height: 1.45;
}

.password-change-wrap .login-panel label {
  gap: 7px;
  color: #667485;
  font-size: 13px;
  font-weight: 750;
}

.password-change-wrap .login-panel input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d8e1ec;
  border-radius: 12px;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.password-change-wrap .login-panel input:focus {
  border-color: rgba(141, 38, 57, 0.5);
  outline: 3px solid rgba(211, 157, 64, 0.18);
  background: #ffffff;
}

.password-change-wrap .login-panel input:disabled {
  border-color: #e0e7f0;
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
  color: #415164;
  opacity: 1;
}

.password-change-wrap .password-field input {
  padding-right: 58px;
}

.password-change-wrap .password-field button {
  right: 7px;
}

.password-rule-note {
  margin: -2px 0 2px;
}

.password-change-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.password-change-actions .primary-button,
.password-change-actions .ghost-button {
  min-height: 48px;
  border-radius: 14px;
}

.login-panel h2 {
  margin-bottom: 6px;
  font-size: 28px;
}

.login-brand {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.login-stage .login-brand {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 8px;
  text-align: center;
}

.login-brand img {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 3px;
  object-fit: contain;
}

.login-brand strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
}

.login-stage .login-brand strong {
  color: #7c1026;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.login-stage .login-brand span {
  color: var(--muted);
  font-size: 14px;
}

.login-stage .login-panel span {
  color: var(--muted);
}

.login-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.login-panel label.login-icon-field {
  gap: 0;
}

.login-field-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.login-input-shell {
  position: relative;
  display: block;
}

.login-input-shell > svg {
  position: absolute;
  top: 50%;
  left: 22px;
  z-index: 1;
  width: 22px;
  height: 22px;
  color: #8d2639;
  pointer-events: none;
  transform: translateY(-50%);
}

.login-stage .login-panel select,
.login-stage .login-panel input {
  width: 100%;
  border: 1px solid #eadfd8;
  border-radius: 12px;
  padding: 15px 17px;
  background: #fffdf9;
  color: var(--ink);
  font-size: 15px;
}

.login-stage .login-panel .login-input-shell input {
  min-height: 52px;
  padding-left: 68px;
}

.login-stage .login-panel input:focus {
  border-color: rgba(141, 38, 57, 0.55);
  outline: 3px solid rgba(211, 157, 64, 0.18);
  background: #ffffff;
}

.login-panel .primary-button {
  justify-self: stretch;
  min-width: 0;
  border-radius: 12px;
  margin-top: 2px;
  background: linear-gradient(135deg, #7b071f, #a90e31);
  box-shadow: 0 14px 26px rgba(123, 7, 31, 0.22);
  text-transform: none;
}

.login-panel .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(123, 7, 31, 0.28);
}

.password-field {
  position: relative;
  display: block;
}

.login-stage .login-panel .password-field input {
  min-height: 52px;
  padding-right: 58px;
  padding-left: 68px;
}

.password-field button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: #987f73;
  transform: translateY(-50%);
  box-shadow: none;
}

.password-field button:hover {
  background: #fff3e3;
  color: #7b071f;
}

.password-field button svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.1;
}

.login-stage .login-reset-panel {
  width: min(430px, 100%);
  justify-self: center;
  border: 1px solid rgba(205, 157, 80, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 28px rgba(88, 21, 35, 0.08);
  backdrop-filter: none;
}

.login-stage .login-reset-panel summary {
  cursor: pointer;
  padding: 13px 16px;
  color: #8d2639;
  font-weight: 650;
  text-align: center;
}

.login-stage .login-reset-panel form {
  display: grid;
  gap: 14px;
  border-top: 1px solid #f0e3d8;
  padding: 18px;
}

.login-stage .login-reset-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.login-stage .login-reset-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.login-stage .login-reset-panel input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: var(--ink);
}

.settings-menu {
  display: grid;
  align-self: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #eaf6fb;
  box-shadow: var(--shadow);
}

.settings-menu button {
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.settings-menu button.active,
.settings-menu button:hover {
  background: #ffffff;
}

.settings-menu span {
  color: var(--muted);
  font-size: 12px;
}

.settings-panels {
  display: grid;
  gap: 16px;
}

.template-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.template-manager-head > div:first-child {
  display: grid;
  gap: 4px;
}

.template-manager-head span,
.template-default-grid span,
.template-action-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-manager-head strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.template-manager-head small,
.template-default-grid small {
  color: var(--muted);
  line-height: 1.35;
}

.template-manager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.template-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.template-workflow-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  min-height: 72px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.template-workflow-card.needs-check {
  border-color: #f4c37b;
  background: #fffaf1;
}

.template-workflow-card span,
.template-results-head span,
.template-save-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-workflow-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-workflow-card small {
  display: none;
  color: var(--muted);
  line-height: 1.35;
}

.template-workflow-card b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  border-radius: 999px;
  padding: 4px 9px;
  background: #e9f7ef;
  color: #08733f;
  font-size: 11px;
  font-weight: 900;
}

.template-workflow-card.needs-check b {
  background: #fff4e2;
  color: #9a5a00;
}

.template-default-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.template-default-grid div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.template-default-grid strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.template-default-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.template-default-grid span b {
  border-radius: 999px;
  padding: 2px 7px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 10px;
}

.template-default-selector-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.template-unsaved-banner {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #f1c27b;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff8eb;
}

.template-unsaved-banner.show {
  display: grid;
}

.template-unsaved-banner strong {
  color: #9a3412;
  font-size: 13px;
}

.template-unsaved-banner span {
  color: #7c5a2e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.template-default-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.template-default-selector-grid label,
.template-outlet-reset {
  display: grid;
  gap: 6px;
}

.template-default-selector-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.template-purpose-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.template-purpose-map button {
  appearance: none;
  display: grid;
  gap: 4px;
  min-height: 92px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.template-purpose-map button:hover,
.template-purpose-map button:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(33, 47, 67, 0.12);
  outline: none;
}

.template-purpose-map span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.template-purpose-map span b {
  border-radius: 999px;
  padding: 2px 7px;
  background: #eef6ff;
  color: var(--blue);
  font-size: 10px;
}

.template-purpose-map strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.template-purpose-map small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.template-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.template-preview-sidebar {
  position: static;
  min-width: 0;
}

.template-live-panel {
  display: grid;
  gap: 0;
  margin-bottom: 0;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  background: #fbfdff;
}

.template-live-drawer {
  overflow: hidden;
}

.template-live-drawer summary {
  list-style: none;
  cursor: pointer;
}

.template-live-drawer summary::-webkit-details-marker {
  display: none;
}

.template-live-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 11px 14px;
  background: #f8fbff;
}

.template-live-summary > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.template-live-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.template-live-summary strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.template-live-summary b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: #ffffff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.template-live-drawer[open] .template-live-summary b {
  background: #fff4f4;
}

.template-live-content {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.template-live-head,
.template-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.template-live-head > div,
.template-section-head > div {
  display: grid;
  gap: 4px;
}

.template-live-head span,
.template-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.template-live-head strong,
.template-section-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.template-live-head small,
.template-section-head small {
  color: var(--muted);
  line-height: 1.35;
}

.template-live-actions,
.template-preview-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-preview-switch button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.template-preview-switch button.active {
  border-color: var(--brand);
  background: #fff4f4;
  color: var(--brand);
}

.template-live-stage {
  overflow: auto;
  max-height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #eef4fb;
}

.template-visibility-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.template-visibility-groups {
  display: grid;
  gap: 12px;
}

.template-visibility-group {
  display: grid;
  gap: 8px;
}

.template-visibility-group > strong {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}

.template-visibility-checks {
  margin-top: 0;
}

.template-live-print {
  display: grid;
  justify-content: center;
}

.template-live-print .thermal-bill {
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}

.template-pdf-preview {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  margin: 0 auto;
  border-top: 6px solid var(--receipt-accent, var(--brand));
  padding: 18px;
  background: #ffffff;
  color: var(--ink);
  font-size: var(--receipt-pdf-font-size, 14px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}

.template-pdf-logo-band {
  display: grid;
  min-height: 74px;
  place-items: center;
  border-radius: 8px;
  background: #fff7f2;
}

.template-pdf-logo-band img {
  max-width: var(--receipt-pdf-logo-width, 220px);
  max-height: var(--receipt-pdf-logo-height, 72px);
  object-fit: contain;
}

.template-pdf-logo-band span {
  color: var(--receipt-accent, var(--brand));
  font-weight: 900;
}

.template-pdf-preview h3 {
  margin: 0;
  text-align: center;
}

.template-pdf-preview p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.template-pdf-info {
  display: grid;
  grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr);
  gap: 8px 12px;
  border-block: 1px dashed #cbd6e2;
  padding-block: 12px;
}

.template-pdf-info span,
.template-pdf-items small,
.template-pdf-total span,
.template-pdf-preview footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-pdf-info strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.template-pdf-items {
  display: grid;
  gap: 8px;
}

.template-pdf-items div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: 8px;
}

.template-pdf-items span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.template-pdf-items small {
  grid-column: 1 / -1;
}

.template-pdf-items b {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

.template-pdf-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}

.template-pdf-total strong {
  color: var(--brand);
  font-size: 20px;
}

.template-pdf-preview footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.template-pdf-preview.thermal-pdf-preview {
  gap: 7px;
  width: min(100%, 250px);
  border: 1px solid #111827;
  border-top: 1px solid #111827;
  border-radius: 0;
  padding: 12px;
  background: #ffffff;
  color: #111827;
  font-family: Arial, "Microsoft Sans Serif", "Segoe UI", sans-serif;
  font-weight: 400;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}

.thermal-preview-center {
  display: grid;
  gap: 2px;
  text-align: center;
}

.thermal-preview-center strong,
.thermal-preview-center b {
  font-size: 12px;
}

.thermal-preview-center span,
.thermal-preview-row span,
.thermal-preview-item small,
.thermal-pdf-preview footer span,
.thermal-preview-qr span {
  color: #111827;
  font-size: 10px;
  font-weight: 700;
}

.thermal-preview-line {
  border-top: 1px dashed #111827;
  height: 0;
}

.thermal-preview-row,
.thermal-preview-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: baseline;
}

.thermal-preview-row strong,
.thermal-preview-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 10px;
  text-align: right;
}

.thermal-preview-head span,
.thermal-preview-head strong,
.thermal-preview-total span,
.thermal-preview-total strong {
  font-weight: 900;
}

.thermal-preview-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 10px;
  font-weight: 900;
}

.thermal-preview-item small {
  grid-column: 1 / -1;
}

.thermal-preview-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #111827;
  padding-top: 7px;
}

.thermal-preview-total strong {
  color: #111827;
  font-size: 14px;
}

.template-qr-preview.thermal-preview-qr {
  gap: 5px;
  justify-items: center;
  color: #111827;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.template-qr-preview {
  justify-self: center;
  display: grid;
  place-items: center;
}

.template-qr-preview .dynamic-qr-svg {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}

.template-whatsapp-preview {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
  margin: 0 auto;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #e8f7ef, #ffffff);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}

.template-whatsapp-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-whatsapp-vars span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  color: #08733f;
  font-size: 11px;
  font-weight: 900;
}

.template-blueprint {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.whatsapp-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.whatsapp-blueprint-grid.compact {
  grid-template-columns: 1fr;
}

.whatsapp-blueprint-list {
  display: grid;
  gap: 10px;
}

.whatsapp-blueprint-list.compact {
  gap: 8px;
}

.whatsapp-meta-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
  gap: 12px;
  align-items: end;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.whatsapp-meta-guide > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.whatsapp-meta-guide span,
.whatsapp-meta-copy-head span,
.whatsapp-meta-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.whatsapp-meta-guide strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.28;
}

.whatsapp-meta-variable-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.whatsapp-meta-variable-control select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.whatsapp-meta-variable-control small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.whatsapp-meta-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whatsapp-meta-guide li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #d7eadf;
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
}

.whatsapp-meta-guide b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #08733f;
  color: #ffffff;
  font-size: 12px;
}

.whatsapp-meta-guide li span {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
}

.whatsapp-blueprint-card {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 0;
  background: #ffffff;
}

.whatsapp-blueprint-card.ready {
  border-color: #bde5cd;
  background: #ffffff;
}

.whatsapp-blueprint-card.needs-action {
  border-color: #f1d6a6;
  background: #ffffff;
}

.whatsapp-blueprint-card[open] {
  box-shadow: var(--shadow-soft);
}

.whatsapp-blueprint-card summary {
  list-style: none;
  cursor: pointer;
}

.whatsapp-blueprint-card summary::-webkit-details-marker {
  display: none;
}

.whatsapp-blueprint-card summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  min-width: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.whatsapp-blueprint-card[open] summary::after {
  content: "-";
}

.whatsapp-blueprint-card-head {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(340px, 1.6fr) auto 28px;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
}

.whatsapp-blueprint-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.whatsapp-blueprint-fields {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(4, minmax(74px, 0.7fr));
  min-width: 0;
  gap: 6px;
}

.whatsapp-blueprint-fields span {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid #e1eaf3;
  border-radius: 8px;
  padding: 7px 8px;
  background: #f8fbff;
}

.whatsapp-blueprint-fields b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.whatsapp-blueprint-fields em {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-blueprint-card-head span,
.whatsapp-blueprint-meta span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.whatsapp-blueprint-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.whatsapp-blueprint-summary-meta {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
}

.whatsapp-blueprint-summary-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.whatsapp-blueprint-summary-meta > span.ok {
  border-color: #bde5cd;
  background: #f2fbf6;
  color: #08733f;
}

.whatsapp-blueprint-summary-meta > span.warn {
  border-color: #f1d6a6;
  background: #fff8ec;
  color: #9a5a00;
}

.whatsapp-blueprint-details {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px;
}

.whatsapp-meta-copy-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.whatsapp-meta-copy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.whatsapp-meta-copy-head > div:first-child {
  display: grid;
  min-width: min(100%, 260px);
  gap: 4px;
}

.whatsapp-meta-copy-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.whatsapp-meta-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.whatsapp-meta-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid #dce8f3;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.whatsapp-meta-field strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.whatsapp-meta-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.whatsapp-blueprint-meta div {
  display: grid;
  gap: 2px;
  min-width: 100px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
}

.whatsapp-blueprint-meta strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.template-blueprint-head,
.template-blueprint-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.template-blueprint-head > div:first-child {
  display: grid;
  gap: 3px;
}

.template-blueprint-head span,
.template-body-copy span,
.template-blueprint-foot span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-blueprint-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.template-blueprint-actions,
.template-ready-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-blueprint-actions .mini-action {
  white-space: normal;
}

.template-ready-pill {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.template-ready-pill.ok {
  background: #e9f7ef;
  color: #08733f;
}

.template-ready-pill.warn {
  background: #fff4e2;
  color: #9a5a00;
}

.template-validator-grid,
.template-meta-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.template-validator-grid.compact-checks {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.template-validator-grid.compact-checks div {
  padding: 8px 9px;
}

.template-validator-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.template-validator-grid div.ok {
  border-color: #bde5cd;
  background: #f2fbf6;
}

.template-validator-grid div.warn {
  border-color: #f4c37b;
  background: #fffaf1;
}

.template-validator-grid span,
.template-meta-fields label span,
.template-category-head span,
.template-outlet-row.head span,
.template-history-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-validator-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
}

.template-validator-grid small {
  color: var(--muted);
  line-height: 1.35;
}

.template-meta-fields label {
  display: grid;
  gap: 6px;
}

.template-meta-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.template-body-copy,
.template-variable-map {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.template-body-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}

.template-body-copy code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

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

.template-variable-map div {
  display: grid;
  gap: 3px;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  cursor: pointer;
}

.template-variable-map b {
  color: var(--brand);
  font-size: 14px;
}

.template-variable-map strong {
  color: var(--ink);
  font-size: 13px;
}

.template-variable-map small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: normal;
}

.template-settings-form {
  gap: 10px;
}

.template-setup-section {
  overflow: hidden;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  background: #ffffff;
}

.template-setup-section[open] {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.template-setup-section summary {
  display: grid;
  grid-template-columns: minmax(86px, 0.22fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  background: #f8fbff;
  cursor: pointer;
}

.template-setup-section summary::marker {
  color: var(--muted);
}

.template-setup-section summary span {
  border-radius: 999px;
  padding: 5px 9px;
  background: #edf2f7;
  color: #5b6777;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.template-setup-section summary strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.template-setup-section summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.template-setup-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.template-setup-body > .template-outlet-panel,
.template-setup-body > .template-history-panel,
.template-setup-body > .template-branding-panel,
.template-setup-body > .template-blueprint {
  border-color: #edf2f7;
  box-shadow: none;
}

.template-health-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.template-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.template-health-grid div,
.template-whatsapp-control-strip div {
  display: grid;
  gap: 4px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.template-health-grid div.ok,
.template-whatsapp-control-strip div.ok {
  border-color: #bde8d3;
  background: #f3fbf7;
}

.template-health-grid div.warn,
.template-whatsapp-control-strip div.warn {
  border-color: #f4c37b;
  background: #fffaf1;
}

.template-health-grid span,
.template-whatsapp-control-strip div span,
.template-outlet-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.template-health-grid strong,
.template-whatsapp-control-strip div strong,
.template-outlet-summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-health-grid small,
.template-whatsapp-control-strip div small,
.template-outlet-summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.template-quick-test-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.template-quick-test-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.template-quick-test-grid svg {
  width: 18px;
  height: 18px;
}

.template-whatsapp-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.template-outlet-summary {
  display: grid;
  gap: 6px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.template-outlet-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-outlet-summary small {
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  font-weight: 800;
}

.template-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.template-toolbar.compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.template-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-type-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.template-type-tabs span {
  white-space: nowrap;
}

.template-type-tabs button.active {
  border-color: var(--brand);
  background: #fff4f4;
  color: var(--brand);
}

.template-type-tabs b {
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 7px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 12px;
}

.template-type-tabs button.active b {
  background: #ffffff;
  color: var(--brand);
}

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

.template-readiness-grid div {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.template-readiness-grid strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
}

.template-readiness-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.template-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.template-results-head > div {
  display: grid;
  gap: 3px;
}

.template-results-head strong {
  color: var(--ink);
  font-size: 16px;
}

.template-category-section {
  display: grid;
  gap: 10px;
}

.template-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.template-category-head > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.template-category-head strong {
  color: var(--ink);
  font-size: 15px;
}

.template-category-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.template-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.template-format-card {
  display: grid;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}

.template-format-card[data-template-default-group]:hover {
  border-color: #cbd6e2;
  background: #fbfdff;
}

.template-card-control {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  grid-row: 1 / span 2;
  justify-content: center;
  gap: 8px;
}

.template-format-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(168, 49, 49, 0.12);
}

.template-format-card input {
  width: 18px;
  height: 18px;
}

.template-row-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 28px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.template-row-pick input {
  margin: 0;
}

.template-card-main,
.template-card-detail {
  display: grid;
  min-width: 0;
}

.template-card-main {
  gap: 6px;
}

.template-card-detail {
  grid-column: 2;
  gap: 4px;
}

.template-card-detail strong {
  overflow: hidden;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-detail span,
.template-card-detail small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.template-default-badge,
.template-select-hint {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.template-default-badge {
  background: #e9f7ef;
  color: #08733f;
}

.template-select-hint {
  background: #edf2f7;
  color: var(--muted);
}

.template-card-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.template-card-head span,
.template-card-head small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-head strong {
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.template-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-card-meta span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 8px;
  background: #edf2f7;
  color: #5b6777;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.template-card-side {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  min-width: 132px;
  justify-content: flex-end;
}

.template-card-actions .danger-mini {
  color: var(--brand);
}

.template-card-actions .saved-mini {
  border-color: #bde8d3;
  background: #f3fbf7;
  color: #08733f;
}

.template-format-preview {
  grid-column: 1 / -1;
  border-top: 1px dashed #d5dee9;
  padding-top: 8px;
}

.template-format-preview summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.template-format-preview summary::marker {
  color: #8a96a6;
}

.template-format-preview summary b {
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 11px;
}

.template-format-preview-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.template-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.template-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.template-preview-head b {
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 11px;
}

.template-mock {
  overflow: hidden;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.template-mock-receipt {
  display: grid;
  gap: 6px;
  width: min(100%, 210px);
  min-height: 190px;
  margin: 0 auto;
  padding: 12px 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.04)),
    #ffffff;
  font-family: "Courier New", monospace;
}

.template-mock-receipt.compact {
  width: min(100%, 164px);
  min-height: 176px;
}

.mock-center {
  color: #4f5c6c;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.mock-center.strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.mock-center.muted,
.mock-row.muted {
  color: #7a8796;
}

.mock-dash {
  border-top: 1px dashed #b8c4d1;
}

.mock-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.mock-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-row b {
  flex: 0 0 auto;
}

.mock-row.total {
  font-size: 12px;
  font-weight: 900;
}

.template-mock-doc {
  display: grid;
  gap: 9px;
  min-height: 190px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.template-mock-doc.compact {
  min-height: 174px;
}

.mock-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px solid #d9e5ef;
  padding-bottom: 8px;
}

.mock-doc-head b {
  color: var(--brand);
  font-size: 13px;
}

.mock-doc-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.mock-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mock-two-col span {
  border-radius: 6px;
  padding: 8px;
  background: #edf2f7;
  color: #5b6777;
  font-size: 11px;
  font-weight: 800;
}

.mock-table-row {
  display: grid;
  grid-template-columns: 1fr 0.52fr 0.52fr;
  gap: 6px;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid #edf2f7;
  color: #4f5c6c;
  font-size: 11px;
}

.mock-table-row.head {
  border-radius: 6px;
  border-bottom: 0;
  padding: 0 6px;
  background: #fff4f4;
  color: var(--brand);
  font-weight: 900;
}

.mock-table-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-doc-total {
  justify-self: end;
  border-radius: 6px;
  padding: 7px 9px;
  background: #e9f7ef;
  color: #08733f;
  font-size: 11px;
  font-weight: 900;
}

.template-mock-doc.transfer .mock-table-row.head {
  background: #eef6ff;
  color: var(--blue);
}

.template-mock-phone {
  display: grid;
  gap: 9px;
  min-height: 190px;
  padding: 12px;
  background: linear-gradient(180deg, #edf8f2, #ffffff);
}

.mock-phone-top {
  border-radius: 999px;
  padding: 6px 10px;
  background: #08733f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.mock-doc-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cae8d7;
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
}

.mock-doc-chip b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: var(--brand);
  color: #ffffff;
  font-size: 11px;
}

.mock-doc-chip span,
.mock-template-name {
  min-width: 0;
  overflow: hidden;
  color: #5b6777;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-chat-bubble {
  justify-self: start;
  max-width: 92%;
  border-radius: 8px 8px 8px 2px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.mock-template-name {
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.75);
}

.template-preview-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-preview-points i {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fbff;
  color: #5b6777;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-format-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.template-empty-state {
  grid-column: 1 / -1;
  border: 1px dashed #cbd6e2;
  border-radius: 8px;
  padding: 18px;
  background: #f8fbff;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.template-branding-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.template-appearance-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.template-appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.template-appearance-grid label {
  display: grid;
  grid-template-rows: auto 44px minmax(38px, auto);
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.template-appearance-grid select,
.template-appearance-grid input[type="color"] {
  width: 100%;
  min-height: 44px;
}

.template-appearance-grid small {
  align-self: start;
}

.template-colour-control input[type="color"] {
  min-height: 42px;
  padding: 4px;
}

.template-outlet-panel,
.template-history-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.template-outlet-table {
  display: grid;
  gap: 8px;
}

.template-outlet-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(100px, 0.55fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.template-outlet-row.head {
  align-items: center;
  min-height: 38px;
  background: #edf2f7;
}

.template-outlet-row strong {
  color: var(--ink);
  line-height: 1.25;
}

.template-outlet-row label {
  display: grid;
  gap: 5px;
}

.template-outlet-row label span {
  display: none;
}

.template-outlet-reset {
  align-items: center;
  grid-template-columns: auto 1fr;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.template-outlet-global-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.template-history-list {
  display: grid;
  gap: 8px;
}

.template-history-list div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.template-history-list strong {
  color: var(--ink);
  font-size: 14px;
}

.template-history-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.template-history-list button,
.template-history-list small {
  justify-self: start;
}

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

.template-brand-wide {
  grid-column: 1 / -1;
}

.template-save-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.template-use-line {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.template-action-hint {
  align-self: end;
  line-height: 1.35;
}

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

.template-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.template-toggle-grid input {
  width: 16px;
  height: 16px;
}

.integration-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.integration-flow div {
  display: grid;
  gap: 2px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
}

.integration-flow strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.integration-flow span {
  display: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.integration-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.integration-status-tile {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  overflow: hidden;
}

.integration-status-tile.ready {
  border-top: 5px solid var(--mint);
}

.integration-status-tile.needs-action {
  border-top: 5px solid var(--gold);
}

.integration-status-tile span,
.integration-status-tile small {
  color: var(--muted);
  font-weight: 800;
}

.integration-status-tile strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
}

.integration-grid > .integration-primary {
  grid-row: span 2;
}

.integration-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  grid-column: 1 / -1;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.integration-tabs button {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.integration-tabs button[data-integration-section="templates"],
.integration-tabs button[data-integration-section="preflight"] {
  min-width: 168px;
}

.integration-tabs button:hover,
.integration-tabs button.active {
  border-color: var(--line);
  background: #f8fbff;
  color: var(--ink);
}

.integration-detail-layout {
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
}

.integration-detail-layout.setup-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.integration-detail-layout .integration-section-view {
  grid-column: auto;
  min-width: 0;
}

.integration-submenu button {
  min-height: 64px;
}

.integration-submenu.collapsed {
  justify-items: center;
  gap: 8px;
  padding: 10px 8px;
}

.integration-submenu.collapsed .settings-submenu-head {
  justify-content: center;
  padding: 2px 0 4px;
}

.integration-submenu.collapsed .settings-submenu-head > div,
.integration-submenu.collapsed button[data-integration-section] span {
  display: none;
}

.integration-submenu.collapsed button[data-integration-section] {
  grid-template-columns: 1fr;
  justify-items: center;
  width: 52px;
  min-height: 52px;
  padding: 0;
}

.integration-submenu.collapsed button[data-integration-section] svg {
  width: 28px;
  height: 28px;
}

.integration-submenu.collapsed button[data-integration-section].active::after {
  right: -10px;
}

.integration-setup-strip {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-gloss);
}

.integration-setup-strip > div:first-child {
  display: grid;
  gap: 2px;
}

.integration-setup-strip span,
.integration-setup-strip small {
  color: var(--muted);
  font-size: 12px;
}

.integration-setup-strip strong {
  font-size: 18px;
}

.integration-setup-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integration-setup-strip-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6e0ec;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  color: #304153;
}

.integration-setup-strip-actions button.active,
.integration-setup-strip-actions button:hover {
  border-color: rgba(170, 50, 50, 0.22);
  background: var(--brand-tint);
  color: var(--brand);
}

.integration-setup-strip-actions svg {
  width: 17px;
  height: 17px;
}

.integration-section-view {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
}

.integration-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.integration-panel-head strong,
.integration-panel-head span {
  display: block;
}

.integration-panel-head span {
  color: var(--muted);
}

.label-integration-layout {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.product-label-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin: 0;
}

.product-label-form > * {
  grid-column: 1 / -1;
}

.product-label-form .primary-button {
  justify-self: start;
  min-width: 160px;
}

.product-label-control-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(120px, 0.8fr) minmax(96px, 0.55fr);
  gap: 12px;
  align-items: start;
}

.product-label-control-row.secondary {
  grid-template-columns: minmax(140px, 0.6fr) minmax(220px, 1fr);
}

.product-label-control-row label {
  min-width: 0;
}

.product-label-warning {
  display: grid;
  gap: 3px;
  border-left: 4px solid #d97706;
  padding: 10px 12px;
  background: #fff8eb;
  color: #7a4100;
}

.product-label-warning.inline {
  border-left-width: 2px;
  padding: 8px;
  background: #fffaf0;
}

.product-label-warning strong,
.product-label-warning span {
  display: block;
}

.product-label-warning span {
  font-size: 12px;
  color: #8a5a14;
}

.product-label-shelf-life-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.product-label-shelf-life-edit input {
  max-width: 180px;
}

.label-shelf-life-queue,
.production-safety-snapshot {
  margin-top: 16px;
}

.label-shelf-life-queue h3,
.production-safety-snapshot h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.product-label-preview-shell {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.product-label-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.product-label-preview-head strong,
.product-label-preview-head span {
  display: block;
}

.product-label-preview-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.product-label-preview {
  display: grid;
  place-items: center;
  min-height: 230px;
  border: 1px dashed #c9d8ea;
  border-radius: 8px;
  background: #ffffff;
}

.product-label-sticker {
  width: min(100%, var(--label-width, 58mm));
  min-height: var(--label-height, 40mm);
  display: block;
  border: 0.6px solid #263241;
  padding: 13px;
  background: #ffffff;
  color: #172033;
  font-family: Arial, sans-serif;
}

.product-label-content {
  display: grid;
  gap: 4px;
  align-content: start;
  width: 100%;
  height: 100%;
}

.product-label-title {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.product-label-outlet {
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
}

.product-label-product {
  text-align: center;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.product-label-weight {
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: baseline;
  font-size: 14px;
}

.product-label-weight strong {
  font-size: 17px;
  font-weight: 760;
}

.product-label-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  justify-items: end;
  font-size: 11px;
}

.product-label-meta span:first-child {
  grid-column: 2;
}

.product-label-barcode {
  width: 164px;
  height: 26px;
  margin: 2px auto 0;
}

.product-label-barcode-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #1f2937;
}

.product-label-barcode-text {
  text-align: center;
  font-size: 10px;
  letter-spacing: .8px;
}

.integration-checklist {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.integration-checklist.compact {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.whatsapp-setup-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.whatsapp-guide-card {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #c9e7d7;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f6fcf9;
}

.whatsapp-guide-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #0f7f4f;
  color: #ffffff;
  font-size: 11px;
}

.whatsapp-guide-card strong,
.whatsapp-guide-card span {
  display: block;
}

.whatsapp-guide-card strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.whatsapp-guide-card span {
  display: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.whatsapp-readable-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.whatsapp-readable-panel div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.whatsapp-readable-panel span,
.whatsapp-readable-panel small {
  color: var(--muted);
  font-size: 12px;
}

.whatsapp-readable-panel strong {
  color: var(--ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.whatsapp-copy-strip {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  border: 1px solid #f0d19a;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fffaf1;
}

.whatsapp-copy-strip strong,
.whatsapp-copy-strip span {
  display: block;
}

.whatsapp-copy-strip strong {
  color: #8a4b00;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.whatsapp-copy-strip span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.whatsapp-meta-locator {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.whatsapp-meta-locator-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.whatsapp-meta-locator-head strong,
.whatsapp-meta-locator-head span,
.whatsapp-meta-locator div > span,
.whatsapp-meta-locator small {
  display: block;
}

.whatsapp-meta-locator-head strong {
  color: var(--ink);
  font-size: 16px;
}

.whatsapp-meta-locator-head span,
.whatsapp-meta-locator small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.whatsapp-meta-locator div:not(.whatsapp-meta-locator-head) {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.whatsapp-meta-locator div > span {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.whatsapp-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: -2px 0 14px;
}

.whatsapp-next-actions .ghost-button {
  min-height: 40px;
}

.whatsapp-error-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.whatsapp-error-grid div {
  display: grid;
  gap: 5px;
  border: 1px solid #f0d19a;
  border-radius: 8px;
  padding: 11px 12px;
  background: #fffaf1;
}

.whatsapp-error-grid strong,
.whatsapp-error-grid span {
  display: block;
}

.whatsapp-error-grid strong {
  color: #8a4b00;
  font-size: 13px;
}

.whatsapp-error-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.integration-step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
}

.integration-step b {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}

.integration-step.done b {
  color: #0f684f;
  background: #dff7ed;
}

.integration-step.todo b {
  color: #8a3e00;
  background: #fff1d6;
}

.integration-step strong,
.integration-step span {
  display: block;
}

.integration-step span {
  display: none;
  color: var(--muted);
  font-size: 12px;
}

.integration-settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.integration-settings-form h3 {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.integration-settings-form h3:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.integration-settings-form .primary-button {
  align-self: end;
}

.settings-summary-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  margin-top: 12px;
}

.settings-summary-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(140px, 0.45fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.settings-summary-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.settings-summary-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.settings-summary-row small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.api-status-summary {
  margin-bottom: 14px;
}

.api-key-settings-form {
  grid-template-columns: minmax(260px, 1.35fr) minmax(220px, 0.65fr);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.api-key-settings-form .integration-panel-head,
.api-key-settings-form .settings-summary-list,
.api-key-settings-form .settings-note,
.api-key-settings-form .module-actions {
  grid-column: 1 / -1;
}

.api-key-settings-form label {
  min-width: 0;
}

@media (max-width: 760px) {
  .settings-summary-row,
  .api-key-settings-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.integration-settings-form label small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.whatsapp-owner-alert-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

.integration-settings-form .whatsapp-owner-alert-panel h3 {
  grid-column: auto;
  margin: 0;
  border-top: 0;
  padding-top: 0;
}

.owner-alert-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: start;
}

.owner-alert-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.owner-alert-head > div > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-alert-enable {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.owner-alert-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, .65fr);
  gap: 14px;
  align-items: start;
}

.owner-alert-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.owner-alert-types {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.owner-alert-types > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.owner-alert-type-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0;
}

.owner-alert-type-grid .checkbox-label {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.owner-alert-note {
  margin: 0;
}

.owner-alert-note .mini-action {
  margin-top: 10px;
}

.owner-alert-save-row {
  display: flex;
  justify-content: flex-end;
}

.owner-alert-save-row .primary-button {
  min-width: 280px;
}

.whatsapp-template-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.whatsapp-template-control-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.whatsapp-template-control-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.whatsapp-template-control-card summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.whatsapp-template-control-card summary::-webkit-details-marker {
  display: none;
}

.whatsapp-template-control-card.is-open,
.whatsapp-template-control-card[open] {
  border-color: #bfe6d8;
  box-shadow: 0 12px 28px rgba(20, 91, 72, 0.08);
}

.whatsapp-template-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.whatsapp-template-label,
.whatsapp-template-card-main small {
  color: var(--muted);
  font-size: 12px;
}

.whatsapp-template-name,
.whatsapp-template-summary-name {
  display: inline-block;
  max-width: 100%;
  border: 1px solid #bfe6d8;
  border-radius: 8px;
  padding: 5px 8px;
  overflow-wrap: anywhere;
  background: #f4fffa;
  color: #145b48;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.25;
}

.whatsapp-template-name.missing,
.whatsapp-template-summary-name.missing {
  border-color: #f1d7a8;
  background: #fffaf0;
  color: #8a3e00;
  font-family: inherit;
}

.whatsapp-template-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.whatsapp-template-card-meta b {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f3f6f9;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.whatsapp-template-edit-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px;
  background: #f8fbff;
}

.whatsapp-template-edit-form {
  margin-bottom: 14px;
}

.whatsapp-template-edit-form .settings-note,
.whatsapp-template-edit-form .owner-alert-save-row {
  grid-column: 1 / -1;
}

.whatsapp-template-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.whatsapp-template-summary span,
.whatsapp-template-summary small {
  color: var(--muted);
  font-size: 12px;
}

.whatsapp-template-summary strong {
  overflow-wrap: anywhere;
}

.integration-advanced-details {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.integration-advanced-details summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--ink);
  font-weight: 850;
}

.integration-advanced-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.integration-advanced-details .whatsapp-template-summary,
.integration-advanced-details .settings-table,
.integration-advanced-details .smart-table-shell {
  margin: 14px;
}

.integration-advanced-details .table-pagination {
  display: none;
}

.integration-launch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.integration-launch-grid div {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.integration-launch-grid div.done {
  border-color: #bde5cd;
  background: #f2fbf6;
}

.integration-launch-grid div.todo {
  border-color: #f1d6a6;
  background: #fffaf2;
}

.integration-launch-grid b {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 11px;
}

.integration-launch-grid .done b {
  background: #dff7ed;
  color: #0f684f;
}

.integration-launch-grid .todo b {
  background: #fff1d6;
  color: #8a3e00;
}

.integration-launch-grid strong {
  color: var(--ink);
  line-height: 1.25;
}

.integration-launch-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.integration-summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.integration-summary-list div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.integration-summary-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.integration-summary-list strong {
  overflow-wrap: anywhere;
}

.integration-test-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.integration-test-note span {
  color: var(--muted);
}

.whatsapp-template-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.whatsapp-template-test-card {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.whatsapp-template-test-card.ready {
  border-color: #b8e7d2;
  background: #fbfffd;
}

.whatsapp-template-test-card.needs-action {
  border-color: #f5d3ae;
  background: #fffaf3;
}

.whatsapp-template-test-card > div:first-child span,
.whatsapp-template-test-meta {
  color: var(--muted);
  font-size: 12px;
}

.whatsapp-template-test-card strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

.whatsapp-template-test-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.whatsapp-template-test-checks span {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--muted);
  background: #fff;
}

.whatsapp-template-test-checks span.ok {
  border-color: #b8e7d2;
  color: #176b4d;
  background: #ecfdf5;
}

.whatsapp-template-test-checks span.warn {
  border-color: #f5d3ae;
  color: #047857;
  background: #fff7ed;
}

.whatsapp-template-test-meta {
  display: grid;
  gap: 3px;
}

.wrap-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 14px 0;
}

.integration-upload-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.integration-upload-form button {
  align-self: end;
}

.settings-note {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
  border-left: 4px solid var(--gold);
  padding: 7px 10px;
  background: #fff8eb;
}

.settings-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.user-settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.user-settings-tabs button {
  display: grid;
  gap: 4px;
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
}

.user-settings-tabs button.active,
.user-settings-tabs button:hover {
  border-color: #cfd8e4;
  background: #eef6ff;
  color: var(--blue);
}

.user-settings-tabs strong,
.user-settings-tabs span {
  display: block;
}

.user-settings-tabs strong {
  color: var(--ink);
  font-size: 14px;
}

.user-settings-tabs span {
  font-size: 11px;
  line-height: 1.35;
}

.settings-detail-layout {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  transition: grid-template-columns 0.18s ease;
}

.settings-submenu {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f7fbff;
  box-shadow: var(--shadow);
}

.settings-submenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 8px;
}

.settings-submenu-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-submenu-head span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.settings-submenu-head strong {
  color: var(--ink);
  font-size: 20px;
}

.settings-submenu .settings-submenu-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
  line-height: 1;
}

.settings-submenu .settings-submenu-toggle:hover {
  border-color: #d9aaaa;
  background: var(--brand-tint);
  color: #8d1f2d;
}

.settings-submenu .settings-submenu-toggle svg {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: currentColor;
}

.settings-submenu button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.settings-submenu button svg {
  width: 28px;
  height: 28px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  padding: 5px;
  color: var(--ink);
  background: #ffffff;
}

.settings-submenu button span,
.settings-submenu button strong,
.settings-submenu button small {
  display: block;
  min-width: 0;
}

.settings-submenu button strong {
  color: var(--ink);
  font-size: 14px;
}

.settings-submenu button small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.settings-submenu button.active,
.settings-submenu button:hover {
  border-color: #e4b4b8;
  background: #fff7f8;
  color: var(--brand);
}

.settings-submenu button.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #fff7f8;
  transform: translateY(-50%);
}

.settings-submenu button.active svg,
.settings-submenu button:hover svg {
  border-color: #e4b4b8;
  color: var(--brand);
  background: #fffafa;
}

.settings-order-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.settings-order-toolbar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-order-toolbar strong {
  color: var(--ink);
  font-size: 14px;
}

.settings-order-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-order-list {
  display: grid;
  gap: 10px;
}

.settings-order-row {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  cursor: grab;
}

.settings-order-row:active {
  cursor: grabbing;
}

.settings-order-row.is-dragging {
  opacity: 0.55;
}

.settings-order-row.is-drop-target {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.settings-order-handle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 42px;
  border-radius: 8px;
  color: var(--muted);
  background: #eef3f8;
  font-weight: 900;
  letter-spacing: 0;
}

.settings-order-row svg {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  padding: 7px;
  color: var(--ink);
  background: #ffffff;
}

.settings-order-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-order-copy strong {
  color: var(--ink);
  font-size: 15px;
}

.settings-order-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

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

.settings-order-actions .ghost-button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .settings-order-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-order-row {
    grid-template-columns: 24px 34px minmax(0, 1fr);
  }

  .settings-order-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .settings-order-actions .ghost-button {
    flex: 1;
  }
}

@media (min-width: 1021px) {
  .settings-detail-layout.user-submenu-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .settings-submenu.user-settings-submenu.is-collapsed {
    justify-items: center;
    gap: 10px;
    padding: 12px 8px;
  }

  .settings-submenu.user-settings-submenu.is-collapsed .settings-submenu-head {
    justify-content: center;
    padding: 2px 0 4px;
  }

  .settings-submenu.user-settings-submenu.is-collapsed .settings-submenu-head > div,
  .settings-submenu.user-settings-submenu.is-collapsed button[data-user-settings-section] span {
    display: none;
  }

  .settings-submenu.user-settings-submenu.is-collapsed button[data-user-settings-section] {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 52px;
    min-height: 52px;
    padding: 0;
  }

  .settings-submenu.user-settings-submenu.is-collapsed button[data-user-settings-section] svg {
    width: 28px;
    height: 28px;
  }

  .settings-submenu.user-settings-submenu.is-collapsed button[data-user-settings-section].active::after {
    right: -10px;
  }
}

.settings-detail-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
  margin-top: 14px;
}

.settings-form h3 {
  grid-column: 1 / -1;
  margin: 0;
}

.user-basic-form,
.permission-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.employee-summary-tile {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #ffffff;
}

.employee-summary-tile.mint {
  border-color: #bdebdc;
  background: #f2fff9;
}

.employee-summary-tile.warn {
  border-color: #f0c98c;
  background: #fff8ea;
}

.employee-summary-tile.blue {
  border-color: #c9def4;
  background: #f2f8ff;
}

.employee-summary-tile.muted {
  background: #f7f9fc;
}

.employee-summary-tile strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

.employee-summary-tile span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.employee-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.employee-filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.employee-filter-bar input,
.employee-filter-bar select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
}

.employee-search-field {
  min-width: 220px;
}


.return-approval-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.permission-collapse {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
  background: var(--surface-gloss);
  box-shadow: var(--shadow-soft);
}

.permission-collapse summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.permission-collapse .settings-form {
  border-top: 0;
  padding-top: 12px;
  margin-top: 0;
}

.permission-collapse-body {
  padding-top: 12px;
}

.form-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settings-form label,
.checkbox-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-form input,
.settings-form select,
.settings-form textarea,
.inline-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
}

.settings-form textarea {
  min-height: 86px;
  resize: vertical;
}

.settings-wide-field {
  grid-column: 1 / -1;
}

.inventory-settings-compact {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.inventory-settings-compact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.inventory-settings-compact summary::-webkit-details-marker {
  display: none;
}

.inventory-settings-compact summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inventory-settings-compact summary > b {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--soft-blue);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.inventory-settings-compact summary::after {
  content: "Open";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.inventory-settings-compact[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.inventory-settings-compact[open] summary::after {
  content: "Hide";
}

.inventory-settings-compact-body {
  padding: 10px 12px 12px;
}

.inventory-settings-table-card {
  display: grid;
  gap: 8px;
}

.inventory-settings-table-actions {
  display: flex;
  justify-content: flex-end;
}

.inventory-settings-table-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.inventory-settings-table-head > div {
  display: grid;
  gap: 3px;
}

.inventory-settings-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inventory-settings-table table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.inventory-settings-table th,
.inventory-settings-table td {
  padding: 8px;
  vertical-align: middle;
}

.inventory-settings-table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-settings-table .action-cell {
  width: 96px;
  white-space: nowrap;
}

.inventory-settings-table .compact-input {
  min-width: 90px;
  max-width: none;
}

.inventory-category-settings .settings-check-grid {
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.theme-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.profile-display-page {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-width: 0;
}

.profile-display-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.profile-display-grid > .panel {
  width: 100%;
}

.profile-display-page .theme-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.profile-display-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.profile-display-actions .primary-button,
.profile-display-actions .ghost-button {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.theme-preview-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  cursor: pointer;
}

.theme-preview-card.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand-tint);
}

.theme-preview-card span {
  color: var(--ink);
  font-weight: 900;
}

.theme-preview-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.theme-preview-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.theme-preview-swatches i {
  height: 18px;
  border-radius: 999px;
  background: var(--line);
}

.theme-preview-card[data-preview-theme="classic"] i:nth-child(1) { background: #aa3232; }
.theme-preview-card[data-preview-theme="classic"] i:nth-child(2) { background: #fff1f1; }
.theme-preview-card[data-preview-theme="classic"] i:nth-child(3) { background: #2563a7; }
.theme-preview-card[data-preview-theme="fresh"] i:nth-child(1) { background: #16805f; }
.theme-preview-card[data-preview-theme="fresh"] i:nth-child(2) { background: #eaf8f2; }
.theme-preview-card[data-preview-theme="fresh"] i:nth-child(3) { background: #1f7a8c; }
.theme-preview-card[data-preview-theme="royal"] i:nth-child(1) { background: #2563a7; }
.theme-preview-card[data-preview-theme="royal"] i:nth-child(2) { background: #eef6ff; }
.theme-preview-card[data-preview-theme="royal"] i:nth-child(3) { background: #1d4e86; }
.theme-preview-card[data-preview-theme="premium"] i:nth-child(1) { background: #8f2d56; }
.theme-preview-card[data-preview-theme="premium"] i:nth-child(2) { background: #fff0f6; }
.theme-preview-card[data-preview-theme="premium"] i:nth-child(3) { background: #6b4ea0; }
.theme-preview-card[data-preview-theme="graphite"] i:nth-child(1) { background: #334155; }
.theme-preview-card[data-preview-theme="graphite"] i:nth-child(2) { background: #f1f5f9; }
.theme-preview-card[data-preview-theme="graphite"] i:nth-child(3) { background: #475569; }
.theme-preview-card[data-preview-theme="column-focus"] i:nth-child(1) { background: #1f4f8f; }
.theme-preview-card[data-preview-theme="column-focus"] i:nth-child(2) { background: #e7f0ff; }
.theme-preview-card[data-preview-theme="column-focus"] i:nth-child(3) { background: #9a275f; }
.theme-preview-card[data-preview-theme="custom"] i:nth-child(1) { background: var(--brand); }
.theme-preview-card[data-preview-theme="custom"] i:nth-child(2) { background: var(--brand-tint); }
.theme-preview-card[data-preview-theme="custom"] i:nth-child(3) { background: var(--blue); }

.settings-field-title,
.settings-field-help {
  display: block;
}

.settings-field-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.settings-field-help {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.settings-form .settings-check,
.settings-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 850;
}

.settings-form .settings-check input,
.settings-check input {
  width: auto;
  margin: 0;
}

.settings-structured-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.settings-structured-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.settings-structured-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-structured-header strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.settings-structured-header span,
.compact-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.settings-mini-count {
  justify-self: end;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eaf8f1;
  color: var(--mint);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.settings-unit-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  padding: 5px 7px 5px 11px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.settings-unit-chip button,
.ghost-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
}

.settings-unit-chip button svg,
.ghost-icon-button svg {
  width: 14px;
  height: 14px;
}

.settings-unit-chip button:hover,
.ghost-icon-button:hover {
  border-color: #b8d1ea;
  color: var(--brand);
}

.danger-icon-button:hover {
  border-color: #f2b5b5;
  background: #fff7f7;
  color: var(--danger);
}

.settings-inline-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.settings-conversion-heading,
.settings-conversion-row {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(150px, 1.15fr) minmax(112px, .75fr) minmax(112px, .75fr) minmax(82px, .45fr) 34px;
  gap: 8px;
  align-items: end;
}

.settings-conversion-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-conversion-rows {
  display: grid;
  gap: 8px;
}

.settings-conversion-row {
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.settings-conversion-row label {
  gap: 5px;
  font-size: 11px;
}

.settings-conversion-row input {
  min-height: 38px;
  padding: 8px 10px;
}

.compact-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
}

.conversion-preview-panel {
  background: #fffdf7;
}

.conversion-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
}

.conversion-preview-grid label {
  gap: 5px;
  font-size: 11px;
}

.conversion-preview-grid input {
  min-height: 38px;
  padding: 8px 10px;
}

.conversion-preview-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.conversion-preview-result {
  display: grid;
  gap: 3px;
  min-height: 42px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.conversion-preview-result strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.conversion-preview-result span,
.conversion-preview-result small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.conversion-preview-result.ok {
  border-color: #aee2cb;
  background: #edf9f3;
}

.conversion-preview-result.warn {
  border-color: #f0c484;
  background: #fff8eb;
}

.product-name-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-name-cell strong {
  overflow-wrap: anywhere;
}

.product-purchase-summary {
  max-width: 360px;
}

.grn-conversion-preview {
  display: grid;
  gap: 4px;
  grid-column: 1 / -1;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.grn-conversion-preview strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.grn-conversion-preview span,
.grn-conversion-preview small,
.ai-line-conversion-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.grn-conversion-preview.ok,
.ai-line-conversion-hint.ok {
  border-color: #aee2cb;
  background: #edf9f3;
  color: #126044;
}

.grn-conversion-preview.warn,
.ai-line-conversion-hint.warn {
  border-color: #f0c484;
  background: #fff8eb;
  color: #8a3e00;
}

.ai-line-conversion-hint {
  grid-column: 1 / -1;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  padding: 6px 8px;
}

@media (max-width: 820px) {
  .settings-structured-header,
  .settings-inline-add,
  .settings-conversion-row,
  .conversion-preview-grid,
  .conversion-preview-actions {
    grid-template-columns: 1fr;
  }

  .settings-mini-count {
    justify-self: start;
  }

  .settings-conversion-heading {
    display: none;
  }

  .ghost-icon-button {
    width: 100%;
  }
}

.notification-settings-form {
  display: grid;
  gap: 14px;
}

.notification-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0 2px;
}

.notification-manager-head > div:first-child,
.notification-event-name span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.notification-manager-head span,
.notification-manager-head small,
.notification-event-name small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.notification-manager-head strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.15;
}

.notification-manager-actions,
.notification-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.notification-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(160px, 0.7fr) minmax(150px, 0.65fr) minmax(180px, 0.75fr) auto;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.notification-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.notification-toolbar input,
.notification-toolbar select,
.notification-matrix-table input,
.notification-matrix-table select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--panel);
  color: var(--ink);
}

.notification-info-note {
  border-color: rgba(37, 99, 167, 0.28);
  background: var(--blue-tint);
}

.notification-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.notification-summary-strip div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.notification-summary-strip div:last-child {
  border-right: 0;
}

.notification-summary-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.notification-summary-strip strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

.notification-routing-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.notification-routing-note {
  margin: 0;
}

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

.notification-routing-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d7e4f0;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(25, 46, 74, 0.05);
}

.notification-routing-card-head {
  display: grid;
  gap: 4px;
}

.notification-routing-card-head > span {
  color: #1f62a8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-routing-card-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.notification-routing-card-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.notification-routing-current {
  display: grid;
  gap: 4px;
  border: 1px solid #e4edf6;
  border-radius: 8px;
  padding: 8px;
  background: #f8fbff;
}

.notification-routing-current span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-routing-current strong {
  color: #0f6f54;
  font-size: 13px;
  font-weight: 850;
}

.notification-routing-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.notification-routing-options > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.notification-routing-options > div > span {
  flex: 0 0 100%;
  color: #52657a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-routing-options label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid #dce8f3;
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.notification-routing-options label:has(input:checked) {
  border-color: #b9e4d4;
  background: #eefaf5;
  color: #0f765a;
}

.notification-routing-options input {
  width: auto;
  min-height: 0;
}

@media (max-width: 980px) {
  .notification-routing-grid {
    grid-template-columns: 1fr;
  }
}

.notification-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.notification-matrix-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.notification-matrix-table th,
.notification-matrix-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

.notification-matrix-table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.notification-matrix-table tbody tr:nth-child(even) {
  background: rgba(248, 251, 255, 0.72);
}

.notification-matrix-table tbody tr:hover {
  background: var(--brand-tint);
}

.notification-sr {
  width: 54px;
  color: var(--muted);
  font-weight: 850;
}

.notification-event-enable {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.notification-event-enable input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.notification-event-name {
  min-width: 260px;
}

.notification-event-name strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.notification-channel-cell {
  text-align: center;
}

.notification-channel-check {
  display: inline-grid;
  place-items: center;
}

.notification-channel-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.notification-channel-check span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.notification-inbox-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.notification-inbox-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.notification-inbox-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.notification-inbox-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.notification-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-end;
}

.notification-inbox-actions label {
  display: grid;
  gap: 6px;
  min-width: 160px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.notification-inbox-actions select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--panel);
  color: var(--ink);
}

td.notification-inbox-actions {
  justify-content: flex-start;
  min-width: 250px;
}

.notification-inbox-list {
  display: grid;
  gap: 10px;
}

.notification-inbox-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.notification-inbox-card.open {
  border-color: #f0cf94;
  background: #fffaf1;
}

.notification-inbox-card-main {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.notification-inbox-card-status,
.notification-inbox-card-copy {
  min-width: 0;
}

.notification-inbox-card-copy {
  display: grid;
  gap: 4px;
}

.notification-inbox-card-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.notification-inbox-card-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notification-inbox-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.notification-alert-action-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.notification-alert-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notification-alert-actions .mini-action,
.notification-inbox-card-actions .mini-action,
.my-work-actions .mini-action {
  min-height: 32px;
}

.notification-inbox-detail-toggle {
  border-top: 1px solid var(--line);
  background: #fbfdff;
}

.notification-inbox-detail-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 14px;
  color: var(--brand);
  font-weight: 850;
}

.notification-inbox-detail-toggle summary::-webkit-details-marker {
  display: none;
}

.notification-inbox-detail {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.notification-inbox-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.notification-inbox-meta-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.notification-inbox-meta-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.notification-inbox-meta-grid strong,
.notification-inbox-detail p {
  overflow-wrap: anywhere;
}

.notification-inbox-meta-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.notification-inbox-detail p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}

.notification-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.notification-diagnostic-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fbff;
}

.notification-diagnostic-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.notification-diagnostic-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notification-diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {
  .notification-manager-head,
  .notification-toolbar,
  .notification-inbox-head {
    grid-template-columns: 1fr;
  }

  .notification-manager-actions,
  .notification-inbox-actions {
    justify-content: stretch;
  }

  .notification-manager-actions button,
  .notification-toolbar button,
  .notification-inbox-actions button {
    width: 100%;
  }

  .notification-inbox-card-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .notification-inbox-card-actions {
    justify-content: stretch;
  }

  .notification-inbox-card-actions button {
    flex: 1 1 130px;
  }

  .notification-inbox-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-diagnostic-grid {
    grid-template-columns: 1fr;
  }

  .notification-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-summary-strip div {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .notification-inbox-meta-grid {
    grid-template-columns: 1fr;
  }
}

.settings-form .settings-password-field input {
  min-height: 42px;
  padding-right: 54px;
}

.settings-form .settings-password-field button {
  right: 4px;
  color: #7b8796;
}

.settings-form .settings-password-field button:hover {
  background: #fff3e3;
  color: var(--brand);
}

.settings-form.template-settings-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.settings-form.template-settings-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.settings-form.template-settings-form .template-format-card input[type="radio"] {
  width: 18px;
  height: 18px;
  padding: 0;
}

.settings-form.template-settings-form .primary-button {
  justify-self: start;
}

.sales-settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-settings-form .sales-printer-summary,
.sales-settings-form .sales-printer-actions {
  grid-column: 1 / -1;
}

.sales-printer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.sales-printer-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-printer-summary span {
  color: var(--muted);
  font-size: 12px;
}

.sales-printer-summary strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
}

.sales-printer-actions {
  justify-content: flex-start;
}

.role-preset-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.role-preset-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.role-preset-card:not(button) {
  cursor: default;
}

.role-preset-card:hover,
.role-preset-card.active {
  border-color: #9fc6f1;
  background: #eef6ff;
}

.role-preset-card strong,
.role-preset-card span,
.role-preset-card small {
  display: block;
}

.role-preset-card strong {
  color: var(--ink);
  font-size: 14px;
}

.role-preset-card span,
.role-preset-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.role-default-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.role-default-tab {
  display: grid;
  gap: 4px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.role-default-tab.active {
  border-color: #9fc6f1;
  background: #eef6ff;
}

.role-default-tab strong,
.role-default-tab span,
.role-default-toolbar strong,
.role-default-toolbar span {
  display: block;
}

.role-default-tab strong {
  color: var(--ink);
  font-size: 13px;
}

.role-default-tab span,
.role-default-toolbar span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.role-default-form {
  grid-template-columns: 1fr;
}

.role-default-compact-form {
  gap: 10px;
}

.role-default-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.role-default-compact-form .role-default-toolbar,
.role-default-compact-form .access-editor,
.role-default-compact-form .access-editor-block,
.role-default-compact-form .role-default-force-apply {
  padding: 10px;
}

.role-default-compact-form .effective-access-grid,
.role-default-compact-form .role-default-impact {
  gap: 8px;
}

.role-default-compact-form .effective-access-grid article,
.role-default-compact-form .role-default-impact article {
  padding: 9px 10px;
}

.role-default-compact-form .effective-access-grid strong,
.role-default-compact-form .role-default-impact strong {
  font-size: 18px;
}

.role-default-compact-form .access-editor {
  gap: 9px;
}

.role-default-compact-form .access-editor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.role-default-compact-form .access-editor-block {
  gap: 8px;
}

.role-default-compact-form .access-editor-block strong {
  font-size: 12px;
}

.role-default-compact-form .access-checkbox-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.role-default-compact-form .access-check {
  min-height: 29px;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}

.role-default-compact-form .access-check input {
  transform: scale(.9);
  transform-origin: center;
}

.role-default-compact-form .permission-action-row {
  grid-template-columns: minmax(150px, 1.1fr) repeat(5, minmax(66px, .42fr));
}

.role-default-compact-form .permission-action-area,
.role-default-compact-form .permission-action-cell {
  padding: 7px;
}

.role-default-compact-form .permission-action-cell span,
.role-default-compact-form .permission-action-area span {
  font-size: 10px;
}

.role-default-compact-form .permission-action-area strong {
  font-size: 11px;
}

.role-default-impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.role-default-impact article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.role-default-impact article.mint {
  border-color: #bdebdc;
  background: #f2fff9;
}

.role-default-impact article.warn {
  border-color: #f0c98c;
  background: #fff8ea;
}

.role-default-impact strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.role-default-impact span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.role-default-force-apply {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #f0c98c;
  border-radius: 8px;
  padding: 12px;
  background: #fff8ea;
}

.role-default-force-apply input {
  width: auto;
  margin-top: 3px;
}

.role-default-force-apply strong,
.role-default-force-apply small {
  display: block;
}

.role-default-force-apply strong {
  color: var(--ink);
}

.role-default-force-apply small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.role-default-snapshot {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(0, .88fr));
  gap: 8px;
}

.role-default-snapshot article {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.role-default-snapshot article.warn {
  border-color: #f0c98c;
  background: #fff8ea;
}

.role-default-snapshot span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.role-default-snapshot strong,
.role-default-snapshot small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-default-snapshot strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.role-default-snapshot small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.role-default-purpose-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.access-check.disabled {
  opacity: .48;
  background: #f8fafc;
}

.role-access-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.role-access-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: end;
  gap: 12px;
}

.role-access-header strong,
.role-access-header span {
  display: block;
}

.role-access-header span {
  color: var(--muted);
  font-size: 13px;
}

.role-reference-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.role-reference-panel strong,
.role-reference-panel span {
  display: block;
}

.role-reference-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.permission-diff-summary {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e5f2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.permission-diff-summary.default {
  border-color: #b7e0cf;
  background: #effaf5;
}

.permission-diff-summary.custom {
  border-color: #f0c98c;
  background: #fff8ea;
}

.permission-diff-summary strong,
.permission-diff-summary span {
  display: block;
}

.permission-diff-summary > span {
  color: var(--muted);
  font-size: 12px;
}

.permission-diff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-diff-list span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.permission-diff-list .added {
  border: 1px solid #b9ddc9;
  color: var(--mint);
}

.permission-diff-list .removed {
  border: 1px solid #efb5b5;
  color: #a83c3c;
}

.permission-user-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.permission-user-snapshot article {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.permission-user-snapshot span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.permission-user-snapshot strong,
.permission-user-snapshot small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-user-snapshot strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.permission-user-snapshot small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.permission-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-mode-card {
  display: grid;
  gap: 3px;
  min-height: 82px;
  border: 1px solid #d8e5f2;
  border-radius: 8px;
  padding: 10px 11px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.permission-mode-card.active {
  border-color: rgba(37, 99, 167, 0.58);
  background: #eef6ff;
}

.permission-mode-card strong {
  font-size: 14px;
  font-weight: 900;
}

.permission-mode-card span,
.permission-mode-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.permission-ticket-help {
  display: grid;
  gap: 3px;
  margin: 0 12px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.permission-ticket-help strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.permission-ticket-help span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

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

.effective-access-grid article {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.effective-access-grid strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.effective-access-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.role-access-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.role-access-preview strong,
.role-access-preview span {
  display: block;
}

.role-access-preview > div > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.role-preview-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.role-preview-chips span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef2f7;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.access-editor {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.access-editor summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.access-editor legend {
  padding: 0 6px;
  color: var(--ink);
  font-weight: 900;
}

.access-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.access-editor-block {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.access-editor-block strong {
  color: var(--ink);
}

.access-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.access-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.access-check input {
  width: auto;
}

.permission-action-panel {
  display: grid;
  gap: 10px;
}

.permission-action-matrix {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.permission-action-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(5, minmax(86px, .55fr));
  gap: 6px;
  align-items: stretch;
}

.permission-action-row-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.permission-action-row-head span {
  padding: 0 6px;
}

.permission-action-area {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
}

.permission-action-area strong,
.permission-action-area span {
  display: block;
}

.permission-action-area span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.permission-action-cell {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.permission-action-cell input {
  width: auto;
}

.permission-action-cell.disabled {
  opacity: .48;
  background: #f8fafc;
}

.role-settings-visibility {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.permission-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-badge {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #d7e3ef;
  background: #ffffff;
  color: var(--muted);
}

.permission-badge.enabled {
  border-color: #abdcc8;
  background: #eaf8f1;
  color: var(--mint);
}

.permission-badge.disabled {
  background: #f1f5f9;
}

.role-permission-card {
  padding: 14px;
}

.role-permission-card > h2:first-child {
  margin-bottom: 12px;
  font-size: 18px;
}

.role-permission-shell {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.roles-permissions-combined {
  display: grid;
  gap: 12px;
}

.role-permission-head {
  padding: 10px 12px;
}

.role-permission-head.compact-note {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
}

.role-permission-head strong,
.role-permission-head span {
  display: block;
}

.role-permission-head.compact-note strong {
  font-size: 14px;
  line-height: 1.2;
}

.role-permission-head.compact-note span {
  font-size: 12px;
  line-height: 1.3;
}

.role-default-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.role-default-tab {
  flex: 1 1 150px;
  min-height: 42px;
  padding: 7px 10px;
}

.role-default-tab strong {
  font-size: 12px;
  font-weight: 700;
}

.role-default-tab span {
  font-size: 11px;
  font-weight: 500;
}

.role-default-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 12px;
}

.role-default-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.role-default-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 8px;
}

.role-default-summary-row .role-default-impact,
.role-default-summary-row .effective-access-grid {
  height: 100%;
}

.role-default-summary-row .role-default-impact article,
.role-default-summary-row .effective-access-grid article {
  min-height: 58px;
}

.compact-access-editor {
  padding: 10px;
}

.compact-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 8px;
}

.compact-access-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
}

.compact-access-group.enabled {
  border-color: #b9d6f2;
  background: #f8fbff;
}

.compact-access-title,
.compact-access-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.compact-access-title {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 7px;
}

.compact-access-title strong,
.compact-access-title small,
.compact-access-main strong,
.compact-access-main small {
  display: block;
}

.compact-access-title strong,
.compact-access-main strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.compact-access-title small,
.compact-access-main small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

.compact-access-main input {
  width: auto;
  margin-top: 1px;
}

.compact-access-subgrid,
.compact-access-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.compact-access-menu-grid {
  margin-top: 0;
}

.compact-access-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid #dce6f1;
  border-radius: 999px;
  padding: 5px 7px;
  background: #ffffff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
}

.compact-access-chip input {
  width: auto;
  transform: scale(.82);
}

.compact-access-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-ticket-editor {
  padding: 0;
  background: #ffffff;
}

.permission-ticket-editor > summary {
  padding: 11px 12px;
}

.permission-ticket-tree {
  display: grid;
  border-top: 1px solid var(--line);
}

.permission-ticket-group {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.permission-ticket-group.enabled {
  background: #fbfdff;
}

.permission-ticket-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.permission-ticket-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
}

.permission-ticket-main input,
.permission-ticket-check input,
.permission-ticket-action input {
  width: auto;
  accent-color: #e85f68;
}

.permission-ticket-main strong,
.permission-ticket-main small {
  display: block;
}

.permission-ticket-main strong {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.permission-ticket-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.permission-ticket-toggle {
  border: 1px solid #d6e2ef;
  border-radius: 999px;
  padding: 5px 9px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.permission-ticket-group.open .permission-ticket-toggle {
  color: var(--primary);
  border-color: #bcd4f0;
  background: #f4f9ff;
}

.permission-ticket-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px 42px;
}

.permission-ticket-body[hidden] {
  display: none;
}

.permission-ticket-subsection {
  display: grid;
  gap: 7px;
}

.permission-ticket-subsection > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.permission-ticket-check-grid,
.permission-ticket-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
}

.permission-ticket-check,
.permission-ticket-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid #e0e8f1;
  border-radius: 7px;
  padding: 6px 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.2;
}

.permission-ticket-action {
  grid-template-columns: auto minmax(0, 1fr);
}

.permission-ticket-action.disabled {
  opacity: .46;
  background: #f8fafc;
}

.permission-ticket-check span,
.permission-ticket-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.role-simple-access-form {
  gap: 12px;
}

.role-simple-toolbar {
  border-color: #cfe0f3;
  background: #f8fbff;
}

.role-simple-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-simple-impact article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #d7e5f3;
  border-radius: 8px;
  padding: 11px 12px;
  background: #ffffff;
}

.role-simple-impact article.mint {
  border-color: #bdebdc;
  background: #f2fff9;
}

.role-simple-impact article.warn {
  border-color: #f0c98c;
  background: #fff8ea;
}

.role-simple-impact strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.role-simple-impact span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.role-menu-access-panel {
  display: grid;
  gap: 0;
  border: 0;
  padding: 0;
  background: transparent;
}


.role-menu-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.role-menu-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fafc;
  color: var(--ink);
  cursor: pointer;
}

.role-menu-card.active {
  border-color: #9fd9c2;
  background: #f1fff8;
}

.role-menu-card input {
  width: 17px;
  height: 17px;
  accent-color: var(--mint);
}

.role-menu-card span,
.role-menu-card strong,
.role-menu-card small {
  display: block;
  min-width: 0;
}

.role-menu-card strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-menu-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.role-simple-force-apply {
  border-color: #f0c98c;
  background: #fff8ea;
}

.role-advanced-access-details {
  margin-top: 0;
}

.role-advanced-ticket-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.role-advanced-ticket-title {
  grid-template-columns: minmax(0, 1fr);
}

.role-menu-state {
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef4f9;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.permission-ticket-group.enabled .role-menu-state {
  background: #eaf8f1;
  color: var(--mint);
}

@media (max-width: 1180px) {
  .role-menu-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .role-simple-impact,
  .role-menu-card-grid {
    grid-template-columns: 1fr;
  }

}

.role-dropdown-selector {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #d7e5f3;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
}

.role-default-select-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.role-default-select-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cad9ea;
  border-radius: 8px;
  padding: 9px 12px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 850;
}

.role-default-selected-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-bottom: 3px;
}

.role-default-selected-summary strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.role-default-selected-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.role-default-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: center;
  gap: 8px;
  min-width: max-content;
}

.role-default-toolbar-actions button {
  min-height: 40px;
  white-space: nowrap;
}

.role-menu-table {
  display: grid;
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.role-menu-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(96px, 140px) minmax(140px, .8fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid #d8e4f0;
  padding: 10px 14px;
  background: #fbfcfe;
}

.role-menu-row:last-child {
  border-bottom: 0;
}

.role-menu-row.active {
  background: #f3fff9;
}

.role-menu-row-head {
  min-height: 38px;
  background: #eef4fa;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.role-menu-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.role-menu-name strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.role-menu-name small,
.role-menu-detail {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-menu-toggle {
  display: inline-grid;
  justify-self: start;
  cursor: pointer;
}

.role-menu-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.role-menu-toggle span {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  min-height: 30px;
  border: 1px solid #c8d2dc;
  border-radius: 999px;
  background: #edf1f5;
  color: #637083;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.role-menu-toggle input:checked + span {
  border-color: #63c48d;
  background: #52c878;
  color: #ffffff;
}

.role-menu-toggle.disabled {
  cursor: not-allowed;
  opacity: .62;
}

@media (max-width: 900px) {
  .role-dropdown-selector,
  .role-menu-row {
    grid-template-columns: 1fr;
  }

  .role-default-toolbar-actions {
    justify-self: stretch;
    justify-content: stretch;
    min-width: 0;
  }

  .role-default-toolbar-actions button {
    flex: 1 1 120px;
  }

  .role-menu-row-head {
    display: none;
  }

  .role-menu-toggle {
    justify-self: stretch;
  }

  .role-menu-toggle span {
    width: 100%;
  }
}

.role-permission-tree {
  display: grid;
  gap: 12px;
  padding-left: 34px;
}

.role-tree-branch {
  position: relative;
  display: grid;
  gap: 6px;
  border-left: 2px solid #d7e5f3;
  padding-left: 14px;
}

.role-tree-branch > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.role-tree-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
  color: var(--ink);
}

.role-tree-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 14px;
  border-top: 2px solid #d7e5f3;
}

.role-tree-row.active {
  border-color: #bdebdc;
  background: #f3fff9;
}

.role-tree-node-label {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-tree-switch {
  justify-self: end;
}

.role-tree-switch span {
  min-width: 52px;
  min-height: 28px;
  font-size: 11px;
}

.role-tree-switch.disabled {
  opacity: .55;
  cursor: not-allowed;
}

.role-tree-row.disabled {
  opacity: .7;
}

.role-tree-menu:not(.enabled) .role-tree-branch {
  opacity: .72;
}

@media (max-width: 760px) {
  .role-permission-tree {
    padding-left: 10px;
  }

  .role-tree-row {
    grid-template-columns: 1fr;
  }

  .role-tree-switch {
    justify-self: stretch;
  }
}
.permission-form-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 240px);
  gap: 10px;
}

.permission-save-row {
  display: flex;
  justify-content: flex-end;
}

.compact-inner-collapse {
  grid-column: 1 / -1;
}

.compact-inner-collapse .role-settings-visibility {
  border: 0;
  padding: 10px 0 0;
  background: transparent;
}

.compact-table-wrap {
  overflow-x: auto;
}

.role-overview-collapse table,
.permission-workspace table {
  font-size: 12px;
}

.role-overview-collapse th,
.role-overview-collapse td,
.permission-workspace th,
.permission-workspace td {
  padding: 8px 9px;
}

.permission-action-row {
  grid-template-columns: minmax(150px, 1.2fr) repeat(5, minmax(58px, .45fr));
  gap: 4px;
}

.permission-action-area,
.permission-action-cell {
  padding: 6px;
}

.permission-action-cell {
  min-height: 36px;
  font-size: 10px;
  font-weight: 600;
}

.permission-action-area strong {
  font-size: 11px;
  font-weight: 700;
}

.permission-action-area span {
  font-size: 10px;
}

.role-permission-card .permission-collapse summary,
.role-permission-card .access-editor summary {
  font-weight: 700;
}

.role-permission-card .role-access-header strong,
.role-permission-card .role-reference-panel strong,
.role-permission-card .permission-diff-summary strong,
.role-permission-card .role-access-preview strong {
  font-weight: 700;
}

.role-permission-card .role-access-header span,
.role-permission-card .role-reference-panel span,
.role-permission-card .permission-diff-summary > span,
.role-permission-card .role-access-preview > div > span {
  font-weight: 400;
}

.role-permission-card .effective-access-grid strong,
.role-permission-card .role-default-impact strong {
  font-weight: 700;
}

.role-permission-card .effective-access-grid span,
.role-permission-card .role-default-impact span {
  font-weight: 600;
}

.access-summary-collapse {
  grid-column: 1 / -1;
}

.access-summary-body {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

body[data-ui-mode="night"] .compact-access-group,
body[data-ui-mode="night"] .compact-access-chip {
  background: #111827;
}

body[data-ui-mode="night"] .permission-ticket-editor,
body[data-ui-mode="night"] .permission-ticket-group,
body[data-ui-mode="night"] .permission-ticket-check,
body[data-ui-mode="night"] .permission-ticket-action,
body[data-ui-mode="night"] .permission-ticket-toggle,
body[data-ui-mode="night"] .permission-user-snapshot article,
body[data-ui-mode="night"] .permission-mode-card,
body[data-ui-mode="night"] .permission-ticket-help,
body[data-ui-mode="night"] .role-default-snapshot article {
  background: #111827;
}

body[data-ui-mode="night"] .permission-ticket-group.enabled,
body[data-ui-mode="night"] .permission-ticket-group.open .permission-ticket-toggle,
body[data-ui-mode="night"] .permission-mode-card.active {
  background: #172033;
}

body[data-ui-mode="night"] .compact-access-group.enabled {
  background: #172033;
}

@media (max-width: 1180px) {
  .permission-user-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-default-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .role-default-toolbar,
  .role-default-summary-row,
  .permission-form-top,
  .permission-ticket-head {
    grid-template-columns: 1fr;
  }

  .permission-user-snapshot,
  .permission-mode-cards,
  .role-default-snapshot {
    grid-template-columns: 1fr;
  }

  .role-default-actions,
  .permission-save-row {
    justify-content: stretch;
  }

  .role-default-actions button,
  .permission-save-row button {
    width: 100%;
  }

  .permission-ticket-body {
    padding-left: 12px;
  }
}

.module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.module-toolbar strong,
.module-toolbar span {
  display: block;
}

.module-toolbar > div:first-child {
  min-width: 0;
}

.module-toolbar strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.module-toolbar span {
  color: var(--muted);
  max-width: 860px;
  font-size: 12px;
  line-height: 1.3;
}

.inline-select {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inline-select select {
  width: min(260px, 100%);
}

.consolidation-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.table-wrap[data-table-id="kitchen-production-plans"] table {
  min-width: 1120px;
  table-layout: fixed;
  width: 100%;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(1),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(1) {
  width: 76px;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(2),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(2) {
  width: 116px;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(3),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(3) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.5;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(4),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(4) {
  width: 70px;
  text-align: center;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(5),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(5) {
  width: 150px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(6),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(6) {
  width: 112px;
  text-align: center;
}

.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(6) .pill {
  max-width: 100%;
}

.table-wrap[data-table-id="kitchen-production-plans"] th:nth-child(7),
.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(7) {
  width: 180px;
}

.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(7) {
  white-space: normal;
}

.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(7).action-cell {
  display: table-cell;
}

.table-wrap[data-table-id="kitchen-production-plans"] td:nth-child(7) .mini-action {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.production-plan-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.production-plan-item-chip,
.production-plan-more-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid #d8e5f1;
  border-radius: 999px;
  background: #f8fbff;
  padding: 4px 8px;
  color: #20354a;
  font-size: 11px;
  line-height: 1.2;
}

.production-plan-item-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.production-plan-item-chip em {
  flex: 0 0 auto;
  color: #2563a7;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.production-plan-more-chip {
  border-color: #c9d7e6;
  background: #eef5fb;
  color: #496176;
  font-weight: 900;
}

.production-plan-pack-badges {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.production-plan-pack-badges span,
.production-plan-pack-empty {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  border: 1px solid #dce7f1;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 8px;
  color: #425a70;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.production-plan-pack-badges strong {
  color: #102f52;
  font-size: 12px;
}

.production-plan-pack-empty {
  justify-content: center;
  background: #f8fafc;
  color: #64748b;
}

.module-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.inventory-table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: -4px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--shadow-soft);
}

.inventory-search-field {
  display: grid;
  flex: 1 1 420px;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.inventory-search-field input,
.inventory-search-field select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #ffffff;
  color: var(--ink);
}

.inventory-search-input-wrap {
  position: relative;
  display: block;
}

.inventory-search-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  pointer-events: none;
}

.inventory-search-input-wrap input {
  padding-left: 38px;
}

.inventory-sort-field {
  flex: 0 1 240px;
}

.product-filter-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(320px, 2fr) auto auto;
  align-items: end;
}

.product-filter-controls > .inventory-search-field {
  grid-column: 1 / span 2;
}

.product-filter-controls > .inventory-page-size-field {
  grid-column: 3;
}

.product-filter-controls > .inventory-advanced-filters {
  grid-column: 4;
  justify-self: end;
}

.inventory-master-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(320px, 2fr) auto auto;
  align-items: end;
  overflow: visible;
}

body.inventory-view .inventory-table-controls.inventory-master-controls {
  overflow: visible;
}

.stock-ledger-controls {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.stock-ledger-controls > .inventory-search-field,
.stock-ledger-controls .inventory-search-input-wrap {
  min-width: 0;
}

.product-filter-controls .inventory-search-field,
.product-filter-controls .inventory-sort-field {
  min-width: 0;
  flex: none;
}

.product-filter-controls .inventory-search-meta {
  align-self: center;
  padding-top: 18px;
}

.product-filter-controls .mini-action {
  align-self: end;
  min-height: 40px;
}

.inventory-quick-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.inventory-filter-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #ffffff;
  color: #23344d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.inventory-filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.inventory-filter-chip.active {
  border-color: rgba(131, 38, 82, 0.35);
  background: #fbeaf2;
  color: var(--brand);
}

.inventory-advanced-filters {
  align-self: end;
  width: 42px;
  min-width: 42px;
}

.inventory-advanced-filters summary {
  position: relative;
  display: inline-flex;
  width: 42px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: #ffffff;
  color: #23344d;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.inventory-advanced-filters summary::-webkit-details-marker {
  display: none;
}

.inventory-advanced-filters summary svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.product-filter-controls > .inventory-advanced-filters summary {
  box-shadow: 0 6px 18px rgba(37, 99, 167, 0.08);
}

.product-filter-controls > .inventory-advanced-filters summary:hover {
  border-color: rgba(43, 101, 170, 0.35);
  background: #f7fbff;
  color: #2563a7;
  transform: translateY(-1px);
}

.filter-count-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  padding: 0 5px;
  background: #2563a7;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(37, 99, 167, 0.22);
}

.inventory-page-size-field {
  display: grid;
  align-self: end;
  gap: 5px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-page-size-field select {
  width: 72px;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.inventory-advanced-filters[open] summary {
  border-color: rgba(131, 38, 82, 0.35);
  color: var(--brand);
}

.inventory-advanced-filters[open] {
  position: relative;
}

.inventory-advanced-filters[open] summary {
  width: 42px;
}

.inventory-advanced-filter-grid {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  width: min(780px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.inventory-advanced-filter-grid .module-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.stock-ledger-advanced-filters .inventory-advanced-filter-grid {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  width: min(560px, calc(100vw - 96px));
}

.product-filter-panel-head {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -2px -2px 2px;
  border-bottom: 1px solid #e5edf6;
  padding: 0 0 10px;
}

.product-filter-panel-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-filter-panel-head strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.product-filter-panel-head span,
.product-filter-panel-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.product-filter-panel-head em {
  flex: 0 0 auto;
  border: 1px solid #d9e6f4;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f7fbff;
  color: #2563a7;
}

.product-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 12px;
  border: 1px solid #d9e6f4;
  border-radius: 8px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: var(--shadow-soft);
}

.product-active-filters span {
  color: #52657a;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.product-active-filters b {
  max-width: min(260px, 100%);
  overflow: hidden;
  border: 1px solid #dbe8f6;
  border-radius: 999px;
  padding: 5px 9px;
  background: #ffffff;
  color: #263449;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-active-filters .mini-action {
  min-height: 30px;
  margin-left: auto;
  padding: 5px 10px;
}

.kitchen-search-controls {
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: end;
  margin: 2px 0 12px;
}

.kitchen-search-controls.has-row-options,
.kitchen-search-controls.has-filter-options {
  grid-template-columns: minmax(280px, 1fr) auto auto auto auto;
}

.kitchen-search-controls .kitchen-filter-options {
  justify-self: end;
}

.kitchen-filter-grid {
  grid-template-columns: minmax(180px, 1fr);
  width: min(260px, calc(100vw - 48px));
}

.kitchen-search-controls .inventory-search-field {
  min-width: 0;
}

.kitchen-search-controls .inventory-search-meta {
  align-self: center;
  padding-top: 18px;
}

.kitchen-search-controls .mini-action {
  align-self: end;
  min-height: 40px;
}

.product-master-head,
.compact-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 10px;
}

.product-master-head span,
.compact-panel-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.product-ledger-panel {
  overflow: hidden;
  margin: 12px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.product-ledger-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.product-ledger-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.product-ledger-title > span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-ledger-title strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.product-ledger-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-ledger-meta span {
  border: 1px solid #dbe7f4;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.product-ledger-tabs {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.product-ledger-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 2px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.product-ledger-tabs button.active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

.product-ledger-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.product-ledger-summary,
.product-ledger-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.product-ledger-summary div,
.product-ledger-detail-grid div {
  min-width: 0;
  border: 1px solid #dbe7f4;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.product-ledger-summary span,
.product-ledger-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-ledger-summary strong,
.product-ledger-detail-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.compact-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.compact-panel-actions .mini-action {
  min-height: 34px;
}

.compact-inline-select {
  min-width: 190px;
}

.compact-inline-select select {
  min-height: 34px;
  padding-block: 6px;
}

.stock-verification-actions {
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}

.stock-verification-actions .compact-inline-select {
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.stock-verification-actions .compact-inline-select select {
  width: 160px;
  min-height: 36px;
}

.stock-verification-actions #stockVerificationCategory {
  width: 220px;
}

.stock-verification-actions .product-add-icon {
  height: 36px;
  min-height: 36px;
  align-self: flex-end;
}

@media (max-width: 980px) {
  .stock-verification-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .stock-verification-actions .compact-inline-select select,
  .stock-verification-actions #stockVerificationCategory {
    width: min(220px, calc(100vw - 48px));
  }
}

.product-add-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  white-space: nowrap;
}

.product-add-icon svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.product-add-icon span {
  color: #ffffff;
  font-weight: 800;
}

body:not([data-guidance-mode]) .product-master-head,
body[data-guidance-mode="hidden"] .product-master-head {
  justify-content: flex-end;
}

body:not([data-guidance-mode]) .compact-panel-head,
body[data-guidance-mode="hidden"] .compact-panel-head {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .product-master-head,
  .compact-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-panel-actions {
    justify-content: flex-start;
  }

  .compact-inline-select {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .inventory-master-controls,
  .product-filter-controls {
    grid-template-columns: minmax(240px, 1fr);
    align-items: stretch;
  }

  .inventory-advanced-filters {
    width: 42px;
    min-width: 42px;
  }

  .product-filter-controls > .inventory-search-field,
  .product-filter-controls > .inventory-page-size-field,
  .product-filter-controls > .inventory-advanced-filters {
    grid-column: auto;
  }

  .inventory-advanced-filter-grid {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 8px;
  }

  .stock-ledger-advanced-filters .inventory-advanced-filter-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .product-filter-panel-head,
  .product-active-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .product-active-filters .mini-action {
    margin-left: 0;
  }

  .kitchen-search-controls {
    grid-template-columns: minmax(240px, 1fr);
    align-items: stretch;
  }

  .kitchen-search-controls.has-row-options,
  .kitchen-search-controls.has-filter-options {
    grid-template-columns: minmax(240px, 1fr);
  }

  .kitchen-search-controls .inventory-search-meta {
    padding-top: 0;
  }
}

.inventory-search-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.smart-table-controls {
  flex-wrap: wrap;
}

.smart-table-controls .mini-action {
  min-height: 40px;
}

.stock-flow-guide {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--shadow-soft);
}

.stock-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-flow-head strong {
  color: var(--ink);
  font-size: 14px;
}

.stock-flow-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.stock-flow-dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.stock-flow-tile {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.stock-flow-tile strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.stock-flow-tile span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.stock-flow-tile.warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.stock-flow-tile.danger {
  border-color: #fecaca;
  background: #fff1f2;
}

.stock-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.stock-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  gap: 4px 8px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.stock-flow-step b {
  display: inline-grid;
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 11px;
}

.stock-flow-step strong,
.stock-flow-step span,
.stock-flow-step em {
  min-width: 0;
}

.stock-flow-step strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-flow-step span {
  display: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

.stock-flow-step em {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  color: var(--blue);
  font-size: 18px;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
}

.stock-flow-step .link-button {
  grid-column: 2 / -1;
  justify-self: start;
  padding: 0;
  font-size: 11px;
}

.transfer-progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 116px;
}

.transfer-progress-mini span {
  width: 16px;
  height: 6px;
  border-radius: 999px;
  background: #d7e1ec;
}

.transfer-progress-mini span.done {
  background: var(--mint);
}

.transfer-progress-mini span.current {
  background: var(--brand);
}

.transfer-dialog-guide {
  margin: 2px 0 0;
}

.transfer-dialog-guide small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.kitchen-shell {
  display: grid;
  gap: 16px;
}

.kitchen-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.kitchen-section-tabs button {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
}

.kitchen-section-tabs button.active,
.kitchen-section-tabs button:hover {
  border-color: #cfd8e4;
  background: #eef6ff;
  color: var(--blue);
  font-weight: 700;
}

.kitchen-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.kitchen-kpi {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.kitchen-kpi strong {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.kitchen-kpi span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.kitchen-kpi small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.kitchen-kpi.mint {
  border-top: 4px solid var(--mint);
}

.kitchen-kpi.blue {
  border-top: 4px solid var(--blue);
}

.kitchen-kpi.violet {
  border-top: 4px solid #7c3aed;
}

.kitchen-kpi.rose {
  border-top: 4px solid var(--brand);
}

.kitchen-kpi.gold {
  border-top: 4px solid var(--gold);
}

.kds-board-shell {
  display: grid;
  gap: 14px;
}

.kds-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.kds-board-head > div:first-child {
  display: grid;
  gap: 4px;
}

.kds-board-head strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 750;
}

.kds-board-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.kds-station-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.kds-station-tabs button {
  border: 1px solid #cfd8e4;
  border-radius: 8px;
  min-height: 38px;
  padding: 7px 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.kds-station-tabs button.active,
.kds-station-tabs button:hover {
  border-color: var(--brand);
  background: #fff7f7;
  color: var(--brand);
}

.kds-ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}

.kds-ticket {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.kds-ticket header,
.kds-ticket footer,
.kds-ticket-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kds-ticket header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.kds-ticket header strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.kds-ticket header span,
.kds-ticket-meta span,
.kds-ticket-items span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kds-ticket-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.kds-ticket-meta span {
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
}

.kds-ticket-items {
  display: grid;
  gap: 7px;
}

.kds-ticket-items div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf1f7;
  padding-bottom: 7px;
}

.kds-ticket-items div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kds-ticket-items strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.kds-status-preparing {
  border-left-color: var(--blue);
}

.kds-status-ready {
  border-left-color: var(--mint);
}

.kds-status-done {
  opacity: 0.72;
  border-left-color: #94a3b8;
}

.kds-empty {
  border: 1px dashed #cfd8e4;
  border-radius: 8px;
  padding: 28px;
  background: #ffffff;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

body.kds-display-mode {
  overflow: hidden;
  background: #5f636b;
}

body.kds-display-mode .app-shell {
  display: block;
  min-height: 100vh;
}

body.kds-display-mode .sidebar,
body.kds-display-mode .topbar,
body.kds-display-mode .workspace-pulse,
body.kds-display-mode .global-search-panel,
body.kds-display-mode .support-widget,
body.kds-display-mode .notification-popover,
body.kds-display-mode .network-banner {
  display: none;
}

body.kds-display-mode .workspace {
  height: 100vh;
  padding: 8px;
  overflow: hidden;
  background: #5f636b;
}

body.kds-display-mode .content-grid {
  display: block;
  height: 100%;
}

.kds-station-display {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  height: calc(100vh - 16px);
  min-height: 0;
  border: 10px solid #111827;
  border-radius: 28px;
  padding: 10px;
  background: #6b7078;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 44px rgba(15, 23, 42, 0.22);
}

body.kds-new-ticket-alert .kds-station-display {
  animation: kds-new-ticket-pulse 0.7s ease-in-out 3;
}

@keyframes kds-new-ticket-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 44px rgba(15, 23, 42, 0.22); }
  50% { box-shadow: inset 0 0 0 4px rgba(250, 204, 21, 0.95), 0 18px 44px rgba(15, 23, 42, 0.22); }
}

.kds-station-rail {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.kds-station-rail div,
.kds-station-rail button {
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  padding: 6px;
  background: #f8fafc;
  color: #1f2937;
  text-align: center;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.kds-station-rail strong {
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.kds-station-rail span {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.kds-station-rail svg {
  width: 18px;
  height: 18px;
}

.kds-station-rail .kds-station-logout {
  margin-top: 10px;
  background: #fee2e2;
  color: #991b1b;
}

.kds-station-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

.kds-station-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-radius: 7px;
  padding: 8px 12px;
  background: rgba(17, 24, 39, 0.78);
  color: #ffffff;
}

.kds-station-title div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.kds-station-title strong {
  overflow: hidden;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kds-station-title span {
  font-size: 13px;
  font-weight: 750;
}

.kds-station-ticket-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.kds-station-ticket {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.kds-station-ticket.kds-age-fresh {
  border-color: rgba(22, 163, 74, 0.55);
}

.kds-station-ticket.kds-age-warn {
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 8px 18px rgba(146, 64, 14, 0.24);
}

.kds-station-ticket.kds-age-late {
  border-color: rgba(220, 38, 38, 0.95);
  box-shadow: 0 8px 20px rgba(127, 29, 29, 0.34);
}

.kds-station-ticket header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 9px 5px;
  background: #f87171;
  color: #111827;
}

.kds-station-ticket.kds-status-preparing header {
  background: #fbbf24;
}

.kds-station-ticket.kds-status-ready header {
  background: #86ef7d;
}

.kds-station-ticket.kds-status-done header {
  background: #cbd5e1;
}

.kds-station-ticket header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.kds-station-ticket header strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kds-station-ticket header span {
  font-size: 10px;
  font-weight: 750;
}

.kds-done-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(17, 24, 39, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.kds-station-ticket-mode {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 6px;
  padding: 0 8px;
}

.kds-station-ticket-mode span,
.kds-station-ticket-mode strong {
  display: grid;
  min-height: 26px;
  place-items: center;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.kds-station-ticket-mode span {
  background: #e5e7eb;
  color: #111827;
}

.kds-station-ticket-mode strong {
  background: #d8b4fe;
  color: #111827;
}

.kds-station-ticket-items {
  display: grid;
  gap: 6px;
  padding: 0 9px 2px;
}

.kds-station-ticket-items div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 7px;
  min-width: 0;
}

.kds-station-ticket-items strong {
  display: grid;
  min-width: 28px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
}

.kds-station-ticket-items span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.kds-station-ticket-items small {
  grid-column: 2;
  color: #059669;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.15;
}

.kds-station-ticket footer {
  display: grid;
  padding: 0 9px 9px;
}

.kds-station-ticket footer button {
  min-height: 44px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
}

.kds-done-hold {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 6px;
  background: #dcfce7;
  color: #166534;
  font-size: 14px;
  font-weight: 900;
}

.kds-station-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 850;
}

.kds-mapping-form {
  display: grid;
  gap: 12px;
}

.kds-test-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.kds-test-signal label {
  display: grid;
  min-width: 160px;
  gap: 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.kds-test-signal input,
.kds-test-signal select {
  min-height: 38px;
}

.kds-user-station-field.hidden {
  display: none;
}

.kds-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.kds-settings-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.kds-settings-row input[type="numeric"],
.kds-settings-row input[inputmode="numeric"] {
  width: 72px;
}

.kds-mapping-card input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .kds-board-head {
    align-items: stretch;
    flex-direction: column;
  }

  .kds-station-tabs {
    justify-content: flex-start;
  }

  .kds-ticket header,
  .kds-ticket footer {
    align-items: stretch;
    flex-direction: column;
  }

  .kds-ticket footer button {
    width: 100%;
  }
}

.kitchen-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.kitchen-work-grid > .wide {
  grid-column: auto;
}

.kitchen-work-grid .panel {
  padding: 16px;
}

.kitchen-work-grid .panel > h2:first-child {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 650;
}

.kitchen-work-grid .table-wrap {
  overflow: hidden;
}

.kitchen-work-grid .table-wrap table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.kitchen-work-grid table {
  white-space: normal;
}

.kitchen-work-grid th,
.kitchen-work-grid td {
  padding: 8px 7px;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
}

.kitchen-work-grid .mini-bar {
  min-width: 0;
  height: 7px;
  margin-top: 5px;
}

.kitchen-work-grid .pill {
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.kitchen-work-grid .action-cell,
.kitchen-work-grid .row-actions {
  gap: 5px;
}

.kitchen-work-grid .mini-action {
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 1.15;
}

.kitchen-work-grid td > .mini-action {
  width: 100%;
}

.logistics-store-summary {
  display: grid;
  gap: 14px;
}

.logistics-store-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  min-width: 0;
}

.logistics-store-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid #d7e2ee;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.logistics-store-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 9px;
}

.logistics-store-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 220px;
}

.logistics-store-edit-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.logistics-store-edit-list .mini-action {
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.logistics-route-action {
  min-height: 32px;
  padding: 0 10px;
  gap: 5px;
  white-space: nowrap;
}

.logistics-route-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.logistics-store-card header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.logistics-store-card header strong,
.logistics-store-card header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.logistics-store-card header strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.logistics-store-card header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.logistics-pack-list {
  display: grid;
  gap: 8px;
}

.logistics-pack-line {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid #e6edf5;
  border-radius: 7px;
  background: #fff;
  padding: 8px;
}

.logistics-pack-line strong {
  color: var(--brand);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.logistics-pack-line span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 800;
}

.logistics-pack-line small {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.logistics-route-tabs button {
  max-width: 220px;
  overflow-wrap: anywhere;
}

.logistics-device-map code {
  display: block;
  max-width: min(760px, 100%);
  overflow-wrap: anywhere;
  border: 1px solid #d8e3ef;
  border-radius: 7px;
  padding: 8px 10px;
  background: #f8fafc;
  color: #14539a;
  font-size: 12px;
  line-height: 1.35;
}

.logistics-display-system .kds-station-title strong,
.logistics-display-system .kds-station-title span {
  overflow-wrap: anywhere;
}

.logistics-display-wall {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.logistics-display-ticket header {
  background: #bfdbfe;
}

.logistics-display-ticket.kds-status-ready header {
  background: #86efac;
}

.logistics-display-ticket.kds-status-dispatched header {
  background: #c4b5fd;
}

.logistics-display-ticket .kds-station-ticket-items div {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
}

.logistics-display-ticket .kds-station-ticket-items strong {
  width: auto;
  min-width: 62px;
  justify-content: center;
  white-space: nowrap;
}

.logistics-display-ticket footer {
  display: grid;
  padding: 0 9px 9px;
}

.logistics-display-ticket footer .logistics-route-action {
  min-height: 44px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
}

.logistics-ticket-mode {
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
}

.logistics-ticket-mode strong {
  overflow-wrap: anywhere;
}

body[data-ui-mode="night"] .logistics-store-card,
body[data-ui-mode="night"] .logistics-pack-line,
body[data-ui-mode="night"] .logistics-device-map code {
  background: #111827;
  border-color: #334155;
  color: #dbeafe;
}

.ai-summary-shell {
  display: grid;
  gap: 16px;
}

.ai-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: start;
}

.ai-brief-header {
  display: grid;
  gap: 12px;
}

.ai-brief-header > div {
  display: grid;
  gap: 5px;
}

.ai-summary-toggle {
  width: max-content;
  min-width: 134px;
}

.ai-brief h2 {
  margin-top: 4px;
  font-size: 30px;
}

.ai-brief span,
.ai-brief-list p {
  color: var(--muted);
}

.ai-brief-list {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.ai-brief-list p {
  margin: 0;
}

.ai-brief-list strong {
  color: var(--ink);
}

.ai-document-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: end;
}

.ai-document-grid label,
.ai-document-context {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-document-context {
  grid-column: 1 / -1;
}

.ai-document-grid textarea {
  min-height: 82px;
  resize: vertical;
}

.ai-document-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ai-document-result {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.ai-document-workbench {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.6fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.ai-preview-pane,
.ai-preview-empty {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  min-height: 360px;
}

.ai-preview-empty {
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.ai-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.ai-preview-pane img,
.ai-preview-pane object {
  width: 100%;
  height: min(68vh, 720px);
  object-fit: contain;
  border: 1px solid #dbe6f2;
  border-radius: 6px;
  background: #f8fafc;
}

.ai-document-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.ai-document-result-head div {
  display: grid;
  gap: 3px;
}

.ai-document-result-head span,
.ai-document-facts span,
.ai-document-list p {
  color: var(--muted);
  font-size: 12px;
}

.ai-document-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-document-facts div {
  display: grid;
  gap: 4px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.ai-document-list {
  display: grid;
  gap: 6px;
  border-left: 3px solid var(--mint);
  padding-left: 10px;
}

.ai-document-list.warn {
  border-left-color: var(--brand);
}

.ai-document-list p {
  margin: 0;
}

.ai-invoice-review {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  min-width: 0;
}

.ai-invoice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-invoice-grid label,
.ai-invoice-note {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-invoice-grid label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.ai-field-confidence {
  border-radius: 999px;
  padding: 2px 6px;
  background: #edfdf5;
  color: #166149;
  font-size: 10px;
  font-weight: 900;
}

.ai-field-confidence.info {
  background: #f2f8ff;
  color: #30547a;
}

.ai-field-confidence.warn {
  background: #fff8eb;
  color: #80520b;
}

.ai-post-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-post-checklist span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.ai-post-checklist svg {
  width: 13px;
  height: 13px;
}

.ai-post-checklist span.ok {
  border-color: #b7eadb;
  background: #f0fdf8;
  color: #166149;
}

.ai-post-checklist span.warn {
  border-color: #f3d49a;
  background: #fff8eb;
  color: #80520b;
}

.ai-duplicate-list,
.ai-scanner-history {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.ai-duplicate-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ai-scanner-history {
  margin-top: 14px;
  overflow-x: auto;
}

.ai-invoice-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-invoice-lines {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ai-invoice-line {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(150px, 1.3fr) repeat(7, minmax(70px, 1fr)) auto;
  gap: 8px;
  align-items: center;
  min-width: 980px;
}

.ai-invoice-line input {
  min-width: 0;
}

.ai-invoice-note textarea {
  min-height: 76px;
}

.ai-review-warning-list {
  display: grid;
  gap: 6px;
  border: 1px solid #f3d49a;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff8eb;
}

.ai-review-warning-list.ok {
  border-color: #b7eadb;
  background: #f0fdf8;
}

.ai-review-warning-list p {
  margin: 0;
  color: #80520b;
  font-size: 12px;
  font-weight: 700;
}

.ai-review-warning-list p.info {
  color: #30547a;
}

.ai-review-warning-list p.warn {
  color: #80520b;
}

.ai-review-warning-list p.ok {
  color: #166149;
}

.ai-posting-audit-note {
  display: grid;
  gap: 3px;
  border: 1px solid #b7eadb;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f0fdf8;
}

.ai-posting-audit-note strong {
  color: #166149;
  font-size: 13px;
  font-weight: 850;
}

.ai-posting-audit-note span {
  color: #52657a;
  font-size: 12px;
  line-height: 1.35;
}

.ai-attach-original {
  justify-content: start;
}

.finance-shell {
  display: grid;
  gap: 16px;
}

.finance-section-tabs {
  background: #ffffff;
}

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.crm-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.finance-kpi {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 122px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.finance-kpi strong {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.finance-kpi span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.finance-kpi small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 700;
}

.finance-kpi.mint {
  border-top: 5px solid var(--mint);
}

.finance-kpi.blue {
  border-top: 5px solid var(--blue);
}

.finance-kpi.violet {
  border-top: 5px solid #7c3aed;
}

.finance-kpi.rose {
  border-top: 5px solid var(--brand);
}

.finance-kpi.gold {
  border-top: 5px solid var(--gold);
}

.finance-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.purchase-kpi-grid,
.purchase-action-strip {
  grid-column: 1 / -1;
}

.purchase-panels {
  display: grid;
  gap: 16px;
}

.purchase-overview-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.purchase-kpi-grid {
  align-items: stretch;
  margin-bottom: 0;
}

.purchase-action-strip {
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  padding: 0;
}

.purchase-action-strip .primary-button,
.purchase-action-strip .ghost-button {
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
}

.purchase-workflow-note {
  margin-top: 12px;
}

.pos-location-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-location-form-actions .primary-button,
.pos-location-form-actions .ghost-button {
  flex: 0 0 auto;
}

@media (max-width: 1440px) {
  .purchase-kpi-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .purchase-action-strip {
    gap: 8px;
  }
}

@media (max-width: 1080px) {
  .purchase-kpi-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .purchase-action-strip .primary-button,
  .purchase-action-strip .ghost-button {
    flex: 1 1 190px;
  }
}

@media (max-width: 640px) {
  .purchase-kpi-grid {
    grid-template-columns: 1fr;
  }

  .purchase-action-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .purchase-action-strip .primary-button,
  .purchase-action-strip .ghost-button {
    width: 100%;
  }
}

.purchase-invoice-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.purchase-invoice-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.purchase-invoice-summary span,
.purchase-invoice-card span,
.purchase-invoice-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.purchase-invoice-summary strong {
  color: var(--ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.supplier-ledger-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.supplier-ledger-details {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.supplier-ledger-details + .supplier-ledger-details {
  margin-top: 10px;
}

.supplier-ledger-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: #f8fbff;
}

.supplier-ledger-details summary span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.supplier-ledger-details summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.supplier-ledger-detail-grid {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.supplier-ledger-detail-grid > div {
  display: grid;
  gap: 8px;
}

.supplier-ledger-detail-grid > div > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.purchase-invoice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.purchase-invoice-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.purchase-invoice-card.paid {
  border-left-color: var(--mint);
  background: #fbfffd;
}

.purchase-invoice-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.purchase-invoice-card-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.purchase-invoice-card-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-aging-badge {
  justify-self: start;
  border: 1px solid #d6e0eb;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.purchase-aging-badge.inline {
  display: inline-flex;
  margin-top: 4px;
}

.purchase-aging-badge.paid {
  border-color: #bdebdc;
  background: #edfdf5;
  color: #0f684f;
}

.purchase-aging-badge.future {
  border-color: #c9def4;
  background: #f2f8ff;
  color: #2563a7;
}

.purchase-aging-badge.today {
  border-color: #f0c98c;
  background: #fff8ea;
  color: #8a5a0a;
}

.purchase-aging-badge.overdue {
  border-color: #efb2b2;
  background: #fff5f5;
  color: #9b2f34;
}

.purchase-invoice-meta,
.purchase-invoice-money {
  display: grid;
  gap: 8px;
}

.purchase-invoice-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purchase-invoice-money {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dce6f1;
  border-radius: 8px;
  padding: 9px;
  background: #f8fafc;
}

.purchase-invoice-meta div,
.purchase-invoice-money div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.purchase-invoice-meta strong,
.purchase-invoice-money strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-status-note {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #edfdf5;
  color: #0f684f;
  font-size: 12px;
  font-weight: 800;
}

.supplier-payment-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dbe8f5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
}

.supplier-payment-helper > div:first-child {
  display: grid;
  gap: 3px;
}

.supplier-payment-helper strong {
  color: var(--ink);
  font-size: 13px;
}

.supplier-payment-helper span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.supplier-payment-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#purchaseDialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

.purchase-invoice-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
  gap: 10px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 22px;
}

.purchase-invoice-form > *,
.purchase-invoice-form label {
  min-width: 0;
}

.purchase-invoice-form input,
.purchase-invoice-form select,
.purchase-invoice-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.purchase-invoice-form > div:first-child {
  display: grid;
  gap: 3px;
}

.purchase-invoice-form > div:first-child h2 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
}

.purchase-invoice-form > div:first-child span {
  font-size: 14px;
  line-height: 1.35;
}

.purchase-invoice-form > div:first-child,
.purchase-invoice-form .dialog-span-2,
.purchase-invoice-form .dialog-actions {
  grid-column: 1 / -1;
}

.purchase-invoice-form .dialog-grid {
  display: contents;
}

.purchase-invoice-scanner {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.purchase-invoice-scanner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.purchase-invoice-scanner-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.purchase-invoice-scanner-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.purchase-invoice-scanner-head span:not(.pill) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.purchase-invoice-scanner-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px 12px;
}

.purchase-invoice-scanner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.purchase-invoice-scanner-actions button,
.purchase-ai-result-actions button {
  min-height: 34px;
}

.purchase-ai-result {
  display: grid;
  gap: 8px;
}

.purchase-ai-result:empty {
  display: none;
}

.purchase-ai-result-card {
  display: grid;
  gap: 10px;
  border: 1px solid #cfe0ee;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.purchase-ai-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.purchase-ai-facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid #e5edf5;
  border-radius: 7px;
  padding: 8px;
  background: #fbfdff;
}

.purchase-ai-facts span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.purchase-ai-facts strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.purchase-ai-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.purchase-ai-warning-list {
  display: grid;
  gap: 5px;
  border: 1px solid #f3d49a;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff8eb;
}

.purchase-ai-warning-list p {
  margin: 0;
  color: #80520b;
  font-size: 12px;
  font-weight: 750;
}

.purchase-invoice-form .dialog-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin: 0 -22px -18px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(208, 219, 231, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 40%);
}

.purchase-invoice-screen {
  display: grid;
  gap: 10px;
}

.purchase-invoice-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  padding: 12px 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 47, 80, 0.07);
}

.purchase-invoice-page-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.purchase-invoice-page-title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.purchase-back-button {
  min-height: 36px;
  padding: 0 13px;
  white-space: nowrap;
}

.purchase-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.purchase-page-actions button {
  min-height: 36px;
  padding: 0 14px;
}

.purchase-invoice-page-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.purchase-invoice-page-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.purchase-invoice-screen-form {
  max-height: none;
  overflow: visible;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.purchase-invoice-screen-form .purchase-invoice-scanner,
.purchase-invoice-field-card {
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(23, 47, 80, 0.055);
}

.purchase-invoice-screen-form .purchase-invoice-scanner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.purchase-invoice-screen-form .purchase-invoice-scanner-head {
  grid-column: 1 / -1;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3edf7;
}

.purchase-invoice-screen-form .purchase-invoice-scanner-grid {
  grid-column: 1;
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
  gap: 10px;
}

.purchase-invoice-screen-form .purchase-invoice-scanner-grid textarea {
  min-height: 44px;
  max-height: 58px;
}

.purchase-invoice-screen-form .purchase-invoice-scanner-actions {
  grid-column: 2;
  align-self: end;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.purchase-invoice-screen-form .purchase-ai-result {
  grid-column: 1 / -1;
}

.purchase-invoice-field-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.purchase-section-supplier,
.purchase-section-reference {
  align-self: start;
}

.purchase-section-amounts {
  background: linear-gradient(180deg, #ffffff, #f8fffb);
}

.purchase-form-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4edf6;
}

.purchase-form-section-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.purchase-form-section-head span {
  max-width: 440px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.purchase-invoice-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.purchase-invoice-field-grid-amounts {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(170px, 1.15fr);
  align-items: end;
}

.purchase-field-wide {
  grid-column: 1 / -1;
}

.purchase-section-supplier .purchase-invoice-field-grid {
  grid-template-columns: minmax(220px, 0.85fr) minmax(180px, 0.65fr) minmax(260px, 1fr);
}

.purchase-field-total {
  border: 1px solid #a9dcc9;
  border-radius: 8px;
  padding: 8px;
  background: #eefbf6;
}

.purchase-field-total input {
  color: #0f6b45;
  font-size: 18px;
  font-weight: 900;
}

.purchase-section-notes textarea {
  min-height: 70px;
}

.purchase-invoice-screen-form input,
.purchase-invoice-screen-form select,
.purchase-invoice-screen-form textarea {
  min-height: 34px;
}

.purchase-invoice-screen-form input:not([type="file"]),
.purchase-invoice-screen-form select,
.purchase-invoice-screen-form textarea {
  border: 1px solid #d5dee9;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
  color: var(--ink);
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.purchase-invoice-screen-form input:not([type="file"]):focus,
.purchase-invoice-screen-form select:focus,
.purchase-invoice-screen-form textarea:focus {
  border-color: #9fbedf;
  background: #ffffff;
  outline: 3px solid rgba(37, 99, 167, 0.13);
  box-shadow: 0 0 0 1px rgba(37, 99, 167, 0.06);
}

.purchase-invoice-screen-form .dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(208, 219, 231, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), #ffffff 36%);
}

.purchase-invoice-screen-form .dialog-actions button {
  min-height: 38px;
}

@media (max-width: 1180px) {
  .purchase-invoice-field-grid-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-field-total {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .purchase-invoice-page-head,
  .purchase-invoice-page-title,
  .purchase-page-actions {
    align-items: stretch;
  }

  .purchase-invoice-page-head,
  .purchase-invoice-page-title {
    flex-direction: column;
  }

  .purchase-page-actions,
  .purchase-page-actions button,
  .purchase-back-button {
    width: 100%;
  }

  .purchase-invoice-screen-form,
  .purchase-invoice-field-grid,
  .purchase-invoice-field-grid-amounts,
  .purchase-invoice-screen-form .purchase-invoice-scanner,
  .purchase-invoice-screen-form .purchase-invoice-scanner-grid {
    grid-template-columns: 1fr;
  }

  .purchase-invoice-screen-form .purchase-invoice-scanner-actions {
    grid-column: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .purchase-form-section-head {
    display: grid;
  }

  .purchase-form-section-head span {
    max-width: none;
    text-align: left;
  }
}
#purchaseOrderDialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#salesOrderDialog {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#estimationDialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

.purchase-order-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.purchase-order-form > *,
.purchase-order-form label {
  min-width: 0;
}

.purchase-order-form > div:first-child,
.purchase-order-form .dialog-span-2,
.purchase-order-form .dialog-actions {
  grid-column: 1 / -1;
}

.purchase-order-form .dialog-grid {
  display: contents;
}

.purchase-order-lines {
  display: grid;
  min-width: 0;
  gap: 10px;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.purchase-order-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.purchase-order-lines-head > div {
  display: grid;
  gap: 2px;
}

.purchase-order-lines-head strong {
  color: var(--ink);
  font-size: 16px;
}

.purchase-order-lines-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.purchase-order-line-list {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.purchase-order-line {
  display: grid;
  grid-template-columns: minmax(180px, 1.55fr) minmax(76px, 0.42fr) minmax(76px, 0.42fr) minmax(88px, 0.48fr) minmax(92px, 0.5fr) 36px;
  min-width: 0;
  gap: 8px;
  align-items: end;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
}

.purchase-order-line label {
  gap: 4px;
  min-width: 0;
  font-size: 12px;
}

.purchase-order-line input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 9px;
  font-size: 14px;
}

.purchase-order-line-amount {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.purchase-order-line-amount strong {
  overflow: hidden;
  min-height: 40px;
  border: 1px solid #dce6f1;
  border-radius: 6px;
  padding: 10px 9px;
  background: #f8fafc;
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-price-history {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-order-remove {
  width: 36px;
  min-width: 36px;
  height: 40px;
  border-color: #f2b5b5;
  color: var(--red);
}

.sales-order-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.sales-order-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.sales-order-metrics div {
  display: grid;
  gap: 4px;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.sales-order-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-order-metrics strong {
  color: var(--ink);
  font-size: 20px;
}

.sales-order-line {
  grid-template-columns: minmax(220px, 1.6fr) minmax(76px, 0.42fr) minmax(76px, 0.42fr) minmax(88px, 0.46fr) minmax(88px, 0.46fr) minmax(98px, 0.5fr) 36px;
}

.sales-order-form textarea {
  min-height: 76px;
  resize: vertical;
}

.sales-order-type-display {
  display: flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  padding: 0 12px;
  background: #f8fafc;
  color: var(--ink);
  font-weight: 900;
}

.sales-order-b2b [name="paymentTerms"],
.sales-order-b2b [name="advanceAmount"] {
  background: #edf7f2;
  color: #145b48;
  font-weight: 900;
}

#b2bPriceDialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

.b2b-price-form {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100dvh - 28px);
  gap: 10px 14px;
  overflow-x: hidden;
  overflow-y: auto;
}

.b2b-price-form > *,
.b2b-price-form label {
  min-width: 0;
}

.b2b-price-form .dialog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.b2b-price-form input,
.b2b-price-form select,
.b2b-price-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.b2b-price-form .settings-note,
.b2b-price-form .dialog-actions {
  grid-column: 1 / -1;
}

.b2b-price-lines {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.b2b-price-line-list {
  display: grid;
  gap: 8px;
}

.b2b-price-line {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(100px, 0.6fr) minmax(100px, 0.6fr) 36px;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.b2b-price-line label {
  min-width: 0;
}

.b2b-price-line .purchase-order-remove {
  min-width: 36px;
}

@media (max-width: 560px) {
  .b2b-price-form .dialog-grid {
    grid-template-columns: 1fr;
  }

  .b2b-price-line {
    grid-template-columns: 1fr;
  }

  .b2b-price-line .purchase-order-remove {
    justify-self: end;
  }
}

.b2b-price-hint {
  min-height: 14px;
  color: #16724f;
  font-size: 11px;
  font-weight: 800;
}

.sales-order-form .dialog-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin: 0 -22px -18px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(208, 219, 231, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 40%);
}

#estimationDialog .sales-order-lines {
  max-width: 100%;
  container-type: inline-size;
}

#estimationLines .sales-order-line {
  max-width: 100%;
  grid-template-columns: minmax(210px, 1.45fr) minmax(68px, 0.42fr) minmax(68px, 0.42fr) minmax(78px, 0.48fr) minmax(78px, 0.48fr) minmax(88px, 0.55fr) 34px;
}

#estimationLines .purchase-order-remove {
  width: 34px;
  min-width: 34px;
}

@container (max-width: 720px) {
  #estimationLines .sales-order-line {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.45fr) minmax(72px, 0.45fr);
  }

  #estimationLines .sales-order-line label:first-child,
  #estimationLines .sales-order-line .purchase-order-line-amount {
    grid-column: 1 / -1;
  }

  #estimationLines .sales-order-line .purchase-order-remove {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 960px) {
  .sales-order-form {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
  }

  .sales-order-form .dialog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sales-order-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-order-line {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.45fr) minmax(72px, 0.45fr);
  }

  .sales-order-line label:first-child,
  .sales-order-line .purchase-order-line-amount {
    grid-column: 1 / -1;
  }

  .sales-order-line .purchase-order-remove {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .sales-order-actions {
    justify-content: stretch;
  }

  .sales-order-actions .primary-button {
    flex: 1 1 100%;
  }

  .sales-order-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .purchase-order-line {
    grid-template-columns: minmax(180px, 1fr) minmax(76px, 0.38fr) minmax(76px, 0.38fr);
  }

  .purchase-order-line-amount {
    grid-column: 1 / span 2;
  }

  .supplier-ledger-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .purchase-order-form {
    grid-template-columns: 1fr;
  }

  .purchase-order-lines-head {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-order-line {
    grid-template-columns: 1fr 1fr;
  }

  .purchase-order-line label:first-child,
  .purchase-order-line-amount {
    grid-column: 1 / -1;
  }

  .supplier-ledger-details summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .supplier-ledger-details summary small {
    text-align: left;
  }
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.selected-row td {
  background: #f8fafc;
}

.table-footer {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.smart-table-shell + .table-footer {
  display: none;
}

.section-tab {
  display: inline-block;
  margin: 22px 0 12px;
  border-bottom: 3px solid var(--blue);
  padding-bottom: 8px;
  color: var(--blue);
  font-size: 18px;
}

.bom-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.bom-detail .module-toolbar {
  margin: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.bom-product-title {
  padding: 14px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.bom-cost-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #f8fbff;
  color: var(--muted);
  font-weight: 800;
}

.bom-cost-summary strong {
  color: var(--ink);
  font-size: 18px;
  white-space: nowrap;
}

.unit-input {
  min-width: 82px;
  max-width: 92px;
}

.nested-table {
  margin: 10px 14px 14px;
  border-left: 3px solid #e8edf2;
  padding-left: 10px;
}

.compact-toolbar {
  margin: 0 0 12px;
  box-shadow: none;
}

.recipe-material-builder {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.recipe-material-rows {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.recipe-material-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.55fr) minmax(68px, 0.55fr) minmax(72px, 0.55fr) minmax(78px, 0.65fr) minmax(94px, 0.8fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.recipe-material-row label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.recipe-material-row input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  font-size: 14px;
  line-height: 1.2;
}

.recipe-material-meta {
  display: grid;
  gap: 4px;
  min-height: 48px;
  align-content: center;
  color: var(--muted);
  font-size: 13px;
}

.recipe-material-meta strong {
  color: var(--ink);
  font-size: 14px;
}

.recipe-material-row .mini-action {
  min-height: 38px;
  white-space: nowrap;
}

.recipe-breakdown,
.recipe-consumption-history {
  margin-top: 14px;
}

.recipe-consumption-history h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

#recipeConsumptionPreview {
  display: grid;
  gap: 10px;
}

#recipeConsumptionPreview .table-wrap {
  margin-top: 2px;
  background: #ffffff;
}

.batch-chip {
  display: inline-flex;
  max-width: 100%;
  border-radius: 4px;
  padding: 7px 10px;
  background: #f1f3f8;
  color: var(--muted);
  white-space: normal;
}

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

#stockRequestDialog {
  width: min(1320px, calc(100vw - 8px));
}

#stockRequestDialog .dialog-panel {
  padding: 14px 18px;
}

#addStockRequestForm {
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
}

#addStockRequestForm > *,
#addStockRequestForm label {
  min-width: 0;
}

#addStockRequestForm input,
#addStockRequestForm select,
#addStockRequestForm textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.stock-request-lines-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #f8fbff;
  min-width: 0;
  overflow: visible;
}

.inline-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.inline-section-header div {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 260px;
}

.inline-section-header strong {
  color: var(--ink);
  font-size: 13px;
}

.inline-section-header span {
  color: var(--muted);
  font-size: 12px;
}

.stock-request-lines {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-height: min(58dvh, 560px);
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 3px 2px 0;
}

.stock-request-line-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 54px 30px !important;
  gap: 6px;
  align-items: center;
  padding: 0 8px 2px;
  min-width: 460px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.stock-request-line {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 54px 30px !important;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 460px;
  padding: 3px 6px;
  border: 1px solid rgba(177, 192, 213, 0.72);
  border-radius: 6px;
  background: #ffffff;
}

.stock-request-line:focus-within {
  z-index: 120;
}

.stock-request-line:has([data-remove-stock-request-line][hidden]) {
  grid-template-columns: minmax(0, 1fr) 82px 54px 30px !important;
}

.stock-request-line label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stock-request-field-label {
  display: none !important;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

#stockRequestDialog .stock-request-line input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 7px;
  font-size: 13px;
  line-height: 1.15;
}

.stock-request-item-field {
  position: relative;
  z-index: 2;
}

.stock-request-item-picker {
  position: relative;
  display: block;
  min-width: 0;
}

.item-lookup-popover {
  position: fixed;
  z-index: 30000;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.item-lookup-popover.in-dialog {
  z-index: 30001;
}

.item-lookup-popover[hidden] {
  display: none !important;
}

#bomProductInput[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.item-lookup-option {
  display: grid;
  gap: 3px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.item-lookup-option:hover,
.item-lookup-option:focus,
.item-lookup-option.active {
  background: #fff8eb;
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.item-lookup-option span {
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.item-lookup-option small,
.item-lookup-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.item-lookup-option small {
  pointer-events: none;
}

.item-lookup-empty {
  padding: 8px 10px;
}

.stock-request-suggestions {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(100% + 5px);
  z-index: 140;
  min-width: min(320px, calc(100vw - 64px));
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.stock-request-suggestion-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.stock-request-suggestion-option:hover,
.stock-request-suggestion-option.active {
  background: var(--blue-tint);
  color: var(--brand-strong);
}

.stock-request-suggestion-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.stock-request-qty-field {
  max-width: none;
}

.stock-request-uom-field {
  display: grid;
  align-content: center;
  min-width: 0;
  max-width: none;
}

.stock-request-uom-field input[type="hidden"] {
  display: none;
}

.stock-request-uom-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  min-width: 0;
  max-width: 54px;
  min-height: 26px;
  height: 26px;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  padding: 0 5px;
  background: #eef6ff;
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-request-uom-pill:empty::before {
  content: "-";
  color: #8a99aa;
  font-weight: 800;
}

#stockRequestDialog .stock-request-remove-button {
  justify-self: end;
  align-self: center;
  display: inline-grid;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 999px;
  padding: 0 !important;
  place-items: center;
  color: #9a3412;
  font-size: 18px;
  line-height: 1;
}

#stockRequestDialog .stock-request-remove-button:hover {
  border-color: #f3b5a5;
  background: #fff1ed;
  color: #7c2d12;
}

.stock-request-line .mini-action[hidden] {
  display: none !important;
}

#stockRequestDialog .stock-request-remove-button[hidden] {
  display: none !important;
}

.transfer-line,
.transfer-receive-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 142px) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(177, 192, 213, 0.72);
  border-radius: 6px;
  background: #ffffff;
}

.transfer-line:has([data-remove-transfer-line][hidden]),
.transfer-receive-line {
  grid-template-columns: minmax(0, 1fr) minmax(96px, 116px) minmax(108px, 132px);
}

.transfer-line label,
.transfer-receive-line label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.transfer-line input,
.transfer-receive-line input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#receiveTransferDialog {
  width: min(560px, calc(100vw - 20px));
}

.receive-transfer-form {
  gap: 14px;
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
}

.receive-transfer-form > *,
.receive-transfer-form label {
  min-width: 0;
}

.receive-transfer-form input,
.receive-transfer-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.receive-transfer-form .settings-note {
  margin: 0;
  padding: 10px 12px;
}

.transfer-receive-item,
.transfer-receive-sent,
.transfer-receive-received {
  display: grid;
  align-content: end;
  gap: 6px;
  min-width: 0;
}

.transfer-receive-item span,
.transfer-receive-sent span,
.transfer-receive-received span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.transfer-receive-item strong,
.transfer-receive-sent strong {
  min-height: 40px;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #d5dee9;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fbff;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.transfer-receive-sent strong {
  justify-content: center;
  white-space: nowrap;
}

.receive-proof-grid {
  align-items: end;
  gap: 12px;
}

.receive-proof-grid input[type="file"] {
  min-height: 40px;
  padding: 6px;
}

.transfer-line .mini-action {
  min-height: 40px;
  white-space: nowrap;
}

.transfer-line .mini-action[hidden] {
  display: none !important;
}

.transfer-priority-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #17406f;
  font-size: 11px;
  font-weight: 700;
}

.transfer-priority-pill.high,
.transfer-priority-pill.urgent {
  background: #fff1e7;
  color: #9a3412;
}

.transfer-priority-pill.low {
  background: #edf8f2;
  color: #166534;
}

.transfer-audit-trail,
.transfer-proof-note {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.transfer-audit-trail span,
.transfer-proof-note span {
  display: block;
  min-width: 0;
}

@media (max-width: 560px) {
  #stockRequestDialog {
    width: calc(100vw - 4px);
  }

  #addStockRequestForm .dialog-grid,
  .receive-proof-grid,
  .transfer-line,
  .transfer-line:has([data-remove-transfer-line][hidden]),
  .transfer-receive-line {
    grid-template-columns: 1fr;
  }

  #stockRequestDialog .stock-request-line .mini-action,
  .transfer-line .mini-action {
    justify-self: end;
  }

  .stock-flow-dashboard,
  .stock-flow-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  #stockRequestDialog .stock-request-line-header {
    display: grid;
  }

  #stockRequestDialog .stock-request-line,
  #stockRequestDialog .stock-request-line:has([data-remove-stock-request-line][hidden]) {
    grid-template-columns: minmax(0, 1fr) 82px 54px 30px !important;
  }

  #stockRequestDialog .stock-request-field-label {
    display: none !important;
  }

  #stockRequestDialog .stock-request-qty-field,
  #stockRequestDialog .stock-request-uom-field {
    max-width: none;
  }

  #stockRequestDialog .stock-request-uom-pill {
    justify-content: center;
    width: 54px;
  }

  #stockRequestDialog .stock-request-remove-button {
    justify-self: end;
  }
}

.checkbox-label {
  grid-template-columns: auto 1fr;
  align-items: center;
  align-self: center;
}

.checkbox-label input {
  width: auto;
}

.recipe-card,
.forecast {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.recipe-card:first-of-type {
  border-top: 0;
}

.empty-text {
  margin: 0;
  color: var(--muted);
}

.access-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.access-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.access-strip strong,
.access-strip small {
  display: block;
}

.access-strip small {
  color: var(--muted);
}

.access-strip label {
  display: grid;
  gap: 6px;
  min-width: 280px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.access-strip select {
  width: 100%;
}

select:disabled {
  color: var(--muted);
  background: #eef1f4;
  cursor: not-allowed;
}

.pos-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.25fr) minmax(380px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.pos-cashier-board {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(340px, 0.78fr) minmax(300px, 0.68fr);
  gap: 16px;
  align-items: start;
}

.pos-products-panel,
.pos-cart-panel,
.pos-workflow-panel {
  display: grid;
  gap: 14px;
}

.pos-counter-toolbar,
.pos-cart-head {
  margin-bottom: 0;
}

.pos-counter-time {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.pos-counter-time strong {
  color: var(--brand);
  font-size: 13px;
}

.pos-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.pos-action {
  display: grid;
  gap: 4px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.pos-action.primary {
  border-color: #1f8f6f;
  background: #1f8f6f;
  color: #ffffff;
}

.pos-action.danger {
  border-color: #f3b5b5;
  background: #fff5f5;
  color: #9f1d1d;
}

.pos-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pos-action strong,
.pos-action span {
  display: block;
}

.pos-action strong {
  font-size: 15px;
  line-height: 1.2;
}

.pos-action span {
  color: inherit;
  font-size: 12px;
  opacity: 0.78;
}

.pos-checkout-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.pos-checkout-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-checkout-grid input,
.pos-checkout-grid select {
  width: 100%;
}

.pos-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-category-filters button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pos-category-filters button.active,
.pos-category-filters button:hover {
  border-color: var(--brand);
  background: #fff4f4;
  color: var(--brand);
}

.cashier-product-palette {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cashier-product-palette button {
  min-height: 92px;
}

.pos-cart-head strong {
  color: var(--brand);
  font-size: 22px;
}

.pos-save-actions {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
}

.pos-save-button {
  min-height: 50px;
  font-size: 17px;
}

.pos-approval-panel,
.pos-side-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.pos-approval-panel strong,
.pos-section-title strong {
  display: block;
}

.pos-approval-panel span,
.pos-section-title span,
.pos-held-row span,
.pos-held-row small,
.pos-today-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.pos-approval-actions,
.pos-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-approval-actions button {
  flex: 1 1 82px;
}

.pos-bill-dock .pos-approval-panel {
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fbfdff;
}

.pos-bill-dock .pos-approval-panel strong {
  font-size: 13px;
}

.pos-bill-dock .pos-approval-panel span {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-bill-dock .pos-approval-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pos-bill-dock .pos-approval-actions .pos-icon-action {
  width: 100%;
  min-width: 0;
}

.pos-bill-dock .pos-approval-actions .pos-icon-action span {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pos-held-list,
.pos-today-list {
  display: grid;
  gap: 8px;
}

.pos-held-row,
.pos-today-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.pos-held-row b,
.pos-today-row b {
  white-space: nowrap;
}

.pos-mini-actions {
  grid-column: 1 / -1;
}

.pos-today-row.compact {
  grid-template-columns: minmax(0, 1fr);
}

.pos-today-row.compact .pos-mini-actions {
  grid-column: auto;
}

.pos-today-row.voided {
  opacity: 0.72;
}

.pos-today-row.voided strong {
  text-decoration: line-through;
}

.pos-request-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border-block: 1px solid var(--line);
  padding-block: 14px;
}

.pos-request-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pos-request-panel-header > div {
  display: grid;
  gap: 4px;
}

.pos-request-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pos-request-panel-header span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pos-request-panel-header strong {
  font-size: 18px;
  line-height: 1.25;
}

.request-rail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.request-rail-item {
  display: grid;
  gap: 5px;
  border-left: 3px solid var(--brand);
  padding: 10px 12px;
  background: #fff8eb;
  border-radius: 8px;
}

.request-rail-item strong,
.request-rail-item span {
  display: block;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.form-grid.single-control {
  grid-template-columns: minmax(220px, 360px);
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.form-grid select {
  width: 100%;
}

.readonly-field {
  display: flex;
  align-items: center;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #eef1f4;
  color: var(--muted);
  font-weight: 800;
}

.pos-search {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  background: #ffffff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.suggestion-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.suggestion-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.suggestion-list button:first-child {
  border-top: 0;
}

.suggestion-list button:hover,
.suggestion-list button:focus,
.suggestion-list button.active {
  background: #fff8eb;
}

.suggestion-list button.active {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.suggestion-list strong,
.suggestion-list span {
  display: block;
}

.suggestion-list span,
.search-hint {
  color: var(--muted);
  font-size: 13px;
}

.product-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.product-palette button {
  display: grid;
  gap: 5px;
  min-height: 88px;
  border: 1.5px solid #e2eaf2;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.product-palette strong {
  line-height: 1.25;
}

.product-palette button:hover {
  border-color: var(--brand);
  background: #fff8f8;
  box-shadow: 0 4px 14px rgba(166, 50, 50, 0.12);
  transform: translateY(-1px);
}

.product-palette button.stock-warn {
  border-color: #e7b95e;
  background: #fffaf0;
}

.product-palette button.stock-danger {
  border-color: #efb4b4;
  background: #fff5f5;
}

.product-palette span,
.cart-row span {
  color: var(--muted);
  font-size: 13px;
}

.product-stock-chip {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
}

.product-stock-chip.ok {
  background: #e8f7f0;
  color: var(--mint);
}

.product-stock-chip.warn {
  background: #fff2d6;
  color: var(--warn);
}

.product-stock-chip.danger {
  background: #ffe8e8;
  color: var(--brand);
}

.product-stock-chip.neutral {
  background: #eef1f4;
  color: var(--muted);
}

.cart-list {
  display: grid;
  gap: 8px;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 130px 90px 36px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.cart-row:first-child {
  border-top: 0;
}

.cart-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.cart-row button {
  width: 34px;
  height: 34px;
  border: 1px solid #f0c2c2;
  border-radius: 8px;
  background: #fff4f4;
  color: var(--brand);
  font-weight: 900;
}

.cart-row.assorted {
  grid-template-columns: minmax(120px, 1fr) 130px 90px 36px;
}

.cart-row.assorted .pos-assorted-qty,
.pos-bill-line.assorted .pos-assorted-qty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.cart-stock {
  display: block;
  margin-top: 3px;
}

.cart-stock.warn {
  color: var(--brand);
  font-weight: 900;
}

.pos-stock-note {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.pos-stock-note strong,
.pos-stock-note span {
  display: block;
}

.pos-stock-note span {
  color: var(--muted);
  font-size: 13px;
}

.pos-stock-note small {
  color: #8a4f00;
  font-size: 12px;
}

.pos-stock-note .mini-action {
  justify-self: start;
  margin-top: 4px;
}

.pos-stock-note.ok {
  border-color: #bfe8d5;
  background: #eefaf4;
}

.pos-stock-note.packing {
  border-color: #b7d5ef;
  background: #f1f7fd;
}

.pos-stock-note.packing strong {
  color: #16466f;
}

.pos-stock-note.packing small {
  color: #46657f;
}
.pos-stock-note.warn {
  border-color: #efb4b4;
  background: #fff5f5;
}

.pos-stock-note.warn strong {
  color: var(--brand);
}

.assorted-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.assorted-practice-grid .settings-note span {
  display: none;
}

.bill-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  margin: 16px 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.bill-total span {
  color: var(--muted);
}

.bill-total b {
  color: var(--brand);
  font-size: 22px;
}

.pos-cashier-board.pos-fast-board {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  height: calc(100vh - 96px);
  min-height: 620px;
  align-items: stretch;
}

.pos-fast-topbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 58px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.pos-fast-topbar .pos-kiosk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pos-kiosk-actions button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.pos-fast-topbar > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pos-fast-topbar strong {
  font-size: 17px;
  line-height: 1.2;
}

.pos-fast-topbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-fast-topbar b {
  color: var(--brand);
  font-size: 21px;
  text-align: right;
}

.pos-quick-admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.pos-quick-admin-panel summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.pos-quick-admin-panel summary span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--blue);
}

.pos-quick-admin-panel summary svg {
  width: 18px;
  height: 18px;
}

.pos-quick-admin-panel summary small {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pos-quick-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  padding-top: 12px;
}

.pos-quick-admin-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pos-quick-admin-grid select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.pos-quick-admin-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.template-copy-editor-dialog {
  width: min(760px, calc(100vw - 28px));
}

.template-copy-editor-form {
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

.template-copy-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.template-copy-editor-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.1;
}

.template-copy-editor-head span {
  color: var(--muted);
  font-weight: 700;
}

.template-copy-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-copy-editor-form textarea {
  min-height: 84px;
  resize: vertical;
}

.pos-counter-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  min-width: 0;
}

.pos-health-card {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

button.pos-health-card {
  cursor: pointer;
}

.pos-health-card strong,
.pos-health-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-health-card strong {
  font-size: 12px;
  font-weight: 900;
}

.pos-health-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-health-card.online {
  border-color: #bde6d4;
  background: #effbf6;
}

.pos-health-card.offline {
  border-color: #f0d38b;
  background: #fff9e7;
}

.pos-health-card.stock {
  border-color: #d6e0eb;
  background: #f8fbff;
}

.pos-fast-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.pos-fast-counter {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
}

.pos-fast-input-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.32fr) 64px;
  gap: 8px;
  align-items: end;
}

.pos-fast-input-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pos-salesperson-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pos-salesperson-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 5px;
  min-width: 0;
}

.pos-salesperson-chips button {
  min-width: 0;
  min-height: 36px;
  border: 1px solid #cbd8e6;
  border-radius: 9px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 7px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-salesperson-chips button.active {
  border-color: #00a37a;
  background: #e6fff6;
  color: #00765c;
  box-shadow: inset 0 0 0 1px rgba(0, 163, 122, 0.18);
}

.pos-salesperson-field select.is-hidden {
  display: none;
}

.pos-fast-input-row input,
.pos-fast-input-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.pos-fast-search input {
  font-size: 15px;
}

.pos-add-search {
  min-height: 34px;
  border-radius: 8px;
  padding-inline: 8px;
  font-size: 12px;
}

.pos-suggestion-list {
  max-height: 236px;
  overflow: auto;
}

.pos-suggestion-list strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.pos-suggestion-list kbd {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: #eef4f8;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
}

.pos-suggestion-list small {
  display: block;
  border-top: 1px solid var(--line);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-search-status {
  display: block;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fafc;
}

.pos-fast-bill-head,
.pos-fast-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pos-fast-bill-head > div:first-child,
.pos-fast-products-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.pos-fast-bill-head strong,
.pos-fast-products-head strong {
  font-size: 16px;
}

.pos-fast-bill-head span,
.pos-fast-products-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-fast-bill-head b {
  color: var(--brand);
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.pos-bill-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.pos-fast-table-wrap {
  overflow: auto;
  min-height: 190px;
  max-height: 28vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pos-fast-cart-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.pos-fast-cart-table th,
.pos-fast-cart-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

.pos-fast-cart-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef1f4;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.pos-fast-cart-table td strong,
.pos-fast-cart-table td span {
  display: block;
}

.pos-fast-cart-table td input {
  width: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  text-align: right;
}

.pos-qty-control {
  display: inline-grid;
  grid-template-columns: 30px 66px 30px;
  align-items: center;
  gap: 4px;
}

.pos-qty-control button {
  width: 30px;
  height: 32px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.pos-qty-control button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.pos-qty-control input {
  width: 66px;
}

.pos-fast-cart-table .money-cell {
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.pos-empty-row td {
  height: 112px;
  color: var(--muted);
  text-align: center;
}

.pos-remove-line {
  width: 30px;
  height: 30px;
  border: 1px solid #f0c2c2;
  border-radius: 8px;
  background: #fff4f4;
  color: var(--brand);
  font-weight: 900;
}

.pos-fast-products {
  grid-template-columns: repeat(auto-fit, minmax(min(164px, 100%), 1fr));
  align-items: stretch;
  min-height: 112px;
  max-height: 246px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}

.pos-fast-products button {
  align-content: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 104px;
  padding: 10px 12px;
  grid-template-rows: auto minmax(34px, auto) auto auto;
}

.pos-fast-products button > * {
  min-width: 0;
}

.pos-product-code {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.pos-fast-products strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-palette em {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pos-fast-products .product-stock-chip {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-product-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-fast-rail {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
}

.pos-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid #cce7ef;
  border-radius: 8px;
  padding: 8px;
  background: #edf9fc;
}

.pos-quick-action {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 5px;
  background: #ffffff;
  color: var(--ink);
  text-align: center;
}

.pos-quick-action.primary {
  border-color: #1f8f6f;
  background: #1f8f6f;
  color: #ffffff;
}

.pos-quick-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pos-quick-action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pos-quick-action strong,
.pos-quick-action span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pos-quick-action strong {
  font-size: 12px;
  line-height: 1.2;
}

.pos-quick-action span {
  color: inherit;
  font-size: 11px;
  opacity: 0.74;
}

.pos-info-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.pos-info-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.pos-detail-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  margin: 0;
}

.pos-detail-list dt,
.pos-detail-list dd {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.pos-detail-list dt {
  color: var(--muted);
  font-weight: 800;
}

.pos-detail-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.pos-last-bill-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pos-last-bill-actions .pos-icon-action {
  width: 100%;
  min-width: 0;
}

.pos-last-bill-actions .pos-icon-action svg {
  width: 18px;
  height: 18px;
}

.pos-rail-workflow {
  display: grid;
  gap: 8px;
}

.pos-payment-strip {
  z-index: 4;
  display: grid;
  gap: 8px;
  border: 1px solid #c9dce5;
  border-radius: 8px;
  padding: 8px;
  background: #f8fbfd;
  box-shadow: 0 -10px 24px rgba(31, 41, 51, 0.08);
}

.pos-payment-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pos-payment-flow > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.pos-payment-flow b {
  grid-row: span 2;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #dce5ef;
  color: var(--muted);
  font-size: 13px;
}

.pos-payment-flow strong,
.pos-payment-flow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.pos-payment-flow span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-payment-flow .done b,
.pos-payment-flow .current b {
  background: var(--mint);
  color: #ffffff;
}

.pos-payment-flow .current {
  border-color: #bfe8d5;
  background: #f3fcf8;
}

.pos-payment-flow .warn {
  border-color: #efb4b4;
  background: #fff5f5;
}

.pos-payment-flow .warn b {
  background: var(--brand);
  color: #ffffff;
}

.pos-total-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(82px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pos-total-metrics > div {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border-right: 1px solid var(--line);
  padding: 6px;
  text-align: center;
}

.pos-total-metrics > div:last-child {
  border-right: 0;
}

.pos-total-metrics strong {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.pos-total-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-total-metrics .pos-grand-total strong {
  color: var(--brand);
  font-size: 18px;
}

.pos-payment-actions {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 6px;
}

.pos-pay-action {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  background: #252b32;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.pos-pay-action.active {
  background: #1f8f6f;
}

.pos-pay-action.save {
  background: #1f8f6f;
}

.pos-pay-action.print {
  background: #334155;
}

.pos-pay-action.clear {
  border: 1px solid #f0c2c2;
  background: #ffffff;
  color: var(--brand);
}

.pos-pay-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stacked-bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #e8edf2;
}

.stacked-bar i,
.stacked-bar b,
.stacked-bar em {
  display: block;
  height: 100%;
}

.stacked-bar i {
  background: var(--brand);
}

.stacked-bar b {
  background: var(--gold);
}

.stacked-bar em {
  background: var(--blue);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.timeline span {
  display: grid;
  min-height: 70px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  text-align: center;
}

dialog {
  width: min(520px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(31, 41, 51, 0.28);
}

dialog.wide-dialog {
  width: min(980px, calc(100vw - 28px));
}

.held-bills-dialog {
  width: min(620px, calc(100vw - 28px));
}

.quantity-keypad-dialog {
  width: min(440px, calc(100vw - 28px));
}

.pos-discount-dialog {
  width: min(520px, calc(100vw - 28px));
}

.assorted-dialog {
  width: min(760px, calc(100vw - 28px));
}

.day-close-dialog {
  width: min(920px, calc(100vw - 24px));
}

#dayCloseForm {
  max-height: calc(100dvh - 24px);
  gap: 9px;
  overflow: hidden;
  padding: 16px 18px;
}

#dayCloseForm h2 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
}

#dayCloseForm .eyebrow {
  margin-bottom: 3px;
}

#dayCloseForm .settings-note {
  gap: 2px;
  padding: 8px 10px;
}

#dayCloseForm .settings-note strong {
  font-size: 13px;
}

#dayCloseForm .settings-note span {
  font-size: 12px;
}

#dayCloseForm .dialog-grid {
  gap: 8px 12px;
}

.day-close-context-grid {
  grid-template-columns: 0.75fr 1fr 1.15fr;
}

.day-close-summary-grid {
  grid-template-columns: 0.5fr 1fr;
}

.day-close-money-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#dayCloseForm label {
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.18;
}

#dayCloseForm input,
#dayCloseForm select,
#dayCloseForm textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 14px;
  line-height: 1.2;
}

#dayCloseForm textarea {
  min-height: 48px;
  resize: vertical;
}

#dayCloseForm .dialog-actions {
  margin-top: 2px;
}

@media (max-width: 820px) {
  .day-close-context-grid,
  .day-close-summary-grid,
  .day-close-money-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .day-close-context-grid,
  .day-close-summary-grid,
  .day-close-money-grid {
    grid-template-columns: 1fr;
  }
}

.held-bills-dialog .dialog-panel {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#heldBillsDialogContent {
  min-height: 120px;
  max-height: min(520px, calc(100dvh - 210px));
  overflow: auto;
}

#heldBillsDialogContent .pos-side-section {
  border-top: 0;
  padding-top: 0;
}

#heldBillsDialogContent .pos-held-row {
  background: #ffffff;
}

#heldBillsDialogContent .pos-mini-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quantity-preset-grid,
.quantity-pad-grid {
  display: grid;
  gap: 8px;
}

.quantity-preset-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quantity-pad-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quantity-preset-grid button,
.quantity-pad-grid button {
  min-height: 42px;
  border: 1px solid #d3deea;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.quantity-preset-grid button:hover,
.quantity-pad-grid button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.pos-discount-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pos-discount-summary div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.pos-discount-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-discount-summary strong {
  color: var(--ink);
  font-size: 16px;
}

.assorted-builder-rows {
  display: grid;
  gap: 8px;
  max-height: min(390px, calc(100dvh - 330px));
  overflow: auto;
}

.assorted-line {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(108px, 0.34fr) minmax(138px, 0.42fr) minmax(190px, 0.5fr);
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.assorted-line label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.assorted-line input,
.assorted-line select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.assorted-line-status {
  display: grid;
  align-self: end;
  justify-items: start;
  gap: 5px;
  min-width: 0;
  padding-bottom: 1px;
}

.assorted-line-status strong {
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.assorted-line-status .product-stock-chip {
  max-width: 100%;
  justify-content: flex-start;
}

.assorted-line-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 5px;
  align-items: end;
}

.assorted-line-tools button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid #d5dee9;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 6px;
}

.assorted-line-tools .mini-action {
  min-width: 62px;
}

#bomDialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#goodsReceiptDialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(31, 41, 51, 0.45);
}

.dialog-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

#addBomForm {
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

#addBomForm > *,
#addBomForm label {
  min-width: 0;
}

#addBomForm input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.recipe-yield-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.36fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.recipe-yield-grid input[readonly] {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
  font-weight: 800;
}

#addBomForm[data-read-only="true"] input[readonly] {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.5);
  color: var(--ink);
  cursor: default;
}

#addBomForm[data-read-only="true"] .recipe-material-row {
  background: rgba(248, 250, 252, 0.7);
}

#addBomForm[data-read-only="true"] .recipe-material-row input[readonly] {
  font-weight: 800;
}

#addBomForm .module-toolbar {
  align-items: center;
  min-width: 0;
}

#addBomForm .module-toolbar > div {
  min-width: 0;
}

#addBomForm .module-toolbar .ghost-button {
  white-space: nowrap;
}

#addBomForm .dialog-actions {
  position: sticky;
  bottom: -22px;
  z-index: 2;
  margin: 0 -22px -22px;
  padding: 12px 22px 22px;
  border-top: 1px solid rgba(208, 219, 231, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 40%);
}

#goodsReceiptForm {
  max-height: calc(100dvh - 28px);
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 22px;
}

#goodsReceiptForm > *,
#goodsReceiptForm label {
  min-width: 0;
}

#goodsReceiptForm h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.05;
}

#goodsReceiptForm .eyebrow {
  margin-bottom: 4px;
}

#goodsReceiptForm .dialog-grid {
  gap: 10px 14px;
  align-items: end;
}

#goodsReceiptForm .grn-qty-grid,
#goodsReceiptForm .grn-final-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#goodsReceiptForm .grn-wide-field {
  grid-column: 1 / -1;
}

#goodsReceiptForm label {
  gap: 5px;
  font-size: 13px;
  line-height: 1.18;
}

#goodsReceiptForm input,
#goodsReceiptForm select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.2;
}

#goodsReceiptForm .dialog-actions {
  margin-top: 2px;
}

.dialog-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.dialog-panel select {
  width: 100%;
}

#customerDialog {
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#editCustomerForm {
  width: 100%;
  max-height: calc(100dvh - 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  padding: 14px 18px;
  overflow-x: hidden;
  overflow-y: auto;
}

#editCustomerForm > div:first-child,
#editCustomerForm .dialog-actions {
  grid-column: 1 / -1;
}

#editCustomerForm label {
  min-width: 0;
  gap: 4px;
  font-size: 12px;
  line-height: 1.18;
}

#editCustomerForm input,
#editCustomerForm select,
#editCustomerForm textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
}

#editCustomerForm textarea {
  min-height: 54px;
}

#editCustomerForm .customer-notes-field {
  grid-column: 1 / -1;
}

#editCustomerForm .dialog-actions {
  position: sticky;
  bottom: -14px;
  z-index: 2;
  margin: 0 -18px -14px;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(208, 219, 231, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 40%);
}

@media (max-width: 460px) {
  #editCustomerForm {
    grid-template-columns: 1fr;
  }
}

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

.inventory-dialog-form {
  width: min(920px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 18px 22px;
  overflow: auto;
}

#stockDialog,
#productDialog {
  width: min(920px, calc(100vw - 36px));
}

.inventory-dialog-form .dialog-heading,
.inventory-dialog-form .dialog-span-2,
.inventory-dialog-form .dialog-actions {
  grid-column: 1 / -1;
}

.inventory-dialog-form .dialog-heading {
  display: grid;
  gap: 3px;
}

.inventory-dialog-form .dialog-heading h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
}

.inventory-dialog-form .dialog-grid {
  display: contents;
}

.inventory-dialog-form label {
  min-width: 0;
  gap: 5px;
  font-size: 13px;
  line-height: 1.2;
}

.inventory-dialog-form input,
.inventory-dialog-form select {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 15px;
  line-height: 1.2;
}

.inventory-dialog-form .dialog-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin: 2px -22px -18px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(208, 219, 231, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 38%);
}

@media (max-width: 760px) {
  .inventory-dialog-form {
    grid-template-columns: 1fr;
    width: min(520px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  #stockDialog,
  #productDialog {
    width: min(520px, calc(100vw - 20px));
  }

  .inventory-dialog-form .dialog-actions {
    margin: 2px -16px -16px;
    padding: 10px 16px 16px;
  }
}

.stock-register-dialog {
  max-height: min(90vh, 860px);
}

.stock-register-tools {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.7fr);
  gap: 16px;
  align-items: end;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 12px 14px;
  background: #f8fbff;
}

.stock-register-tools > div {
  min-width: 0;
}

.stock-register-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content max-content;
  gap: 10px;
  align-items: end;
  justify-content: end;
  min-width: 0;
}

.stock-register-actions .mini-action {
  min-height: 38px;
  white-space: nowrap;
}

.stock-register-category-filter {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.stock-register-category-filter select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.stock-register-tools strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.stock-register-tools span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.stock-register-scroll {
  overflow: auto;
  max-height: min(48vh, 460px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.stock-register-table {
  min-width: 680px;
  margin: 0;
}

.stock-register-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.stock-register-table td {
  vertical-align: middle;
}

.stock-register-dialog .stock-register-table tr[data-stock-register-category-hidden="1"],
.stock-register-dialog.show-differences .stock-register-table tr[data-stock-register-different="0"] {
  display: none;
}

.stock-register-table .table-input {
  min-width: 100px;
}

.stock-register-variance {
  font-weight: 900;
}

.stock-register-variance.warn {
  color: var(--brand);
}

.stock-register-variance.ok {
  color: var(--mint);
}

@media (max-width: 820px) {
  .stock-register-tools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .stock-register-actions {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .stock-register-actions .mini-action,
  .stock-register-category-filter select {
    width: 100%;
  }
}

.print-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.print-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.bill-history {
  display: grid;
  gap: 8px;
}

.bill-history-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto repeat(4, 34px);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.bill-history-row.voided {
  opacity: 0.72;
}

.bill-history-row.voided strong {
  text-decoration: line-through;
}

.bill-history-row:first-child {
  border-top: 0;
}

.bill-history-row strong,
.bill-history-row span {
  display: block;
}

.bill-history-row span {
  color: var(--muted);
  font-size: 13px;
}

.thermal-print-area {
  display: none;
}

.receipt-preview-dialog {
  width: min(1040px, calc(100vw - 24px));
}

.receipt-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.receipt-preview-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.receipt-preview-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.receipt-preview-controls select {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.receipt-preview-check {
  grid-auto-flow: column;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.receipt-preview-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-left: auto;
}

.receipt-preview-note {
  grid-column: 1 / -1;
  color: #667485;
  font-size: 12px;
  font-weight: 800;
}

.receipt-preview-actions .pos-icon-action {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}

.receipt-preview-meta {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.receipt-preview-meta strong {
  color: var(--ink);
}

.receipt-preview-meta span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.receipt-preview-paper {
  display: flex;
  gap: 16px;
  overflow: auto;
  max-height: min(66vh, 720px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #eef1f4;
}

.receipt-preview-paper .thermal-bill {
  flex: 0 0 auto;
  box-shadow: var(--shadow);
}

.report-print-area {
  display: none;
}

.thermal-bill {
  box-sizing: border-box;
  width: 72mm;
  padding: 3mm;
  color: #000000;
  background: #ffffff;
  font-family: Arial, "Microsoft Sans Serif", "Segoe UI", sans-serif;
  font-size: var(--receipt-font-size, 11px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.28;
}

.thermal-bill.thermal-58 {
  width: 58mm;
  padding: 3mm;
  font-size: var(--receipt-font-size-58, 10px);
}

.thermal-bill.thermal-80 {
  width: 72mm;
}

.thermal-bill header,
.thermal-bill footer {
  text-align: center;
}

.thermal-bill h2 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.18;
}

.thermal-bill p {
  margin: 2px 0;
  word-break: break-word;
}

.thermal-copy-label {
  display: inline-block;
  border: 1px solid #000000;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.thermal-copy-label.duplicate {
  border-width: 2px;
}

.thermal-logo {
  display: block;
  width: auto;
  max-width: var(--receipt-logo-width, 58mm);
  max-height: var(--receipt-logo-height, 24mm);
  margin: 1px auto 4px;
  object-fit: contain;
}

.thermal-bill.thermal-58 .thermal-logo {
  max-width: var(--receipt-logo-width-58, 44mm);
  max-height: var(--receipt-logo-height-58, 17mm);
}

.thermal-address-line {
  font-size: 11px;
  line-height: 1.18;
  white-space: nowrap;
  word-break: normal;
}

.thermal-bill-number {
  margin-top: 2px;
  font-weight: 600;
}

.thermal-receipt-title {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.thermal-bill.thermal-extra-feed::after {
  display: block;
  height: 12mm;
  content: "";
}

.thermal-bill + .thermal-bill {
  margin-top: 6mm;
}

.thermal-line {
  margin: var(--receipt-line-margin, 7px) 0;
  border-top: 1px dashed #000000;
}

.thermal-bill table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}

.thermal-bill thead th {
  border-bottom: 1px solid #000000;
  padding: 2px 0 3px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
}

.thermal-bill th,
.thermal-bill td {
  border: 0;
  padding: var(--receipt-cell-padding, 4px) 0;
  color: #000000;
  font-size: var(--receipt-table-font-size, 11px);
  text-align: left;
  text-transform: none;
  vertical-align: top;
  word-break: break-word;
}

.thermal-bill.thermal-58 th,
.thermal-bill.thermal-58 td {
  font-size: var(--receipt-table-font-size-58, 10px);
}

.thermal-bill td strong,
.thermal-item-meta {
  display: block;
}

.thermal-bill td strong {
  font-size: var(--receipt-item-name-size, 10.5px);
  font-weight: 600;
  line-height: 1.18;
}

.thermal-item-meta {
  margin-top: 1px;
  font-size: 9.5px;
}

.thermal-bill tbody td:nth-child(2),
.thermal-bill tbody td:nth-child(3),
.thermal-bill tbody td:last-child {
  font-weight: 500;
}

.thermal-bill.thermal-58 .thermal-item-meta {
  font-size: 8px;
}

.thermal-bill th:first-child,
.thermal-bill td:first-child {
  width: 36%;
}

.thermal-bill th:nth-child(2),
.thermal-bill td:nth-child(2) {
  width: 22%;
  text-align: right;
}

.thermal-bill th:nth-child(3),
.thermal-bill td:nth-child(3) {
  width: 20%;
  text-align: center;
}

.thermal-bill th:last-child,
.thermal-bill td:last-child {
  width: 22%;
  text-align: right;
}

.thermal-bill.thermal-table-amount th:first-child,
.thermal-bill.thermal-table-amount td:first-child,
.thermal-bill.thermal-table-summary th:first-child,
.thermal-bill.thermal-table-summary td:first-child {
  width: 56%;
}

.thermal-bill.thermal-table-amount th:nth-child(2),
.thermal-bill.thermal-table-amount td:nth-child(2),
.thermal-bill.thermal-table-summary th:nth-child(2),
.thermal-bill.thermal-table-summary td:nth-child(2) {
  width: 22%;
  text-align: center;
}

.thermal-bill.thermal-table-amount th:last-child,
.thermal-bill.thermal-table-amount td:last-child,
.thermal-bill.thermal-table-summary th:last-child,
.thermal-bill.thermal-table-summary td:last-child {
  width: 22%;
  text-align: right;
}

.thermal-rate-unit {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.1;
}

.thermal-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 3px 0;
}

.thermal-total.grand {
  font-size: 15.5px;
  font-weight: 650;
}

.thermal-qr-block {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 7px auto 5px;
}

.thermal-qr-block .dynamic-qr-svg {
  width: 30mm;
  height: 30mm;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #ffffff;
}

.thermal-bill.thermal-58 .thermal-qr-block .dynamic-qr-svg {
  width: 25mm;
  height: 25mm;
}

.thermal-qr-caption {
  font-weight: 650;
}

.thermal-payment-link {
  max-width: 100%;
  font-size: 8px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.thermal-bill-lookup-qr {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 8px auto 4px;
  border: 0;
  background: transparent;
}

.thermal-bill-lookup-qr .dynamic-qr-svg {
  width: 26mm;
  height: 26mm;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #ffffff;
}

.thermal-bill-lookup-caption {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
}

.thermal-bill-lookup-note {
  font-size: 7px;
  font-weight: 650;
  letter-spacing: 0;
}

.thermal-bill.thermal-58 .thermal-bill-lookup-qr .dynamic-qr-svg {
  width: 22mm;
  height: 22mm;
}

.manual-copy-panel {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 11;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 44px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.manual-copy-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manual-copy-panel-head strong {
  color: var(--ink);
  font-size: 15px;
}

.manual-copy-panel-head button {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.manual-copy-panel textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}

.network-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(680px, calc(100vw - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.28);
  transform: translateX(-50%);
}

.network-banner[hidden] {
  display: none;
}

.network-banner.offline {
  background: #991b1b;
}

.network-banner.reconnecting {
  background: #9a5a00;
}

.network-banner.poor {
  background: #334155;
}

.network-banner > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.network-banner strong {
  font-size: 16px;
  line-height: 1.1;
}

.network-banner span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.25;
}

.network-banner button {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
}

.network-banner button:hover {
  background: rgba(255, 255, 255, 0.26);
}

.backend-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}

.backend-gate--quiet {
  min-height: 55vh;
  background: transparent;
}

.backend-gate-loader {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
}

.backend-gate--quiet .backend-gate-spinner {
  gap: 5px;
}

.backend-gate--quiet .backend-gate-spinner span {
  width: 6px;
  height: 6px;
}

.backend-gate-card {
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 36px;
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
}

/* Brand section */
.backend-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.backend-gate-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
}

.backend-gate-appname {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Body row with spinner + text */
.backend-gate-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Animated 3-dot spinner */
.backend-gate-spinner {
  display: flex;
  gap: 8px;
  align-items: center;
}

.backend-gate-spinner span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand, #6366f1);
  animation: backend-gate-bounce 1.2s infinite ease-in-out;
  opacity: 0.8;
}

.backend-gate-spinner span:nth-child(1) { animation-delay: 0s; }
.backend-gate-spinner span:nth-child(2) { animation-delay: 0.2s; }
.backend-gate-spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes backend-gate-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.1); opacity: 1; }
}

/* Error icon */
.backend-gate-icon-error {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0f0;
  color: #e53e3e;
  flex-shrink: 0;
}

.backend-gate-icon-error svg {
  width: 22px;
  height: 22px;
}

.backend-gate-text strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin-bottom: 6px;
}

.backend-gate-text p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

/* Retry button */
.backend-gate-retry {
  min-width: 160px;
}

/* Delay retry controls so they don't flash immediately */
.backend-gate-retry--delayed {
  animation: backend-gate-fadein 0.4s ease 3s both;
}

@keyframes backend-gate-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Error card red accent */
.backend-gate-card--error {
  border-color: rgba(229, 62, 62, 0.2);
}


body.pos-fullscreen-mode .network-banner {
  top: 8px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 30050;
  max-width: min(420px, calc(100vw - 44px));
  border-radius: 8px;
  padding: 13px 16px;
  background: #1f2933;
  color: #ffffff;
  box-shadow: var(--shadow);
}

.toast.dialog-toast {
  right: 28px;
  bottom: 28px;
  z-index: 30050;
}

.support-widget {
  position: relative;
  z-index: 76;
  display: grid;
  align-self: end;
  justify-items: end;
  gap: 10px;
  pointer-events: auto;
}

.support-widget-root {
  position: relative;
  display: grid;
  align-self: end;
  justify-items: end;
  min-width: 0;
}

.support-widget > * {
  pointer-events: auto;
}

.support-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 118px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px 0 10px;
  background: linear-gradient(135deg, #1f2933 0%, #17406f 58%, var(--brand) 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  cursor: pointer;
}

.support-bot-mark,
.support-bot-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.support-bot-mark {
  width: 34px;
  height: 34px;
}

.support-bot-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--blue-tint), #ffffff);
  color: var(--brand);
  border: 1px solid #d6e4f2;
}

.support-fab svg,
.support-bot-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-1px);
}

.support-bot-mark::before,
.support-bot-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -5px 0 0 currentColor, 5px 0 0 currentColor;
  transform: translate(-50%, -50%);
}

.support-bot-mark::after,
.support-bot-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 12px;
  height: 5px;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 999px 999px;
  transform: translate(-50%, -50%) scaleY(0.2);
  transform-origin: center top;
  transition: transform 160ms ease, top 160ms ease;
}

.support-widget.open .support-bot-mark::after,
.support-widget.open .support-bot-avatar::after,
.support-fab:active .support-bot-mark::after {
  top: 60%;
  transform: translate(-50%, -50%) scaleY(1);
}

.support-fab:hover {
  background: linear-gradient(135deg, #111827 0%, #12345e 58%, var(--brand-strong) 100%);
  transform: translateY(-1px);
}

.support-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 86;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 20px));
  max-height: calc(100dvh - 78px - env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid #d7e1ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.2);
}

.support-widget.open .support-panel {
  overflow: hidden !important;
  scrollbar-width: none;
}

.support-widget.open .support-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.support-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.support-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.support-panel-head strong,
.support-reply span {
  display: block;
  color: var(--ink);
  font-weight: 800;
}

.support-panel-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.support-intro {
  display: grid;
  gap: 6px;
  padding: 9px 12px 0;
}

.support-intro p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.support-mode-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 12px 0;
}

.support-mode-tabs button {
  min-width: 0;
  border: 1px solid #d9e3ec;
  border-radius: 8px;
  padding: 8px 7px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.support-mode-tabs button.active {
  border-color: #234f7a;
  background: #e8f2fb;
  color: #193b5d;
}

.support-prompt-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 12px 0;
}

.support-prompt-grid button {
  min-width: 0;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  padding: 7px 6px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.support-prompt-grid button:hover {
  border-color: #b8c9d8;
  background: #f8fafc;
  color: #0f172a;
}

.support-chat {
  flex: 0 1 auto;
  display: grid;
  gap: 6px;
  max-height: 86px;
  overflow: auto;
  margin: 7px 12px 0;
  border: 1px solid #e3edf6;
  border-radius: 8px;
  padding: 6px;
  background: #f8fbff;
}

.support-chat-bubble {
  display: grid;
  gap: 3px;
  max-width: 88%;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
}

.support-chat-bubble.user {
  justify-self: end;
  border-color: #c7dcf0;
  background: #eaf4ff;
}

.support-chat-bubble.bot {
  justify-self: start;
  border-color: #cfe8dc;
  background: #f3fbf6;
}

.support-chat-bubble p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.support-chat-bubble span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.support-context-toggle {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-self: end;
  gap: 6px !important;
  width: auto;
  min-height: 30px;
  border: 1px solid #d7e3ef;
  border-radius: 999px;
  padding: 5px 9px;
  background: #ffffff;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.support-context-toggle[aria-pressed="true"] {
  border-color: #b9e4d4;
  background: #eefaf5;
  color: #0f765a !important;
}

.support-context-toggle:hover {
  border-color: #b8c9d8;
  background: #f8fbff;
}

.support-context-icon {
  display: inline-grid;
  place-items: center;
}

.support-context-icon svg {
  width: 15px;
  height: 15px;
}

.support-context-text {
  white-space: nowrap;
}

.support-context-preview {
  display: grid;
  gap: 3px;
  justify-self: stretch;
  border: 1px solid #d7eadf;
  border-radius: 8px;
  padding: 6px 8px;
  background: #f6fff9;
  color: #42604f;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.22;
}

.support-context-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-context-preview.muted {
  border-color: #dbe5ef;
  background: #f8fafc;
  color: #64748b;
}

.support-form {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px 8px;
  min-height: 0;
  overflow: hidden;
  padding: 7px 12px 10px;
}

.support-form label {
  display: grid;
  gap: 5px;
  color: #526173;
  font-size: 12px;
  font-weight: 800;
}

.support-form > input[type="hidden"],
.support-form .support-context-toggle,
.support-form .support-image-upload,
.support-form .support-clear-images,
.support-form .support-capture-preview,
.support-form .support-context-preview,
.support-form label,
.support-form .primary-button {
  grid-column: 1 / -1;
}

.support-form .support-capture-button {
  grid-column: span 1;
}

.support-form input,
.support-form textarea {
  width: 100%;
  min-width: 0;
}

.support-form textarea {
  resize: none;
  min-height: 46px;
  max-height: 72px;
}

.support-image-upload {
  border: 1px dashed #c9d9e8;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fbfdff;
}

.support-image-upload > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.support-image-upload svg {
  width: 15px;
  height: 15px;
}

.support-image-upload input {
  font-size: 12px;
}

.support-image-upload small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.support-capture-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid #cddceb;
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}

.support-capture-button svg {
  width: 15px;
  height: 15px;
}

.support-clear-images {
  justify-self: start;
  min-height: 20px;
  border: 0;
  background: transparent;
  color: #8a2e2e;
  font-size: 11px;
  font-weight: 900;
  text-decoration: underline;
}

.support-capture-preview {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.support-capture-thumb {
  position: relative;
  display: grid;
  flex: 0 0 88px;
  gap: 4px;
  color: #526173;
  font-size: 10px;
  font-weight: 800;
}

.support-capture-thumb b {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-capture-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #8a2e2e;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.support-capture-preview img {
  width: 88px;
  height: 54px;
  border: 1px solid #d6e2ee;
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
}

.support-region-dialog {
  width: min(1040px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: transparent;
}

.support-region-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
}

.support-region-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #d6e2ee;
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.support-region-help {
  margin: 0;
  color: #526173;
  font-size: 13px;
  font-weight: 750;
}

.support-region-warning {
  margin: 0;
  border: 1px solid #f2d3a6;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff8eb;
  color: #8a5a12;
  font-size: 12px;
  font-weight: 800;
}

.support-region-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(620px, calc(100vh - 220px));
  border: 1px solid #cfdceb;
  border-radius: 8px;
  background: #f8fbff;
  cursor: crosshair;
  object-fit: contain;
  touch-action: none;
}

.support-form .primary-button {
  min-height: 40px;
}

.support-submit-button {
  display: inline-grid;
  place-items: center;
}

.support-submit-button svg {
  width: 18px;
  height: 18px;
}

.support-reply {
  margin: 0 12px 10px;
  border: 1px solid #cfe0ee;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f5f9fc;
}

.support-reply.answer {
  border-color: #c9e6d5;
  background: #f3fbf6;
}

.support-reply span {
  font-size: 12px;
}

.support-reply small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.support-reply p {
  margin: 5px 0 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
}

.support-reply p + p {
  margin-top: 8px;
}

.support-ticket-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(130px, 0.75fr)) minmax(88px, auto) auto;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.support-ticket-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.support-ticket-filters input,
.support-ticket-filters select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
  font-size: 12px;
}

.support-ticket-filter-summary {
  display: grid;
  min-height: 36px;
  align-content: center;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 5px 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.support-ticket-filter-summary strong {
  color: var(--ink);
  font-size: 16px;
}

.table-wrap[data-table-id="support-tickets"] table {
  min-width: 1420px;
  table-layout: fixed;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(1),
.table-wrap[data-table-id="support-tickets"] td:nth-child(1) {
  width: 105px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(2),
.table-wrap[data-table-id="support-tickets"] td:nth-child(2),
.table-wrap[data-table-id="support-tickets"] th:nth-child(3),
.table-wrap[data-table-id="support-tickets"] td:nth-child(3) {
  width: 92px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(4),
.table-wrap[data-table-id="support-tickets"] td:nth-child(4),
.table-wrap[data-table-id="support-tickets"] th:nth-child(6),
.table-wrap[data-table-id="support-tickets"] td:nth-child(6) {
  width: 110px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(5),
.table-wrap[data-table-id="support-tickets"] td:nth-child(5) {
  width: 128px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(7),
.table-wrap[data-table-id="support-tickets"] td:nth-child(7),
.table-wrap[data-table-id="support-tickets"] th:nth-child(9),
.table-wrap[data-table-id="support-tickets"] td:nth-child(9) {
  width: 210px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(8),
.table-wrap[data-table-id="support-tickets"] td:nth-child(8) {
  width: 132px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(10),
.table-wrap[data-table-id="support-tickets"] td:nth-child(10) {
  width: 205px;
}

.table-wrap[data-table-id="support-tickets"] th:nth-child(11),
.table-wrap[data-table-id="support-tickets"] td:nth-child(11) {
  width: 165px;
}

.table-wrap[data-table-id="support-tickets"] td {
  vertical-align: top;
}

.table-wrap[data-table-id="support-tickets"] .row-actions {
  display: grid;
  width: 100%;
  gap: 6px;
  margin: 0;
}

.table-wrap[data-table-id="support-tickets"] .row-actions .mini-action {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  font-size: 12px;
}

.table-wrap[data-table-id="support-tickets"] .row-actions .mini-action.primary-lite {
  border-color: #bcd7f0;
  background: #eaf5ff;
  color: var(--brand);
}

.support-ticket-message-cell,
.support-ticket-reply-cell {
  min-width: 0;
  white-space: normal;
}

.support-ticket-text {
  max-width: 100%;
}

.support-ticket-text summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  list-style: none;
}

.support-ticket-text summary::-webkit-details-marker {
  display: none;
}

.support-ticket-text strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-text summary span {
  display: -webkit-box;
  overflow: hidden;
  color: #526173;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.support-ticket-text p {
  max-height: 132px;
  overflow: auto;
  margin: 8px 0 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 8px;
  background: #f8fbff;
  color: #334155;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.support-ticket-attachments {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.support-ticket-attachments a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--brand);
  text-decoration: none;
}

.support-ticket-attachments img {
  width: 36px;
  height: 36px;
  border: 1px solid #d7e3ef;
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
}

.support-ticket-attachments span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-admin-form {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.support-ticket-admin-form label {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.support-ticket-admin-form select,
.support-ticket-admin-form textarea {
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.support-ticket-admin-form textarea {
  min-height: 58px;
  resize: vertical;
}

.support-ticket-admin-form .mini-action {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1100px) {
  .support-ticket-filters {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 720px) {
  .support-ticket-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .network-banner {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
  }

  .network-banner strong {
    font-size: 14px;
  }

  .network-banner span {
    font-size: 12px;
  }

  .network-banner button {
    padding: 7px 10px;
  }

  .toast {
    right: 10px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
  }

  .support-panel {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(390px, calc(100vw - 16px));
    max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
  }

  .support-prompt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 720px) {
  .support-panel {
    top: calc(100% + 8px);
    max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
  }

  .support-intro,
  .support-prompt-grid {
    display: none;
  }

  .support-chat {
    display: none;
  }

  .support-image-upload small {
    display: none;
  }

  .support-image-upload {
    padding-block: 6px;
  }

  .support-image-upload > span {
    font-size: 11px;
  }

  .support-image-upload input {
    font-size: 11px;
  }

  .support-capture-button {
    min-height: 30px;
  }

  .support-context-preview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px 8px;
    padding-block: 5px;
  }

  .support-context-preview span:nth-child(n+3) {
    display: none;
  }

  .support-form {
    gap: 5px 8px;
    padding-top: 6px;
  }

  .support-form label {
    gap: 4px;
  }

  .support-form textarea {
    min-height: 44px;
    max-height: 58px;
  }
}

@media (max-height: 660px) {
  .support-panel {
    top: calc(100% + 6px);
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom));
  }

  .support-panel-head {
    padding-block: 7px;
  }

  .support-bot-avatar {
    width: 28px;
    height: 28px;
  }

  .support-mode-tabs {
    padding-top: 6px;
  }

  .support-mode-tabs button {
    padding-block: 7px;
    font-size: 11px;
  }

  .support-context-toggle {
    min-height: 26px;
    padding-block: 4px;
  }

  .support-context-preview {
    display: none;
  }

  .support-form {
    gap: 5px 7px;
    padding: 6px 10px 8px;
  }

  .support-form label {
    font-size: 11px;
  }

  .support-form textarea {
    min-height: 40px;
    max-height: 46px;
  }

  .support-form .primary-button {
    min-height: 34px;
  }
}

@media (max-width: 360px) {
  .support-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) and (min-width: 1081px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 18px;
  }

  .workspace {
    padding: 18px;
  }

  .topbar {
    margin: -18px -18px 12px;
    padding: 14px 18px;
  }

  body.inventory-view .panel.wide {
    min-width: 0;
    overflow: hidden;
  }

  body.inventory-view .smart-table-shell,
  body.inventory-view .table-wrap {
    max-width: 100%;
    min-width: 0;
  }

  body.inventory-view .inventory-table-controls,
  body.inventory-view .pos-stock-compact-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body.inventory-view .inventory-table-controls > *,
  body.inventory-view .pos-stock-compact-toolbar > * {
    flex: 0 0 auto;
  }

  body.inventory-view .inventory-table-controls .inventory-search-field {
    flex-basis: min(420px, 44vw);
  }

  body.inventory-view .inventory-table-controls .inventory-search-meta {
    white-space: nowrap;
  }

  .pos-cashier-board {
    grid-template-columns: minmax(420px, 1fr) minmax(320px, 0.82fr);
  }

  .pos-fast-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .pos-payment-actions {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .pos-workflow-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1440px) and (min-width: 1321px) {
  body.inventory-view .panel.wide {
    min-width: 0;
    overflow: hidden;
  }

  body.inventory-view .smart-table-shell,
  body.inventory-view .table-wrap {
    max-width: 100%;
    min-width: 0;
  }

  body.inventory-view .inventory-table-controls,
  body.inventory-view .pos-stock-compact-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body.inventory-view .inventory-table-controls > *,
  body.inventory-view .pos-stock-compact-toolbar > * {
    flex: 0 0 auto;
  }

  body.inventory-view .inventory-table-controls .inventory-search-field {
    flex-basis: min(520px, 42vw);
  }

  body.inventory-view .inventory-table-controls .inventory-search-meta {
    white-space: nowrap;
  }
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: minmax(232px, 250px) minmax(0, 1fr);
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  body.sidebar-collapsed .brand div:not(.brand-mark) {
    display: none;
  }

  body.sidebar-collapsed .nav-list > .nav-group > button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  body.sidebar-collapsed .nav-list span {
    display: none;
  }

  body.sidebar-collapsed .nav-submenu {
    display: none;
  }

  .sidebar-environment-slot {
    display: none;
  }

  .metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filters > span {
    grid-column: 1 / -1;
  }

  .dashboard-top-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-tile-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .dashboard-kpi-panel .dashboard-tile-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .dashboard-kpi-panel .dashboard-tile-grid.dashboard-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-alert-list,
  .dashboard-chart-grid,
  .dashboard-table-grid {
    grid-template-columns: 1fr;
  }

  .kitchen-kpi-grid,
  .finance-kpi-grid,
  .kitchen-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-flow-step {
    min-height: 66px;
  }

  .smart-table-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .smart-table-controls .inventory-search-meta,
  .smart-table-controls .mini-action {
    align-self: end;
  }

  .pos-layout,
  .pos-cashier-board {
    grid-template-columns: 1fr;
  }

  .pos-fast-shell {
    grid-template-columns: 1fr;
  }

  .pos-fast-input-row {
    grid-template-columns: minmax(280px, 1fr) repeat(2, minmax(150px, 0.45fr)) 86px;
  }

  .pos-payment-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pos-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pos-checkout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-request-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .product-palette {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .settings-hero {
    grid-template-columns: 1fr;
  }

  .settings-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .user-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-detail-layout {
    grid-template-columns: 1fr;
  }

  .settings-submenu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-submenu-head {
    grid-column: 1 / -1;
  }

  .settings-submenu button.active::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .logged-out .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: block;
    padding: 12px;
  }

  .brand {
    display: none;
  }

  .login-wrap {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    padding: 16px;
  }

  .login-stage {
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .login-image-panel {
    min-height: min(430px, 52vh);
  }

  .login-showcase {
    min-height: 390px;
    padding: 28px;
  }

  .login-showcase::after {
    display: none;
  }

  .login-lanterns {
    display: none;
  }

  .login-arch-card {
    padding: 50px 22px 34px;
  }

  .login-arch-card strong {
    font-size: 30px;
  }

  .login-sweets-tray {
    width: min(330px, 92%);
  }

  .login-sweets-tray span {
    width: 48px;
    height: 42px;
  }

  .login-showcase img {
    width: 104px;
    height: 104px;
  }

  .login-showcase strong {
    font-size: 32px;
    white-space: normal;
  }

  .login-entry {
    padding: 18px;
  }

  .login-stage .login-panel {
    max-width: none;
    padding: 24px;
  }

  .password-change-wrap .login-brand {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .password-change-wrap .login-brand img {
    width: 54px;
    height: 54px;
  }

  .password-change-actions {
    grid-template-columns: 1fr;
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
  }

  .nav-list button {
    min-width: 48px;
  }

  .workspace {
    padding: 16px;
  }

  .login-brand {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .login-brand img {
    width: 48px;
    height: 48px;
  }

  .topbar,
  .topbar-actions,
  .access-strip,
  .settings-section-picker,
  .alert-strip {
    align-items: stretch;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    flex-direction: column;
  }

  .settings-section-picker {
    flex-direction: column;
  }

  .general-settings-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
  }

  .general-settings-tabs .settings-card {
    min-width: 210px;
  }

  .permission-collapse,
  .role-settings-visibility,
  .import-export-card {
    border-radius: 8px;
  }

  .access-strip div {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-strip label {
    min-width: 0;
  }

  .search-box input,
  .access-strip select,
  .settings-section-picker label,
  .settings-section-picker select,
  .global-search-shell,
  .global-search-shell input,
  .session-badge,
  .topbar-actions button {
    width: 100%;
  }

  .content-grid,
  .pos-layout,
  .pos-cashier-board,
  .settings-layout,
  .settings-detail-layout,
  .setup-readiness-grid,
  .settings-checklist,
  .metrics-row,
  .dashboard-filters,
  .dashboard-tile-grid,
  .dashboard-alert-list,
  .kitchen-kpi-grid,
  .finance-kpi-grid,
  .kitchen-work-grid,
  .report-grid,
  .report-category-grid,
  .report-query-bar,
  .integration-status-grid,
  .integration-flow,
  .integration-grid,
  .integration-tabs,
  .whatsapp-setup-guide,
  .whatsapp-readable-panel,
  .whatsapp-meta-locator,
  .whatsapp-error-grid,
  .integration-summary-list,
  .whatsapp-template-control-grid,
  .whatsapp-template-edit-fields,
  .whatsapp-template-summary,
  .integration-launch-grid,
  .whatsapp-meta-guide,
  .whatsapp-meta-guide ol,
  .whatsapp-blueprint-card-head,
  .whatsapp-blueprint-fields,
  .whatsapp-meta-field-grid,
  .whatsapp-blueprint-grid,
  .template-manager-head,
  .template-purpose-map,
  .template-workbench-grid,
  .template-live-panel,
  .template-workflow-grid,
  .template-default-grid,
  .template-setup-section summary,
  .template-health-grid,
  .template-quick-test-grid,
  .template-whatsapp-control-strip,
  .template-brand-grid,
  .template-appearance-grid,
  .template-validator-grid,
  .template-meta-fields,
  .template-meta-layout,
  .template-variable-map,
  .template-toolbar,
  .template-readiness-grid,
  .template-toggle-grid,
  .sales-printer-summary,
  .button-grid,
  .form-grid,
  .settings-form,
  .integration-settings-form,
  .label-integration-layout,
  .product-label-control-row,
  .import-export-grid,
  .user-settings-tabs,
  .settings-submenu,
  .role-preset-grid,
  .role-default-selector,
  .role-default-toolbar,
  .role-default-impact,
  .employee-summary-grid,
  .employee-filter-bar,
  .role-access-header,
  .role-reference-panel,
  .role-access-preview,
  .effective-access-grid,
  .access-editor-grid,
  .access-checkbox-grid,
  .permission-action-row,
  .pos-quick-admin-grid,
  .dialog-grid,
  .recipe-material-row,
  .pos-action-grid,
  .pos-checkout-grid,
  .product-palette,
  .timeline {
    grid-template-columns: 1fr;
  }

  .whatsapp-meta-guide > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .whatsapp-blueprint-card-head {
    align-items: start;
  }

  .whatsapp-blueprint-card-head::after {
    grid-column: 1;
    justify-self: start;
  }

  .whatsapp-blueprint-summary-meta {
    justify-content: flex-start;
  }

  .owner-alert-head,
  .owner-alert-layout {
    grid-template-columns: 1fr;
  }

  .owner-alert-save-row {
    justify-content: stretch;
  }

  .owner-alert-save-row .primary-button {
    width: 100%;
    min-width: 0;
  }

  .integration-grid > .integration-primary {
    grid-row: auto;
  }

  .template-format-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .template-card-control {
    align-items: center;
    flex-direction: row;
    grid-row: auto;
    justify-content: space-between;
  }

  .template-card-main,
  .template-card-detail,
  .template-card-side {
    grid-column: auto;
    grid-row: auto;
  }

  .template-card-side,
  .template-card-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .template-format-preview-grid {
    grid-template-columns: 1fr;
  }

  .template-preview-sidebar {
    position: static;
  }

  .integration-panel-head,
  .template-blueprint-head,
  .template-live-head,
  .template-section-head,
  .template-blueprint-foot,
  .integration-step {
    grid-template-columns: 1fr;
  }

  .integration-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .template-blueprint-head,
  .template-live-head,
  .template-section-head,
  .template-blueprint-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .template-blueprint-actions,
  .template-live-actions {
    justify-content: flex-start;
  }

  .template-results-head,
  .template-save-row {
    align-items: stretch;
    flex-direction: column;
  }

  .template-category-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-outlet-row,
  .template-outlet-row.head {
    grid-template-columns: 1fr;
  }

  .template-outlet-row.head {
    display: none;
  }

  .template-outlet-row label span {
    display: block;
  }

  .pos-counter-time {
    text-align: left;
  }

  .pos-cashier-board.pos-fast-board {
    height: auto;
    min-height: 0;
  }

  .pos-fast-shell {
    overflow: visible;
  }

  .pos-fast-counter,
  .pos-fast-rail {
    max-height: none;
    overflow: visible;
  }

  .pos-fast-topbar,
  .pos-fast-bill-head,
  .pos-fast-products-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pos-fast-topbar b,
  .pos-fast-bill-head b {
    text-align: left;
  }

  .pos-fast-input-row,
  .pos-quick-actions,
  .pos-quick-admin-actions,
  .pos-total-metrics,
  .pos-payment-flow,
  .pos-payment-actions {
    grid-template-columns: 1fr;
  }

  .pos-fast-table-wrap,
  .pos-fast-products {
    max-height: none;
  }

  .pos-save-actions {
    grid-template-columns: 1fr;
  }

  .receipt-preview-head,
  .receipt-preview-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .receipt-preview-paper {
    max-height: 62vh;
    padding: 10px;
  }

  .bill-history-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .module-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .stock-flow-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-flow-steps {
    grid-template-columns: 1fr;
  }

  .stock-flow-step {
    min-height: 0;
  }

  .inventory-table-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .smart-table-controls {
    display: flex;
  }

  .inventory-search-meta {
    white-space: normal;
  }

  .dashboard-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-kpi-panel .dashboard-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi-panel .dashboard-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi-panel .dashboard-tile-grid.dashboard-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-update-row {
    grid-template-columns: 1fr;
  }

  .dashboard-bar-chart {
    gap: 6px;
  }

  .dashboard-bar-pair {
    height: 150px;
    padding: 0 3px;
  }

  .payment-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .payment-row strong {
    text-align: left;
  }

  .outlet-row,
  .store-sales-row,
  .cart-row,
  .bill-history-row {
    grid-template-columns: 1fr;
  }
}

.metric,
.panel,
.dashboard-panel,
.finance-kpi,
.login-panel,
.login-reset-panel,
.settings-menu,
.settings-card,
.role-access-panel,
.consolidation-panel,
.ai-brief-list,
.notification-popover,
.user-menu,
.pos-fast-topbar,
.pos-health-card,
.pos-fast-table-wrap,
.pos-quick-actions,
.pos-info-card,
.pos-payment-strip,
.pos-total-metrics,
.pos-action,
.pos-quick-action {
  background: var(--surface-gloss);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.panel,
.metric,
.dashboard-panel,
.finance-kpi {
  position: relative;
  overflow: hidden;
}

.panel.pos-fast-counter {
  overflow-x: hidden;
  overflow-y: auto;
}

.pos-fast-rail {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.pos-rail-workflow {
  min-height: 0;
}

body.pos-fullscreen-mode .pos-fast-counter,
body.pos-fullscreen-mode .pos-fast-rail {
  overscroll-behavior: contain;
}

.panel::before,
.metric::before,
.dashboard-panel::before,
.finance-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

th {
  background: #f6f9fd;
  color: #586779;
  letter-spacing: 0.03em;
}

tbody tr:hover td {
  background: #fbfdff;
}

.search-box input,
.table-input,
.login-panel select,
.login-panel input,
.login-reset-panel input,
.dialog-panel select,
.dialog-panel input,
.dialog-panel textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.pos-fast-input-row input,
.pos-checkout-grid input,
.pos-checkout-grid select,
select,
textarea {
  background: #ffffff;
  border-color: #d5dee9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #9fbedf;
  outline: 3px solid rgba(37, 99, 167, 0.13);
}

.session-badge {
  border: 0;
  background: linear-gradient(180deg, #2c8ec8, #176f9e);
}

.alert-strip,
.inventory-alert-strip,
.attention-row td,
.notification-list button {
  background: linear-gradient(180deg, #fffaf0, var(--gold-tint));
}

.pill.ok {
  background: var(--mint-tint);
}

.pill.warn {
  background: var(--gold-tint);
}

.dashboard-filters > *,
.dashboard-date-trigger,
.pos-search-status,
input[readonly] {
  background: #f8fbff;
}

.pos-cashier-board.pos-fast-board {
  background: transparent;
}

.pos-fast-topbar,
.pos-payment-strip {
  border-color: #cddbe8;
}

.pos-fast-products button,
.product-palette button {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-color: #d8e2ed;
  box-shadow: var(--shadow-soft);
}

.pos-category-filters button,
.report-grid button.active {
  background: #ffffff;
}

.pos-category-filters button.active,
.pos-category-filters button:hover,
.report-grid button.active {
  background: linear-gradient(180deg, #fffafa, var(--brand-tint));
}

.pos-pay-action {
  background: linear-gradient(180deg, #395064, #223443);
  box-shadow: var(--shadow-soft);
}

.pos-pay-action.active,
.pos-pay-action.save,
.pos-action.primary,
.pos-quick-action.primary {
  background: linear-gradient(180deg, #1d987b, var(--mint));
}

.pos-pay-action.print {
  background: linear-gradient(180deg, #4d6378, #334155);
}

.pos-pay-action.whatsapp-bill {
  border: 1px solid #9be7d4;
  background: linear-gradient(180deg, #f8fffc, #ecfbf5);
  color: #078a6c;
}

.pos-pay-action.clear {
  background: #ffffff;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 88px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  gap: 18px;
  padding: 18px 12px;
}

body.sidebar-collapsed .brand {
  justify-content: center;
}

body.sidebar-collapsed .brand > div:not(.brand-mark),
body.sidebar-collapsed .nav-list > .nav-group > button span {
  display: none;
}

body.sidebar-collapsed .nav-submenu {
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  z-index: 40;
  display: none;
  min-width: 230px;
  max-width: 280px;
  max-height: min(460px, calc(100vh - 72px));
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-gloss);
  box-shadow: 0 18px 45px rgba(33, 47, 67, 0.16);
}

body.sidebar-collapsed .nav-group:hover .nav-submenu,
body.sidebar-collapsed .nav-group:focus-within .nav-submenu {
  display: grid;
}

body.sidebar-collapsed .nav-submenu > strong {
  display: block;
  margin: 0 0 4px;
  padding: 6px 8px;
}

.module-toolbar,
.access-strip,
.settings-section-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-gloss);
  box-shadow: var(--shadow);
}

.module-toolbar {
  margin-bottom: 14px;
}

.module-toolbar strong,
.settings-section-picker strong,
.access-strip strong {
  color: var(--ink);
}

.module-toolbar span,
.settings-section-picker span,
.access-strip small {
  color: var(--muted);
}

.kitchen-section-tabs,
.finance-section-tabs,
.user-settings-tabs,
.settings-submenu,
.settings-card-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: var(--shadow-soft);
}

.kitchen-section-tabs button,
.finance-section-tabs button,
.user-settings-tabs button,
.settings-submenu button,
.settings-card,
.role-preset-card,
.access-editor-block {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-color: #d9e3ee;
  box-shadow: var(--shadow-soft);
}

.kitchen-section-tabs button.active,
.kitchen-section-tabs button:hover,
.finance-section-tabs button.active,
.finance-section-tabs button:hover,
.user-settings-tabs button.active,
.user-settings-tabs button:hover,
.settings-submenu button.active,
.settings-submenu button:hover,
.settings-card.active,
.settings-card:hover,
.role-preset-card.active,
.role-preset-card:hover {
  background: linear-gradient(180deg, #fffafa, var(--brand-tint));
  border-color: #e7bcbc;
  color: var(--brand);
}

.settings-hero,
.role-access-panel,
.access-editor,
.role-access-preview,
.integration-flow div,
.settings-note {
  background: var(--surface-gloss);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.settings-note.warning {
  background: linear-gradient(180deg, #fffaf0, var(--gold-tint));
  border-color: rgba(185, 132, 24, 0.28);
}

body[data-guidance-mode="hidden"] .settings-note:not(.warning),
body[data-guidance-mode="hidden"] .field-help,
body[data-guidance-mode="hidden"] .settings-field-help,
body[data-guidance-mode="hidden"] .supplier-payment-helper,
body[data-guidance-mode="hidden"] .module-toolbar > div > span,
body[data-guidance-mode="hidden"] .module-toolbar > div > small,
body[data-guidance-mode="hidden"] .module-toolbar > div > p,
body[data-guidance-mode="hidden"] .product-master-head > span,
body[data-guidance-mode="hidden"] .compact-panel-head > span,
body[data-guidance-mode="hidden"] .panel > p:not(.empty-text),
body[data-guidance-mode="hidden"] .panel > small,
body[data-guidance-mode="hidden"] .settings-card span,
body[data-guidance-mode="hidden"] .settings-card small,
body[data-guidance-mode="hidden"] .dashboard-update-section,
body[data-guidance-mode="hidden"] .support-intro,
body[data-guidance-mode="hidden"] .support-prompt-grid,
body[data-guidance-mode="hidden"] .support-chat-bubble.bot span,
body[data-guidance-mode="hidden"] .topbar .eyebrow,
body[data-guidance-mode="hidden"] .settings-order-copy small,
body[data-guidance-mode="hidden"] .health-card em,
body[data-guidance-mode="hidden"] .metric small,
body[data-guidance-mode="hidden"] .muted-note,
body[data-guidance-mode="hidden"] .helper-text,
body[data-guidance-mode="hidden"] form label > small {
  display: none !important;
}

body[data-guidance-mode="hidden"] input::placeholder,
body[data-guidance-mode="hidden"] textarea::placeholder {
  color: transparent !important;
}

.settings-checklist div {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-color: #dbe4ee;
  box-shadow: var(--shadow-soft);
}

.settings-checklist div.done {
  background: linear-gradient(180deg, #f4fffb, var(--mint-tint));
}

.settings-checklist div.pending {
  background: linear-gradient(180deg, #fffaf0, var(--gold-tint));
}

.dashboard-tile strong {
  box-shadow: var(--shadow-soft);
}

.dashboard-tile:hover strong {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.dashboard-tile.mint strong {
  background: linear-gradient(180deg, #f4fffb, #dff7ed);
}

.dashboard-tile.blue strong {
  background: linear-gradient(180deg, #f7fbff, #dcebfb);
}

.dashboard-tile.violet strong {
  background: linear-gradient(180deg, #fbf8ff, #e9defb);
}

.dashboard-tile.rose strong {
  background: linear-gradient(180deg, #fff8f8, #fde0e3);
}

.finance-kpi,
.dashboard-tile strong,
.role-preview-chips span {
  border: 1px solid var(--line);
}

.role-preview-chips span,
.pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cashier-product-palette button,
.product-palette button {
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.cashier-product-palette button:hover,
.product-palette button:hover {
  transform: translateY(-1px);
  border-color: #d3a7a7;
  box-shadow: var(--shadow);
}

.table-wrap,
.pos-fast-table-wrap {
  border-radius: 8px;
}

.product-palette.pos-fast-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(164px, 100%), 1fr));
  align-items: stretch;
  gap: 8px;
  min-height: 112px;
  max-height: 238px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 6px 0;
  scrollbar-gutter: stable;
}

.product-palette.pos-fast-products button {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  grid-template-rows: 15px 34px 17px 18px;
  gap: 4px;
  align-content: start;
  padding: 8px 10px;
  overflow: hidden;
}

.product-palette.pos-fast-products button > * {
  min-width: 0;
}

.product-palette.pos-fast-products .pos-product-code {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-palette.pos-fast-products strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-palette.pos-fast-products em {
  display: block;
  overflow: hidden;
  font-size: 13px;
  line-height: 17px;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-palette.pos-fast-products .product-stock-chip {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 18px;
  overflow: hidden;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.pos-fullscreen-mode .product-palette.pos-fast-products {
  min-height: 104px;
  max-height: 218px;
  padding-bottom: 6px;
}

body.pos-fullscreen-mode .product-palette.pos-fast-products button {
  width: 100%;
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  grid-template-rows: 16px 40px 20px 22px;
  gap: 5px;
  padding: 10px 12px;
}

body.pos-fullscreen-mode .product-palette.pos-fast-products strong {
  font-size: 14px;
  line-height: 15px;
}

body.pos-fullscreen-mode .product-palette.pos-fast-products em {
  font-size: 12px;
  line-height: 16px;
}

.pos-kiosk-status {
  justify-items: end;
}

.pos-kiosk-iconbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.pos-fast-topbar > .pos-kiosk-iconbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.pos-kiosk-iconbar .pos-icon-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}

.pos-kiosk-iconbar .pos-icon-action.labelled {
  width: auto;
  min-width: 86px;
}

.pos-fast-shell.pos-kiosk-shell {
  grid-template-columns: var(--pos-category-width, 122px) 6px minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
  gap: 4px;
}

.pos-fast-shell.pos-kiosk-shell.category-hidden {
  grid-template-columns: minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
}

.pos-fast-shell.pos-kiosk-shell.category-mini {
  grid-template-columns: 72px 6px minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
}

.pos-category-rail {
  display: grid;
  grid-auto-rows: minmax(38px, max-content);
  align-content: start;
  gap: 3px;
  min-height: 0;
  overflow: auto;
  border: 1px solid #d2dce8;
  border-radius: 10px;
  padding: 4px;
  background: #f5f8fb;
}

.pos-category-rail button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid #dce7f0;
  border-radius: 8px;
  min-height: 38px;
  padding: 6px 7px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}

.pos-category-rail button:first-child {
  border-color: #b8ead5;
  background: #eefbf5;
  color: #117c66;
}

.pos-category-rail button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.pos-category-rail strong,
.pos-category-rail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-category-rail strong {
  font-size: 12px;
  line-height: 1.15;
}

.pos-category-rail span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  font-size: 11px;
  font-weight: 900;
}

.pos-category-rail button.active span {
  background: rgba(255, 255, 255, 0.22);
}

.pos-category-rail.mini {
  justify-items: stretch;
  padding: 3px;
}

.pos-category-rail.mini button {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 6px 4px;
  text-align: center;
}

.pos-category-rail.mini strong {
  width: 100%;
  font-size: 11px;
  line-height: 1;
}

.pos-category-rail.mini span {
  min-width: 22px;
  height: 18px;
}

.pos-kiosk-products {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

body:not(.pos-fullscreen-mode) .pos-kiosk-products {
  gap: 8px;
}

.pos-panel-resizer {
  position: relative;
  align-self: stretch;
  min-width: 6px;
  border-radius: 999px;
  cursor: col-resize;
  touch-action: none;
}

.pos-panel-resizer::before {
  content: "";
  position: absolute;
  inset: 8px 2px;
  border-radius: inherit;
  background: #d7e0eb;
}

.pos-panel-resizer:hover::before,
body.pos-resizing .pos-panel-resizer::before {
  background: var(--brand);
}

body.pos-resizing {
  cursor: col-resize;
  user-select: none;
}

.pos-kiosk-input-row {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.32fr) 66px;
  align-items: end;
  border-bottom: 1px solid #d6e0eb;
  margin: 0;
  padding: 0 0 8px;
}

.pos-kiosk-input-row label > span {
  display: none;
}

.pos-kiosk-input-row .pos-salesperson-field > span {
  display: none;
}

.pos-kiosk-input-row input,
.pos-kiosk-input-row select {
  min-height: 36px;
  border-color: #cbd8e6;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
}

.pos-contact-field {
  position: relative;
}

.pos-contact-field input {
  padding-right: 12px;
}

.pos-contact-field:has(.pos-field-helper) input {
  padding-right: 92px;
}

.pos-field-helper {
  position: absolute;
  right: 7px;
  top: 50%;
  display: inline-flex;
  max-width: 58px;
  min-height: 22px;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid #d6e0eb;
  border-radius: 999px;
  padding: 3px 6px;
  background: #f8fafc;
  color: #536170;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-field-helper svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pos-field-helper span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-field-helper.ready {
  border-color: #a8e4cf;
  background: #eaf8f1;
  color: #118b69;
}

.pos-field-helper.needed {
  border-color: #f2d6a6;
  background: #fff7e6;
  color: #9a5b08;
}

.pos-field-helper.error {
  border-color: #f0b9b9;
  background: #fff4f4;
  color: var(--brand);
}

.pos-customer-attach {
  display: grid;
  min-height: 0;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 8px;
  background: transparent;
}

.pos-customer-attach.empty {
  display: none;
}

.pos-customer-attach.found {
  border-color: #bce6d3;
  background: #f0fbf6;
}

.pos-customer-attach.new {
  border-color: #d6e0eb;
  background: #f8fafc;
}

.pos-customer-attach strong,
.pos-customer-attach span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-customer-attach strong {
  color: var(--ink);
  font-size: 12px;
}

.pos-customer-attach span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-shortcut-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pos-product-head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.pos-category-menu-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid #d6e0eb;
  border-radius: 999px;
  padding: 2px;
  background: #f8fafc;
  white-space: nowrap;
}

.pos-category-menu-toggle button {
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 3px 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.pos-category-menu-toggle button.active {
  background: var(--brand);
  color: #ffffff;
}

.pos-product-toolbar {
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  border-bottom: 1px solid #d6e0eb;
  padding: 2px 0 8px;
  background: #ffffff;
}

.pos-product-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pos-product-filter-row button {
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.pos-product-filter-row {
  grid-row: auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0 4px;
}

body:not(.pos-fullscreen-mode) .pos-fast-products-head {
  align-items: flex-start;
  gap: 6px;
  min-height: 28px;
}

body:not(.pos-fullscreen-mode) .pos-fast-products-head > div:first-child {
  flex-wrap: wrap;
  row-gap: 2px;
}

body:not(.pos-fullscreen-mode) .pos-shortcut-note {
  display: none;
}

body:not(.pos-fullscreen-mode) .pos-product-filter-row {
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 32px;
  row-gap: 6px;
  padding: 0;
}

.pos-product-filter-row button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-color: #d6e0eb;
  background: #ffffff;
  white-space: nowrap;
}

.pos-product-filter-row button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pos-product-filter-row button.active {
  border-color: #118b69;
  background: #eaf8f1;
  color: #0b7b5b;
}

.pos-product-filter-row .pos-category-menu-toggle {
  margin-left: auto;
}

.pos-product-filter-row .pos-category-menu-toggle button {
  border-color: transparent;
  background: transparent;
}

.pos-product-filter-row .pos-category-menu-toggle button.active {
  background: var(--brand);
  color: #ffffff;
}

.pos-product-filter-row .pos-assorted-chip {
  border-color: #cbd8e6;
  background: #f8fbff;
  color: #24384a;
}

.pos-product-filter-row .pos-assorted-chip:hover {
  border-color: #9eb4ca;
  background: #eef4f8;
}

.pos-product-filter-row .pos-rush-toggle {
  border-color: #d6e0eb;
  background: #ffffff;
  color: #24384a;
}

.pos-product-filter-row .pos-rush-toggle.active {
  border-color: #118b69;
  background: #118b69;
  color: #ffffff;
}

.pos-product-filter-row button span {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: inherit;
  font-size: 10px;
}

#posSearchResults:empty {
  display: none;
}

.pos-search-status-card {
  display: grid;
  gap: 3px;
  border: 1px solid #f1c99a;
  border-left: 4px solid #c07a12;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff8eb;
  color: #24384a;
  font-size: 12px;
  line-height: 1.25;
}

.pos-search-status-card strong {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.pos-search-status-card span {
  color: #334155;
  font-weight: 800;
}

.pos-search-status-card small {
  color: #8a3e00;
  font-size: 11px;
  font-weight: 800;
}

.pos-kiosk-products .product-palette.pos-fast-products {
  grid-row: 5;
  align-self: stretch;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  grid-auto-rows: minmax(128px, max-content);
  align-content: start;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  gap: 10px;
  padding: 2px 4px 8px 2px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.pos-kiosk-products .product-palette.pos-fast-products button {
  position: relative;
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  grid-template-rows: 16px 40px 20px 22px;
  gap: 5px;
  border-left: 4px solid #238b5d;
  padding: 10px 12px;
  align-content: stretch;
}

.pos-kiosk-products .product-palette.pos-fast-products button.in-cart {
  border-color: #b8ead5;
  border-left-color: #118b69;
  background: linear-gradient(180deg, #ffffff, #f2fbf7);
}

.pos-kiosk-products .product-palette.pos-fast-products button.selected {
  border-color: #118b69;
  box-shadow: inset 0 0 0 2px rgba(17, 139, 105, 0.2);
}

.pos-tile-cart-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  max-width: 58px;
  min-width: 38px;
  min-height: 19px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 7px;
  background: #118b69;
  color: #ffffff !important;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-palette.pos-fast-products .pos-tile-cart-badge,
.pos-kiosk-products .product-palette.pos-fast-products .pos-tile-cart-badge {
  color: #ffffff !important;
  font-size: 10.5px;
}

.pos-kiosk-products .product-palette.pos-fast-products button.in-cart .pos-product-code {
  padding-right: 48px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-rows: minmax(108px, max-content);
  gap: 8px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact button {
  height: 112px;
  min-height: 112px;
  max-height: 112px;
  grid-template-rows: 15px 34px 18px 18px;
  gap: 4px;
  padding: 8px 10px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact strong {
  font-size: 14px;
  line-height: 16px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact em,
.pos-kiosk-products .product-palette.pos-fast-products.density-compact .product-stock-chip {
  font-size: 11px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact .pos-tile-cart-badge {
  max-width: 52px;
  min-width: 34px;
  min-height: 18px;
  padding: 2px 6px;
  font-size: 9.5px;
}

.pos-kiosk-products .product-palette.pos-fast-products.density-compact button.in-cart .pos-product-code {
  padding-right: 42px;
}

.pos-kiosk-products .product-palette.pos-fast-products button.stock-warn {
  border-left-color: #d49b21;
}

.pos-kiosk-products .product-palette.pos-fast-products button.stock-danger {
  border-color: #f0c9c9;
  border-left-color: #a63232;
  background: #fffafa;
  opacity: 0.72;
}

.pos-kiosk-products .product-palette.pos-fast-products button.stock-danger.in-cart {
  border-color: #e7c66f;
  border-left-color: #d49b21;
  background: linear-gradient(180deg, #ffffff, #fff9e7);
  opacity: 1;
}

.pos-kiosk-products .product-palette.pos-fast-products button.stock-danger:hover {
  opacity: 0.92;
}

.pos-kiosk-products .product-palette.pos-fast-products strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-kiosk-products .product-palette.pos-fast-products em {
  align-self: end;
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-kiosk-products .product-palette.pos-fast-products .product-stock-chip {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-bill-dock {
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr) auto auto auto;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

.pos-cashier-board.bill-focus-mode .pos-fast-shell.pos-kiosk-shell.category-hidden,
body.pos-fullscreen-mode .pos-cashier-board.bill-focus-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
  grid-template-columns: minmax(460px, 1fr) 6px minmax(320px, var(--pos-bill-width, 430px));
}

.pos-cashier-board.bill-focus-mode .pos-kiosk-products {
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
}

.pos-billing-focus-items {
  display: grid;
  grid-row: 3;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.pos-billing-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  border: 1px solid #d8e4ef;
  border-radius: 9px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.pos-billing-focus-head strong,
.pos-billing-focus-head span {
  display: block;
}

.pos-billing-focus-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.pos-billing-focus-head span {
  margin-top: 2px;
  color: #53677f;
  font-size: 12px;
  font-weight: 800;
}

.pos-billing-focus-items .pos-bill-lines {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.pos-billing-focus-items .pos-bill-line {
  height: 54px;
  min-height: 54px;
  max-height: 54px;
}

.pos-bill-focus-dock {
  grid-template-rows: auto auto auto auto;
}

@media (max-width: 1080px) {
  .pos-cashier-board.bill-focus-mode .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.pos-fullscreen-mode .pos-cashier-board.bill-focus-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
    grid-template-columns: 1fr;
  }
}


.pos-bill-lines {
  display: block;
  gap: 0;
  min-height: 170px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.pos-bill-lines-head,
.pos-bill-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 104px minmax(64px, auto);
  align-items: center;
  gap: 6px;
}

.pos-bill-lines-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 34px;
  padding: 0 10px;
  background: #f2f4f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pos-bill-lines-head span:first-child {
  grid-column: 1 / span 2;
}

.pos-bill-line {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 5px 9px;
  background: #ffffff;
}

.pos-bill-line[data-select-cart-product] {
  cursor: pointer;
}

.pos-bill-line[data-select-cart-product]:hover,
.pos-bill-line[data-select-cart-product]:focus-visible {
  background: #f7fbff;
  outline: 2px solid rgba(37, 99, 167, 0.18);
  outline-offset: -2px;
}

.pos-bill-line.active {
  border-left: 3px solid #118b69;
  background: #f1fbf7;
  box-shadow: inset 0 0 0 1px rgba(17, 139, 105, 0.12);
}

.pos-bill-line:first-of-type {
  border-top: 0;
}

.pos-bill-line .pos-remove-line {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
}

.pos-bill-item-name {
  display: grid;
  min-width: 0;
}

.pos-bill-item-name strong,
.pos-bill-item-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-bill-item-name strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.pos-bill-line.assorted .pos-bill-item-name span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-bill-line .pos-qty-control {
  grid-template-columns: 26px 42px 26px;
  gap: 4px;
}

.pos-bill-line .pos-qty-control input {
  width: 42px;
  min-height: 30px;
  font-size: 14px;
  text-align: center;
}

.pos-bill-line .pos-qty-control button {
  width: 26px;
  min-height: 30px;
  border-radius: 8px;
  padding: 0;
}

.pos-bill-line > b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.pos-bill-empty {
  margin: 10px;
}

.pos-bill-dock .pos-payment-strip {
  align-self: end;
  gap: 6px;
  padding: 6px;
  box-shadow: none;
}

.pos-bill-dock .pos-stock-note {
  gap: 2px;
  padding: 8px 10px;
}

.pos-bill-dock .pos-stock-note strong {
  font-size: 13px;
}

.pos-bill-dock .pos-stock-note span,
.pos-bill-dock .pos-stock-note small {
  font-size: 12px;
}

.pos-stock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pos-stock-actions .mini-action {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 10px;
}

.pos-dock-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.pos-dock-tools .pos-icon-action,
.pos-dock-tools button {
  position: relative;
  display: inline-grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  gap: 0;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  overflow: hidden;
  text-align: center;
}

.pos-dock-tools .pos-icon-action svg,
.pos-dock-tools button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pos-dock-tools .pos-icon-action span,
.pos-dock-tools button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pos-shift-tools {
  justify-content: flex-start;
}

.pos-receipt-tools {
  justify-content: flex-end;
  padding-right: 2px;
}

.pos-selected-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 1px solid #bce6d3;
  border-radius: 8px;
  padding: 7px;
  background: #f0fbf6;
}

.pos-selected-summary {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.pos-selected-summary span,
.pos-selected-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-selected-summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-edit-selected {
  min-height: 28px;
  padding: 4px 8px;
  white-space: nowrap;
}

.pos-quick-qty-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.pos-quick-qty-panel button {
  min-width: 0;
  min-height: 30px;
  border: 1px solid #bdd1df;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-quick-qty-panel button:hover {
  border-color: #118b69;
  color: #118b69;
}

.pos-checkout-summary {
  display: grid;
  grid-template-columns: 0.72fr 0.72fr 0.72fr 0.9fr minmax(92px, 1.2fr);
  overflow: hidden;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #f8fafc;
}

.pos-checkout-summary.has-roundoff {
  grid-template-columns: 0.72fr 0.72fr 0.72fr 0.9fr 0.9fr minmax(92px, 1.2fr);
}

.pos-checkout-summary > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 2px;
  border-right: 1px solid #dfe8f2;
  padding: 7px 4px;
  color: var(--ink);
  text-align: center;
}

.pos-checkout-summary > div:last-child {
  border-right: 0;
}

.pos-checkout-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pos-checkout-summary strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-checkout-summary .pos-grand-total strong {
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.pos-checkout-summary .pos-grand-total {
  background: #fff5f5;
  border-left: 2px solid var(--brand);
}

.pos-bill-dock .pos-payment-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.pos-payment-mode-group,
.pos-bill-action-group {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.pos-payment-mode-group {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #d0dce8;
  border-radius: 12px;
  gap: 4px;
  padding: 4px;
  background: #eef4f8;
}

.pos-bill-action-group {
  grid-template-columns: 0.94fr 1.1fr 0.94fr 0.78fr 1.12fr;
}

.pos-bill-dock .pos-pay-action {
  display: inline-grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 5px;
  min-height: 40px;
  padding: 5px;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px;
  transition: filter 0.12s, transform 0.1s;
}

.pos-bill-dock .pos-pay-action:active {
  transform: scale(0.96);
}

.pos-bill-dock .pos-pay-action.mode {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 4px;
  font-size: 11.5px;
}

.pos-bill-dock .pos-pay-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pos-pay-mode-icon {
  display: inline-grid;
  width: 15px;
  height: 15px;
  min-width: 15px;
  place-items: center;
  font-style: normal;
}

.pos-pay-mode-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.pos-pay-active-check {
  position: absolute;
  right: 3px;
  top: 3px;
  display: inline-grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-style: normal;
}

.pos-pay-active-check svg {
  width: 8px !important;
  height: 8px !important;
  stroke-width: 3;
}

.pos-bill-dock .pos-pay-action.icon-only {
  font-size: 0;
}

.pos-bill-dock .pos-pay-action.icon-only svg {
  width: 20px;
  height: 20px;
}

.pos-bill-dock .pos-pay-action.mode.active {
  border-color: #118b69;
  background: #118b69;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(17, 139, 105, 0.16);
}

.pos-bill-dock .pos-pay-action.mode:not(.active) {
  border-color: #d6e0eb;
  background: #ffffff;
  color: #182534;
}

.pos-payment-mode-group .pos-pay-action.mode:not(.active) {
  background: #ffffff !important;
  color: #182534 !important;
}

.pos-payment-mode-group .pos-pay-action.mode.active {
  background: #118b69 !important;
  color: #ffffff !important;
}

.pos-bill-dock .pos-pay-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-bill-dock .pos-pay-action.whatsapp-bill {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: center;
  gap: 4px;
  padding-inline: 5px;
  border: 1px solid #9be7d4;
  background: linear-gradient(180deg, #f8fffc, #ecfbf5);
  color: #078a6c;
  box-shadow: none;
}

.pos-bill-dock .pos-pay-action.whatsapp-bill span {
  color: inherit;
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-bill-dock .pos-pay-action.whatsapp-bill.needs-mobile {
  border-color: #9be7d4;
  background: linear-gradient(180deg, #f8fffc, #ecfbf5);
  color: #078a6c;
}

.pos-pay-action.hold {
  border: 1px solid #c9d3df;
  background: #ffffff;
  color: var(--ink);
}

.pos-bill-dock .pos-pay-action.hold {
  background: #f8fbff;
  color: #182534;
}

.pos-bill-dock .pos-pay-action.hold:disabled {
  border-color: #d8e2ed;
  background: #eef3f8;
  color: #6b7786;
  opacity: 1;
}

.pos-bill-dock .pos-pay-action.discount {
  border: 1px solid #e7c66f;
  background: #fff9e7;
  color: #8a5a00;
}

.pos-bill-dock .pos-pay-action.discount:disabled {
  border-color: #e2e8f0;
  background: #f5f7fa;
  color: #7b8795;
  opacity: 1;
}

.pos-cash-tender-panel {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid #d6e0eb;
  border-radius: 10px;
  background: #f8fbff;
}

.pos-cash-tender-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

.pos-cash-tender-head strong {
  color: #182534;
}

.pos-cash-tender-head span {
  min-width: 0;
  overflow: hidden;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-cash-tender-head span.short {
  color: #a63232;
}

.pos-cash-tender-head span.change {
  color: #118b69;
}

.pos-cash-tender-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.58fr 0.58fr;
  gap: 5px;
}

.pos-cash-tender-entry input,
.pos-cash-tender-entry button,
.pos-cash-note-buttons button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #ffffff;
  color: #182534;
  font-size: 12px;
  font-weight: 900;
}

.pos-cash-tender-entry input {
  padding: 0 9px;
}

.pos-cash-tender-entry button,
.pos-cash-note-buttons button {
  cursor: pointer;
}

.pos-cash-note-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.pos-cash-note-buttons button {
  background: #ffffff;
}

.pos-cash-note-buttons button:hover,
.pos-cash-tender-entry button:hover {
  border-color: #9fb4ca;
  background: #eef4f8;
}

.pos-terminal-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #cfdbea;
  border-radius: 10px;
  padding: 8px;
  background: #fbf8ef;
  color: #182534;
}

.pos-terminal-panel.card {
  background: #f5f8ff;
}

.pos-terminal-panel.pinelabs {
  background: #f7fbff;
}

.pos-terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-terminal-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pos-terminal-head span,
.pos-payment-reference-field span,
.pos-terminal-qr span,
.pos-terminal-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.pos-terminal-head strong {
  color: #0f513f;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.pos-terminal-copy {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #ffffff;
  color: #118b69;
  cursor: pointer;
}

.pos-terminal-copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pos-terminal-qr {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.dynamic-qr-svg {
  width: 92px;
  height: 92px;
  border: 1px solid #d6e0eb;
  border-radius: 6px;
  padding: 4px;
  background: #ffffff;
  fill: none;
  stroke: none;
  stroke-width: 0;
}

.dynamic-qr-svg rect,
.dynamic-qr-svg path {
  stroke: none;
  stroke-width: 0;
}

.dynamic-qr-fallback {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid #d6e0eb;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.dynamic-qr-fallback svg {
  width: 22px;
  height: 22px;
}

.pos-terminal-qr > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.pos-terminal-qr b {
  overflow: hidden;
  color: #182534;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-terminal-qr span {
  line-height: 1.35;
}

.pos-terminal-note {
  margin: 0;
  line-height: 1.35;
}

.pinelabs-terminal-status {
  display: grid;
  gap: 3px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.pinelabs-terminal-status strong {
  color: #182534;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.pinelabs-terminal-status small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.pinelabs-terminal-status.approved {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.pinelabs-terminal-status.pending {
  border-color: #fed7aa;
  background: #fff7ed;
}

.pos-terminal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pos-terminal-button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #ffffff;
  color: #182534;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.pos-terminal-button.primary {
  border-color: #0f766e;
  background: #0f766e;
  color: #ffffff;
}

.pos-terminal-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pos-payment-reference-field {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.pos-payment-reference-field input {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 0 9px;
  background: #ffffff;
  color: #182534;
  font-size: 12px;
  font-weight: 900;
}

.pos-hold-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: #a63232;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-payment-mode-group .pos-pay-action.mode:not(.active) {
  background: #ffffff !important;
  color: #182534 !important;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-payment-mode-group .pos-pay-action.mode.active {
  background: #118b69 !important;
  color: #ffffff !important;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.whatsapp-bill {
  border-color: #9be7d4 !important;
  background: #ecfbf5 !important;
  color: #078a6c !important;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.whatsapp-bill.needs-mobile {
  border-color: #9be7d4 !important;
  background: #ecfbf5 !important;
  color: #078a6c !important;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.hold,
body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.discount,
body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.print {
  background: #f8fbff !important;
  color: #24384a;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.discount {
  border-color: #e7c66f;
  background: #fff9e7 !important;
  color: #8a5a00;
}

body.pos-fullscreen-mode .pos-bill-dock .pos-bill-action-group .pos-pay-action.clear {
  background: #ffffff !important;
  color: var(--brand);
}

.pos-cashier-board.rush-mode .pos-customer-attach,
.pos-cashier-board.rush-mode .pos-shortcut-note,
.pos-cashier-board.rush-mode .pos-selected-mini,
.pos-cashier-board.rush-mode .pos-receipt-tools {
  display: none;
}

.pos-cashier-board.rush-mode .pos-kiosk-input-row {
  grid-template-columns: minmax(240px, 1fr) minmax(132px, 0.28fr) 58px;
  padding-bottom: 5px;
}

.pos-cashier-board.rush-mode .pos-kiosk-input-row input,
.pos-cashier-board.rush-mode .pos-kiosk-input-row select,
.pos-cashier-board.rush-mode .pos-salesperson-chips button,
.pos-cashier-board.rush-mode .pos-add-search {
  min-height: 32px;
}

.pos-cashier-board.rush-mode .pos-fast-products-head {
  gap: 8px;
}

.pos-cashier-board.rush-mode .pos-product-filter-row {
  padding-bottom: 2px;
}

.pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  grid-auto-rows: minmax(100px, max-content);
  height: 100%;
  gap: 8px;
}

.pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products button {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  grid-template-rows: 14px 30px 18px 18px;
  gap: 4px;
  padding: 7px 9px;
}

.pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products strong {
  font-size: 13px;
  line-height: 15px;
}

.pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products em,
.pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products .product-stock-chip {
  font-size: 10px;
}

.pos-cashier-board.rush-mode .pos-bill-dock {
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
}

.pos-cashier-board.rush-mode .pos-bill-lines {
  min-height: 250px;
}

.pos-dock-customer {
  min-height: 0;
  overflow: hidden;
}

.pos-dock-customer .pos-info-card {
  min-height: 0;
  max-height: 98px;
  overflow: hidden;
}

.pos-dock-customer .pos-info-card h3 {
  font-size: 13px;
}

.pos-dock-customer .pos-detail-list {
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  gap: 4px 8px;
}

.pos-dock-customer .pos-detail-list dt,
.pos-dock-customer .pos-detail-list dd {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-dock-customer .pos-detail-list dt:nth-of-type(n+5),
.pos-dock-customer .pos-detail-list dd:nth-of-type(n+5) {
  display: none;
}

.pos-kiosk-drawer {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pos-kiosk-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.pos-kiosk-drawer > summary::-webkit-details-marker {
  display: none;
}

.pos-kiosk-drawer > summary strong {
  font-size: 13px;
}

.pos-kiosk-drawer > summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-kiosk-drawer[open] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 8px 8px;
}

.pos-kiosk-drawer[open] > summary {
  grid-column: 1 / -1;
}

.pos-kiosk-drawer .pos-side-section {
  min-width: 0;
  max-height: 148px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

body.pos-fullscreen-mode .pos-kiosk-drawer {
  display: none;
}

body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell {
  grid-template-columns: var(--pos-category-width, 122px) 6px minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
  grid-template-columns: minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
}

body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
  grid-template-columns: 72px 6px minmax(390px, 1fr) 6px var(--pos-bill-width, 430px);
}

body.pos-fullscreen-mode .pos-bill-dock {
  height: 100%;
  padding: 8px;
}

body.pos-fullscreen-mode .pos-kiosk-products {
  height: 100%;
  min-height: 0;
}

body.pos-fullscreen-mode .pos-fast-topbar {
  min-height: 52px;
  padding-block: 6px;
}

body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
  grid-auto-rows: 132px;
  align-content: start;
  min-height: 0;
  height: 100%;
  max-height: none;
}

body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products button {
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  grid-template-rows: 16px 40px 20px 22px;
}

body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact {
  grid-auto-rows: 112px;
}

body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact button {
  height: 112px;
  min-height: 112px;
  max-height: 112px;
  grid-template-rows: 15px 34px 18px 18px;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) {
  overflow: auto;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .workspace {
  height: auto;
  min-height: 100vh;
  overflow: auto;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .content-grid {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-cashier-board.pos-fast-board {
  height: max(760px, calc(100vh - 16px));
  min-height: 760px;
  overflow: hidden;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-fast-shell.pos-kiosk-shell {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-kiosk-products {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-product-toolbar {
  min-height: 78px;
  overflow: visible;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-product-filter-row {
  flex-wrap: wrap;
  overflow: visible;
}

body.pos-fullscreen-mode:not(.desktop-pos-mode):not(.native-fullscreen-active) .pos-kiosk-products .product-palette.pos-fast-products {
  min-height: 0;
  height: 100%;
  max-height: none;
  align-content: start;
  overflow-y: auto;
}

body.pos-fullscreen-mode .pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products {
  grid-auto-rows: 104px;
}

body.pos-fullscreen-mode .pos-cashier-board.rush-mode .pos-kiosk-products .product-palette.pos-fast-products button {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
}

@media (max-width: 1480px) {
  body.pos-fullscreen-mode .pos-fast-products-head {
    align-items: flex-start;
    gap: 6px;
  }

  body.pos-fullscreen-mode .pos-fast-products-head > div:first-child {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  body.pos-fullscreen-mode .pos-product-head-tools {
    width: 100%;
    justify-content: flex-start;
  }

  body.pos-fullscreen-mode .pos-shortcut-note {
    display: none;
  }

  body.pos-fullscreen-mode .pos-product-filter-row {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 6px;
  }
}

@media (max-width: 1320px) {
  .pos-fast-shell.pos-kiosk-shell {
    grid-template-columns: var(--pos-category-width, 112px) 6px minmax(320px, 1fr) 6px var(--pos-bill-width, 400px);
  }

  .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
    grid-template-columns: minmax(320px, 1fr) 6px var(--pos-bill-width, 400px);
  }

  .pos-fast-shell.pos-kiosk-shell.category-mini,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    grid-template-columns: 62px 6px minmax(320px, 1fr) 6px var(--pos-bill-width, 400px);
  }

  .pos-category-rail strong {
    font-size: 11px;
  }

  .pos-bill-lines-head,
  .pos-bill-line {
    grid-template-columns: 24px minmax(0, 1fr) 104px minmax(58px, auto);
    gap: 6px;
  }
}

@media (max-width: 1080px) {
  .pos-counter-health {
    grid-template-columns: 1fr;
  }

  .pos-fast-shell.pos-kiosk-shell,
  .pos-fast-shell.pos-kiosk-shell.category-hidden,
  .pos-fast-shell.pos-kiosk-shell.category-mini,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .pos-panel-resizer {
    display: none;
  }

  .pos-category-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(126px, 1fr);
    grid-auto-rows: minmax(48px, auto);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pos-kiosk-products,
  .pos-bill-dock {
    min-height: 0;
    overflow: visible;
  }

  .pos-kiosk-footer {
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-width: 1180px) {
  body.android-pos-lite-mode.pos-fullscreen-mode .workspace {
    padding: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cashier-board.pos-fast-board {
    height: calc(100vh - 12px);
    min-height: 0;
    gap: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar {
    grid-template-columns: minmax(180px, 1fr) auto;
    min-height: 44px;
    gap: 8px;
    padding: 5px 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar strong {
    font-size: 15px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar span {
    font-size: 11px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar b {
    font-size: 18px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-iconbar .pos-icon-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-quick-admin-panel {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 360px;
    gap: 6px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell:not(.category-mini):not(.category-hidden) {
    grid-template-columns: 84px minmax(0, 1fr) 360px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-panel-resizer {
    display: none !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: minmax(42px, max-content);
    gap: 4px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini button {
    grid-template-columns: 1fr;
    min-height: 42px;
    padding: 5px 4px;
    text-align: center;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail strong,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini strong {
    font-size: 10.5px;
    line-height: 1.05;
    white-space: normal;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail span,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini span {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock {
    min-height: 0;
    overflow: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products {
    grid-template-rows: auto minmax(0, auto) auto auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row {
    grid-template-columns: minmax(190px, 1fr) minmax(120px, 0.3fr) 58px;
    gap: 6px;
    padding-bottom: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row input,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row select,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-salesperson-chips button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-add-search {
    min-height: 34px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-toolbar {
    min-height: 0;
    gap: 5px;
    padding-bottom: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-products-head {
    min-height: 0;
    gap: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-products-head span,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-shortcut-note {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-filter-row button {
    min-height: 28px;
    padding: 4px 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    grid-auto-rows: 100px;
    gap: 7px;
    padding: 0 2px 6px 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products button {
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    grid-template-rows: 14px 31px 17px 18px;
    gap: 3px;
    padding: 7px 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products strong {
    font-size: 12.5px;
    line-height: 15px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products em,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products .product-stock-chip {
    font-size: 10.5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock {
    grid-template-rows: auto minmax(130px, 1fr) auto auto auto;
    gap: 5px;
    padding: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-bill-head b {
    font-size: 20px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-lines {
    min-height: 126px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-lines-head,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line {
    grid-template-columns: 20px minmax(0, 1fr) 92px minmax(54px, auto);
    gap: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 4px 7px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-qty-control {
    grid-template-columns: 26px 54px 26px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-qty-control button {
    width: 26px;
    height: 28px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-qty-control input {
    width: 54px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary.has-roundoff {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary > div {
    min-height: 42px;
    padding: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-strip {
    gap: 6px;
    padding: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock .pos-pay-action {
    min-height: 36px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-action-group {
    grid-template-columns: 0.9fr 1fr 0.82fr 0.66fr 1fr;
  }
}

@media (max-width: 760px) {
  .product-palette.pos-fast-products {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }

  .product-palette.pos-fast-products button {
    width: 100%;
  }

  .assorted-line {
    grid-template-columns: 1fr;
  }

  .assorted-line-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quantity-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

dialog {
  border-color: var(--line);
  background: var(--surface-gloss);
  box-shadow: 0 24px 70px rgba(33, 47, 67, 0.22);
}

.dialog-panel {
  background: transparent;
}

.whatsapp-missing-dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid #d6e0eb;
  border-radius: 14px;
  padding: 0;
}

.whatsapp-missing-dialog::backdrop {
  background: rgba(15, 23, 42, 0.46);
}

.whatsapp-missing-dialog .dialog-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: #ffffff;
}

.whatsapp-missing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.whatsapp-missing-head h2 {
  margin: 2px 0 4px;
}

.whatsapp-missing-head span,
.whatsapp-missing-note {
  color: #64748b;
}

.whatsapp-missing-head .icon-only {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.whatsapp-mobile-entry {
  display: grid;
  gap: 7px;
  color: #64748b;
  font-weight: 900;
}

.whatsapp-mobile-entry input {
  min-height: 44px;
  border: 1px solid #cbd8e6;
  border-radius: 10px;
  padding: 0 12px;
  color: #182534;
  font-size: 16px;
  font-weight: 900;
}

.whatsapp-missing-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.whatsapp-missing-options button {
  min-height: 42px;
  padding: 8px 10px;
  white-space: normal;
}

.whatsapp-missing-note {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 560px) {
  .whatsapp-missing-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body:not(.logged-out) {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body:not(.logged-out) .app-shell {
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    inset: auto 8px calc(8px + env(safe-area-inset-bottom));
    z-index: 60;
    display: block;
    max-height: 74px;
    border: 1px solid rgba(214, 224, 236, 0.96);
    border-radius: 16px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 42px rgba(33, 47, 67, 0.18);
    overflow: hidden;
  }

  .sidebar-toggle {
    display: none;
  }

  .nav-list {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-group {
    flex: 0 0 auto;
  }

  .nav-list > .nav-group > button,
  body.sidebar-collapsed .nav-list > .nav-group > button {
    display: grid;
    width: auto;
    min-width: 74px;
    min-height: 60px;
    grid-template-columns: 1fr;
    grid-template-rows: 22px 1fr;
    justify-items: center;
    gap: 3px;
    border-radius: 12px;
    padding: 7px 8px 6px;
    text-align: center;
  }

  .nav-list > .nav-group > button svg,
  body.sidebar-collapsed .nav-list > .nav-group > button svg {
    width: 20px;
    height: 20px;
  }

  .nav-list > .nav-group > button span,
  body.sidebar-collapsed .nav-list > .nav-group > button span {
    display: block;
    max-width: 70px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-submenu,
  body.sidebar-collapsed .nav-submenu {
    display: none !important;
  }

  .workspace {
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    gap: 10px;
    margin: -10px -10px 10px;
    border-bottom: 1px solid var(--line);
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(33, 47, 67, 0.08);
  }

  .topbar .eyebrow {
    display: none;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(74px, auto);
    gap: 8px;
    position: relative;
  }

  .global-search-shell {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #globalSearchPanel {
    left: 0;
    right: 0;
    width: 100%;
  }

  .topbar-actions button,
  .session-badge {
    min-height: 42px;
  }

  .alert-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  .alert-button::before {
    content: "!";
    font-size: 16px;
    font-weight: 900;
  }

  #notificationPanel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
  }

  .notification-popover {
    position: static;
    width: min(360px, calc(100vw - 20px));
  }

  .module-toolbar,
  .panel,
  .metric {
    border-radius: 10px;
  }

  .module-toolbar {
    gap: 8px;
    padding: 10px;
  }

  .content-grid {
    gap: 12px;
  }

  .settings-submenu,
  .settings-section-picker,
  .user-settings-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .setup-step-card {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .setup-step-card .pill,
  .setup-step-card .ghost-button {
    grid-column: 2;
  }

  .settings-submenu > *,
  .settings-section-picker > *,
  .user-settings-tabs > * {
    flex: 0 0 min(76vw, 260px);
  }
}

@media (max-width: 640px) {
  input,
  select,
  textarea,
  .table-input,
  .dialog-panel input,
  .dialog-panel select,
  .dialog-panel textarea {
    font-size: 16px;
  }

  .metrics-row,
  .dashboard-kpi-panel .dashboard-tile-grid,
  .dashboard-kpi-panel .dashboard-filters {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-panel .dashboard-tile-grid.dashboard-core-grid,
  .dashboard-signal-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .table-wrap table {
    white-space: normal;
  }

  .table-wrap thead {
    display: none;
  }

  .table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  .table-wrap tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  .table-wrap td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid #edf2f7;
    padding: 10px 12px;
    overflow-wrap: anywhere;
  }

  .table-wrap td:first-child {
    border-top: 0;
  }

  .table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
  }

  .table-wrap td[data-label=""] {
    grid-template-columns: 1fr;
  }

  .table-wrap td[data-label=""]::before {
    display: none;
  }

  .table-wrap .mini-action,
  .table-wrap .ghost-button,
  .table-wrap .primary-button {
    width: 100%;
    min-height: 38px;
  }

  .table-pagination {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .table-page-size,
  .table-page-center,
  .table-page-settings {
    justify-content: stretch;
  }

  .table-page-size {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .table-page-center {
    display: grid;
    grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px;
    gap: 8px;
  }

  .table-page-number {
    justify-content: center;
  }

  .table-page-settings {
    justify-content: flex-end;
  }

  .table-settings-menu {
    right: calc(100% + 8px);
    bottom: 0;
    width: min(320px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 120px));
  }

  .table-settings-picker.open-right .table-settings-menu {
    right: auto;
    bottom: 0;
    left: calc(100% + 8px);
  }

  .table-settings-picker.open-left .table-settings-menu {
    right: calc(100% + 8px);
    bottom: 0;
    left: auto;
  }

  .table-settings-picker.open-above .table-settings-menu {
    right: 0;
    bottom: calc(100% + 8px);
    left: auto;
  }

  .table-settings-flyout {
    width: min(300px, calc(100vw - 28px));
  }

  .table-column-menu {
    max-height: 260px;
  }

  dialog[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  dialog[open]::backdrop {
    background: rgba(15, 23, 42, 0.48);
  }

  dialog[open] .dialog-panel {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: auto;
    padding: 16px !important;
  }

  dialog[open] .dialog-panel > div:first-child {
    position: sticky;
    top: -16px;
    z-index: 2;
    margin: -16px -16px 2px;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.96);
  }

  .dialog-panel h2 {
    font-size: 24px;
  }

  .dialog-grid,
  .form-grid,
  .settings-form {
    gap: 12px;
  }

  .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px -16px -16px;
    border-top: 1px solid var(--line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
  }

  .dialog-actions button {
    width: 100%;
    min-height: 46px;
  }
}

@media (max-width: 760px) {
  .pos-cashier-board.pos-fast-board {
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
  }

  .pos-fast-shell.pos-kiosk-shell,
  .pos-fast-shell.pos-kiosk-shell.category-hidden,
  .pos-fast-shell.pos-kiosk-shell.category-mini,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    display: flex;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
    gap: 10px;
    overflow: visible !important;
  }

  .pos-panel-resizer {
    display: none !important;
  }

  .pos-category-rail,
  .pos-category-rail.mini {
    display: flex;
    order: 0;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    gap: 6px;
    min-height: 0;
    border-radius: 10px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .pos-category-rail button,
  .pos-category-rail.mini button {
    flex: 0 0 112px;
    min-height: 48px;
    padding: 8px;
  }

  .pos-category-rail strong,
  .pos-category-rail.mini strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pos-category-rail span,
  .pos-category-rail.mini span {
    font-size: 11px;
  }

  .pos-kiosk-products {
    order: 1;
    overflow: visible;
  }

  .pos-bill-dock {
    order: 2;
    grid-template-rows: auto auto auto auto auto;
    padding: 8px;
    overflow: visible;
  }

  .pos-fast-input-row,
  .pos-fast-input-row.pos-kiosk-input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pos-fast-input-row input,
  .pos-fast-input-row button {
    min-height: 46px;
  }

  .pos-fast-products-head {
    gap: 8px;
  }

  .pos-product-toolbar {
    min-height: 0;
    gap: 8px;
    padding: 2px 0 8px;
  }

  .pos-product-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .pos-product-filter-row button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
  }

  .product-palette.pos-fast-products,
  .pos-kiosk-products .product-palette.pos-fast-products,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 128px;
    height: auto;
    max-height: none;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .product-palette.pos-fast-products button,
  .pos-kiosk-products .product-palette.pos-fast-products button,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products button {
    height: 128px;
    min-height: 128px;
    max-height: 128px;
    padding: 10px;
  }

  .pos-kiosk-products .product-palette.pos-fast-products.density-compact,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact {
    grid-auto-rows: 110px;
  }

  .pos-kiosk-products .product-palette.pos-fast-products.density-compact button,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact button {
    height: 110px;
    min-height: 110px;
    max-height: 110px;
  }

  .pos-bill-lines {
    min-height: 0;
    max-height: 44vh;
  }

  .pos-bill-lines-head,
  .pos-bill-line {
    grid-template-columns: 22px minmax(0, 1fr) 94px minmax(56px, auto);
  }

  .pos-checkout-summary,
  .pos-checkout-summary.has-roundoff {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-checkout-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .pos-checkout-summary > div {
    border-bottom: 1px solid #dfe8f2;
  }

  .pos-checkout-summary > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .pos-payment-mode-group,
  .pos-bill-action-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-quick-qty-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  #sessionBadge {
    grid-column: 1 / -1;
  }

  .product-palette.pos-fast-products,
  .pos-kiosk-products .product-palette.pos-fast-products,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: 1fr;
  }

  .pos-bill-lines-head,
  .pos-bill-line {
    grid-template-columns: 20px minmax(0, 1fr) 86px;
  }

  .pos-bill-lines-head span:last-child,
  .pos-bill-line > b {
    display: none;
  }
}

@media (orientation: portrait), (max-width: 899px) {
  body.android-pos-lite-mode.pos-fullscreen-mode {
    overflow: hidden;
    background: #edf3f8;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .workspace {
    height: 100dvh;
    padding: 6px;
    overflow: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .content-grid {
    height: 100%;
    overflow: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .content-grid > .panel {
    display: none !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cashier-board.pos-fast-board {
    display: grid;
    height: calc(100dvh - 12px) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 5px 8px;
    border-radius: 10px;
    padding: 6px 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar > div:first-child {
    min-width: 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar strong {
    overflow: hidden;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-topbar span {
    overflow: hidden;
    font-size: 10.5px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-status span {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-status b {
    font-size: 18px;
    line-height: 20px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-iconbar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-iconbar .pos-icon-action {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    display: grid !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
    overflow: hidden !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-panel-resizer {
    display: none !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini {
    display: flex;
    max-height: 48px;
    gap: 5px;
    border-radius: 10px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail::-webkit-scrollbar,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini::-webkit-scrollbar {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini button {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 38px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    padding: 5px 8px;
    text-align: left;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail strong,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail span,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-category-rail.mini span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    font-size: 10px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products {
    display: grid;
    min-height: 0;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 6px;
    border-radius: 10px;
    padding: 6px;
    overflow: hidden !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px;
    gap: 6px;
    padding-bottom: 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row .pos-fast-search {
    grid-column: 1 / 2;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row .pos-add-search {
    grid-column: 2 / 3;
    grid-row: 1;
    min-width: 0;
    padding-inline: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row .pos-salesperson-field {
    grid-column: 1 / -1;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row label span {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row .pos-salesperson-field > span {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row input,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row select,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-salesperson-chips button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-add-search {
    min-height: 38px;
    border-radius: 9px;
    font-size: 14px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row input,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row select {
    padding-inline: 10px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-customer-attach.empty {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-toolbar {
    min-height: 0;
    gap: 5px;
    padding: 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-products-head {
    min-height: 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-products-head span,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-shortcut-note {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-filter-row::-webkit-scrollbar {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-product-filter-row button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 11px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    grid-auto-rows: 102px;
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 7px;
    overflow-y: auto;
    padding: 0 2px 4px 0;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact button {
    height: 102px;
    min-height: 102px;
    max-height: 102px;
    grid-template-rows: 13px 30px 17px 17px;
    gap: 3px;
    border-left-width: 3px;
    padding: 7px 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products strong {
    font-size: 12.5px;
    line-height: 15px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products em,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products .product-stock-chip {
    font-size: 10.5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock {
    display: grid;
    max-height: min(45dvh, 390px);
    min-height: 0;
    grid-template-rows: auto minmax(42px, auto) auto auto auto;
    gap: 5px;
    border-radius: 10px;
    padding: 6px;
    overflow: hidden !important;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-bill-head {
    min-height: 0;
    gap: 6px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-bill-head strong {
    font-size: 15px;
    line-height: 18px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-bill-head span {
    font-size: 11px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-fast-bill-head b {
    font-size: 20px;
    line-height: 22px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-head-actions .pos-receipt-tools {
    display: none;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-lines {
    min-height: 42px;
    max-height: min(16dvh, 145px);
    border-radius: 8px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-lines-head {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 10.5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    grid-template-columns: 20px minmax(0, 1fr) 86px minmax(54px, auto);
    gap: 5px;
    padding: 4px 7px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-item-name strong,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line > b {
    font-size: 12.5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line .pos-qty-control {
    grid-template-columns: 24px 38px 24px;
    gap: 3px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line .pos-qty-control button {
    width: 24px;
    min-height: 26px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-line .pos-qty-control input {
    width: 38px;
    min-height: 26px;
    font-size: 12px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-strip {
    gap: 5px;
    padding: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary.has-roundoff {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary > div {
    min-height: 36px;
    border-bottom: 0;
    padding: 4px 2px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary span {
    font-size: 10px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary strong {
    font-size: 12px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary .pos-grand-total strong {
    font-size: 17px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-actions {
    gap: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-mode-group,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-action-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-mode-group {
    border-radius: 9px;
    padding: 3px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock .pos-pay-action {
    min-height: 34px;
    border-radius: 8px;
    padding: 4px 3px;
    font-size: 10.5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock .pos-pay-action.mode {
    gap: 2px;
    font-size: 10px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-pay-mode-icon {
    width: 14px;
    min-width: 14px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cash-tender-panel {
    gap: 5px;
    padding: 5px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cash-tender-entry {
    grid-template-columns: minmax(0, 1fr) 0.48fr 0.48fr;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cash-tender-entry input,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cash-tender-entry button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-cash-note-buttons button {
    min-height: 30px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-iconbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-input-row {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 96px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products button,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products.density-compact button {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    grid-template-rows: 12px 28px 16px 16px;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock {
    max-height: min(48dvh, 410px);
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary.has-roundoff {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-checkout-summary .pos-grand-total {
    grid-column: span 2;
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-payment-mode-group,
  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-action-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.android-pos-lite-mode.pos-fullscreen-mode .pos-bill-dock .pos-pay-action span {
    font-size: 9.5px;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  @page report-print-page {
    size: A4 landscape;
    margin: 8mm;
  }

  body.thermal-print-mode,
  body.report-print-mode {
    min-width: 0;
    margin: 0;
    background: #ffffff;
  }

  body.thermal-print-mode > :not(#thermalPrintArea),
  body.report-print-mode > :not(#reportPrintArea) {
    display: none !important;
  }

  body.thermal-print-mode #thermalPrintArea {
    display: block !important;
    position: static;
    width: 72mm;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.thermal-print-mode #thermalPrintArea.thermal-print-58 {
    width: 58mm;
  }

  body.thermal-print-mode .thermal-bill {
    box-sizing: border-box;
    width: 72mm;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 3mm;
    overflow: visible;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .thermal-bill table,
  .thermal-bill tbody {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .thermal-bill tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.thermal-print-mode .thermal-bill:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body.thermal-print-mode .thermal-bill + .thermal-bill {
    margin-top: 0;
  }

  body.thermal-print-mode .thermal-bill.thermal-58 {
    width: 58mm;
  }

  body.thermal-print-mode .thermal-bill.thermal-80 {
    width: 72mm;
  }

  body.report-print-mode #reportPrintArea,
  body.report-print-mode #reportPrintArea * {
    visibility: visible;
  }

  body.report-print-mode #reportPrintArea {
    display: block !important;
    position: static;
    width: 100%;
    page: report-print-page;
  }

  .report-print-document {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    border: 1.5px solid #1f2937;
    padding: 3mm;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #111827;
    font-family: Arial, sans-serif;
    font-size: 11.8px;
    line-height: 1.3;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .report-print-header {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 47px;
    border-bottom: 1.5px solid #1f2937;
    padding: 0 56mm 5px;
    margin-bottom: 4px;
  }

  .report-print-heading {
    min-width: 0;
    text-align: center;
  }

  .report-print-heading h1,
  .report-print-heading h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.15;
  }

  .report-print-heading h1 {
    font-size: 18px;
    letter-spacing: 0;
    white-space: normal;
  }

  .report-print-heading h2 {
    margin-top: 2px;
    font-size: 14px;
  }

  .report-print-heading p {
    margin: 1px 0 0;
    color: #475569;
    font-size: 10px;
  }

  .report-print-date {
    position: absolute;
    top: 1px;
    right: 0;
    display: grid;
    gap: 1px;
    min-width: 44mm;
    max-width: 54mm;
    text-align: right;
    color: #334155;
    font-size: 10px;
    line-height: 1.2;
  }

  .report-print-date strong {
    color: #111827;
    font-size: 10.5px;
  }

  .report-print-date span {
    overflow-wrap: anywhere;
  }

  .report-print-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: 1px solid #bfccdb;
    table-layout: fixed;
    page-break-inside: auto;
  }

  .report-print-table thead {
    display: table-header-group;
  }

  .report-print-table th {
    border: 1px solid #bfccdb;
    padding: 4px 5px;
    background: #eaf1f8;
    color: #10263f;
    font-size: 10.3px;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .report-print-table td {
    border: 1px solid #d8e2ec;
    padding: 4px 5px;
    font-size: 11px;
    line-height: 1.3;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .report-print-table-wide th,
  .report-print-table-wide td {
    padding: 3.5px 4px;
    font-size: 10.2px;
  }

  .report-print-table-dense th,
  .report-print-table-dense td {
    padding: 3px;
    font-size: 9.2px;
    line-height: 1.2;
  }

  .report-print-table-stock-review th,
  .report-print-table-stock-review td {
    padding: 3.2px 3.5px;
    font-size: 9.4px;
    line-height: 1.2;
  }

  .report-print-table-stock-review th {
    white-space: normal;
  }

  .report-print-cell-date,
  .report-print-cell-store,
  .report-print-cell-qty,
  .report-print-cell-money,
  .report-print-cell-status {
    white-space: nowrap;
  }

  .report-print-cell-qty,
  .report-print-cell-money {
    text-align: right;
  }

  .report-print-cell-item {
    overflow-wrap: anywhere;
  }

  .report-print-table tbody tr:nth-child(even) td {
    background: #f8fafc;
  }

  .report-print-table td.number {
    text-align: right;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .report-print-table td.empty {
    padding: 18px;
    color: #64748b;
    text-align: center;
  }

  .report-print-table tfoot td {
    border-top: 2px solid #2563a7;
    background: #eef6ff;
    color: #0f172a;
    font-size: 11.5px;
    text-align: right;
  }

  .report-print-table tbody tr.report-print-page-break {
    break-after: page;
    page-break-after: always;
  }

  .report-print-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    border-top: 1px solid #d8e2ec;
    padding-top: 5px;
    color: #64748b;
    font-size: 10px;
  }

  .report-print-document .panel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .report-print-document .module-toolbar,
  .report-print-document .table-pagination,
  .report-print-document .table-settings-picker,
  .report-print-document .report-query-bar,
  .report-print-document .button-grid,
  .report-print-document .report-category-grid,
  .report-print-document .report-grid {
    display: none !important;
  }

  .report-print-document .table-wrap {
    overflow: visible;
    box-shadow: none;
  }

  .report-print-document table {
    page-break-inside: auto;
  }

  .report-print-document tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

}

body.sidebar-collapsed .nav-group:has(.nav-submenu)::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 100%;
  z-index: 39;
  width: 18px;
}

body.sidebar-collapsed .nav-submenu {
  display: grid;
  visibility: hidden;
  opacity: 0;
  max-height: none;
  overflow: visible;
  pointer-events: auto;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.28s;
}

body.sidebar-collapsed .nav-group:hover .nav-submenu,
body.sidebar-collapsed .nav-group:focus-within .nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Softer typography for the glossy ERP shell. POS payment/action controls stay intentionally strong. */
body {
  font-weight: 400;
}

h1,
h2,
h3,
.topbar h1 {
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.18;
}

.eyebrow {
  font-weight: 600;
  letter-spacing: 0;
}

.brand strong,
.nav-list > .nav-group > button {
  font-weight: 550;
}

.nav-list > .nav-group > button.active,
.nav-submenu button.active {
  font-weight: 650;
}

.nav-submenu button {
  font-weight: 450;
}

.sidebar {
  gap: 16px;
}

.brand {
  margin-bottom: 2px;
  padding-bottom: 18px;
}

.brand::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 0;
  left: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9e3ef 12%, #d9e3ef 88%, transparent);
}

.sidebar-toggle {
  top: calc(100% - 17px);
}

.nav-list {
  padding-top: 2px;
}

body.sidebar-collapsed .sidebar {
  gap: 14px;
}

body.sidebar-collapsed .brand {
  margin-bottom: 0;
  padding-bottom: 16px;
}

body.sidebar-collapsed .sidebar-toggle {
  top: calc(100% - 17px);
}

@media (max-width: 760px) {
  .brand {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .brand::after {
    display: none;
  }

  .nav-list {
    padding-top: 0;
  }
}

.table-wrap[data-table-id="stock-transfer-request"] .stock-request-ref-line,
.table-wrap .stock-request-ref-cell .stock-request-ref-line {
  font-weight: 400;
}

.panel h2,
.panel h3,
.module-toolbar strong,
.access-strip strong,
.settings-section-picker strong,
.settings-submenu-head strong,
.settings-form h3,
.role-access-header strong,
.role-access-preview strong,
.access-editor-block strong,
.ai-brief h2 {
  font-weight: 650;
}

.settings-submenu-head span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.settings-submenu button strong,
.role-preset-card strong,
.settings-card strong {
  font-weight: 600;
}

.settings-submenu button small,
.role-preset-card span,
.role-preset-card small,
.settings-card span,
.settings-note span,
.module-toolbar span,
.access-strip small,
.muted-line {
  font-weight: 400;
}

.settings-form label,
.checkbox-label,
.form-grid label,
.dialog-grid label,
.dialog-panel label,
.dashboard-filters label,
.access-strip label,
.pos-checkout-grid label {
  font-weight: 600;
  color: #667485;
}

input,
select,
textarea,
.inline-select,
.table-input {
  font-weight: 400;
}

th {
  color: #607086;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

td {
  color: #263449;
  font-weight: 400;
}

td strong,
.table-wrap td strong {
  font-weight: 600;
}

.cell-center {
  text-align: center !important;
}

.pill,
.role-preview-chips span,
.dashboard-update-row small {
  font-weight: 600;
}

.ghost-button,
.button-grid button,
.report-grid button,
.mini-action {
  font-weight: 600;
}

.primary-button,
.danger-button {
  font-weight: 700;
}

.metric strong,
.dashboard-tile strong,
.finance-kpi strong {
  font-weight: 700;
}

.pos-pay-action,
.pos-action strong,
.pos-quick-action strong,
.pos-fast-cart-table th,
.pos-fast-cart-table .money-cell,
.pos-total-metrics .pos-grand-total strong,
.pos-remove-line {
  font-weight: 800;
}

/* Shared polish pass: keep dense ERP screens readable without changing workflows. */
.settings-form,
.form-grid,
.dialog-grid {
  align-items: end;
}

.settings-form input,
.settings-form select,
.form-grid input,
.form-grid select,
.dialog-panel input,
.dialog-panel select,
.dialog-panel textarea,
.table-input {
  min-height: 42px;
}

.settings-form textarea,
.form-grid textarea,
.dialog-panel textarea {
  min-height: 92px;
}

.empty-text {
  border: 1px dashed #d7e0eb;
  border-radius: 8px;
  padding: 16px;
  background: #fbfdff;
  color: var(--muted);
}

.table-wrap .muted-line,
td .muted-line {
  max-width: 360px;
  white-space: normal;
}

.report-dashboard-grid,
.whatsapp-reliability-grid,
.audit-health-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.report-dashboard-grid .panel,
.whatsapp-reliability-grid .panel,
.audit-health-grid .panel {
  min-width: 0;
}

.owner-report-metrics,
.whatsapp-reliability-metrics,
.audit-health-metrics {
  margin-bottom: 14px;
}

.whatsapp-reliability-grid .table-wrap,
.audit-health-grid .table-wrap,
.report-dashboard-grid .table-wrap {
  max-height: 420px;
}

.whatsapp-reliability-grid td:last-child {
  white-space: nowrap;
}

.log-view-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.log-view-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.log-fullscreen-toggle {
  min-height: 44px;
  align-self: end;
  white-space: nowrap;
}

body.log-fullscreen-mode {
  overflow: hidden;
}

body.log-fullscreen-mode .app-shell {
  display: block;
  min-height: 100vh;
}

body.log-fullscreen-mode .sidebar,
body.log-fullscreen-mode .topbar,
body.log-fullscreen-mode .network-banner,
body.log-fullscreen-mode .workspace-pulse,
body.log-fullscreen-mode #supportWidgetRoot {
  display: none !important;
}

body.log-fullscreen-mode .workspace {
  height: 100vh;
  min-height: 100vh;
  padding: 10px;
  overflow: hidden;
}

body.log-fullscreen-mode .content-grid {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

body.log-fullscreen-mode .content-grid > .wide {
  width: 100%;
  max-width: none;
}

body.log-fullscreen-mode .content-grid > .wide:last-child {
  min-height: 0;
  overflow: hidden;
}

body.log-fullscreen-mode .content-grid > .wide:last-child .table-wrap {
  max-height: calc(100vh - 230px);
}

.log-view-select,
.log-search-field {
  display: grid;
  gap: 6px;
  color: #667485;
  font-size: 12px;
  font-weight: 800;
}

.log-view-select select,
.log-search-field input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.log-view-menu {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.log-view-menu button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.log-view-menu button.active,
.log-view-menu button:hover {
  border-color: rgba(26, 97, 177, 0.7);
  background: #f3f8ff;
}

.log-view-menu strong {
  font-size: 13px;
  white-space: nowrap;
}

.log-view-menu small {
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf2f7;
  color: #4f6074;
  font-size: 11px;
  font-weight: 900;
}

.log-view-menu button.active small {
  background: #dcecff;
  color: #155aa8;
}

.log-overview-metrics {
  margin-bottom: 10px;
}

.log-overview-metrics.compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (max-width: 980px) {
  .log-view-toolbar {
    grid-template-columns: 1fr;
  }

  .report-dashboard-grid,
  .whatsapp-reliability-grid,
  .audit-health-grid,
  .assorted-practice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #purchaseDialog {
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }

  .purchase-invoice-form {
    max-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .purchase-invoice-scanner-grid,
  .purchase-ai-facts {
    grid-template-columns: 1fr;
  }

  .purchase-invoice-form .dialog-actions {
    bottom: -18px;
    margin: 0 -18px -18px;
    padding: 12px 18px 18px;
  }

  #bomDialog {
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }

  #goodsReceiptDialog {
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }

  #addBomForm {
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }

  #goodsReceiptForm {
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }

  #addBomForm .dialog-grid,
  #addBomForm .recipe-yield-grid,
  #goodsReceiptForm .dialog-grid,
  #goodsReceiptForm .grn-qty-grid,
  #goodsReceiptForm .grn-final-grid {
    grid-template-columns: 1fr;
  }

  #addBomForm .module-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #addBomForm .module-toolbar .ghost-button {
    width: 100%;
  }

  .recipe-material-row {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 0.42fr) minmax(76px, 0.42fr);
  }

  .recipe-material-row label:first-child,
  .recipe-material-meta {
    grid-column: 1 / -1;
  }

  .recipe-material-row .mini-action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #addBomForm .dialog-actions {
    bottom: -18px;
    margin: 0 -18px -18px;
    padding: 12px 18px 18px;
  }
}

@media (max-width: 560px) {
  .purchase-invoice-form,
  #addBomForm,
  #goodsReceiptForm {
    padding: 16px;
  }

  .recipe-material-row {
    grid-template-columns: 1fr 1fr;
  }

  .recipe-material-row label:first-child,
  .recipe-material-row label:nth-child(4),
  .recipe-material-meta,
  .recipe-material-row .mini-action {
    grid-column: 1 / -1;
  }

  .purchase-invoice-form .dialog-actions,
  #addBomForm .dialog-actions,
  #goodsReceiptForm .dialog-actions {
    flex-direction: column-reverse;
    margin: 0 -16px -16px;
    padding: 12px 16px 16px;
  }

  .purchase-invoice-form .dialog-actions button,
  #addBomForm .dialog-actions button,
  #goodsReceiptForm .dialog-actions button {
    width: 100%;
  }
}

/* User-controlled typography presets from Settings > General. */
body {
  --ui-text-scale: 1;
  --ui-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-heading-weight: 650;
  --ui-control-weight: 600;
  --ui-strong-weight: 600;
  --ui-label-weight: 600;
  font-family: var(--ui-font-family);
  font-size: calc(14px * var(--ui-text-scale));
  line-height: 1.5;
}

body[data-ui-font="system"] {
  --ui-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body[data-ui-font="segoe"] {
  --ui-font-family: "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif;
}

body[data-ui-font="arial"] {
  --ui-font-family: Arial, Helvetica, sans-serif;
}

body[data-ui-text-size="compact"] {
  --ui-text-scale: 0.93;
}

body[data-ui-text-size="large"] {
  --ui-text-scale: 1.08;
}

body[data-ui-weight="soft"] {
  --ui-heading-weight: 600;
  --ui-control-weight: 500;
  --ui-strong-weight: 500;
  --ui-label-weight: 500;
}

body[data-ui-weight="strong"] {
  --ui-heading-weight: 750;
  --ui-control-weight: 700;
  --ui-strong-weight: 700;
  --ui-label-weight: 700;
}

body[data-ui-theme="column-focus"] {
  --ui-heading-weight: 800;
  --ui-control-weight: 730;
  --ui-strong-weight: 780;
  --ui-label-weight: 780;
}

body[data-ui-column-style="strong"] {
  --ui-heading-weight: 780;
  --ui-control-weight: 720;
  --ui-strong-weight: 760;
  --ui-label-weight: 760;
}

body[data-ui-text-size] h1,
body[data-ui-text-size] h2,
body[data-ui-text-size] h3,
body[data-ui-text-size] .topbar h1,
body[data-ui-text-size] .panel h2,
body[data-ui-text-size] .panel h3 {
  font-weight: var(--ui-heading-weight);
}

body[data-ui-text-size] h1,
body[data-ui-text-size] .topbar h1 {
  font-size: clamp(24px, calc(28px * var(--ui-text-scale)), 34px);
}

body[data-ui-text-size] h2,
body[data-ui-text-size] .panel > h2:first-child,
body[data-ui-text-size] .dashboard-updates-panel .dashboard-chart-head h2 {
  font-size: clamp(15px, calc(17px * var(--ui-text-scale)), 22px);
}

body[data-ui-text-size] h3,
body[data-ui-text-size] .settings-form h3 {
  font-size: clamp(13px, calc(15px * var(--ui-text-scale)), 18px);
}

body[data-ui-text-size] .eyebrow {
  font-size: clamp(10px, calc(11px * var(--ui-text-scale)), 12px);
  font-weight: var(--ui-label-weight);
  letter-spacing: 0;
}

body[data-ui-text-size] .nav-list > .nav-group > button,
body[data-ui-text-size] .nav-submenu button,
body[data-ui-text-size] .kitchen-section-tabs button,
body[data-ui-text-size] .finance-section-tabs button,
body[data-ui-text-size] .user-settings-tabs button,
body[data-ui-text-size] .settings-submenu button,
body[data-ui-text-size] .ghost-button,
body[data-ui-text-size] .primary-button,
body[data-ui-text-size] .danger-button,
body[data-ui-text-size] .mini-action,
body[data-ui-text-size] input,
body[data-ui-text-size] select,
body[data-ui-text-size] textarea {
  font-size: clamp(12px, calc(14px * var(--ui-text-scale)), 16px);
  font-weight: var(--ui-control-weight);
}

body[data-ui-text-size] th {
  font-size: clamp(11px, calc(12px * var(--ui-text-scale)), 14px);
  font-weight: var(--ui-label-weight);
}

body[data-ui-text-size] td,
body[data-ui-text-size] .empty-text,
body[data-ui-text-size] .settings-note span,
body[data-ui-text-size] .settings-card span,
body[data-ui-text-size] .muted-line {
  font-size: clamp(12px, calc(13px * var(--ui-text-scale)), 15px);
}

body[data-ui-text-size] td strong,
body[data-ui-text-size] .table-wrap td strong,
body[data-ui-text-size] .settings-note strong,
body[data-ui-text-size] .settings-card strong,
body[data-ui-text-size] .module-toolbar strong,
body[data-ui-text-size] .access-strip strong {
  font-weight: var(--ui-strong-weight);
}

body[data-ui-text-size] .dashboard-tile strong,
body[data-ui-text-size] .metric strong,
body[data-ui-text-size] .kitchen-kpi strong,
body[data-ui-text-size] .finance-kpi strong {
  font-size: clamp(18px, calc(21px * var(--ui-text-scale)), 26px);
  font-weight: var(--ui-heading-weight);
}

body[data-ui-text-size] .dashboard-tile span,
body[data-ui-text-size] .metric span,
body[data-ui-text-size] .kitchen-kpi span,
body[data-ui-text-size] .finance-kpi span {
  font-size: clamp(13px, calc(14px * var(--ui-text-scale)), 17px);
  font-weight: var(--ui-strong-weight);
}

body[data-ui-text-size] .dashboard-tile small,
body[data-ui-text-size] .metric small,
body[data-ui-text-size] .kitchen-kpi small,
body[data-ui-text-size] .finance-kpi small {
  font-size: clamp(11px, calc(12px * var(--ui-text-scale)), 14px);
  font-weight: var(--ui-label-weight);
}

body[data-ui-text-size] .pos-pay-action,
body[data-ui-text-size] .pos-action strong,
body[data-ui-text-size] .pos-quick-action strong,
body[data-ui-text-size] .pos-fast-cart-table th,
body[data-ui-text-size] .pos-fast-cart-table .money-cell {
  font-weight: var(--ui-control-weight);
}

body[data-ui-text-size] .table-pagination,
body[data-ui-text-size] .table-page-size,
body[data-ui-text-size] .table-page-size select,
body[data-ui-text-size] .table-page-number,
body[data-ui-text-size] .table-page-number input,
body[data-ui-text-size] .table-settings-menu,
body[data-ui-text-size] .table-settings-action,
body[data-ui-text-size] .table-column-menu label {
  font-weight: 500;
}

body[data-ui-text-size] .table-settings-section > strong {
  font-weight: 700;
}

body[data-ui-text-size] .table-wrap td {
  font-weight: 400;
}

body[data-ui-text-size] .table-wrap .pill {
  font-weight: 500;
}

/* ============================================================
   Dashboard — Glossy redesign (H.0.4.5)
   ============================================================ */

.role-dashboard-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  border: none;
  border-radius: 16px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563a7 60%, #3b82f6 100%);
  box-shadow: 0 8px 32px rgba(37, 99, 167, 0.35), 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

/* Decorative glow blob */
.role-dashboard-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.role-dashboard-hero > div:first-child {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.role-dashboard-hero h2,
.role-dashboard-hero p {
  margin: 0;
  color: #ffffff;
}

.role-dashboard-hero h2 {
  font-size: 26px;
  line-height: 1.08;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.role-dashboard-hero span {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.role-dashboard-actions {
  display: flex;
  width: min(520px, 48%);
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 8px;
}

.role-dashboard-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 0 16px;
  white-space: nowrap;
}

.role-dashboard-action.primary-button {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: background 0.15s, box-shadow 0.15s;
}

.role-dashboard-action.primary-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.role-dashboard-action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.role-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.my-work-today {
  display: grid;
  gap: 12px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--shadow-soft);
}

.my-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.my-work-head h3,
.my-work-head p {
  margin: 0;
}

.my-work-head h3 {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.15;
}

.my-work-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.my-work-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.my-work-card span,
.my-work-card strong,
.my-work-card small {
  display: block;
  min-width: 0;
}

.my-work-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.my-work-card strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.my-work-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.my-work-card.mint {
  border-color: #bdebdc;
  background: linear-gradient(180deg, #ffffff, #f2fff9);
}

.my-work-card.blue {
  border-color: #c9def4;
  background: linear-gradient(180deg, #ffffff, #f2f8ff);
}

.my-work-card.gold {
  border-color: #f2d3a6;
  background: linear-gradient(180deg, #ffffff, #fff8eb);
}

.my-work-card.rose {
  border-color: #f1c1c1;
  background: linear-gradient(180deg, #ffffff, #fff5f5);
}

.my-work-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 112px;
}

.my-work-actions .mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 96px;
  min-height: 32px;
  white-space: nowrap;
}

.my-work-actions .mini-action span {
  display: inline;
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.my-work-actions .primary-button {
  border-color: #2563a7 !important;
  background: linear-gradient(180deg, #2f7fd0, #1f63ad) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(31, 99, 173, 0.22) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.my-work-actions .ghost-button {
  color: #24384a;
}

.my-work-actions .primary-button:hover {
  background: linear-gradient(180deg, #3b8ee0, #256fbd) !important;
  color: #ffffff !important;
}

.my-work-actions .primary-button span,
.my-work-actions .primary-button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.my-work-actions svg,
.my-work-head svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.role-dashboard-metric {
  display: grid;
  min-width: 0;
  gap: 6px;
  border: none;
  border-radius: 14px;
  padding: 20px 18px;
  color: #ffffff;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.role-dashboard-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12);
}

/* Glossy inner highlight */
.role-dashboard-metric::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

.role-dashboard-metric strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

.role-dashboard-metric span,
.role-dashboard-metric small {
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  line-height: 1.25;
}

.role-dashboard-metric span {
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.role-dashboard-metric small {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

/* Vibrant color variants */
.role-dashboard-metric.mint {
  background: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
}

.role-dashboard-metric.blue {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.4);
}

.role-dashboard-metric.gold {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 60%, #fbbf24 100%);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
}

.role-dashboard-metric.rose {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 60%, #f87171 100%);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
}

.role-dashboard-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.role-dashboard-columns .panel {
  min-width: 0;
}

.role-dashboard-list {
  display: grid;
  gap: 8px;
}

.role-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.role-dashboard-row span,
.role-dashboard-row strong,
.role-dashboard-row small,
.role-dashboard-row b {
  min-width: 0;
}

.role-dashboard-row strong,
.role-dashboard-row small {
  display: block;
}

.role-dashboard-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-dashboard-row small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-dashboard-row b {
  color: var(--brand);
  font-size: 15px;
  white-space: nowrap;
}

.role-dashboard-action:disabled,
.role-dashboard-metric:disabled,
.role-dashboard-row:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.role-dashboard-action.primary-button:disabled {
  border-color: var(--line);
  background: var(--surface-gloss);
  color: var(--muted);
  box-shadow: none;
}

.role-dashboard-recent .work-row {
  min-height: 52px;
}

@media (max-width: 1180px) {
  .my-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-dashboard-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.inventory-view .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.inventory-view .table-wrap table,
  body.inventory-view .table-wrap thead,
  body.inventory-view .table-wrap tbody,
  body.inventory-view .table-wrap tr,
  body.inventory-view .table-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.inventory-view .table-wrap table {
    white-space: normal;
  }

  body.inventory-view .table-wrap thead {
    display: none;
  }

  body.inventory-view .table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  body.inventory-view .table-wrap tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  body.inventory-view .table-wrap td {
    display: grid;
    grid-template-columns: minmax(104px, 32%) minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid #edf2f7;
    padding: 10px 12px;
    overflow-wrap: anywhere;
  }

  body.inventory-view .table-wrap td:first-child {
    border-top: 0;
  }

  body.inventory-view .table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body.inventory-view .table-wrap td[data-label=""] {
    grid-template-columns: 1fr;
  }

  body.inventory-view .table-wrap td[data-label=""]::before {
    display: none;
  }

  body.inventory-view .table-wrap td.action-cell,
  body.inventory-view .table-wrap td.current-pos-stock-action-cell {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.inventory-view .table-wrap .row-actions,
  body.inventory-view .table-wrap .current-pos-stock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.inventory-view .table-wrap .mini-action,
  body.inventory-view .table-wrap .ghost-button,
  body.inventory-view .table-wrap .primary-button {
    flex: 1 1 132px;
    min-height: 38px;
  }
}

@media (max-width: 760px) {
  .my-work-head,
  .my-work-card {
    display: grid;
  }

  .my-work-grid {
    grid-template-columns: 1fr;
  }

  .my-work-actions {
    justify-content: stretch;
  }

  .my-work-actions .mini-action {
    flex: 1 1 120px;
  }

  .notification-alert-action-row {
    grid-template-columns: 1fr;
  }

  .notification-alert-actions {
    grid-column: auto;
  }

  .role-dashboard-hero {
    display: grid;
    padding: 14px;
  }

  .role-dashboard-hero h2 {
    font-size: 22px;
  }

  .role-dashboard-actions {
    width: 100%;
    justify-content: stretch;
  }

  .role-dashboard-action {
    flex: 1 1 150px;
  }

  .role-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .role-dashboard-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .role-dashboard-row b {
    white-space: normal;
  }
}

@media (max-width: 980px) {
  .ai-document-workbench,
  .ai-invoice-grid {
    grid-template-columns: 1fr;
  }

  .ai-preview-pane,
  .ai-preview-empty {
    min-height: 260px;
  }

  .ai-preview-pane img,
  .ai-preview-pane object {
    height: min(60vh, 520px);
  }
}

/* Final theme-aware override for dashboard sync controls. */
.owner-command-head .owner-sync-button,
.dashboard-kpi-panel .dashboard-filters .sync-button {
  appearance: none;
  border: 1px solid var(--brand) !important;
  background: linear-gradient(180deg, var(--brand), var(--brand-strong)) !important;
  color: #ffffff !important;
  font-family: var(--ui-font-family);
  font-weight: var(--ui-control-weight);
  text-shadow: none;
}

.owner-command-head .owner-sync-button span,
.dashboard-kpi-panel .dashboard-filters .sync-button span {
  color: #ffffff !important;
  font-family: inherit;
  font-weight: inherit;
}

.owner-command-head .owner-sync-button svg,
.dashboard-kpi-panel .dashboard-filters .sync-button svg {
  color: inherit;
  stroke: currentColor;
}

/* User-controlled page background and day/night mode from Settings > General > Theme. */
body[data-page-background="cool"] {
  --page: #eef5ff;
  --surface-soft: #f7fbff;
}

body[data-page-background="mint"] {
  --page: #edf9f3;
  --surface-soft: #f6fffb;
}

body[data-page-background="custom"] {
  --page: var(--custom-page, #f7f9fc);
}

body[data-ui-mode="night"] {
  color-scheme: dark;
  --ink: #e7edf6;
  --muted: #a8b5c7;
  --line: #334155;
  --panel: #111827;
  --page: #0f172a;
  --surface-gloss: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.96));
  --surface-soft: #121d2f;
  --brand-tint: #2b1d25;
  --mint-tint: #102f2b;
  --blue-tint: #13263e;
  --gold-tint: #332712;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 2px 9px rgba(0, 0, 0, 0.24);
  background:
    linear-gradient(180deg, #111827 0, var(--page) 190px),
    var(--page);
}

body[data-ui-mode="night"][data-page-background="cool"] {
  --page: #111b2f;
  --surface-soft: #142033;
}

body[data-ui-mode="night"][data-page-background="mint"] {
  --page: #0d1f1b;
  --surface-soft: #102923;
}

body[data-ui-mode="night"][data-page-background="custom"] {
  --page: var(--custom-page, #0f172a);
}

body[data-ui-mode="night"] .sidebar,
body[data-ui-mode="night"] .topbar,
body[data-ui-mode="night"] .settings-page-head,
body[data-ui-mode="night"] .settings-hero,
body[data-ui-mode="night"] .settings-checklist div,
body[data-ui-mode="night"] .settings-menu,
body[data-ui-mode="night"] .panel,
body[data-ui-mode="night"] .metric,
body[data-ui-mode="night"] .dashboard-tile,
body[data-ui-mode="night"] .table-wrap,
body[data-ui-mode="night"] .user-settings-tabs,
body[data-ui-mode="night"] .settings-card,
body[data-ui-mode="night"] .settings-note,
body[data-ui-mode="night"] .settings-submenu,
body[data-ui-mode="night"] .settings-section-picker,
body[data-ui-mode="night"] .global-search-panel,
body[data-ui-mode="night"] .setup-readiness-score,
body[data-ui-mode="night"] .setup-step-card,
body[data-ui-mode="night"] .device-url-card,
body[data-ui-mode="night"] .permission-collapse,
body[data-ui-mode="night"] .theme-preview-card,
body[data-ui-mode="night"] .dialog-panel,
body[data-ui-mode="night"] .empty-text,
body[data-ui-mode="night"] .owner-command-detail-grid article,
body[data-ui-mode="night"] .dashboard-owner-command,
body[data-ui-mode="night"] .dashboard-kpi-panel,
/* Role-specific planner and supervisor dashboards */
.role-planner-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.role-planner-dashboard > .owner-dashboard-partition,
.role-planner-box,
.supervisor-delivery-dashboard {
  min-width: 0;
  border: 1px solid #d6e4f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.role-planner-dashboard > .owner-dashboard-partition {
  min-height: 438px;
  padding: 14px;
  overflow: hidden;
}

.role-planner-dashboard .owner-order-calendar-shell {
  grid-template-columns: minmax(0, 1fr);
}

.role-planner-dashboard .owner-calendar-detail-card {
  min-height: 0;
}

.role-planner-dashboard .owner-order-calendar {
  gap: 4px;
}

.role-planner-dashboard .owner-calendar-day {
  min-height: 40px;
}

.role-planner-box {
  border-left: 4px solid #2563eb;
  display: grid;
  gap: 12px;
  min-height: 438px;
  padding: 14px;
}

.role-planner-box.mint {
  border-left-color: #059669;
  background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
}

.role-planner-box.gold {
  border-left-color: #d97706;
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}

.role-planner-box.rose {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}

.role-planner-box-head {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6edf5;
}

.role-planner-box-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.role-planner-box-head strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.role-planner-box-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.role-planner-box-head b {
  align-items: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  display: inline-flex;
  font-size: 14px;
  font-weight: 950;
  min-height: 30px;
  padding: 0 11px;
  white-space: nowrap;
}

.role-planner-today-summary,
.role-planner-mini-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-planner-mini-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-planner-today-summary div,
.role-planner-mini-metrics div {
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.role-planner-today-summary span,
.role-planner-mini-metrics span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.role-planner-today-summary strong,
.role-planner-mini-metrics strong {
  color: #0f766e;
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.role-planner-scroll-list {
  align-content: start;
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.role-dashboard-list.compact {
  gap: 8px;
}

.role-delivery-row,
.role-plan-row {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  gap: 10px;
  grid-template-columns: 78px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px 11px;
}

.role-plan-row {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.role-delivery-row.compact {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.role-delivery-row.compact em {
  display: none;
}

.role-delivery-row span,
.role-plan-row span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.role-delivery-row strong,
.role-plan-row strong {
  color: #0f172a;
  display: grid;
  gap: 2px;
  font-size: 13px;
  font-weight: 950;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-delivery-row small,
.role-plan-row small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-delivery-row em {
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-delivery-row b,
.role-plan-row b {
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  justify-self: end;
  white-space: nowrap;
}

.supervisor-delivery-dashboard {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.supervisor-delivery-head {
  align-items: center;
  border-bottom: 1px solid #e6edf5;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.supervisor-delivery-head h2,
.supervisor-delivery-head p {
  margin: 0;
}

.supervisor-delivery-head h2 {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.08;
}

.supervisor-delivery-head span {
  color: #64748b;
  display: block;
  font-size: 13px;
  font-weight: 850;
  margin-top: 5px;
}

.supervisor-delivery-total {
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #f8fbff;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 12px 14px;
  text-align: right;
}

.supervisor-delivery-total strong {
  color: #1d4ed8;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.supervisor-delivery-total span,
.supervisor-delivery-total em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.supervisor-delivery-list {
  display: grid;
  gap: 9px;
}

.supervisor-delivery-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
  padding: 18px;
}

.supervisor-delivery-empty strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.supervisor-delivery-empty span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .role-planner-dashboard {
    grid-template-columns: 1fr;
  }

  .role-planner-dashboard > .owner-dashboard-partition,
  .role-planner-box {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .role-planner-today-summary,
  .role-planner-mini-metrics {
    grid-template-columns: 1fr;
  }

  .role-delivery-row,
  .role-delivery-row.compact,
  .role-plan-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .role-delivery-row b,
  .role-plan-row b {
    justify-self: start;
  }

  .supervisor-delivery-head {
    align-items: stretch;
    flex-direction: column;
  }

  .supervisor-delivery-total {
    min-width: 0;
    text-align: left;
  }
}



/* Role dashboard hero readability and edge-spacing fix. */
.role-dashboard-hero .role-dashboard-action.ghost-button {
  border-color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #17345a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
}

.role-dashboard-hero .role-dashboard-action.ghost-button span,
.role-dashboard-hero .role-dashboard-action.ghost-button svg {
  color: #17345a !important;
  stroke: currentColor !important;
}

.role-dashboard-hero .role-dashboard-action.ghost-button:hover,
.role-dashboard-hero .role-dashboard-action.ghost-button:focus-visible {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f2b50 !important;
}

.role-dashboard-hero .role-dashboard-action.primary-button {
  border-color: rgba(255, 255, 255, 0.48) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .workspace {
  padding-left: max(24px, env(safe-area-inset-left));
}

@media (min-width: 1600px) {
  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .workspace {
    padding-left: max(28px, env(safe-area-inset-left));
  }
}
/* Planner dashboard polish: reduce blank space and improve queue readability. */
.role-planner-dashboard {
  grid-template-columns: minmax(520px, 1.05fr) minmax(420px, 0.95fr);
  align-items: start;
  gap: 12px;
}

.role-planner-dashboard > .owner-dashboard-partition,
.role-planner-box {
  border-color: #cfdfef;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.role-planner-dashboard > .owner-dashboard-partition {
  min-height: 0;
  padding: 12px;
}

.role-planner-dashboard .owner-dashboard-partition-head {
  padding-bottom: 10px;
}

.role-planner-dashboard .owner-order-calendar-shell {
  gap: 10px;
}

.role-planner-dashboard .owner-calendar-detail-card {
  border-radius: 12px;
  padding: 12px;
}

.role-planner-dashboard .owner-calendar-day {
  min-height: 38px;
  border-radius: 9px;
}

.role-planner-box {
  align-content: start;
  border-left: 0;
  border-top: 4px solid #2563eb;
  gap: 10px;
  min-height: 0;
  padding: 12px;
}

.role-planner-box.mint {
  border-top-color: #059669;
}

.role-planner-box.gold {
  border-top-color: #d97706;
}

.role-planner-box.rose {
  border-top-color: #dc2626;
}

.role-planner-box-head {
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
}

.role-planner-box-head strong {
  font-size: 18px;
  line-height: 1.1;
}

.role-planner-box-head span {
  font-size: 11px;
  line-height: 1.25;
}

.role-planner-box-head b {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
}

.role-planner-today-summary,
.role-planner-mini-metrics {
  gap: 8px;
}

.role-planner-today-summary div,
.role-planner-mini-metrics div {
  align-content: space-between;
  min-height: 58px;
  padding: 10px 11px;
}

.role-planner-today-summary strong,
.role-planner-mini-metrics strong {
  font-size: 18px;
}

.role-planner-scroll-list,
.role-planner-box .role-dashboard-list.compact {
  max-height: 258px;
  overflow: auto;
  padding-right: 3px;
}

.role-planner-box .empty-text {
  align-items: center;
  border-radius: 10px;
  display: flex;
  min-height: 54px;
  padding: 12px 14px;
}

.role-planner-box .role-dashboard-row,
.role-planner-box .role-delivery-row,
.role-planner-box .role-plan-row {
  border-radius: 10px;
}

@media (max-width: 1180px) {
  .role-planner-dashboard {
    grid-template-columns: 1fr;
  }

  .role-planner-scroll-list,
  .role-planner-box .role-dashboard-list.compact {
    max-height: none;
  }
}
body[data-ui-mode="night"] .my-work-today,
body[data-ui-mode="night"] .my-work-card,
body[data-ui-mode="night"] .role-dashboard-hero,
body[data-ui-mode="night"] .role-dashboard-metric,
body[data-ui-mode="night"] .role-dashboard-row,
body[data-ui-mode="night"] .pos-fast-card,
body[data-ui-mode="night"] .pos-bill-panel,
body[data-ui-mode="night"] .pos-input-panel,
body[data-ui-mode="night"] .pos-payment-panel,
body[data-ui-mode="night"] .notification-inbox-card,
body[data-ui-mode="night"] .notification-inbox-detail-toggle,
body[data-ui-mode="night"] .notification-inbox-meta-grid div,
body[data-ui-mode="night"] .notification-inbox-detail p,
body[data-ui-mode="night"] .notification-diagnostic-grid div,
body[data-ui-mode="night"] .stock-register-tools,
body[data-ui-mode="night"] .stock-register-scroll {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}

body[data-ui-mode="night"] .settings-page-head,
body[data-ui-mode="night"] .dashboard-owner-command,
body[data-ui-mode="night"] .panel {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

body[data-ui-mode="night"] .settings-page-head h2,
body[data-ui-mode="night"] .settings-page-head span,
body[data-ui-mode="night"] .settings-hero h2,
body[data-ui-mode="night"] .settings-hero span,
body[data-ui-mode="night"] .settings-checklist span,
body[data-ui-mode="night"] .settings-card span,
body[data-ui-mode="night"] .settings-card small,
body[data-ui-mode="night"] .settings-submenu button span,
body[data-ui-mode="night"] .settings-submenu button small {
  color: var(--ink) !important;
}

body[data-ui-mode="night"] .settings-page-head span,
body[data-ui-mode="night"] .settings-hero span,
body[data-ui-mode="night"] .settings-card span,
body[data-ui-mode="night"] .settings-submenu button small {
  color: var(--muted) !important;
}

body[data-ui-mode="night"] .settings-page-head small,
body[data-ui-mode="night"] .settings-card small,
body[data-ui-mode="night"] .settings-submenu .settings-submenu-toggle,
body[data-ui-mode="night"] .settings-submenu button svg,
body[data-ui-mode="night"] .ghost-button,
body[data-ui-mode="night"] .top-icon-button,
body[data-ui-mode="night"] .global-search-shell input {
  border-color: #475569 !important;
  background: #1e293b !important;
  color: #e7edf6 !important;
  box-shadow: none !important;
}

body[data-ui-mode="night"] .role-dashboard-action.primary-button {
  border-color: #416a9d !important;
  background: #162942 !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

body[data-ui-mode="night"] .role-dashboard-action.primary-button:disabled {
  border-color: #475569 !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
}

body[data-ui-mode="night"] .global-search-panel button:hover,
body[data-ui-mode="night"] .global-search-panel button:focus-visible,
body[data-ui-mode="night"] .device-url-card code {
  border-color: #475569 !important;
  background: #172235 !important;
  color: #e7edf6 !important;
}

body[data-ui-mode="night"] .global-search-panel strong,
body[data-ui-mode="night"] .global-search-panel span,
body[data-ui-mode="night"] .setup-readiness-score strong,
body[data-ui-mode="night"] .setup-readiness-score span,
body[data-ui-mode="night"] .setup-step-card strong,
body[data-ui-mode="night"] .setup-step-card span,
body[data-ui-mode="night"] .device-url-card strong,
body[data-ui-mode="night"] .device-url-card span,
body[data-ui-mode="night"] .device-url-card small,
body[data-ui-mode="night"] .notification-diagnostic-grid strong,
body[data-ui-mode="night"] .notification-inbox-meta-grid strong,
body[data-ui-mode="night"] .stock-register-tools strong {
  color: var(--ink) !important;
}

body[data-ui-mode="night"] .settings-card.active,
body[data-ui-mode="night"] .settings-card:hover,
body[data-ui-mode="night"] .settings-submenu button.active,
body[data-ui-mode="night"] .settings-submenu button:hover,
body[data-ui-mode="night"] .user-settings-tabs button.active,
body[data-ui-mode="night"] .user-settings-tabs button:hover {
  border-color: #5b6f8a !important;
  background: #172235 !important;
  color: #e7edf6 !important;
}

body[data-ui-mode="night"] .settings-card.active small {
  border-color: rgba(99, 230, 190, 0.34) !important;
  background: #12382f !important;
  color: #8ef0ce !important;
}

body[data-ui-mode="night"] .settings-submenu button.active::after {
  border-left-color: #172235 !important;
}

body[data-ui-mode="night"] .nav-list > .nav-group > button,
body[data-ui-mode="night"] .nav-submenu button {
  color: #a8b5c7 !important;
}

body[data-ui-mode="night"] .nav-list > .nav-group > button:hover,
body[data-ui-mode="night"] .nav-list > .nav-group > button.active,
body[data-ui-mode="night"] .nav-submenu button:hover,
body[data-ui-mode="night"] .nav-submenu button.active {
  background: #172235 !important;
  color: #e7edf6 !important;
  box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px #334155 !important;
}

body[data-ui-mode="night"] .nav-list > .nav-group > button svg,
body[data-ui-mode="night"] .nav-submenu button svg,
body[data-ui-mode="night"] .settings-card svg,
body[data-ui-mode="night"] .settings-submenu button svg {
  color: #6fb6ff !important;
}

body[data-ui-mode="night"] input,
body[data-ui-mode="night"] select,
body[data-ui-mode="night"] textarea,
body[data-ui-mode="night"] .inline-select,
body[data-ui-mode="night"] .table-input {
  background: #0f172a !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body[data-ui-mode="night"] th,
body[data-ui-mode="night"] td,
body[data-ui-mode="night"] .settings-form label,
body[data-ui-mode="night"] .checkbox-label,
body[data-ui-mode="night"] .form-grid label,
body[data-ui-mode="night"] .dialog-panel label,
body[data-ui-mode="night"] .dashboard-filters label,
body[data-ui-mode="night"] .muted-line {
  color: var(--muted);
}

body[data-ui-mode="night"] td strong,
body[data-ui-mode="night"] .panel h2,
body[data-ui-mode="night"] .panel h3,
body[data-ui-mode="night"] .settings-note strong,
body[data-ui-mode="night"] .settings-card strong,
body[data-ui-mode="night"] .theme-preview-card span {
  color: var(--ink);
}

.purchase-attachment-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 260px;
  color: #263449;
  font-size: 12px;
  line-height: 1.25;
}

.purchase-attachment-summary span {
  display: inline-block;
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  color: #263449;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-attachment-summary a {
  color: #1f62a8;
  font-weight: 800;
}

.purchase-attachment-summary .attachment-download-link {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.purchase-attachment-summary .attachment-download-button {
  min-height: 0;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef6ff;
  color: #14539a;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
}

.attachment-missing-file {
  color: #8a3e00;
  font-size: 11px;
  font-weight: 800;
}

.purchase-attachment-summary small {
  border-radius: 999px;
  padding: 3px 7px;
  background: #e9f7f0;
  color: #0c7659;
  font-size: 11px;
  font-weight: 800;
}

.purchase-attachment-summary.missing span {
  color: #8a3e00;
}

.report-favorites-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  border: 1px solid #d9e6f3;
  border-radius: 8px;
  padding: 8px;
  background: #f8fbff;
}

.report-favorites-strip > span {
  flex: 0 0 auto;
  color: #52657a;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-favorites-strip > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.report-favorites-strip button {
  min-height: 30px;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  padding: 6px 10px;
  background: #ffffff;
  color: #263449;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.report-favorites-strip button.active,
.report-favorites-strip button:hover {
  border-color: #d6a700;
  background: #fff4bf;
  color: #4f3400;
}

.report-favorites-strip.empty {
  justify-content: flex-start;
  color: #667485;
}

.report-favorites-strip.empty small {
  color: #667485;
  font-size: 12px;
}

.report-category-grid {
  gap: 10px;
}

.report-category-grid button {
  position: relative;
  overflow: hidden;
  border-color: #b9cde3;
  border-width: 1.5px;
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
  color: #10263f;
  box-shadow: 0 8px 20px rgba(15, 41, 75, 0.08);
}

.report-category-grid button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: #1d4e86;
}

.report-category-grid button:nth-child(2)::before {
  background: #0f766e;
}

.report-category-grid button:nth-child(3)::before {
  background: #a16207;
}

.report-category-grid button:nth-child(4)::before {
  background: #9f1239;
}

.report-category-grid button:nth-child(5)::before {
  background: #3730a3;
}

.report-category-grid button strong {
  color: #0f2742;
  font-size: 13.5px;
  font-weight: 850;
}

.report-category-grid button span {
  color: #425b76;
  font-size: 11.5px;
  font-weight: 700;
}

.report-category-grid button:hover {
  border-color: #d6a700;
  background: linear-gradient(180deg, #fffdf2, #fff4bf);
  color: #4f3400;
}

.report-category-grid button.active {
  border-color: #d6a700;
  background: linear-gradient(180deg, #fff8d6, #ffef9a);
  color: #3d2b00;
  box-shadow: 0 10px 24px rgba(173, 125, 0, 0.18);
}

.report-category-grid button.active::before {
  background: #d6a700;
}

.report-category-grid button.active strong,
.report-category-grid button.active span {
  color: #3d2b00;
}

.report-grid {
  gap: 9px;
}

.report-grid button {
  justify-content: flex-start;
  border-color: #bed2e8;
  border-width: 1.5px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  color: #153859;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 41, 75, 0.07);
}

.report-grid button:hover {
  border-color: #d6a700;
  background: linear-gradient(180deg, #fffdf2, #fff4bf);
  color: #4f3400;
}

.report-grid button.active {
  border-color: #d6a700;
  background: linear-gradient(180deg, #fff8d6, #ffef9a);
  color: #3d2b00;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(173, 125, 0, 0.18);
}

.report-query-bar {
  border-color: #b9cde3;
  border-width: 1.5px;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

.report-query-bar label {
  color: #17395b;
  font-weight: 800;
}

.report-query-bar input,
.report-query-bar select {
  border-color: #b9cde3;
  color: #10263f;
  font-weight: 650;
}

.report-favorites-strip {
  border-color: #b9cde3;
  border-width: 1.5px;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

.report-favorites-strip > span {
  color: #123f72;
  font-weight: 900;
}

.report-favorites-strip button {
  border-color: #b9cde3;
  color: #153859;
  font-weight: 850;
}

.report-favorites-strip button.active,
.report-favorites-strip button:hover {
  border-color: #d6a700;
  background: #fff4bf;
  color: #4f3400;
}

.report-empty-state {
  display: grid;
  gap: 6px;
  border: 1.5px dashed #b9cde3;
  border-radius: 8px;
  padding: 22px;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  color: #425b76;
  text-align: center;
}

.report-empty-state strong {
  color: #123f72;
  font-size: 16px;
  font-weight: 900;
}

.report-empty-state span {
  font-size: 13px;
  font-weight: 700;
}

/* Reports page color refinement */
.report-category-grid button,
.report-grid button,
.report-favorites-strip button {
  --report-accent: #2563eb;
  --report-accent-strong: #1d4ed8;
  --report-accent-soft: #eff6ff;
  --report-accent-mid: #dbeafe;
  --report-accent-ink: #1e3a8a;
}

.report-category-grid button,
.report-grid button {
  border-color: #d7e2ef;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #1f2d3d;
  box-shadow: 0 6px 16px rgba(15, 41, 75, 0.06);
}

.report-category-grid button::before {
  background: var(--report-accent);
}

.report-category-sales,
.report-grid-sales {
  --report-accent: #2563eb;
  --report-accent-strong: #1d4ed8;
  --report-accent-soft: #eff6ff;
  --report-accent-mid: #dbeafe;
  --report-accent-ink: #1e3a8a;
}

.report-category-inventory,
.report-grid-inventory {
  --report-accent: #0f766e;
  --report-accent-strong: #0f5f59;
  --report-accent-soft: #ecfdf5;
  --report-accent-mid: #ccfbf1;
  --report-accent-ink: #115e59;
}

.report-category-production,
.report-grid-production {
  --report-accent: #7c3aed;
  --report-accent-strong: #6d28d9;
  --report-accent-soft: #f5f3ff;
  --report-accent-mid: #ede9fe;
  --report-accent-ink: #5b21b6;
}

.report-category-purchases,
.report-grid-purchases {
  --report-accent: #be123c;
  --report-accent-strong: #9f1239;
  --report-accent-soft: #fff1f2;
  --report-accent-mid: #ffe4e6;
  --report-accent-ink: #9f1239;
}

.report-category-management,
.report-grid-management {
  --report-accent: #4f46e5;
  --report-accent-strong: #4338ca;
  --report-accent-soft: #eef2ff;
  --report-accent-mid: #e0e7ff;
  --report-accent-ink: #3730a3;
}

.report-category-grid button strong,
.report-grid button {
  color: #1f2d3d;
}

.report-category-grid button span {
  color: #5f7085;
}

.report-category-grid button:hover,
.report-grid button:hover,
.report-favorites-strip button:hover {
  border-color: color-mix(in srgb, var(--report-accent) 42%, #cbd5e1);
  background: linear-gradient(180deg, #ffffff, var(--report-accent-soft));
  color: var(--report-accent-ink);
  box-shadow: 0 8px 20px rgba(15, 41, 75, 0.08);
}

.report-category-grid button.active,
.report-grid button.active,
.report-favorites-strip button.active {
  border-color: color-mix(in srgb, var(--report-accent) 56%, #cbd5e1);
  background: linear-gradient(180deg, #ffffff, var(--report-accent-soft));
  color: var(--report-accent-ink);
  box-shadow: 0 9px 22px rgba(15, 41, 75, 0.1);
}

.report-category-grid button.active::before {
  background: var(--report-accent-strong);
}

.report-category-grid button.active strong,
.report-category-grid button.active span,
.report-grid button.active,
.report-favorites-strip button.active {
  color: var(--report-accent-ink);
}

.report-grid button {
  position: relative;
  min-height: 38px;
  border-left: 4px solid transparent;
  font-weight: 700;
}

.report-grid button.active {
  border-left-color: var(--report-accent);
  font-weight: 800;
}

.report-query-bar,
.report-favorites-strip {
  border-color: #d7e2ef;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.report-query-bar label,
.report-favorites-strip > span {
  color: #52657a;
}

.report-query-bar input,
.report-query-bar select,
.report-favorites-strip button {
  border-color: #d0ddea;
  background: #ffffff;
  color: #1f2d3d;
}

.report-favorites-strip button.active {
  --report-accent: #2563eb;
  --report-accent-strong: #1d4ed8;
  --report-accent-soft: #eff6ff;
  --report-accent-mid: #dbeafe;
  --report-accent-ink: #1e3a8a;
}

.report-empty-state {
  border-color: #d7e2ef;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #5f7085;
}

.report-empty-state strong {
  color: #263449;
}

.role-preview-collapse {
  margin-top: 10px;
}

.role-preview-panel {
  display: grid;
  gap: 10px;
}

.role-preview-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.role-preview-module-grid article {
  display: grid;
  gap: 4px;
  min-height: 86px;
  border: 1px solid #dbe7f4;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.role-preview-module-grid article strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.role-preview-module-grid article span,
.role-preview-module-grid article small {
  color: #60758d;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.role-preview-module-grid article small {
  color: #2b65aa;
  font-weight: 800;
}

.role-simulator-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.role-simulator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-simulator-head > div:first-child {
  display: grid;
  gap: 3px;
}

.role-simulator-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.role-simulator-head span {
  color: #60758d;
  font-size: 12px;
  line-height: 1.35;
}

.role-simulator-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.role-simulator-tabs button {
  min-height: 34px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
  color: #2d4057;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.role-simulator-tabs button.active {
  border-color: #2b65aa;
  background: #eef6ff;
  color: #14539a;
  box-shadow: inset 3px 0 0 #2b65aa;
}

.role-simulator-preview {
  display: grid;
  gap: 10px;
}

.role-simulator-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.role-simulator-summary article {
  display: grid;
  gap: 2px;
  min-height: 58px;
  border: 1px solid #dbe7f4;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.role-simulator-summary strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
}

.role-simulator-summary span {
  color: #60758d;
  font-size: 11px;
  font-weight: 800;
}

.role-simulator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.role-simulator-card {
  display: grid;
  gap: 4px;
  min-height: 78px;
  border: 1px solid #dbe7f4;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.role-simulator-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.role-simulator-card span,
.role-simulator-card small {
  color: #60758d;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.role-simulator-card small {
  color: #2b65aa;
  font-weight: 800;
}

.system-health-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.system-health-quick-grid article {
  display: grid;
  gap: 3px;
  border: 1px solid #d9e6f3;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.system-health-quick-grid article.ok {
  border-color: #bdebd9;
  background: #f2fcf7;
}

.system-health-quick-grid article.warn {
  border-color: #f2d39b;
  background: #fff8ec;
}

.system-health-quick-grid span {
  color: #60758d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.system-health-quick-grid strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}

.system-health-quick-grid small {
  color: #60758d;
  font-size: 12px;
  font-weight: 500;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f8fc;
  box-shadow: inset 0 -1px 0 #dfe9f4;
}

.table-wrap tbody tr:hover td {
  background: #f8fbff;
}

.table-settings-flyout {
  overscroll-behavior: contain;
}

.table-column-menu label {
  min-height: 32px;
}

@media (max-width: 900px) {
  .role-simulator-head {
    align-items: stretch;
    flex-direction: column;
  }

  .role-simulator-tabs {
    justify-content: flex-start;
  }

  .role-simulator-summary {
    grid-template-columns: 1fr;
  }

  .report-favorites-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .pos-fast-action-button,
  .pos-payment-button,
  .current-pos-stock-actions .pos-icon-action.labelled {
    min-height: 42px;
  }

  .pos-fast-table-wrap table,
  .table-wrap[data-table-id="inventory-current-pos-stock"] table {
    min-width: 980px;
  }
}

@media (max-width: 1366px) and (min-width: 761px) {
  body.sidebar-overlay-mode .app-shell,
  body.sidebar-overlay-mode.sidebar-expanded .app-shell,
  body.sidebar-overlay-mode.sidebar-collapsed .app-shell {
    display: grid;
    grid-template-columns: 88px minmax(1040px, 1fr);
    overflow-x: auto;
  }

  body.sidebar-overlay-mode .sidebar {
    width: 88px;
    min-width: 88px;
    height: 100vh;
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    width: 280px;
    min-width: 280px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
  }

  body.sidebar-overlay-mode .workspace {
    min-width: 0;
  }

  body.sidebar-overlay-mode.inventory-view .table-wrap,
  body.sidebar-overlay-mode.inventory-view .smart-table-shell {
    max-width: calc(100vw - 124px);
  }
}

@media (max-width: 1366px) and (min-width: 761px) {
  body.sidebar-overlay-mode.sidebar-expanded .app-shell {
    grid-template-columns: minmax(240px, var(--sidebar-open-width, 280px)) minmax(0, 1fr);
    overflow-x: hidden;
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar {
    position: sticky;
    z-index: 30;
    width: 100%;
    min-width: 0;
    box-shadow: 10px 0 28px rgba(33, 47, 67, 0.06);
  }

  body.sidebar-overlay-mode.sidebar-expanded .sidebar::after {
    display: none;
  }

  body.sidebar-overlay-mode.sidebar-expanded .workspace,
  body.sidebar-overlay-mode.sidebar-expanded .content-grid,
  body.sidebar-overlay-mode.sidebar-expanded .panel.wide,
  body.sidebar-overlay-mode.sidebar-expanded .smart-table-shell {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1440px) and (min-width: 1081px) {
  .purchase-kpi-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 1080px) and (min-width: 641px) {
  .purchase-kpi-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 640px) {
  .purchase-kpi-grid,
  .purchase-action-strip {
    grid-template-columns: 1fr;
  }
}
/* Desktop POS v2 */
/* ============================================================
   POS v2 — Enhanced UI  (H.0.3.1)
   ============================================================ */

.pos-v2-shell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - 44px);
  padding: 10px 12px;
  overflow: hidden;
  background: #f0f4f8;
}

/* Row 1: header + search on same flex row */
.pos-v2-header {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Search bar inside header stretches to fill available space */
.pos-v2-header .pos-v2-scan {
  flex: 1 1 0;
  min-width: 160px;
  max-width: 560px;
}

.pos-v2-scan-lower {
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  max-width: 600px;
}

.pos-v2-grid {
  grid-row: 3;
  grid-column: 1;
}

.pos-v2-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pos-v2-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px;
  flex-shrink: 0;
}

.pos-v2-icon-btn svg {
  width: 18px;
  height: 18px;
}

.pos-v2-icon-btn.danger-button {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.pos-v2-icon-btn.danger-button:hover {
  background: #fecaca;
}

.pos-v2-scan-lower {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  max-width: 600px;
}

.pos-v2-grid {
  grid-column: 1 / -1;
  grid-row: 2;
}

body.desktop-pos-mode.pos-fullscreen-mode .workspace,
body.desktop-pos-mode.pos-fullscreen-mode .content-grid,
body.desktop-pos-mode.pos-fullscreen-mode .content-grid > .wide {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.desktop-pos-mode.pos-fullscreen-mode {
  width: 100vw;
  min-width: 0;
  overflow: hidden;
}

body.desktop-pos-mode.pos-fullscreen-mode .app-shell {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 100vh;
  overflow: hidden;
}

body.desktop-pos-mode.pos-fullscreen-mode .workspace {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh;
  padding: 8px;
  overflow: auto;
}

body.desktop-pos-mode.pos-fullscreen-mode .content-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  overflow: visible;
}

body.desktop-pos-mode.pos-fullscreen-mode .pos-v2-shell {
  width: calc(100vw - 16px) !important;
  max-width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px);
  min-height: 0;
}

.pos-v2-header {
  /* overridden by new layout rule above — kept for media query compatibility */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pos-v2-counter,
.pos-v2-status,
.pos-v2-scan {
  min-width: 0;
  border: 1px solid #d6e2ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(24, 39, 67, 0.07);
}

.pos-v2-counter,
.pos-v2-status {
  display: grid;
  align-content: center;
  gap: 1px;
  align-self: center;
  padding: 5px 8px;
}

.pos-v2-counter span,
.pos-v2-counter small,
.pos-v2-status span,
.pos-v2-status small {
  overflow: hidden;
  color: #52657a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-v2-counter strong {
  color: #111827;
  font-size: 16px;
  line-height: 1.05;
}

.pos-v2-status {
  border-left-width: 4px;
}

.pos-v2-status.online {
  border-left-color: #16805f;
}

.pos-v2-status.offline {
  border-left-color: #d97706;
}

.pos-v2-status strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.1;
}

.pos-billing-version-mark {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  border: 1px solid rgba(203, 216, 230, 0.9);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.86);
  color: #52657a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
}

.pos-kiosk-status .pos-billing-version-mark {
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: inherit;
}

.pos-v2-scan {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
}

.pos-v2-scan-lower {
  align-self: stretch;
}

.pos-v2-version-watermark {
  position: absolute;
  right: 18px;
  bottom: 8px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(203, 216, 230, 0.34);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(39, 54, 76, 0.38);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
}

.pos-v2-counter,
.pos-v2-status {
  min-height: 42px;
}

.pos-v2-scan svg {
  width: 23px;
  height: 23px;
  color: #2563a7;
}

.pos-v2-scan input {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f3f7fb;
  color: #111827;
  font-size: 24px;
  font-weight: 850;
  outline: 0;
}

.pos-v2-scan input:focus {
  box-shadow: inset 0 0 0 2px #2563a7;
}

.pos-v2-scan .primary-button {
  min-height: 36px;
  padding-inline: 10px;
  font-size: 13px;
  white-space: nowrap;
}

.pos-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 12px;
  min-height: 0;
  min-width: 0;
}

.pos-v2-products,
.pos-v2-payment {
  min-width: 0;
  min-height: 0;
  border: 1px solid #d6e2ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(24, 39, 67, 0.07);
}

.pos-v2-products {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.pos-v2-bill-items {
  position: relative;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.pos-v2-items-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  padding: 6px 8px;
  min-height: 34px;
  box-shadow: 0 6px 16px rgba(38, 75, 124, 0.06);
}

.pos-v2-items-mini span,
.pos-v2-items-mini small {
  color: #52657a;
  font-size: 12px;
  font-weight: 850;
}

.pos-v2-items-mini strong {
  color: #111827;
  font-size: 17px;
  line-height: 1.2;
}

.pos-v2-items-mini .mini-action {
  margin-left: auto;
  min-height: 30px;
  padding: 0 12px;
}

.pos-v2-suggestions:empty {
  display: none;
}

.pos-v2-bill-items .pos-v2-suggestions {
  position: absolute;
  z-index: 24;
  top: 64px;
  left: 12px;
  right: 12px;
  max-height: 166px;
  overflow: hidden;
  border: 1px solid #d6e2ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(24, 39, 67, 0.18);
}

.pos-v2-suggestions .suggestion-list {
  max-height: 122px;
  overflow-y: auto;
}

.pos-v2-bill-items .pos-v2-suggestions .suggestion-list {
  max-height: 164px;
}

.pos-scan-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #d7e4f1;
  border-radius: 8px;
  background: #f8fbff;
}

.pos-scan-status.success {
  border-color: #b7e4cc;
  background: #f1fbf5;
}

.pos-scan-status.error {
  border-color: #f4b8b8;
  background: #fff6f4;
}

.pos-scan-status.duplicate {
  border-color: #f5d08a;
  background: #fffaf0;
}

.pos-scan-status-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pos-scan-status-main span,
.pos-scan-status-main small {
  color: #52657a;
  font-size: 12px;
  font-weight: 750;
}

.pos-scan-status-main strong {
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-scan-status.success .pos-scan-status-main strong {
  color: #166534;
}

.pos-scan-status.error .pos-scan-status-main strong {
  color: #991b1b;
}

.pos-scan-status-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #111827;
}

.pos-scan-status-meta b {
  color: #52657a;
  font-size: 12px;
}

.pos-scan-status-meta strong {
  font-size: 18px;
}

.pos-scan-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pos-scan-actions button {
  min-width: 38px;
  height: 30px;
  border: 1px solid #cbd8e6;
  border-radius: 7px;
  background: #ffffff;
  color: #1f3f6d;
  font-weight: 850;
}

.pos-v2-product-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-v2-products .product-palette.pos-fast-products {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
}

.pos-v2-products .product-palette.pos-fast-products button {
  min-height: 112px;
  border-radius: 8px;
}

.pos-v2-bill-items .pos-bill-lines {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

.pos-v2-bill-items .pos-bill-line {
  grid-template-columns: 34px minmax(0, 1fr) 116px minmax(74px, auto);
  height: 58px;
  min-height: 58px;
  max-height: 58px;
}

.pos-v2-bill-items .pos-bill-line .pos-remove-line {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

.pos-v2-payment {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, auto);
  gap: 10px;
  padding: 0 12px 12px;
  overflow: hidden;
}

.pos-v2-payment-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border-bottom: 2px solid #f0f4f8;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-radius: 12px 12px 0 0;
}

.pos-v2-payment-head span,
.pos-v2-payment-head small {
  display: block;
  color: #52657a;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pos-v2-payment-head strong {
  display: block;
  color: #0f172a;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}

.pos-v2-payment .pos-bill-lines {
  min-height: 0;
  overflow-y: auto;
}

.pos-v2-payment .pos-payment-strip {
  margin: 0;
  box-shadow: none;
}

.pos-v2-checkout {
  display: grid;
  gap: 10px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.pos-v2-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #e1e9f2;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fbff;
}

.pos-v2-summary-row div {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 10px 8px;
  border-right: 1px solid #e1e9f2;
}

.pos-v2-summary-row div:last-child {
  border-right: 0;
}

.pos-v2-summary-row span {
  color: #6b7e95;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pos-v2-summary-row strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.pos-v2-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.pos-v2-mode-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 46px;
  border: 1.5px solid #d6e0eb;
  border-radius: 10px;
  padding: 8px;
  background: #ffffff;
  color: #182534;
  font-weight: 900;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.pos-v2-mode-grid button:hover {
  border-color: #b0c4da;
  background: #f7fafd;
  box-shadow: 0 2px 8px rgba(24, 39, 67, 0.08);
}

.pos-v2-mode-grid button.active {
  border-color: #118b69;
  background: #118b69;
  color: #ffffff;
}

.pos-v2-mode-grid svg {
  width: 18px;
  height: 18px;
}

.pos-v2-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.pos-v2-tool-row button,
.pos-v2-save-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.pos-v2-tool-row button {
  min-height: 40px;
}

.pos-v2-save-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pos-v2-save-grid button {
  min-height: 50px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 13px;
  transition: filter 0.15s, transform 0.1s;
}

.pos-v2-save-grid button:active {
  transform: scale(0.97);
}

/* Save button — prominent */
.pos-v2-save-grid .primary-button {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.pos-v2-save-grid .primary-button:hover {
  filter: brightness(1.08);
}

.pos-v2-save-main {
  gap: 7px !important;
  min-height: 50px !important;
}

.pos-v2-save-main span {
  display: block;
  color: inherit;
  line-height: 1.1;
}

.pos-v2-save-grid .whatsapp-bill {
  border-color: #22c55e;
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  color: #15803d;
  font-weight: 900;
}

.pos-v2-save-grid .whatsapp-bill:hover {
  background: linear-gradient(135deg, #bbf7d0, #dcfce7);
}

.pos-v2-save-grid .whatsapp-bill:disabled {
  opacity: 0.48;
}

.pos-v2-payment .pos-cash-tender-panel {
  margin: 0;
  box-shadow: none;
}

.pos-v2-display-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.pos-v2-display-settings {
  display: grid;
  gap: 12px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
}

.pos-tool-modal {
  display: grid;
  width: min(460px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  gap: 12px;
  overflow-y: auto;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.pos-tool-modal .pos-v2-display-settings {
  width: 100%;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.pos-v2-display-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-v2-display-head strong {
  color: #111827;
  font-size: 18px;
}

.pos-v2-display-settings label {
  display: grid;
  gap: 4px;
  color: #52657a;
  font-size: 11px;
  font-weight: 850;
}

.pos-v2-display-settings select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 6px 8px;
  background: #f8fbff;
}

.pos-v2-display-settings input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 7px 9px;
  background: #f8fbff;
  color: #111827;
  font: inherit;
}

.pos-theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pos-theme-choice-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
  color: #111827;
  text-align: left;
  font-weight: 900;
}

.pos-theme-choice-grid button.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand-tint);
}

.pos-theme-choice-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-theme-choice-grid i {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.pos-theme-choice-grid i::before,
.pos-theme-choice-grid i::after,
.pos-theme-choice-grid i {
  min-height: 14px;
  border-radius: 999px;
}

.pos-theme-choice-grid i::before,
.pos-theme-choice-grid i::after {
  content: "";
}

.pos-theme-choice-grid i[data-theme-swatch="classic"] {
  background: #2563a7;
}

.pos-theme-choice-grid i[data-theme-swatch="classic"]::before {
  background: #aa3232;
}

.pos-theme-choice-grid i[data-theme-swatch="classic"]::after {
  background: #fff1f1;
}

.pos-theme-choice-grid i[data-theme-swatch="royal"] {
  background: #1d4e86;
}

.pos-theme-choice-grid i[data-theme-swatch="royal"]::before {
  background: #2563a7;
}

.pos-theme-choice-grid i[data-theme-swatch="royal"]::after {
  background: #eef6ff;
}

.pos-theme-choice-grid i[data-theme-swatch="fresh"] {
  background: #1f7a8c;
}

.pos-theme-choice-grid i[data-theme-swatch="fresh"]::before {
  background: #16805f;
}

.pos-theme-choice-grid i[data-theme-swatch="fresh"]::after {
  background: #eaf8f2;
}

.pos-theme-choice-grid i[data-theme-swatch="graphite"] {
  background: #475569;
}

.pos-theme-choice-grid i[data-theme-swatch="graphite"]::before {
  background: #334155;
}

.pos-theme-choice-grid i[data-theme-swatch="graphite"]::after {
  background: #f1f5f9;
}

.pos-v2-display-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.pos-tool-summary {
  display: grid;
  gap: 5px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.pos-tool-summary.ok {
  border-color: #9be7d4;
  background: #ecfbf5;
}

.pos-tool-summary.warn {
  border-color: #f4c8c8;
  background: #fff7ed;
}

.pos-tool-summary strong {
  color: #111827;
}

.pos-tool-summary span,
.pos-tool-summary small {
  color: #52657a;
  font-size: 12px;
  font-weight: 800;
}

.pos-tool-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pos-tool-kpis div {
  display: grid;
  gap: 3px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.pos-tool-kpis span {
  color: #52657a;
  font-size: 11px;
  font-weight: 850;
}

.pos-v2-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 4px;
  border-top: 1px solid #edf2f7;
  margin-top: 2px;
}

.pos-v2-side-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 38px;
  white-space: nowrap;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pos-v2-side-actions button:hover {
  background: #eef2f7;
  border-color: #cbd5e0;
  color: #1e293b;
}

/* Highlight key actions */
.pos-v2-side-actions button#newBill {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.pos-v2-side-actions button#newBill:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.pos-v2-side-actions button#holdBill:not([disabled]) {
  background: #fefce8;
  border-color: #fde68a;
  color: #047857;
}

.pos-v2-side-actions button#openPosReturnDialog {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.pos-v2-side-actions svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.8;
}

@media (max-width: 1280px) {
  .pos-v2-header {
    grid-template-columns: minmax(118px, 320px);
  }

  .pos-v2-status {
    grid-column: auto;
    grid-template-columns: none;
    align-items: center;
  }

  .pos-v2-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }
}

@media (max-width: 1120px) {
  .pos-v2-shell {
    overflow-y: auto;
  }

  .pos-v2-header {
    grid-template-columns: minmax(0, 320px);
  }

  .pos-v2-scan-lower {
    grid-column: auto;
    grid-row: auto;
  }

  .pos-v2-counter,
  .pos-v2-status {
    min-height: 42px;
  }

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

  .pos-v2-payment {
    order: -1;
  }
}

@media (max-width: 760px) {
  .pos-v2-shell {
    gap: 8px;
    padding: 8px;
  }

  .pos-v2-scan {
    grid-template-columns: 28px minmax(0, 1fr) 64px;
    gap: 7px;
    min-height: 58px;
    padding: 7px;
  }

  .pos-v2-scan input {
    min-height: 42px;
    font-size: 18px;
  }

  .pos-v2-scan .primary-button {
    min-height: 36px;
    padding-inline: 8px;
  }

  .pos-v2-counter strong,
  .pos-v2-payment-head strong {
    font-size: 17px;
  }

  .pos-v2-mode-grid,
  .pos-v2-side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-v2-save-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .pos-v2-shell {
    min-height: auto;
  }

  .pos-v2-header,
  .pos-v2-grid {
    grid-template-columns: 1fr;
  }

  .pos-v2-payment {
    order: -1;
  }
}
.settings-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
}

.settings-mini-kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-soft);
}

.settings-mini-kpi strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}

.settings-mini-kpi span {
  color: var(--muted);
  font-size: 12px;
}

.settings-check.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.validation-settings-table td:first-child {
  min-width: 220px;
}

.validation-settings-table td:last-child {
  min-width: 360px;
}

.validation-message-input {
  min-height: 54px;
  resize: vertical;
}

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

/* Final mobile web app hardening. Keep POS/KDS/log fullscreen layouts under their own rules. */
@media (max-width: 760px) {
  html,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) {
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .app-shell,
  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .workspace,
  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .content-grid,
  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .panel,
  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .smart-table-shell {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .app-shell {
    display: block;
  }

  body:not(.logged-out) .sidebar .brand,
  body:not(.logged-out) .sidebar-environment-slot {
    display: none;
  }

  body:not(.logged-out) .sidebar {
    width: auto;
    min-width: 0;
  }

  body:not(.logged-out) .nav-list {
    width: 100%;
  }

  body:not(.logged-out) .nav-list > .nav-group > button,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button {
    min-width: 72px;
  }

  body:not(.logged-out) .topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.logged-out) .topbar > div:first-child,
  body:not(.logged-out) .topbar-actions,
  body:not(.logged-out) .global-search-shell,
  body:not(.logged-out) #supportWidgetRoot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.logged-out) .topbar h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 22px;
  }

  body:not(.logged-out) .global-search-shell input {
    width: 100%;
  }

  body:not(.logged-out) .content-grid,
  body:not(.logged-out) .metrics-row,
  body:not(.logged-out) .dashboard-top-grid,
  body:not(.logged-out) .dashboard-chart-grid,
  body:not(.logged-out) .dashboard-table-grid,
  body:not(.logged-out) .dashboard-tile-grid,
  body:not(.logged-out) .dashboard-kpi-panel .dashboard-tile-grid,
  body:not(.logged-out) .dashboard-kpi-panel .dashboard-filters,
  body:not(.logged-out) .owner-command-detail-grid,
  body:not(.logged-out) .kitchen-work-grid,
  body:not(.logged-out) .finance-kpi-grid,
  body:not(.logged-out) .settings-layout,
  body:not(.logged-out) .settings-detail-layout,
  body:not(.logged-out) .integration-detail-layout,
  body:not(.logged-out) .report-query-bar,
  body:not(.logged-out) .form-grid,
  body:not(.logged-out) .dialog-grid {
    grid-template-columns: 1fr;
  }

  body:not(.logged-out) .module-toolbar,
  body:not(.logged-out) .access-strip,
  body:not(.logged-out) .settings-section-picker {
    align-items: stretch;
  }

  body:not(.logged-out) .module-actions,
  body:not(.logged-out) .table-action-row,
  body:not(.logged-out) .form-actions-row,
  body:not(.logged-out) .sales-order-actions,
  body:not(.logged-out) .supplier-payment-quick-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  body:not(.logged-out) .module-actions > *,
  body:not(.logged-out) .form-actions-row > *,
  body:not(.logged-out) .sales-order-actions > *,
  body:not(.logged-out) .supplier-payment-quick-actions > * {
    flex: 1 1 min(170px, 100%);
  }

  body:not(.logged-out) button,
  body:not(.logged-out) input,
  body:not(.logged-out) select,
  body:not(.logged-out) textarea,
  body:not(.logged-out) .primary-button,
  body:not(.logged-out) .ghost-button,
  body:not(.logged-out) .danger-button {
    max-width: 100%;
  }

  body:not(.logged-out) input,
  body:not(.logged-out) select,
  body:not(.logged-out) textarea,
  body:not(.logged-out) .table-input {
    width: 100%;
    min-width: 0;
  }

  body:not(.logged-out) .mini-action,
  body:not(.logged-out) .primary-button,
  body:not(.logged-out) .ghost-button,
  body:not(.logged-out) .danger-button {
    white-space: normal;
  }
}


@media (max-width: 760px) {
  body:not(.logged-out) .sidebar {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-width: calc(100vw - 16px);
    max-height: 116px;
    box-sizing: border-box;
    overflow: hidden;
  }

  body:not(.logged-out) .nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(42px, 1fr));
    grid-auto-columns: minmax(46px, 1fr);
    gap: 5px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.logged-out) .nav-group {
    min-width: 0;
    scroll-snap-align: start;
  }

  body:not(.logged-out) .nav-list > .nav-group > button,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    grid-template-rows: 17px minmax(0, 1fr);
    gap: 2px;
    padding: 4px 4px 3px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button svg,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button svg {
    width: 17px;
    height: 17px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button span,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button span {
    max-width: 100%;
    font-size: 9.5px;
    line-height: 1.05;
  }
}
@media (max-width: 640px) {
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap table,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap thead,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tr,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap colgroup,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap thead {
    display: none;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid #edf2f7;
    padding: 10px 12px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td:first-child {
    border-top: 0;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td[data-label=""],
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td[colspan],
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-cell {
    grid-template-columns: 1fr;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td[data-label=""]::before,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td[colspan]::before {
    display: none;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .row-actions,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .table-action-row,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .module-actions {
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .mini-action,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .ghost-button,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .primary-button,
  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td.action-column .danger-button {
    flex: 1 1 124px;
    white-space: normal;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-pagination {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  dialog[open] .dialog-panel input,
  dialog[open] .dialog-panel select,
  dialog[open] .dialog-panel textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  body:not(.logged-out) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body:not(.logged-out) .workspace {
    padding-inline: 8px;
  }

  body:not(.logged-out) .panel,
  body:not(.logged-out) .metric,
  body:not(.logged-out) .module-toolbar {
    padding: 12px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button {
    min-width: 66px;
    padding-inline: 6px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button span,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button span {
    max-width: 60px;
  }

  body:not(.logged-out) .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  dialog[open] .dialog-actions {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 420px) {
  body:not(.logged-out) .sidebar {
    max-height: 112px;
  }

  body:not(.logged-out) .nav-list {
    grid-auto-columns: minmax(38px, 1fr);
    gap: 3px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button {
    min-width: 0;
    min-height: 40px;
    padding-inline: 3px;
  }

  body:not(.logged-out) .nav-list > .nav-group > button span,
  body:not(.logged-out).sidebar-collapsed .nav-list > .nav-group > button span {
    max-width: 100%;
    font-size: 8.8px;
  }
}

/* POS billing speed modes and split payment controls */
.pos-billing-mode-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.pos-billing-mode-switch button {
  min-height: 48px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #263449;
  text-align: left;
  padding: 8px 10px;
  display: grid;
  gap: 1px;
}

.pos-billing-mode-switch button strong {
  font-size: 13px;
  font-weight: 900;
}

.pos-billing-mode-switch button span {
  color: #667485;
  font-size: 11px;
  font-weight: 700;
}

.pos-billing-mode-switch button.active {
  border-color: #2563a7;
  background: linear-gradient(180deg, #eef6ff, #ffffff);
  box-shadow: inset 4px 0 0 #2563a7;
}

.pos-focus-cart-table {
  display: grid;
  gap: 6px;
  min-height: 0;
  align-content: start;
  grid-auto-rows: min-content;
  overflow-y: auto;
}

.pos-focus-cart-head,
.pos-focus-cart-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.6fr) minmax(168px, 0.8fr) minmax(84px, 0.45fr) minmax(96px, 0.5fr) 42px;
  align-items: center;
  gap: 8px;
}

.pos-focus-cart-head {
  padding: 7px 10px;
  border-radius: 8px;
  min-height: 36px;
  background: #263449;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
}

.pos-focus-cart-row {
  min-height: 58px;
  height: auto;
  border: 1px solid #d9e6f3;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
}

.pos-focus-cart-row:hover,
.pos-focus-cart-row:focus-within {
  border-color: #1f6bb8;
  background: #f7fbff;
  box-shadow: inset 4px 0 0 #1f6bb8;
}

.pos-focus-cart-row strong,
.pos-focus-cart-row b {
  color: #172333;
  font-weight: 900;
}

.pos-focus-cart-row small {
  display: block;
  color: #667485;
  font-size: 11px;
  font-weight: 650;
}

.pos-focus-qty-control {
  display: grid;
  grid-template-columns: 42px minmax(58px, 1fr) 42px;
  gap: 6px;
  align-items: center;
}

.pos-focus-qty-control button,
.pos-focus-remove {
  min-height: 38px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #f8fbff;
  color: #1f4f8f;
  font-weight: 900;
}

.pos-focus-qty-control input {
  min-height: 38px;
  text-align: center;
  font-weight: 900;
}

.pos-focus-remove {
  display: grid;
  place-items: center;
  color: #9f1239;
  background: #fff5f6;
  border-color: #f3c7cf;
}

.pos-focus-remove svg {
  width: 18px;
  height: 18px;
}

.pos-focus-qty-static {
  font-weight: 900;
  color: #263449;
}

.pos-split-payment-panel,
.pos-cash-tender-panel {
  border: 1px solid #d9e6f3;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.pos-split-head,
.pos-cash-tender-head,
.pos-split-summary,
.pos-cash-tender-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pos-split-head strong,
.pos-cash-tender-head strong {
  font-size: 13px;
  font-weight: 900;
}

.pos-split-head span,
.pos-cash-tender-head span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #e9f7f0;
  color: #0c7659;
  font-size: 11px;
  font-weight: 900;
}

.pos-split-head span.short,
.pos-cash-tender-head span.short,
.pos-cash-tender-metrics .short strong {
  background: #fff4e5;
  color: #9a4d00;
}

.pos-split-head span.change,
.pos-cash-tender-head span.change,
.pos-cash-tender-metrics .change strong {
  background: #eef6ff;
  color: #1f4f8f;
}

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

.pos-split-grid label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  align-items: center;
  color: #60758d;
  font-size: 11px;
  font-weight: 900;
}

.pos-split-grid input {
  grid-column: 1 / -1;
  min-height: 38px;
  font-weight: 900;
}

.pos-split-grid button,
.pos-split-summary button {
  min-height: 30px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #ffffff;
  color: #1f4f8f;
  font-size: 12px;
  font-weight: 850;
}

.pos-split-summary {
  color: #52657a;
  font-size: 12px;
  font-weight: 850;
}

.pos-cash-tender-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pos-cash-tender-metrics div {
  border: 1px solid #d9e6f3;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 8px;
  display: grid;
  gap: 1px;
}

.pos-cash-tender-metrics span {
  color: #667485;
  font-size: 11px;
  font-weight: 800;
}

.pos-cash-tender-metrics strong {
  color: #172333;
  font-size: 15px;
  font-weight: 900;
}

.pos-pay-action.return {
  border-color: #f2d39b;
  background: #fff8ec;
  color: #8a4b00;
}

.pos-search-fallback {
  border-color: #d9e6f3;
  background: #fbfdff;
}

.pos-held-row small {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .pos-billing-mode-switch,
  .pos-split-grid,
  .pos-cash-tender-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-focus-cart-head,
  .pos-focus-cart-row {
    grid-template-columns: minmax(170px, 1fr) minmax(152px, 0.8fr) minmax(82px, auto) minmax(90px, auto) 42px;
  }
}
.regular-plan-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(120px, 0.75fr) minmax(130px, 0.75fr) minmax(170px, 0.85fr);
  gap: 14px 12px;
  align-items: end;
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 32px rgba(30, 64, 107, 0.08);
}

.regular-plan-form > input[type="hidden"] {
  display: none;
}

.regular-plan-form label,
.regular-plan-days {
  display: grid;
  gap: 7px;
  color: #627086;
  font-size: 12px;
  font-weight: 850;
}

.regular-plan-form label:first-of-type {
  grid-column: span 2;
}

.regular-plan-form input:not([type="checkbox"]),
.regular-plan-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd8e8;
  border-radius: 10px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(30, 64, 107, 0.04);
}

.regular-plan-form input:not([type="checkbox"]):focus,
.regular-plan-form select:focus {
  border-color: #4f7fd9;
  box-shadow: 0 0 0 3px rgba(47, 99, 191, 0.14);
  outline: none;
}

.regular-plan-days {
  grid-column: span 2;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}

.regular-plan-days legend {
  grid-column: 1 / -1;
  padding: 0;
  color: #627086;
  font-size: 12px;
  font-weight: 850;
}

.regular-plan-day-option {
  display: flex !important;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #d8e4f3;
  border-radius: 10px;
  background: #ffffff;
  color: #172235 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 1px 2px rgba(30, 64, 107, 0.04);
}

.regular-plan-day-option:has(input:checked) {
  border-color: #9ab7f5;
  background: #edf4ff;
  color: #173a8a !important;
}

.regular-plan-day-option input,
.regular-plan-active input {
  min-height: auto;
  accent-color: #315fc4;
}

.regular-plan-note {
  grid-column: span 3;
}

.regular-plan-active {
  display: flex !important;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  align-self: end;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  background: #f8fbff;
  color: #39506c !important;
  font-weight: 850 !important;
}

.regular-plan-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;
}

.regular-plan-form-actions .primary-button,
.regular-plan-form-actions .ghost-button {
  min-height: 42px;
}

.regular-plan-footnote {
  margin-top: 10px;
}

@media (max-width: 980px) {
  .regular-plan-form {
    grid-template-columns: 1fr 1fr;
  }

  .regular-plan-form label:first-of-type,
  .regular-plan-days,
  .regular-plan-note,
  .regular-plan-form-actions {
    grid-column: 1 / -1;
  }

  .regular-plan-form-actions {
    justify-self: stretch;
  }

  .regular-plan-form-actions .primary-button,
  .regular-plan-form-actions .ghost-button {
    flex: 1;
  }
}

@media (max-width: 640px) {
  .regular-plan-form,
  .regular-plan-days {
    grid-template-columns: 1fr;
  }
}
/* POS billing high-contrast counter theme */
.pos-cashier-board {
  --pos-counter-dark: #172235;
  --pos-counter-dark-soft: #223148;
  --pos-counter-line: #9db2cc;
  --pos-counter-blue: #1f5fae;
  --pos-counter-green: #0f7a5c;
}

.pos-cashier-board .pos-kiosk-products,
.pos-cashier-board .pos-bill-dock,
.pos-cashier-board .pos-bill-panel,
.pos-cashier-board .pos-fast-search-row,
.pos-cashier-board .pos-focus-cart-shell {
  border-color: var(--pos-counter-line);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.pos-cashier-board .pos-bill-lines,
.pos-cashier-board .pos-focus-cart-table {
  border-color: var(--pos-counter-line);
  background: #ffffff;
}

.pos-cashier-board .pos-bill-lines-head,
.pos-cashier-board .pos-focus-cart-head {
  background: var(--pos-counter-dark);
  color: #ffffff;
  border: 1px solid var(--pos-counter-dark);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.14);
}

.pos-cashier-board .pos-bill-lines-head span,
.pos-cashier-board .pos-focus-cart-head span {
  color: #ffffff;
}

.pos-cashier-board .pos-bill-line,
.pos-cashier-board .pos-focus-cart-row {
  border-color: #c1cede;
}

.pos-cashier-board .pos-bill-line[data-select-cart-product]:hover,
.pos-cashier-board .pos-bill-line[data-select-cart-product]:focus-visible,
.pos-cashier-board .pos-focus-cart-row:hover,
.pos-cashier-board .pos-focus-cart-row:focus-within {
  border-color: var(--pos-counter-blue);
  background: #eef6ff;
  box-shadow: inset 4px 0 0 var(--pos-counter-blue);
}

.pos-cashier-board .pos-payment-mode-group {
  border-color: #7388a3;
  background: var(--pos-counter-dark-soft);
}

.pos-cashier-board .pos-payment-mode-group .pos-pay-action.mode:not(.active) {
  border-color: #8fa2bb !important;
  background: #f8fbff !important;
  color: #172235 !important;
}

.pos-cashier-board .pos-payment-mode-group .pos-pay-action.mode.active {
  border-color: var(--pos-counter-green) !important;
  background: var(--pos-counter-green) !important;
  color: #ffffff !important;
}

.pos-cashier-board .pos-payment-mode-group .pos-pay-action.mode.active svg {
  color: #ffffff;
}

.pos-cashier-board .pos-cash-tender-panel,
.pos-cashier-board .pos-split-payment-panel {
  border-color: #a5b7cc;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}

.pos-cashier-board .pos-cash-tender-metrics > div,
.pos-cashier-board .pos-split-row,
.pos-cashier-board .pos-checkout-summary > div {
  border-color: #b8c8da;
}

.pos-cashier-board .pos-grand-total,
.pos-cashier-board .pos-cash-tender-balance.due {
  border-color: #2f5f9f;
  background: #f3f7ff;
}

/* POS return button contrast fix */
.pos-cashier-board .pos-bill-dock .pos-pay-action.return,
.pos-cashier-board .pos-pay-action.return {
  border-color: #c05621 !important;
  background: #fff3e4 !important;
  color: #8a3a0a !important;
  box-shadow: inset 4px 0 0 #f97316;
}

.pos-cashier-board .pos-bill-dock .pos-pay-action.return svg,
.pos-cashier-board .pos-pay-action.return svg {
  color: #c2410c !important;
}

.pos-cashier-board .pos-bill-dock .pos-pay-action.return:hover,
.pos-cashier-board .pos-bill-dock .pos-pay-action.return:focus-visible,
.pos-cashier-board .pos-pay-action.return:hover,
.pos-cashier-board .pos-pay-action.return:focus-visible {
  border-color: #9a3412 !important;
  background: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(154, 52, 18, 0.18);
}

.pos-cashier-board .pos-bill-dock .pos-pay-action.return:hover svg,
.pos-cashier-board .pos-bill-dock .pos-pay-action.return:focus-visible svg,
.pos-cashier-board .pos-pay-action.return:hover svg,
.pos-cashier-board .pos-pay-action.return:focus-visible svg {
  color: #ffffff !important;
}
/* POS center workspace contrast */
.pos-cashier-board .pos-fast-search-row {
  border-color: #8fa2bb;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.pos-cashier-board .pos-search input,
.pos-cashier-board #posItemSearch {
  border-color: #8fa2bb;
  background: #ffffff;
  color: #111827;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.08);
}

.pos-cashier-board .pos-search input:focus,
.pos-cashier-board #posItemSearch:focus {
  border-color: #1f5fae;
  box-shadow: 0 0 0 3px rgba(31, 95, 174, 0.16);
}

.pos-cashier-board .pos-billing-focus-head {
  min-height: 48px;
  border-color: #172235;
  background: linear-gradient(135deg, #172235 0%, #223148 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.pos-cashier-board .pos-billing-focus-head strong,
.pos-cashier-board .pos-billing-focus-head span {
  color: #ffffff;
}

.pos-cashier-board .pos-billing-focus-head span {
  opacity: 0.9;
}

.pos-cashier-board .pos-billing-focus-head .mini-action {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.95);
  color: #172235;
  font-weight: 900;
}

.pos-cashier-board .pos-billing-focus-items .pos-bill-lines,
.pos-cashier-board .pos-focus-cart-table {
  border: 1px solid #9db2cc;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
}

.pos-cashier-board .pos-billing-focus-items .pos-bill-lines:empty,
.pos-cashier-board .pos-focus-cart-table:empty {
  border-style: solid;
  background: #f7fafc;
}

.pos-cashier-board .pos-search-status {
  border-color: #aebed2;
  background: #f8fbff;
  color: #334155;
}

.pos-cashier-board .pos-billing-mode-switch button {
  border-color: #9db2cc;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  color: #172235;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.pos-cashier-board .pos-billing-mode-switch button strong {
  color: #111827;
}

.pos-cashier-board .pos-billing-mode-switch button span {
  color: #475569;
}

.pos-cashier-board .pos-billing-mode-switch button:hover,
.pos-cashier-board .pos-billing-mode-switch button:focus-visible {
  border-color: #1f5fae;
  background: #eef6ff;
  box-shadow: inset 4px 0 0 #1f5fae;
}

.pos-cashier-board .pos-billing-mode-switch button.active {
  border-color: #1f5fae;
  background: linear-gradient(135deg, #17325c 0%, #1f5fae 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(31, 95, 174, 0.18);
}

.pos-cashier-board .pos-billing-mode-switch button.active strong,
.pos-cashier-board .pos-billing-mode-switch button.active span {
  color: #ffffff;
}

.pos-cashier-board .pos-billing-mode-switch button.active span {
  opacity: 0.9;
}
/* POS payment panel lower offset */
.pos-cashier-board .pos-bill-dock .pos-payment-strip {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .pos-cashier-board .pos-bill-dock .pos-payment-strip {
    margin-top: 8px;
  }
}
/* POS bill focus bottom payment anchor */
.pos-cashier-board .pos-bill-focus-dock {
  display: flex;
  flex-direction: column;
}

.pos-cashier-board .pos-bill-focus-dock .pos-payment-strip {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .pos-cashier-board .pos-bill-focus-dock .pos-payment-strip {
    margin-top: 8px;
  }
}
/* POS search results overlay: do not push cart panels down */
.pos-cashier-board .pos-kiosk-products {
  position: relative;
}

.pos-cashier-board #posSearchResults {
  position: absolute;
  z-index: 35;
  top: 58px;
  left: 8px;
  right: 8px;
  max-height: min(238px, calc(100% - 72px));
  overflow: hidden;
  pointer-events: auto;
}

.pos-cashier-board #posSearchResults:empty {
  display: none;
}

.pos-cashier-board #posSearchResults .pos-suggestion-list,
.pos-cashier-board #posSearchResults .pos-search-status-card {
  max-height: inherit;
  overflow-y: auto;
  border-color: #b98523;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
}

.pos-cashier-board #posSearchResults .pos-suggestion-list button.active,
.pos-cashier-board #posSearchResults .pos-suggestion-list button:hover,
.pos-cashier-board #posSearchResults .pos-suggestion-list button:focus-visible {
  background: #fff3d6;
}

@media (max-width: 760px) {
  .pos-cashier-board #posSearchResults {
    position: static;
    max-height: 220px;
  }
}
/* POS cart focus mode switch placement */
.pos-cashier-board.bill-focus-mode .pos-kiosk-products {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.pos-cashier-board.bill-focus-mode .pos-billing-focus-items {
  grid-row: 2;
  min-height: 0;
}

.pos-cashier-board.bill-focus-mode .pos-billing-mode-switch {
  grid-row: 3;
  align-self: end;
  margin: 0;
}

@media (max-width: 760px) {
  .pos-cashier-board.bill-focus-mode .pos-kiosk-products {
    grid-template-rows: auto auto auto;
  }

  .pos-cashier-board.bill-focus-mode .pos-billing-focus-items,
  .pos-cashier-board.bill-focus-mode .pos-billing-mode-switch {
    grid-row: auto;
  }
}
/* POS billable area strong border */
.pos-cashier-board .pos-billing-focus-items .pos-bill-lines,
.pos-cashier-board .pos-focus-cart-table {
  border: 2px solid #315f9c;
  box-shadow: inset 5px 0 0 #315f9c, 0 8px 18px rgba(31, 95, 174, 0.08);
}

.pos-cashier-board .pos-billing-focus-items .pos-bill-lines:has(.pos-bill-empty),
.pos-cashier-board .pos-focus-cart-table:has(.pos-bill-empty) {
  border-style: solid;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%);
}

.pos-cashier-board .pos-bill-empty {
  border: 1px dashed #9db2cc;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}
/* POS billable area inner spacing */
.pos-cashier-board .pos-billing-focus-items .pos-bill-lines,
.pos-cashier-board .pos-focus-cart-table {
  padding: 8px 8px 10px 14px;
  gap: 6px;
}

.pos-cashier-board .pos-focus-cart-head,
.pos-cashier-board .pos-focus-cart-row {
  margin-left: 0;
  margin-right: 0;
}

.pos-cashier-board .pos-focus-cart-head {
  border-radius: 7px;
}

.pos-cashier-board .pos-focus-cart-row {
  border-radius: 7px;
}

.pos-cashier-board .pos-bill-empty {
  margin: 0;
  padding: 12px 14px;
}
/* POS billing compact top mode controls */
.pos-mode-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #c8d7eb;
  border-radius: 12px;
  background: #eef5ff;
}

.pos-kiosk-iconbar .pos-mode-icon-group .pos-icon-action {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
}

.pos-kiosk-iconbar .pos-icon-action.billing-mode {
  color: #1f3552;
  border-color: #b7c9e2;
  background: #ffffff;
}

.pos-kiosk-iconbar .pos-icon-action.billing-mode:hover,
.pos-kiosk-iconbar .pos-icon-action.billing-mode:focus-visible {
  border-color: #315f9c;
  background: #e8f1ff;
  color: #18355f;
}

.pos-kiosk-iconbar .pos-icon-action.billing-mode.active {
  color: #ffffff;
  border-color: #254f8f;
  background: #254f8f;
  box-shadow: 0 8px 18px rgba(37, 79, 143, 0.22);
}

.pos-cashier-board .pos-billing-mode-switch {
  display: none;
}
/* POS mode settings popover */
.pos-mode-settings {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pos-mode-settings > summary {
  list-style: none;
  cursor: pointer;
}

.pos-mode-settings > summary::-webkit-details-marker {
  display: none;
}

.pos-kiosk-iconbar .pos-mode-settings-toggle {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border-color: #9db2cc;
  background: #ffffff;
  color: #1f3552;
}

.pos-mode-settings[open] .pos-mode-settings-toggle {
  border-color: #254f8f;
  background: #254f8f;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 79, 143, 0.2);
}

.pos-mode-settings .pos-mode-icon-group {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 220;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
}

.pos-mode-settings .pos-mode-icon-group::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-left: 1px solid #c8d7eb;
  border-top: 1px solid #c8d7eb;
  background: #eef5ff;
}

.pos-mode-settings .pos-mode-icon-group .pos-icon-action {
  position: relative;
  z-index: 1;
}
/* POS header centered brand */
.pos-cashier-board .pos-fast-topbar {
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
}

.pos-cashier-board .pos-fast-topbar .pos-counter-meta {
  grid-column: 1;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  min-width: 0;
  padding: 4px 14px;
  border-radius: 999px;
  color: #172235;
  background: #f3f7ff;
  border: 1px solid #c8d7eb;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

.pos-cashier-board .pos-fast-topbar > .pos-kiosk-iconbar {
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar {
    grid-template-columns: minmax(180px, 1fr) auto;
  }

  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    font-size: 15px;
    padding-block: 3px;
  }

  .pos-cashier-board .pos-fast-topbar > .pos-kiosk-iconbar {
    grid-column: 2;
  }
}
/* POS resized bill panel should stretch inner checkout */
.pos-cashier-board .pos-bill-dock {
  justify-items: stretch;
  align-items: stretch;
}

.pos-cashier-board .pos-bill-dock > *,
.pos-cashier-board .pos-bill-dock .pos-payment-strip,
.pos-cashier-board .pos-bill-dock .pos-payment-actions,
.pos-cashier-board .pos-bill-dock .pos-checkout-summary,
.pos-cashier-board .pos-bill-dock .pos-payment-mode-group,
.pos-cashier-board .pos-bill-dock .pos-bill-action-group,
.pos-cashier-board .pos-bill-dock .pos-cash-tender-panel,
.pos-cashier-board .pos-bill-dock .pos-split-payment-panel,
.pos-cashier-board .pos-bill-dock .pos-cash-tender-metrics,
.pos-cashier-board .pos-bill-dock .pos-cash-tender-entry,
.pos-cashier-board .pos-bill-dock .pos-cash-note-buttons {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.pos-cashier-board .pos-bill-dock .pos-payment-strip {
  justify-self: stretch;
  align-self: end;
}

.pos-cashier-board .pos-bill-focus-dock .pos-payment-strip {
  align-self: stretch;
}

.pos-cashier-board .pos-bill-dock .pos-payment-mode-group,
.pos-cashier-board .pos-bill-dock .pos-bill-action-group {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pos-cashier-board .pos-bill-dock .pos-cash-tender-entry {
  grid-template-columns: minmax(0, 1.2fr) minmax(96px, 0.65fr) minmax(96px, 0.65fr);
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-bill-dock .pos-cash-tender-entry {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 0.55fr) minmax(78px, 0.55fr);
  }
}
/* POS cart-focus column alignment */
.pos-cashier-board .pos-focus-cart-head span:nth-child(2),
.pos-cashier-board .pos-focus-cart-head span:nth-child(3),
.pos-cashier-board .pos-focus-cart-head span:nth-child(4) {
  text-align: center;
}

.pos-cashier-board .pos-focus-cart-row > :nth-child(3),
.pos-cashier-board .pos-focus-cart-row > :nth-child(4) {
  text-align: center;
}
/* POS header brand refinement */
.pos-cashier-board .pos-fast-topbar {
  min-height: 66px;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  display: grid;
  place-items: center;
  min-width: 210px;
  min-height: 42px;
  padding: 7px 22px;
  border: 1px solid rgba(23, 34, 53, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, #172235 0%, #275292 62%, #8a1f56 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 170px;
    min-height: 34px;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 18px;
  }
}
/* POS cart-focus summary stays compact below item box */
.pos-cashier-board .pos-billing-focus-items {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.pos-cashier-board .pos-billing-focus-head {
  align-self: start;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
}
/* POS cart-focus total summary: softer business summary bar */
.pos-cashier-board .pos-billing-focus-head {
  min-height: 44px;
  border: 1px solid #b8cce5;
  border-left: 4px solid #2563a7;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  color: #172235;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.pos-cashier-board .pos-billing-focus-head strong {
  color: #17325c;
  font-size: 16px;
  font-weight: 900;
}

.pos-cashier-board .pos-billing-focus-head span {
  color: #3d5068;
  font-size: 13px;
  font-weight: 850;
  opacity: 1;
}
/* POS cart-focus total aligned with quantity and amount columns */
.pos-cashier-board .pos-billing-focus-head {
  display: grid;
  grid-template-columns: minmax(190px, 1.6fr) minmax(168px, 0.8fr) minmax(84px, 0.45fr) minmax(96px, 0.5fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.pos-cashier-board .pos-focus-total-label {
  min-width: 0;
}

.pos-cashier-board .pos-focus-total-qty,
.pos-cashier-board .pos-focus-total-rate,
.pos-cashier-board .pos-focus-total-amount {
  color: #172235;
  font-weight: 950;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pos-cashier-board .pos-focus-total-amount {
  color: #17325c;
  font-size: 16px;
}
/* POS cart-focus total strip blue tint */
.pos-cashier-board .pos-billing-focus-head {
  border-color: #9ec5f8;
  border-left-color: #2563a7;
  background: linear-gradient(180deg, #eef6ff 0%, #dfeeff 100%);
  box-shadow: 0 6px 14px rgba(37, 99, 167, 0.1);
}
/* Additional POS-safe theme presets */
body[data-ui-theme="counter-blue"] {
  --brand: #1f5fae;
  --brand-strong: #143d73;
  --brand-tint: #e8f2ff;
  --accent: #8a1f56;
  --blue: #1f5fae;
  --blue-tint: #eaf4ff;
  --mint: #0f7a5c;
  --mint-tint: #e7f7f2;
  --gold: #b7791f;
  --gold-tint: #fff4dc;
  --line: #c8d8ec;
  --page: #f3f8ff;
  --surface-soft: #f8fbff;
}

body[data-ui-theme="rose-blue"] {
  --brand: #8a1f56;
  --brand-strong: #65143d;
  --brand-tint: #fff0f7;
  --accent: #2563a7;
  --blue: #2563a7;
  --blue-tint: #eef6ff;
  --mint: #0f7a5c;
  --mint-tint: #e6f7f1;
  --line: #d7c7d8;
  --page: #fbf7fb;
  --surface-soft: #fff9fc;
}

body[data-ui-theme="mint-slate"] {
  --brand: #0f7a5c;
  --brand-strong: #09543f;
  --brand-tint: #e7f7f1;
  --accent: #334155;
  --blue: #1f5fae;
  --blue-tint: #edf5ff;
  --mint: #0f7a5c;
  --mint-tint: #e7f7f1;
  --line: #c9d8d7;
  --page: #f4faf8;
  --surface-soft: #f8fcfb;
}

body[data-ui-theme="festival-gold"] {
  --brand: #9a5b00;
  --brand-strong: #6f4100;
  --brand-tint: #fff4dc;
  --accent: #8a1f56;
  --blue: #1f4f8f;
  --blue-tint: #ecf3ff;
  --gold: #b7791f;
  --gold-tint: #fff4dc;
  --mint: #0f7a5c;
  --mint-tint: #e7f7f1;
  --line: #dbcda9;
  --page: #faf9f4;
  --surface-soft: #fffdf8;
}

body[data-ui-theme="night-slate"] {
  --brand: #223148;
  --brand-strong: #111827;
  --brand-tint: #e9eef6;
  --accent: #0f7a5c;
  --blue: #2563a7;
  --blue-tint: #eaf2ff;
  --mint: #0f7a5c;
  --mint-tint: #e8f7f1;
  --line: #c6d0dc;
  --page: #f4f7fb;
  --surface-soft: #f7f9fc;
}

body[data-ui-font="modern"] {
  --ui-font-family: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
}

body[data-ui-font="counter"] {
  --ui-font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* POS theme mappings use the selected business theme without changing menus. */
body[data-ui-theme="counter-blue"] .pos-cashier-board {
  --pos-counter-dark: #17325c;
  --pos-counter-dark-soft: #244574;
  --pos-counter-line: #7da7d9;
  --pos-counter-blue: #1f5fae;
  --pos-counter-green: #118b69;
}

body[data-ui-theme="rose-blue"] .pos-cashier-board {
  --pos-counter-dark: #2a1d34;
  --pos-counter-dark-soft: #3a2947;
  --pos-counter-line: #c5acc4;
  --pos-counter-blue: #2563a7;
  --pos-counter-green: #0f7a5c;
}

body[data-ui-theme="mint-slate"] .pos-cashier-board {
  --pos-counter-dark: #203047;
  --pos-counter-dark-soft: #2c3f57;
  --pos-counter-line: #9bbcb7;
  --pos-counter-blue: #245f8f;
  --pos-counter-green: #0f7a5c;
}

body[data-ui-theme="festival-gold"] .pos-cashier-board {
  --pos-counter-dark: #2b3447;
  --pos-counter-dark-soft: #3d475c;
  --pos-counter-line: #cdb171;
  --pos-counter-blue: #1f4f8f;
  --pos-counter-green: #0f7a5c;
}

body[data-ui-theme="night-slate"] .pos-cashier-board {
  --pos-counter-dark: #111827;
  --pos-counter-dark-soft: #1f2937;
  --pos-counter-line: #8797ab;
  --pos-counter-blue: #2f6fbd;
  --pos-counter-green: #118b69;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  background: linear-gradient(135deg, var(--pos-counter-dark) 0%, var(--pos-counter-blue) 64%, var(--brand) 100%);
}

body[data-ui-theme="counter-blue"] .pos-cashier-board .pos-billing-focus-head {
  border-color: #9ec5f8;
  border-left-color: #1f5fae;
  background: linear-gradient(180deg, #eef6ff 0%, #dfeeff 100%);
}

body[data-ui-theme="rose-blue"] .pos-cashier-board .pos-billing-focus-head {
  border-color: #d8bdd2;
  border-left-color: #8a1f56;
  background: linear-gradient(180deg, #fff7fb 0%, #f1e8f8 100%);
}

body[data-ui-theme="mint-slate"] .pos-cashier-board .pos-billing-focus-head {
  border-color: #a9d2c5;
  border-left-color: #0f7a5c;
  background: linear-gradient(180deg, #f3fffb 0%, #e2f5ef 100%);
}

body[data-ui-theme="festival-gold"] .pos-cashier-board .pos-billing-focus-head {
  border-color: #d9bf7f;
  border-left-color: #9a5b00;
  background: linear-gradient(180deg, #fffaf0 0%, #edf4ff 100%);
}

body[data-ui-theme="night-slate"] .pos-cashier-board .pos-billing-focus-head {
  border-color: #a7b5c8;
  border-left-color: #223148;
  background: linear-gradient(180deg, #f8fafc 0%, #e9eef6 100%);
}

/* Theme preview swatches for new presets. */
.theme-preview-card[data-preview-theme="counter-blue"] i:nth-child(1) { background: #1f5fae; }
.theme-preview-card[data-preview-theme="counter-blue"] i:nth-child(2) { background: #e8f2ff; }
.theme-preview-card[data-preview-theme="counter-blue"] i:nth-child(3) { background: #8a1f56; }
.theme-preview-card[data-preview-theme="rose-blue"] i:nth-child(1) { background: #8a1f56; }
.theme-preview-card[data-preview-theme="rose-blue"] i:nth-child(2) { background: #fff0f7; }
.theme-preview-card[data-preview-theme="rose-blue"] i:nth-child(3) { background: #2563a7; }
.theme-preview-card[data-preview-theme="mint-slate"] i:nth-child(1) { background: #0f7a5c; }
.theme-preview-card[data-preview-theme="mint-slate"] i:nth-child(2) { background: #e7f7f1; }
.theme-preview-card[data-preview-theme="mint-slate"] i:nth-child(3) { background: #334155; }
.theme-preview-card[data-preview-theme="festival-gold"] i:nth-child(1) { background: #9a5b00; }
.theme-preview-card[data-preview-theme="festival-gold"] i:nth-child(2) { background: #fff4dc; }
.theme-preview-card[data-preview-theme="festival-gold"] i:nth-child(3) { background: #1f4f8f; }
.theme-preview-card[data-preview-theme="night-slate"] i:nth-child(1) { background: #223148; }
.theme-preview-card[data-preview-theme="night-slate"] i:nth-child(2) { background: #e9eef6; }
.theme-preview-card[data-preview-theme="night-slate"] i:nth-child(3) { background: #0f7a5c; }

.pos-theme-choice-grid i[data-theme-swatch="counter-blue"] { background: #8a1f56; }
.pos-theme-choice-grid i[data-theme-swatch="counter-blue"]::before { background: #1f5fae; }
.pos-theme-choice-grid i[data-theme-swatch="counter-blue"]::after { background: #e8f2ff; }
.pos-theme-choice-grid i[data-theme-swatch="rose-blue"] { background: #2563a7; }
.pos-theme-choice-grid i[data-theme-swatch="rose-blue"]::before { background: #8a1f56; }
.pos-theme-choice-grid i[data-theme-swatch="rose-blue"]::after { background: #fff0f7; }
.pos-theme-choice-grid i[data-theme-swatch="mint-slate"] { background: #334155; }
.pos-theme-choice-grid i[data-theme-swatch="mint-slate"]::before { background: #0f7a5c; }
.pos-theme-choice-grid i[data-theme-swatch="mint-slate"]::after { background: #e7f7f1; }
.pos-theme-choice-grid i[data-theme-swatch="festival-gold"] { background: #1f4f8f; }
.pos-theme-choice-grid i[data-theme-swatch="festival-gold"]::before { background: #9a5b00; }
.pos-theme-choice-grid i[data-theme-swatch="festival-gold"]::after { background: #fff4dc; }
.pos-theme-choice-grid i[data-theme-swatch="night-slate"] { background: #0f7a5c; }
.pos-theme-choice-grid i[data-theme-swatch="night-slate"]::before { background: #223148; }
.pos-theme-choice-grid i[data-theme-swatch="night-slate"]::after { background: #e9eef6; }
/* POS visible theme skin layer: make selected theme obvious in billing without moving layout */
.pos-cashier-board {
  --pos-skin-page: #f3f8ff;
  --pos-skin-surface: #ffffff;
  --pos-skin-soft: #eef6ff;
  --pos-skin-head: var(--pos-counter-dark, #172235);
  --pos-skin-head-2: var(--pos-counter-dark-soft, #223148);
  --pos-skin-line: var(--pos-counter-line, #9db2cc);
  --pos-skin-accent: var(--pos-counter-blue, #1f5fae);
  --pos-skin-action: var(--pos-counter-green, #0f7a5c);
  --pos-skin-warn: #9a5b00;
  --pos-skin-total: #dfeeff;
  --pos-skin-hover: #eef6ff;
  background: linear-gradient(180deg, #ffffff 0%, var(--pos-skin-page) 100%);
}

body[data-ui-theme="classic"] .pos-cashier-board {
  --pos-skin-page: #fff8f8;
  --pos-skin-soft: #fff1f1;
  --pos-skin-head: #2c1f2f;
  --pos-skin-head-2: #3a2940;
  --pos-skin-line: #d7b9b9;
  --pos-skin-accent: #aa3232;
  --pos-skin-action: #0f7a5c;
  --pos-skin-total: #fff1f1;
  --pos-skin-hover: #fff6f6;
}

body[data-ui-theme="counter-blue"] .pos-cashier-board {
  --pos-skin-page: #eef6ff;
  --pos-skin-soft: #e3f0ff;
  --pos-skin-head: #17325c;
  --pos-skin-head-2: #244574;
  --pos-skin-line: #7da7d9;
  --pos-skin-accent: #1f5fae;
  --pos-skin-action: #118b69;
  --pos-skin-total: #dcecff;
  --pos-skin-hover: #eaf4ff;
}

body[data-ui-theme="rose-blue"] .pos-cashier-board {
  --pos-skin-page: #fff6fb;
  --pos-skin-soft: #f8eaf3;
  --pos-skin-head: #2a1d34;
  --pos-skin-head-2: #402a4d;
  --pos-skin-line: #cfaec8;
  --pos-skin-accent: #8a1f56;
  --pos-skin-action: #2563a7;
  --pos-skin-total: #f5e4f0;
  --pos-skin-hover: #fff1f8;
}

body[data-ui-theme="mint-slate"] .pos-cashier-board,
body[data-ui-theme="fresh"] .pos-cashier-board {
  --pos-skin-page: #f0fbf7;
  --pos-skin-soft: #e3f7ef;
  --pos-skin-head: #203047;
  --pos-skin-head-2: #2d4650;
  --pos-skin-line: #99cabb;
  --pos-skin-accent: #0f7a5c;
  --pos-skin-action: #0f7a5c;
  --pos-skin-total: #def5ec;
  --pos-skin-hover: #effbf7;
}

body[data-ui-theme="festival-gold"] .pos-cashier-board {
  --pos-skin-page: #fffaf0;
  --pos-skin-soft: #fff3d8;
  --pos-skin-head: #2b3447;
  --pos-skin-head-2: #58401d;
  --pos-skin-line: #d7b870;
  --pos-skin-accent: #9a5b00;
  --pos-skin-action: #1f4f8f;
  --pos-skin-total: #fff0c8;
  --pos-skin-hover: #fff8e8;
}

body[data-ui-theme="royal"] .pos-cashier-board {
  --pos-skin-page: #f0f6ff;
  --pos-skin-soft: #e6f0ff;
  --pos-skin-head: #15345f;
  --pos-skin-head-2: #234a7b;
  --pos-skin-line: #93b7e6;
  --pos-skin-accent: #2563a7;
  --pos-skin-action: #0f7a5c;
  --pos-skin-total: #dfecff;
  --pos-skin-hover: #edf5ff;
}

body[data-ui-theme="graphite"] .pos-cashier-board,
body[data-ui-theme="night-slate"] .pos-cashier-board {
  --pos-skin-page: #f3f6fa;
  --pos-skin-soft: #e9eef6;
  --pos-skin-head: #111827;
  --pos-skin-head-2: #253144;
  --pos-skin-line: #8fa0b5;
  --pos-skin-accent: #334155;
  --pos-skin-action: #118b69;
  --pos-skin-total: #e5ebf4;
  --pos-skin-hover: #f1f5f9;
}

.pos-cashier-board .pos-kiosk-products,
.pos-cashier-board .pos-bill-dock,
.pos-cashier-board .pos-fast-search-row,
.pos-cashier-board .pos-billing-focus-items,
.pos-cashier-board .pos-focus-cart-table {
  border-color: var(--pos-skin-line) !important;
}

.pos-cashier-board .pos-fast-search-row,
.pos-cashier-board .pos-bill-dock,
.pos-cashier-board .pos-kiosk-products {
  background: linear-gradient(180deg, var(--pos-skin-surface) 0%, var(--pos-skin-soft) 100%) !important;
}

.pos-cashier-board .pos-focus-cart-head,
.pos-cashier-board .pos-bill-lines-head,
.pos-cashier-board .pos-billing-focus-head {
  border-color: var(--pos-skin-head) !important;
}

.pos-cashier-board .pos-focus-cart-head,
.pos-cashier-board .pos-bill-lines-head {
  background: linear-gradient(135deg, var(--pos-skin-head) 0%, var(--pos-skin-head-2) 100%) !important;
  color: #ffffff !important;
}

.pos-cashier-board .pos-focus-cart-row:hover,
.pos-cashier-board .pos-focus-cart-row:focus-within,
.pos-cashier-board .pos-bill-line[data-select-cart-product]:hover,
.pos-cashier-board .pos-bill-line[data-select-cart-product]:focus-visible {
  border-color: var(--pos-skin-accent) !important;
  background: var(--pos-skin-hover) !important;
  box-shadow: inset 4px 0 0 var(--pos-skin-accent) !important;
}

.pos-cashier-board .pos-billing-focus-head {
  border-left-color: var(--pos-skin-accent) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--pos-skin-total) 100%) !important;
}

.pos-cashier-board .pos-focus-total-amount,
.pos-cashier-board .pos-focus-total-qty,
.pos-cashier-board .pos-focus-total-label strong {
  color: var(--pos-skin-head) !important;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  background: linear-gradient(135deg, var(--pos-skin-head) 0%, var(--pos-skin-accent) 62%, var(--brand) 100%) !important;
}

.pos-cashier-board .pos-payment-mode-group,
.pos-cashier-board .pos-bill-action-group {
  border-color: var(--pos-skin-line) !important;
}

.pos-cashier-board .pos-payment-mode-group {
  background: var(--pos-skin-head) !important;
}

.pos-cashier-board .pos-payment-mode-group .pos-pay-action.mode.active,
.pos-cashier-board .pos-pay-action.whatsapp-bill:not(:disabled) {
  border-color: var(--pos-skin-action) !important;
  background: var(--pos-skin-action) !important;
  color: #ffffff !important;
}

.pos-cashier-board .pos-pay-action.discount,
.pos-cashier-board .pos-pay-action.return {
  border-color: var(--pos-skin-accent) !important;
}

.pos-cashier-board .pos-mode-settings[open] > summary,
.pos-cashier-board .pos-kiosk-iconbar .pos-icon-action.active,
.pos-cashier-board .pos-kiosk-iconbar .pos-icon-action.billing-mode.active {
  border-color: var(--pos-skin-accent) !important;
  background: var(--pos-skin-accent) !important;
  color: #ffffff !important;
}

.pos-cashier-board .pos-focus-qty-control button,
.pos-cashier-board .pos-qty-control button {
  border-color: color-mix(in srgb, var(--pos-skin-accent) 32%, #d7e3f0) !important;
  color: var(--pos-skin-accent) !important;
}

.pos-cashier-board .pos-focus-qty-control button:hover,
.pos-cashier-board .pos-qty-control button:hover {
  background: var(--pos-skin-accent) !important;
  color: #ffffff !important;
}
/* POS header brand larger preview */
.pos-cashier-board .pos-fast-topbar {
  min-height: 74px;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  min-width: 310px;
  min-height: 52px;
  padding: 9px 34px;
  border-radius: 18px;
  font-size: 31px;
  font-weight: 950;
  transform: scaleX(1.06);
  transform-origin: center;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 220px;
    min-height: 40px;
    padding: 7px 20px;
    border-radius: 14px;
    font-size: 22px;
    transform: none;
  }
}
/* POS header brand wordmark: no box, wider text */
.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  min-width: 260px !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pos-skin-head, #172235) !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: scaleX(1.12);
  transform-origin: center;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 190px !important;
    padding: 0 10px !important;
    font-size: 24px !important;
    transform: scaleX(1.06);
  }
}
/* POS header full brand wordmark with compact logo */
.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  min-width: 470px !important;
  max-width: min(48vw, 560px);
  padding: 0 12px !important;
  overflow: hidden;
  color: var(--pos-skin-head, #172235) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center;
  white-space: nowrap;
}

.pos-cashier-board .pos-counter-brand-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: scaleX(1.04);
  transform-origin: center;
}

.pos-cashier-board .pos-counter-brand img {
  flex: 0 0 auto;
  width: 38px;
  height: 34px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 300px !important;
    max-width: calc(100vw - 120px);
    gap: 8px;
    padding: 0 8px !important;
    font-size: 22px !important;
  }

  .pos-cashier-board .pos-counter-brand img {
    width: 30px;
    height: 28px;
  }
}
/* POS header brand visibility boost */
.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  min-width: 560px !important;
  max-width: min(56vw, 680px) !important;
  gap: 12px !important;
  color: #0f172a !important;
  font-size: 35px !important;
  font-weight: 950 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 1px rgba(15, 23, 42, 0.18) !important;
}

.pos-cashier-board .pos-counter-brand-text {
  color: #0f172a !important;
  transform: scaleX(1.08);
}

.pos-cashier-board .pos-counter-brand img {
  width: 52px !important;
  height: 42px !important;
  filter: saturate(1.08) contrast(1.08);
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 340px !important;
    max-width: calc(100vw - 110px) !important;
    font-size: 25px !important;
  }

  .pos-cashier-board .pos-counter-brand img {
    width: 38px !important;
    height: 32px !important;
  }
}
/* POS header brand text larger */
.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  min-width: 640px !important;
  max-width: min(62vw, 760px) !important;
  font-size: 42px !important;
  font-weight: 950 !important;
}

.pos-cashier-board .pos-counter-brand-text {
  transform: scaleX(1.1);
}

.pos-cashier-board .pos-counter-brand img {
  width: 58px !important;
  height: 48px !important;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 390px !important;
    max-width: calc(100vw - 100px) !important;
    font-size: 29px !important;
  }

  .pos-cashier-board .pos-counter-brand img {
    width: 42px !important;
    height: 36px !important;
  }
}
/* Reusable search clear control */
.search-clear-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-clear-field > input {
  width: 100%;
  min-width: 0;
}

.search-clear-button {
  min-width: 84px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd8ea;
  border-radius: 9px;
  background: #ffffff;
  color: #1f3f68;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(15, 43, 75, 0.07);
  cursor: pointer;
}

.search-clear-button:hover:not(:disabled),
.search-clear-button:focus-visible {
  border-color: #2f65ad;
  color: #0f3e82;
  box-shadow: 0 0 0 3px rgba(47, 101, 173, 0.14);
}

.search-clear-button:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 720px) {
  .search-clear-field {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 6px;
  }

  .search-clear-button {
    min-width: 54px;
    padding: 0 8px;
  }
}
/* Header click is the single table sort control; hide legacy Sort by dropdowns. */
.inventory-search-field[for$="SortSelect"],
.inventory-search-field[for="stockDraftSortSelect"],
.inventory-search-field[for="productDraftSortSelect"] {
  display: none !important;
}

/* Focused report workspace: reports open as a separate in-page tab instead of below the chooser. */
.report-library-card,
.report-focus-card {
  border-color: #c7d9ee;
}

.report-library-toolbar,
.report-focus-toolbar {
  align-items: center;
  gap: 12px;
}

.report-focus-shell {
  display: grid;
  gap: 14px;
}

.report-focus-card {
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 12px 28px rgba(15, 41, 75, 0.08);
}

.report-focus-card > h2 {
  display: none;
}

.report-focus-toolbar {
  border-bottom: 1px solid #d8e4f1;
  padding-bottom: 10px;
}

.report-focus-toolbar strong {
  color: #102033;
  font-size: 18px;
  font-weight: 900;
}

.report-focus-toolbar span {
  color: #52657a;
  font-size: 12px;
  font-weight: 700;
}

.report-focus-card .report-query-bar {
  margin-top: 10px;
}

.report-focus-output > .panel {
  margin-top: 0;
}

@media (max-width: 900px) {
  .report-focus-card {
    position: static;
  }
}

/* POS billing search visibility */
.pos-cashier-board .pos-main-search {
  gap: 6px;
}

.pos-cashier-board .pos-search-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  min-height: 42px;
  border: 2px solid #315f9c;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06), 0 6px 14px rgba(31, 95, 174, 0.08);
}

.pos-cashier-board .pos-search-entry:focus-within {
  border-color: #1f5fae;
  box-shadow: 0 0 0 3px rgba(31, 95, 174, 0.16), 0 8px 18px rgba(31, 95, 174, 0.12);
}

.pos-cashier-board .pos-search-entry > svg {
  width: 18px;
  height: 18px;
  justify-self: center;
  color: #315f9c;
}

.pos-cashier-board .pos-main-search #posItemSearch {
  min-height: 38px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 8px 8px 0;
}

.pos-cashier-board .pos-main-search #posItemSearch:focus {
  box-shadow: none !important;
  outline: none;
}

.pos-cashier-board .pos-main-search #posItemSearch::placeholder {
  color: #5d7087;
  opacity: 1;
}

.pos-cashier-board .pos-search-clear {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: 1px solid #cbd8ea;
  border-radius: 8px;
  background: #f8fbff;
  color: #385578;
  cursor: pointer;
}

.pos-cashier-board .pos-search-clear:hover,
.pos-cashier-board .pos-search-clear:focus-visible {
  border-color: #315f9c;
  background: #e8f1ff;
  color: #18355f;
}

.pos-cashier-board .pos-search-clear svg {
  width: 15px;
  height: 15px;
}

.pos-cashier-board.bill-focus-mode .pos-kiosk-input-row {
  position: sticky;
  top: 0;
  z-index: 42;
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  box-shadow: 0 10px 22px rgba(15, 43, 75, 0.08);
}
/* Device screen profiles: mobile counter, laptop counter and TV/kiosk display. */
@media (max-width: 900px) {
  body.pos-fullscreen-mode {
    overflow: auto;
    overscroll-behavior-y: contain;
  }

  body.pos-fullscreen-mode .workspace {
    height: auto;
    min-height: 100svh;
    padding: 6px;
    overflow: visible;
  }

  body.pos-fullscreen-mode .content-grid {
    display: block;
    height: auto;
  }

  body.pos-fullscreen-mode .pos-cashier-board.pos-fast-board {
    height: auto;
    min-height: 100svh;
    gap: 6px;
    overflow: visible;
  }

  .pos-cashier-board .pos-fast-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    min-height: 0;
  }

  .pos-cashier-board .pos-fast-topbar .pos-counter-meta,
  .pos-cashier-board .pos-fast-topbar .pos-counter-brand,
  .pos-cashier-board .pos-fast-topbar > .pos-kiosk-iconbar {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch;
  }

  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    display: flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 18px !important;
    transform: none !important;
  }

  .pos-cashier-board .pos-counter-brand img {
    width: 30px !important;
    height: 26px !important;
  }

  .pos-cashier-board .pos-fast-topbar > .pos-kiosk-iconbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .pos-cashier-board .pos-kiosk-iconbar .pos-icon-action {
    flex: 0 0 auto;
  }

  .pos-fast-shell.pos-kiosk-shell,
  .pos-fast-shell.pos-kiosk-shell.category-hidden,
  .pos-fast-shell.pos-kiosk-shell.category-mini {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    height: auto;
    overflow: visible;
  }

  .pos-panel-resizer {
    display: none;
  }

  .pos-category-rail,
  .pos-category-rail.mini {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
  }

  .pos-category-rail button,
  .pos-category-rail.mini button {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 42px;
  }

  .pos-kiosk-products,
  .pos-bill-dock,
  .panel.pos-fast-counter {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .pos-kiosk-input-row,
  .pos-fast-input-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pos-add-search {
    width: 100%;
    min-height: 44px;
  }

  .product-palette.pos-fast-products,
  .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  body.pos-fullscreen-mode .product-palette.pos-fast-products button,
  .pos-kiosk-products .product-palette.pos-fast-products button {
    height: auto;
    max-height: none;
    min-height: 104px;
    padding: 8px;
  }

  .pos-fast-bill-head,
  .pos-payment-flow,
  .pos-checkout-summary,
  .pos-cash-tender-metrics,
  .pos-cash-tender-entry,
  .pos-cash-note-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .pos-cashier-board .pos-bill-dock .pos-payment-mode-group,
  .pos-cashier-board .pos-bill-dock .pos-bill-action-group,
  .pos-payment-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-payment-strip {
    gap: 7px;
    padding: 8px;
  }

  .pos-bill-dock .pos-approval-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 901px) and (max-width: 1599px) {
  body:not(.pos-fullscreen-mode):not(.kds-display-mode) .workspace {
    padding: 18px;
  }

  body:not(.pos-fullscreen-mode):not(.kds-display-mode) .topbar {
    margin: -18px -18px 14px;
    padding: 14px 18px;
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell {
    grid-template-columns: 108px 6px minmax(420px, 1fr) 6px minmax(360px, 31vw) !important;
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    grid-template-columns: 72px 6px minmax(420px, 1fr) 6px minmax(360px, 31vw) !important;
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
    grid-template-columns: minmax(460px, 1fr) 6px minmax(360px, 32vw) !important;
  }

  body.pos-fullscreen-mode .product-palette.pos-fast-products,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  }

  body.pos-fullscreen-mode .product-palette.pos-fast-products button {
    min-height: 126px;
  }

  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    font-size: 31px !important;
  }
}

@media (min-width: 1600px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .workspace {
    padding: 28px;
  }

  .topbar {
    margin: -28px -28px 18px;
    padding: 18px 28px;
  }

  .topbar h1 {
    font-size: 32px;
  }

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

  .content-grid > .wide,
  .panel.wide,
  .metrics-row {
    grid-column: 1 / -1;
  }

  .metrics-row,
  .dashboard-tile-grid,
  .dashboard-kpi-panel .dashboard-tile-grid,
  .dashboard-kpi-panel .dashboard-tile-grid.dashboard-core-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.pos-fullscreen-mode .workspace {
    padding: 10px;
  }

  body.pos-fullscreen-mode .pos-cashier-board.pos-fast-board {
    height: calc(100vh - 20px);
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell {
    grid-template-columns: 148px 8px minmax(760px, 1fr) 8px minmax(460px, 27vw) !important;
    gap: 6px;
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-mini {
    grid-template-columns: 86px 8px minmax(760px, 1fr) 8px minmax(460px, 27vw) !important;
  }

  body.pos-fullscreen-mode .pos-fast-shell.pos-kiosk-shell.category-hidden {
    grid-template-columns: minmax(900px, 1fr) 8px minmax(460px, 27vw) !important;
  }

  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-topbar {
    min-height: 78px;
  }

  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    font-size: 40px !important;
  }

  body.pos-fullscreen-mode .product-palette.pos-fast-products,
  body.pos-fullscreen-mode .pos-kiosk-products .product-palette.pos-fast-products {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  }

  body.pos-fullscreen-mode .product-palette.pos-fast-products button {
    height: 150px;
    max-height: 150px;
    min-height: 150px;
  }

  .kds-station-ticket-wall,
  .logistics-display-wall {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
  }

  .kds-station-title strong {
    font-size: 34px;
  }

  .kds-station-title span,
  .kds-station-ticket header span,
  .kds-station-ticket-items small {
    font-size: 15px;
  }

  .kds-station-ticket header strong {
    font-size: 24px;
  }

  .kds-station-ticket-items span {
    font-size: 20px;
  }

  .kds-station-ticket footer button {
    min-height: 52px;
    font-size: 18px;
  }
}
/* POS layout guard against half-loaded or clipped billing screens */
.pos-cashier-board.pos-fast-board,
.pos-cashier-board .pos-fast-topbar,
.pos-cashier-board .pos-fast-shell.pos-kiosk-shell,
.pos-cashier-board .pos-kiosk-products,
.pos-cashier-board .pos-bill-dock {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pos-cashier-board.pos-fast-board {
  overflow-x: hidden;
}

.pos-cashier-board .pos-fast-topbar {
  position: relative;
  z-index: 120;
  overflow: visible;
}

.pos-cashier-board .pos-fast-shell.pos-kiosk-shell {
  position: relative;
  z-index: 1;
}

.pos-cashier-board .pos-counter-meta,
.pos-cashier-board .pos-counter-meta strong,
.pos-cashier-board .pos-counter-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-cashier-board .pos-fast-topbar .pos-counter-brand {
  min-width: min(560px, 44vw) !important;
  max-width: min(620px, 48vw) !important;
  padding-inline: clamp(8px, 1.4vw, 18px) !important;
  font-size: clamp(24px, 2.35vw, 38px) !important;
  transform: none !important;
}

.pos-cashier-board .pos-counter-brand-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: none !important;
}

@media (max-width: 1180px) {
  .pos-cashier-board .pos-fast-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .pos-cashier-board .pos-fast-topbar .pos-counter-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(18px, 2.8vw, 28px) !important;
  }
}

@media (max-width: 1080px) {
  .pos-cashier-board .pos-fast-shell.pos-kiosk-shell,
  .pos-cashier-board .pos-fast-shell.pos-kiosk-shell.category-hidden,
  .pos-cashier-board .pos-fast-shell.pos-kiosk-shell.category-mini,
  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-shell.pos-kiosk-shell,
  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-shell.pos-kiosk-shell.category-hidden,
  body.pos-fullscreen-mode .pos-cashier-board .pos-fast-shell.pos-kiosk-shell.category-mini {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .pos-cashier-board .pos-panel-resizer {
    display: none !important;
  }

  .pos-cashier-board .pos-category-rail {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(104px, 1fr) !important;
    grid-auto-rows: minmax(42px, auto) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* Compact notification popover with timestamps */
.notification-popover {
  width: min(520px, calc(100vw - 24px));
  gap: 8px;
  padding: 10px;
}

.notification-head {
  align-items: flex-start;
}

.notification-all-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.notification-all-link:hover {
  color: var(--brand);
}

.notification-count-line {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.notification-count-line span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 850;
}

.notification-list {
  gap: 8px;
  max-height: min(470px, calc(100vh - 190px));
  padding-right: 4px;
}

.notification-list .notification-alert-row.notification-alert-compact {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid #c7d8ea;
  border-radius: 7px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #eef8ff 0%, #e7f3fb 100%);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 6px 14px rgba(31, 41, 51, 0.08);
  cursor: pointer;
}

.notification-list .notification-alert-row.notification-alert-compact:hover,
.notification-list .notification-alert-row.notification-alert-compact:focus-visible {
  border-color: #80a9dc;
  background: linear-gradient(180deg, #f5fbff 0%, #eaf5ff 100%);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 167, 0.14), 0 8px 18px rgba(31, 41, 51, 0.1);
}

.notification-alert-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(37, 99, 167, 0.08);
  color: #53708e;
}

.notification-alert-icon svg {
  width: 14px;
  height: 14px;
}

.notification-alert-compact .notification-alert-copy {
  gap: 2px;
}

.notification-alert-compact .notification-alert-title {
  color: #27374a;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.25;
  white-space: normal;
}

.notification-alert-compact .notification-alert-meta,
.notification-alert-compact .notification-alert-time,
.notification-alert-compact .notification-alert-reason {
  color: #5d7087;
  font-size: 11px;
  line-height: 1.25;
}

.notification-alert-compact .notification-alert-meta,
.notification-alert-compact .notification-alert-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-alert-compact .notification-alert-reason {
  -webkit-line-clamp: 1;
}

.notification-alert-side {
  display: grid;
  gap: 8px;
  justify-items: end;
  align-items: center;
  min-width: 34px;
}

.notification-alert-age {
  color: #5d7087;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.notification-alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #23972f;
  box-shadow: 0 0 0 3px rgba(35, 151, 47, 0.12);
}

.notification-popover-actions {
  justify-content: flex-end;
  padding-top: 6px;
}

.notification-popover-actions .mini-action {
  min-height: 32px;
  padding-inline: 12px;
}

@media (max-width: 560px) {
  .notification-list .notification-alert-row.notification-alert-compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .notification-alert-icon {
    display: none;
  }
}
/* POS cash handover denominations */
.cash-denomination-panel {
  display: grid;
  gap: 10px;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid #bad2ee;
  border-radius: 13px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.cash-denomination-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cash-denomination-head strong,
.cash-denomination-head span,
.cash-denomination-head small,
.cash-denomination-head b {
  display: block;
}

.cash-denomination-head strong {
  color: #14243a;
  font-size: 13px;
  font-weight: 900;
}

.cash-denomination-head span {
  margin-top: 2px;
  color: #5f6f84;
  font-size: 12px;
  font-weight: 700;
}

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

.cash-denomination-summary {
  min-width: 128px;
  padding: 7px 10px;
  border: 1px solid #cfe0f3;
  border-radius: 10px;
  background: #ffffff;
  text-align: right;
}

.cash-denomination-head small {
  margin-top: 2px;
  color: #667485;
  font-size: 11px;
}

.cash-denomination-head b {
  color: #174d86;
  font-size: 16px;
  font-weight: 950;
}

.cash-denomination-clear {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
}

#cashDenominationVariance.warning {
  color: #a16207;
  font-weight: 900;
}

.cash-denomination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}

.cash-denomination-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "value"
    "input"
    "amount";
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 92px;
  padding: 8px;
  border: 1px solid #d2dfed;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cash-denomination-card:focus-within {
  border-color: #7da7da;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.cash-denomination-card span {
  grid-area: value;
  color: #1f3552;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.cash-denomination-card input {
  grid-area: input;
  width: 100%;
  min-width: 0;
  min-height: 34px !important;
  padding: 4px 6px !important;
  border: 1px solid #b9c9dd !important;
  border-radius: 8px !important;
  background: #f8fbff;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  appearance: textfield;
}

.cash-denomination-card input::-webkit-outer-spin-button,
.cash-denomination-card input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.cash-denomination-card small {
  grid-area: amount;
  min-height: 14px;
  color: #7b8795;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.cash-denomination-card small.active {
  color: #0f766e;
}

@media (max-width: 920px) {
  .cash-denomination-head,
  .cash-denomination-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cash-denomination-summary {
    min-width: 0;
    text-align: left;
  }
}

.pos-orders-dialog-stack {
  display: grid;
  gap: 12px;
}

.pos-salesperson-select-field label {
  color: #667485;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.pos-salesperson-select-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd8e6;
  border-radius: 9px;
  background: #ffffff;
  color: #1f2a37;
  font-weight: 900;
}

.pos-kiosk-input-row .pos-salesperson-select-field > label {
  display: none;
}

@media (max-width: 920px) {
  .cash-denomination-grid {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  }
}

@media (max-width: 520px) {
  .cash-denomination-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.role-menu-tree-row {
  align-items: center;
}

.role-menu-tree-row.submenu-expanded {
  align-items: start;
}

.role-menu-expand-trigger,
.role-menu-static-name {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
}

.role-menu-expand-trigger,
.role-menu-static-name {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.role-menu-expand-trigger {
  cursor: pointer;
}

.role-menu-expand-icon,
.role-menu-expand-spacer {
  width: 14px;
  height: 14px;
}

.role-menu-expand-icon::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 2px 0 0 1px;
  border-right: 2px solid #50657d;
  border-bottom: 2px solid #50657d;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.role-menu-expand-trigger[aria-expanded="true"] .role-menu-expand-icon::before {
  transform: rotate(45deg);
}

.role-menu-name-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.role-menu-expand-trigger:hover strong,
.role-menu-expand-trigger:focus-visible strong,
.role-menu-detail-button:hover,
.role-menu-detail-button:focus-visible {
  color: var(--primary);
}

.role-menu-expand-trigger:focus-visible,
.role-menu-detail-button:focus-visible {
  outline: 2px solid rgba(37, 99, 167, .28);
  outline-offset: 3px;
  border-radius: 6px;
}

.role-menu-detail-button {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.role-menu-subtree {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 8px 0 6px 32px;
}

.role-menu-subtree[hidden] {
  display: none;
}

.role-menu-subtree .role-tree-branch {
  max-width: 820px;
}

.role-menu-subtree.menu-off {
  opacity: .72;
}

@media (max-width: 900px) {
  .role-menu-subtree {
    padding-left: 10px;
  }
}

/* Owner dashboard clarity pass */
.owner-dashboard-partition {
  gap: 14px;
  padding: 16px;
}

.owner-dashboard-equation-partition {
  background: #fbfdff;
}

.owner-dashboard-equation-partition .owner-store-panel,
.owner-dashboard-equation-partition .owner-store-equation-grid {
  gap: 10px;
}

.owner-dashboard-equation-partition .owner-store-equation-card {
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.owner-dashboard-equation-partition .owner-store-equation-card.sales {
  background: linear-gradient(180deg, #f1fdf7 0%, #ffffff 100%);
}

.owner-dashboard-equation-partition .owner-store-equation-card.expenses {
  background: linear-gradient(180deg, #fff4f4 0%, #ffffff 100%);
}

.owner-dashboard-equation-partition .owner-store-equation-head {
  margin-bottom: 9px;
}

.owner-dashboard-equation-partition .owner-store-equation-head strong {
  font-size: 0.9rem;
}

.owner-dashboard-equation-partition .owner-store-equation-head span {
  color: #5b6b82;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.owner-dashboard-equation-partition .owner-store-equation-list {
  align-items: center;
  gap: 6px;
}

.owner-dashboard-equation-partition .owner-store-equation-item,
.owner-dashboard-equation-partition .owner-store-total-card {
  align-content: stretch;
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  flex: 1 1 72px;
  gap: 4px;
  min-width: 62px;
  padding: 6px;
  text-align: center;
}

.owner-dashboard-equation-partition .owner-store-total-card {
  border-color: transparent;
  flex: 1.25 1 110px;
  min-width: 94px;
  padding: 7px;
}

.owner-dashboard-equation-partition .owner-store-equation-item strong,
.owner-dashboard-equation-partition .owner-store-total-card span {
  color: #162033;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-dashboard-equation-partition .owner-store-equation-item b,
.owner-dashboard-equation-partition .owner-store-total-card strong {
  border-radius: 7px;
  font-size: 14px;
  min-height: 34px;
  padding: 5px;
}

.owner-dashboard-equation-partition .owner-store-total-card strong {
  font-size: 18px;
  min-height: 42px;
}

.owner-dashboard-equation-partition .owner-store-equation-item span {
  color: #667485;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.1;
}

.owner-dashboard-equation-partition .owner-store-plus,
.owner-dashboard-equation-partition .owner-store-equals {
  color: #314155;
  flex: 0 0 auto;
  font-size: 16px;
  min-height: 34px;
  padding: 0;
}

.owner-sales-focus-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-sales-focus-row div,
.owner-raw-stock-summary-grid div {
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.owner-sales-focus-row span,
.owner-raw-stock-summary-grid span {
  color: #667485;
  font-size: 0.72rem;
  font-weight: 850;
}

.owner-sales-focus-row strong,
.owner-raw-stock-summary-grid strong {
  color: #111827;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.owner-sales-pie-layout {
  grid-template-columns: minmax(116px, 0.48fr) minmax(0, 1fr);
  gap: 12px;
}

.owner-sales-pie {
  width: min(150px, 100%);
}

.owner-sales-pie.empty {
  background: conic-gradient(#dbe3ee 0deg 360deg) !important;
}

.owner-sales-pie > div {
  width: 56%;
}

.owner-sales-pie strong {
  font-size: 13px;
}

.owner-sales-legend-row {
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 8px;
}

.owner-order-calendar {
  gap: 5px;
}

.owner-calendar-day {
  background: #ffffff;
  min-height: 32px;
}

.owner-order-mini-list div,
.owner-raw-stock-list div {
  border-top-style: solid;
}

.owner-raw-stock-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(110px, 0.6fr);
  gap: 8px;
}

.owner-raw-stock-qty-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owner-raw-stock-qty-strip span {
  border: 1px solid #e1eaf4;
  border-radius: 999px;
  background: #f8fbff;
  color: #1f2937;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 6px 9px;
}

.owner-raw-stock-list div {
  padding-top: 8px;
}

.owner-raw-stock-list b {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .owner-sales-pie-layout {
    grid-template-columns: 1fr;
  }

  .owner-sales-pie {
    width: min(132px, 100%);
  }
}

@media (max-width: 760px) {
  .owner-sales-focus-row,
  .owner-raw-stock-summary-grid {
    grid-template-columns: 1fr;
  }

  .owner-dashboard-equation-partition .owner-store-equation-item,
  .owner-dashboard-equation-partition .owner-store-total-card {
    flex: 1 1 120px;
  }
}

/* Owner dashboard polish pass */
.owner-dashboard-v2.wide {
  gap: 16px;
}

.owner-dashboard-partition-box {
  gap: 12px;
  border: 1px solid #d7e5f3;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef4f9 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  overflow: visible;
}

.owner-dashboard-partition,
.owner-dashboard-partition:nth-child(2n),
.owner-dashboard-partition:nth-child(n+3) {
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  min-height: 314px;
  overflow: hidden;
}

.owner-dashboard-partition-head {
  align-items: center;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: 10px;
}

.owner-dashboard-partition-head strong {
  color: #0f172a;
  font-size: 1rem;
  letter-spacing: 0;
}

.owner-dashboard-partition-head span {
  border: 1px solid #dbe7f3;
  border-radius: 999px;
  background: #f7fbff;
  color: #50657d;
  font-size: 0.72rem;
  padding: 5px 8px;
  white-space: nowrap;
}

.owner-dashboard-equation-partition {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.owner-dashboard-equation-partition .owner-store-equation-grid {
  gap: 12px;
}

.owner-dashboard-equation-partition .owner-store-equation-card {
  border-color: #e6edf5;
  box-shadow: inset 4px 0 0 #cbd5e1;
}

.owner-dashboard-equation-partition .owner-store-equation-card.sales {
  box-shadow: inset 4px 0 0 #10b981;
}

.owner-dashboard-equation-partition .owner-store-equation-card.expenses {
  box-shadow: inset 4px 0 0 #ef4444;
}

.owner-dashboard-equation-partition .owner-store-equation-head {
  align-items: flex-start;
  border: 0;
  padding: 0;
}

.owner-dashboard-equation-partition .owner-store-equation-head strong {
  font-size: 0.92rem;
}

.owner-dashboard-equation-partition .owner-store-equation-head span {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #667485;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-dashboard-equation-partition .owner-store-equation-list {
  align-items: stretch;
}

.owner-dashboard-equation-partition .owner-store-equation-item {
  border-color: #e6edf5;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.owner-dashboard-equation-partition .owner-store-equation-item.sales b {
  background: #c9f5ee;
}

.owner-dashboard-equation-partition .owner-store-equation-item.expenses b {
  background: #ffe1e1;
}

.owner-dashboard-equation-partition .owner-store-equation-item strong {
  color: #0f172a;
}

.owner-dashboard-equation-partition .owner-store-total-card.sales {
  background: #047857;
  box-shadow: 0 10px 18px rgba(4, 120, 87, 0.22);
}

.owner-dashboard-equation-partition .owner-store-total-card.expenses {
  background: #b91c1c;
  box-shadow: 0 10px 18px rgba(185, 28, 28, 0.2);
}

.owner-dashboard-equation-partition .owner-store-total-card span,
.owner-dashboard-equation-partition .owner-store-total-card strong {
  color: #ffffff;
}

.owner-dashboard-equation-partition .owner-store-total-card strong {
  background: transparent;
  min-height: 34px;
  padding: 0;
}

.owner-dashboard-equation-partition .owner-store-plus,
.owner-dashboard-equation-partition .owner-store-equals {
  color: #64748b;
  font-weight: 950;
}

.owner-sales-pie-partition {
  background: radial-gradient(circle at top left, #f0fdf4 0, #ffffff 38%);
}

.owner-sales-focus-row div {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.owner-sales-focus-row div:first-child {
  border-color: rgba(4, 120, 87, 0.24);
}

.owner-sales-focus-row div:first-child strong {
  color: #047857;
}

.owner-sales-pie-layout {
  align-items: center;
}

.owner-sales-pie {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 14px 26px rgba(15, 23, 42, 0.1);
}

.owner-sales-legend {
  gap: 6px;
}

.owner-sales-legend-row {
  border-color: #e6edf5;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.035);
}

.owner-sales-legend-row strong {
  color: #0f172a;
}

.owner-order-calendar-partition {
  background: radial-gradient(circle at top left, #eff6ff 0, #ffffff 40%);
}

.owner-order-calendar > b {
  color: #64748b;
  font-size: 0.72rem;
}

.owner-calendar-day {
  border-color: #dbe7f3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.025);
}

.owner-calendar-day.today {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #2563eb, 0 4px 10px rgba(37, 99, 235, 0.1);
}

.owner-calendar-day.today strong {
  color: #1d4ed8;
}

.owner-calendar-day.has-orders {
  background: #ecfdf5;
}

.owner-order-mini-list > .muted,
.owner-raw-stock-list > .muted {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  display: block;
  font-weight: 850;
  padding: 12px;
}

.owner-raw-stock-partition {
  background: radial-gradient(circle at top left, #fff7ed 0, #ffffff 40%);
}

.owner-raw-stock-summary-grid div:first-child {
  border-color: rgba(217, 119, 6, 0.24);
}

.owner-raw-stock-summary-grid div:first-child strong {
  color: #b45309;
}

.owner-raw-stock-qty-strip span {
  border-color: #fde8c7;
  background: #fff7ed;
  color: #047857;
}

.owner-raw-stock-list div {
  border-color: #e6edf5;
}

.owner-raw-stock-list strong {
  color: #0f172a;
}

.owner-raw-stock-list b {
  background: #eef4ff;
  color: #1d4ed8;
}

@media (max-width: 1180px) {
  .owner-dashboard-partition,
  .owner-dashboard-partition:nth-child(2n),
  .owner-dashboard-partition:nth-child(n+3) {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .owner-dashboard-partition-box {
    gap: 10px;
    padding: 10px;
  }

  .owner-dashboard-partition,
  .owner-dashboard-partition:nth-child(2n),
  .owner-dashboard-partition:nth-child(n+3) {
    min-height: 0;
  }

  .owner-dashboard-partition-head {
    align-items: flex-start;
  }

  .owner-dashboard-partition-head span {
    white-space: normal;
  }
}

/* Owner order calendar selection */
button.owner-calendar-day {
  appearance: none;
  border: 1px solid #dbe7f3;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button.owner-calendar-day:hover,
button.owner-calendar-day:focus-visible {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.owner-calendar-day.selected,
.owner-calendar-day.selected.today {
  border-color: #1d4ed8;
  background: #dbeafe;
  box-shadow: inset 0 0 0 2px #2563eb, 0 7px 14px rgba(37, 99, 235, 0.18);
}

.owner-calendar-day.selected strong,
.owner-calendar-day.selected.today strong {
  color: #1e3a8a;
}

.owner-order-selected-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #f8fbff;
  padding: 8px 10px;
}

.owner-order-selected-head strong {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
}

.owner-order-selected-head span {
  border-radius: 999px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Owner dashboard compact date filter */
.owner-dashboard-filterbar {
  gap: 8px;
}

.owner-dashboard-date-control {
  gap: 2px;
  min-width: min(180px, 100%);
}

.owner-dashboard-date-control > span {
  font-size: 9px;
  line-height: 1;
}

.owner-dashboard-filterbar .dashboard-date-trigger {
  gap: 8px;
  min-height: 31px;
  border-radius: 7px;
  padding: 0 8px 0 10px;
  font-size: 11px;
  font-weight: 850;
  box-shadow: none;
}

.owner-dashboard-filterbar .dashboard-date-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-dashboard-filterbar .dashboard-date-chevron {
  width: 18px;
  height: 18px;
}

.owner-dashboard-filterbar .dashboard-date-chevron svg {
  width: 12px;
  height: 12px;
}

.owner-dashboard-go {
  min-width: 54px;
  min-height: 31px;
  border-radius: 0;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 850;
}

.owner-dashboard-filterbar .dashboard-date-menu {
  width: min(260px, calc(100vw - 40px));
  padding: 6px;
}

.owner-dashboard-filterbar .dashboard-date-menu button {
  min-height: 29px;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11px;
}

/* Owner dashboard space recovery */
.content-grid > .owner-dashboard-v2.wide {
  margin-top: -12px;
}

.owner-dashboard-v2.wide {
  gap: 8px;
}

.owner-dashboard-v2.wide > .owner-dashboard-filterbar {
  min-height: 0;
  margin: 0 0 -4px;
  padding: 0;
}

.owner-dashboard-v2.wide > .owner-dashboard-partition-box {
  margin-top: 0;
}

@media (min-width: 761px) {
  .owner-dashboard-v2.wide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
  }

  .owner-dashboard-v2.wide > .owner-dashboard-filterbar {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .owner-dashboard-v2.wide > .owner-dashboard-partition-box {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .content-grid > .owner-dashboard-v2.wide {
    margin-top: 0;
  }
}
/* Owner order calendar month navigation */
.owner-order-calendar-head {
  align-items: center;
  gap: 10px;
}

.owner-order-calendar-head > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-order-calendar-head > div:first-child em {
  color: #64748b;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.owner-calendar-month-nav {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.owner-calendar-month-nav button {
  appearance: none;
  align-items: center;
  background: #eaf2ff;
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  color: #1d4ed8;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 950;
  height: 25px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 25px;
}

.owner-calendar-month-nav button:hover,
.owner-calendar-month-nav button:focus-visible {
  background: #dbeafe;
  border-color: #2563eb;
  outline: none;
}

.owner-calendar-month-nav span {
  border-color: #dbeafe;
  background: #f8fbff;
  color: #1e3a8a;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owner-order-calendar-summary {
  align-items: center;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 8px 10px;
}

.owner-order-calendar-summary span {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-order-calendar-summary strong {
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 950;
  white-space: nowrap;
}

.owner-order-calendar-summary em {
  color: #0f172a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.owner-order-mini-list strong {
  display: grid;
  gap: 2px;
}

.owner-order-mini-list strong small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .owner-order-calendar-head {
    align-items: flex-start;
  }

  .owner-calendar-month-nav {
    width: 100%;
  }

  .owner-calendar-month-nav span {
    flex: 1;
    max-width: none;
    text-align: center;
  }

  .owner-order-calendar-summary {
    grid-template-columns: 1fr;
  }
}

/* Owner calendar selected-day order popover */
.owner-order-calendar-partition,
.owner-dashboard-partition.owner-order-calendar-partition {
  overflow: visible;
}

.owner-order-calendar {
  overflow: visible;
  position: relative;
}

.owner-calendar-day {
  overflow: visible;
}

.owner-calendar-day.selected {
  z-index: 40;
}

.owner-calendar-day-popover {
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
  color: #0f172a;
  display: grid;
  gap: 6px;
  left: 50%;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: min(320px, 72vw);
  z-index: 70;
}

.owner-calendar-day-popover.up {
  bottom: calc(100% + 8px);
  top: auto;
}

.owner-calendar-day-popover::before {
  border-bottom: 7px solid #ffffff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
}

.owner-calendar-day-popover.up::before {
  border-bottom: 0;
  border-top: 7px solid #ffffff;
  bottom: -7px;
  top: auto;
}

.owner-calendar-popover-head,
.owner-calendar-popover-row {
  align-items: center;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.owner-calendar-popover-head {
  border-bottom: 1px solid #e6edf5;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 6px;
}

.owner-calendar-popover-head strong,
.owner-calendar-day .owner-calendar-popover-head strong {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  min-width: 0;
}

.owner-calendar-popover-head b,
.owner-calendar-popover-row b {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.owner-calendar-popover-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.owner-calendar-popover-row > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-popover-row strong,
.owner-calendar-day .owner-calendar-popover-row strong {
  color: #0f172a;
  display: grid;
  font-size: 11px;
  font-weight: 900;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-popover-row strong small {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-popover-more {
  border-top: 1px dashed #dbe7f3;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  padding-top: 5px;
}

@media (max-width: 760px) {
  .owner-calendar-day-popover {
    left: auto;
    right: -6px;
    transform: none;
    width: min(280px, calc(100vw - 48px));
  }

  .owner-calendar-day-popover::before,
  .owner-calendar-day-popover.up::before {
    left: auto;
    right: 18px;
    transform: none;
  }
}
.owner-calendar-day-popover.left {
  left: -6px;
  transform: none;
}

.owner-calendar-day-popover.left::before {
  left: 18px;
  transform: none;
}

.owner-calendar-day-popover.right {
  left: auto;
  right: -6px;
  transform: none;
}

.owner-calendar-day-popover.right::before {
  left: auto;
  right: 18px;
  transform: none;
}
/* Owner calendar non-blocking hover details and holidays */
.owner-order-calendar-shell {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.12fr) minmax(220px, 0.88fr);
  min-width: 0;
}

.owner-order-calendar-wrap {
  min-width: 0;
}

.owner-order-calendar {
  gap: 5px;
  overflow: visible;
}

.owner-order-calendar > b {
  color: #475569;
  font-size: 10px;
  letter-spacing: 0;
  min-height: 16px;
}

.owner-calendar-day {
  align-content: center;
  gap: 2px;
  min-height: 44px;
  overflow: hidden;
  padding: 5px 4px;
}

.owner-calendar-day strong {
  line-height: 1;
}

.owner-calendar-day small {
  color: #047857;
  display: block;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-day.weekend:not(.selected) {
  background: #f8fbff;
}

.owner-calendar-day.holiday:not(.selected) {
  background: #ecfdf5;
  border-color: #86efac;
}

.owner-calendar-day.holiday.has-orders:not(.selected) {
  background: linear-gradient(180deg, #dcfce7 0%, #ecfdf5 100%);
  border-color: #22c55e;
}

.owner-calendar-day.has-orders em {
  background: #1d4ed8;
}

.owner-calendar-day-popover {
  display: none !important;
}

.owner-calendar-details-panel {
  min-width: 0;
}

.owner-calendar-detail-card {
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  display: none;
  gap: 8px;
  min-height: 236px;
  padding: 11px;
}

.owner-calendar-detail-card.default {
  display: grid;
}

.owner-calendar-detail-head {
  align-items: start;
  display: grid;
  gap: 4px 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.owner-calendar-detail-head span {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 850;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-detail-head strong {
  color: #1d4ed8;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.05;
}

.owner-calendar-detail-head em {
  color: #0f172a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  justify-self: end;
  white-space: nowrap;
}


.owner-calendar-detail-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.owner-calendar-detail-row {
  align-items: center;
  border-top: 1px solid #e6edf5;
  display: grid;
  gap: 7px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-width: 0;
  padding-top: 6px;
}

.owner-calendar-detail-row > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-detail-row strong {
  color: #0f172a;
  display: grid;
  font-size: 11px;
  font-weight: 900;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-detail-row strong small {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-calendar-detail-row b {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.owner-calendar-detail-empty,
.owner-calendar-detail-more {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 850;
  padding: 10px;
}

.owner-calendar-detail-more {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 1180px) {
  .owner-order-calendar-shell {
    grid-template-columns: 1fr;
  }

  .owner-calendar-detail-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .owner-calendar-day {
    min-height: 40px;
  }

  .owner-calendar-day small {
    font-size: 8px;
  }
}
/* Owner dashboard last-seven-days sales chart */
.owner-weekly-sales-partition {
  background: radial-gradient(circle at top left, #f0fdf4 0, #ffffff 42%);
}


.owner-weekly-sales-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-weekly-sales-head em {
  color: #64748b;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.1;
}.owner-weekly-sales-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-weekly-sales-summary div {
  border: 1px solid #d9f4e8;
  border-radius: 8px;
  background: #f8fffb;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
}

.owner-weekly-sales-summary span,
.owner-weekly-sales-foot span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.owner-weekly-sales-summary strong {
  color: #047857;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.owner-weekly-sales-chart {
  align-items: end;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 168px;
}

.owner-weekly-sales-bar {
  align-items: center;
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.owner-weekly-sales-bar > span {
  color: #475569;
  display: grid;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 2px;
  line-height: 1;
}

.owner-weekly-sales-bar > span b {
  font: inherit;
}

.owner-weekly-sales-bar > span small {
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
}

.owner-weekly-sales-bar div {
  align-items: end;
  background: linear-gradient(180deg, #f8fafc 0%, #eef7f2 100%);
  border: 1px solid #d9f4e8;
  border-radius: 8px;
  display: flex;
  height: 98px;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  width: 100%;
}

.owner-weekly-sales-bar i {
  background: linear-gradient(180deg, #34d399 0%, #047857 100%);
  border-radius: 6px 6px 3px 3px;
  display: block;
  min-height: 4px;
  width: 100%;
}

.owner-weekly-sales-bar.best div {
  border-color: #10b981;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18), 0 8px 14px rgba(4, 120, 87, 0.12);
}

.owner-weekly-sales-bar strong {
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-weekly-sales-bar em {
  color: #64748b;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-weekly-sales-foot {
  align-items: center;
  border: 1px dashed #b7ead5;
  border-radius: 8px;
  background: #f8fffb;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 10px;
}

.owner-weekly-sales-foot strong {
  color: #047857;
  font-size: 0.82rem;
  font-weight: 950;
  text-align: right;
}

@media (max-width: 760px) {
  .owner-weekly-sales-summary {
    grid-template-columns: 1fr;
  }

  .owner-weekly-sales-chart {
    gap: 5px;
    min-height: 150px;
  }

  .owner-weekly-sales-bar div {
    height: 82px;
  }
}

/* Owner dashboard Stitch layout preview applied to live ERP owner dashboard */
.owner-stitch-dashboard {
  display: grid;
  gap: 16px;
}

.content-grid > .owner-stitch-dashboard.wide {
  margin-top: -6px;
}

.owner-stitch-hero {
  align-items: center;
  background: radial-gradient(circle at 72% 0%, rgba(125, 160, 255, 0.48), transparent 38%), linear-gradient(135deg, #17305f 0%, #214ca3 52%, #4f74ff 100%);
  border: 1px solid rgba(191, 219, 254, 0.42);
  border-radius: 18px;
  box-shadow: 0 22px 46px rgba(37, 99, 235, 0.2);
  color: #ffffff;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: visible;
  padding: 20px 22px;
}

.owner-stitch-hero-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.owner-stitch-hero-copy span {
  color: #bfdbfe;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owner-stitch-hero-copy h2 {
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.owner-stitch-hero-copy p {
  color: #dbeafe;
  font-size: 0.9rem;
  font-weight: 820;
  margin: 0;
}

.owner-stitch-hero-actions {
  min-width: min(320px, 100%);
  position: relative;
  z-index: 5;
}

.owner-stitch-hero.owner-stitch-hero-controls-only {
  grid-template-columns: 1fr;
  justify-items: end;
  min-height: 58px;
  padding: 12px 16px;
}

.owner-stitch-hero.owner-stitch-hero-controls-only .owner-stitch-hero-actions {
  justify-self: end;
}
.owner-stitch-hero .owner-dashboard-filterbar {
  align-items: end;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
}

.owner-stitch-hero .owner-dashboard-date-control > span {
  color: #dbeafe;
}

.owner-stitch-hero .dashboard-date-trigger {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.5);
  color: #172554;
}

.owner-stitch-hero .dashboard-date-menu {
  color: #0f172a;
}

.owner-stitch-hero .owner-dashboard-go {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  color: #1d4ed8;
}

.owner-stitch-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-stitch-kpi-card {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #dce7f2;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 5px 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 112px;
  padding: 17px;
}

.owner-stitch-kpi-card i {
  align-items: center;
  border-radius: 14px;
  display: inline-flex;
  grid-row: 1 / 4;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.owner-stitch-kpi-card svg {
  fill: none;
  height: 23px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
  width: 23px;
}

.owner-stitch-kpi-card span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owner-stitch-kpi-card strong {
  color: #0f172a;
  font-size: clamp(1.25rem, 2vw, 2.2rem);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.owner-stitch-kpi-card small {
  color: #52657c;
  font-size: 0.78rem;
  font-weight: 820;
}

.owner-stitch-kpi-card.sales {
  border-color: #bbf7d0;
}

.owner-stitch-kpi-card.sales i,
.owner-stitch-kpi-card.net i,
.owner-stitch-kpi-card.store i {
  background: #dcfce7;
  color: #16a34a;
}

.owner-stitch-kpi-card.sales strong,
.owner-stitch-kpi-card.net strong,
.owner-stitch-kpi-card.store strong {
  color: #047857;
}

.owner-stitch-kpi-card.expense {
  border-color: #fecaca;
}

.owner-stitch-kpi-card.expense i,
.owner-stitch-kpi-card.alert i {
  background: #fee2e2;
  color: #dc2626;
}

.owner-stitch-kpi-card.expense strong,
.owner-stitch-kpi-card.alert strong {
  color: #dc2626;
}

.owner-stitch-dashboard .owner-dashboard-partition-box.owner-stitch-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  overflow: visible;
  padding: 0;
}

.owner-stitch-dashboard .owner-dashboard-partition,
.owner-stitch-dashboard .owner-dashboard-partition:nth-child(2n),
.owner-stitch-dashboard .owner-dashboard-partition:nth-child(n+3) {
  border: 1px solid #dce7f2;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  min-height: 0;
  overflow: visible;
  padding: 16px;
}

.owner-stitch-store-section {
  grid-column: 1 / -1;
}

.owner-stitch-dashboard .owner-sales-pie-partition {
  grid-column: 8 / -1;
  grid-row: 2;
}

.owner-stitch-dashboard .owner-order-calendar-partition {
  grid-column: 1 / 8;
  grid-row: 2 / span 2;
}

.owner-stitch-dashboard .owner-weekly-sales-partition {
  grid-column: 8 / -1;
  grid-row: 3;
}

.owner-stitch-dashboard .owner-store-equation-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-stitch-dashboard .owner-store-equation-card {
  border-radius: 14px;
  padding: 16px;
}

.owner-stitch-dashboard .owner-store-equation-card.sales {
  background: radial-gradient(circle at top left, #ecfdf5 0, #ffffff 44%);
  border-top: 4px solid #10b981;
}

.owner-stitch-dashboard .owner-store-equation-card.expenses {
  background: radial-gradient(circle at top left, #fff1f2 0, #ffffff 44%);
  border-top: 4px solid #ef4444;
}

.owner-stitch-dashboard .owner-store-equation-head strong {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owner-stitch-dashboard .owner-store-equation-list {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.owner-stitch-dashboard .owner-store-equation-item,
.owner-stitch-dashboard .owner-store-total-card {
  border: 1px solid #e6edf5;
  border-radius: 12px;
  flex: none;
  min-width: 0;
  padding: 10px;
}

.owner-stitch-dashboard .owner-store-equation-item {
  background: rgba(248, 250, 252, 0.72);
}

.owner-stitch-dashboard .owner-store-total-card {
  justify-content: center;
}

.owner-stitch-dashboard .owner-store-equation-item b,
.owner-stitch-dashboard .owner-store-total-card strong {
  border-radius: 10px;
  min-height: 44px;
}

.owner-stitch-dashboard .owner-store-total-card strong {
  font-size: clamp(1.1rem, 1.9vw, 1.8rem);
  min-height: 68px;
}

.owner-stitch-dashboard .owner-sales-pie-partition {
  background: radial-gradient(circle at top left, #f0fdf4 0, #ffffff 42%);
}

.owner-stitch-dashboard .owner-order-calendar-partition {
  background: radial-gradient(circle at top left, #eff6ff 0, #ffffff 42%);
}

.owner-stitch-dashboard .owner-weekly-sales-partition {
  background: radial-gradient(circle at top left, #eef2ff 0, #ffffff 42%);
}

.owner-stitch-dashboard .owner-sales-pie-layout {
  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.25fr);
}

.owner-stitch-dashboard .owner-sales-pie {
  width: min(170px, 100%);
}

.owner-stitch-dashboard .owner-sales-legend-row,
.owner-stitch-dashboard .owner-weekly-sales-summary div,
.owner-stitch-dashboard .owner-calendar-detail-card {
  border-radius: 12px;
}

.owner-stitch-dashboard .owner-order-calendar-shell {
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
}

.owner-stitch-dashboard .owner-calendar-day {
  border-radius: 10px;
  min-height: 45px;
}

.owner-stitch-dashboard .owner-weekly-sales-chart {
  min-height: 145px;
}

.owner-stitch-dashboard .owner-weekly-sales-bar div {
  height: 84px;
}

@media (max-width: 1280px) {
  .owner-stitch-dashboard .owner-store-equation-grid,
  .owner-stitch-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-stitch-dashboard .owner-dashboard-partition-box.owner-stitch-grid {
    grid-template-columns: 1fr;
  }

  .owner-stitch-store-section,
  .owner-stitch-dashboard .owner-sales-pie-partition,
  .owner-stitch-dashboard .owner-order-calendar-partition,
  .owner-stitch-dashboard .owner-weekly-sales-partition {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  .owner-stitch-hero {
    grid-template-columns: 1fr;
  }

  .owner-stitch-hero-actions,
  .owner-stitch-hero .owner-dashboard-date-control,
  .owner-stitch-hero .owner-dashboard-go {
    width: 100%;
  }

  .owner-stitch-hero .owner-dashboard-filterbar {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-stitch-dashboard .owner-store-equation-grid,
  .owner-stitch-kpi-grid,
  .owner-stitch-dashboard .owner-order-calendar-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .owner-stitch-hero {
    border-radius: 14px;
    padding: 16px;
  }

  .owner-stitch-kpi-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .owner-stitch-kpi-card i {
    grid-row: 1 / 4;
  }

  .owner-stitch-dashboard .owner-store-equation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-stitch-dashboard .owner-store-total-card {
    grid-column: 1 / -1;
  }
}

/* Keep the Stitch owner dashboard out of the previous two-column owner shell grid. */
.owner-dashboard-v2.owner-stitch-dashboard.wide {
  gap: 16px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.owner-dashboard-v2.owner-stitch-dashboard.wide > .owner-stitch-hero,
.owner-dashboard-v2.owner-stitch-dashboard.wide > .owner-stitch-kpi-grid,
.owner-dashboard-v2.owner-stitch-dashboard.wide > .owner-dashboard-partition-box {
  grid-column: 1;
  grid-row: auto;
}

/* Match the approved Stitch preview font stack on the live owner dashboard. */
.owner-stitch-dashboard,
.owner-stitch-dashboard button,
.owner-stitch-dashboard input,
.owner-stitch-dashboard select,
.owner-stitch-dashboard textarea {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

.owner-stitch-dashboard .owner-stitch-hero-copy h2,
.owner-stitch-dashboard .owner-stitch-kpi-card strong,
.owner-stitch-dashboard .owner-store-equation-head strong,
.owner-stitch-dashboard .owner-dashboard-partition-head strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

/* Owner dashboard full Stitch shell skin: match the approved preview more closely. */
.app-shell:has(.owner-stitch-dashboard) {
  --brand: #5b3ee5;
  --brand-strong: #4338ca;
  --brand-tint: #eef2ff;
  --line: #dbe3ef;
  --page: #f4f7fb;
  --surface-soft: #f8fafc;
  grid-template-columns: 252px minmax(0, 1fr);
  background: #f4f7fb;
}

.app-shell:has(.owner-stitch-dashboard),
.app-shell:has(.owner-stitch-dashboard) button,
.app-shell:has(.owner-stitch-dashboard) input,
.app-shell:has(.owner-stitch-dashboard) select,
.app-shell:has(.owner-stitch-dashboard) textarea {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

.app-shell:has(.owner-stitch-dashboard) .sidebar {
  gap: 20px;
  padding: 26px 18px 18px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: none;
}

.app-shell:has(.owner-stitch-dashboard) .brand {
  gap: 12px;
  min-height: 46px;
}

.app-shell:has(.owner-stitch-dashboard) .brand-mark {
  background: linear-gradient(135deg, #7057f3 0%, #4f46e5 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.22);
  height: 44px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 44px;
}

.app-shell:has(.owner-stitch-dashboard) .brand-mark img {
  display: none;
}

.app-shell:has(.owner-stitch-dashboard) .brand-mark::after {
  color: #ffffff;
  content: "SRK";
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

.app-shell:has(.owner-stitch-dashboard) .brand strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

.app-shell:has(.owner-stitch-dashboard) .brand span {
  color: #4f46e5;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-shell:has(.owner-stitch-dashboard) .sidebar-toggle,
.app-shell:has(.owner-stitch-dashboard) .sidebar-environment-slot {
  display: none;
}

.app-shell:has(.owner-stitch-dashboard) .nav-list {
  gap: 7px;
}

.app-shell:has(.owner-stitch-dashboard) .nav-list > .nav-group > button,
.app-shell:has(.owner-stitch-dashboard) .nav-link-button {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 40px;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

.app-shell:has(.owner-stitch-dashboard) .nav-list > .nav-group > button svg,
.app-shell:has(.owner-stitch-dashboard) .nav-link-button svg {
  height: 18px;
  stroke-width: 1.9;
  width: 18px;
}

.app-shell:has(.owner-stitch-dashboard) .nav-list > .nav-group > button:hover,
.app-shell:has(.owner-stitch-dashboard) .nav-list > .nav-group > button.active,
.app-shell:has(.owner-stitch-dashboard) .nav-link-button:hover {
  background: #5b3ee5;
  box-shadow: 0 10px 18px rgba(91, 62, 229, 0.22);
  color: #ffffff;
}

.app-shell:has(.owner-stitch-dashboard) .nav-submenu {
  border-left-color: #e0e7ff;
  margin-left: 32px;
  padding-left: 10px;
}

.app-shell:has(.owner-stitch-dashboard) .nav-submenu button {
  color: #64748b;
  font-size: 12px;
  min-height: 28px;
}

.app-shell:has(.owner-stitch-dashboard) .nav-submenu button:hover,
.app-shell:has(.owner-stitch-dashboard) .nav-submenu button.active {
  background: #eef2ff;
  color: #4f46e5;
}

.app-shell:has(.owner-stitch-dashboard) .workspace {
  background: #f4f7fb;
  padding: 0;
}

.app-shell:has(.owner-stitch-dashboard) .topbar {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  grid-template-columns: minmax(280px, 1fr) auto;
  margin: 0;
  min-height: 58px;
  padding: 8px 28px;
}

.app-shell:has(.owner-stitch-dashboard) .topbar > div:first-child {
  display: none;
}

.app-shell:has(.owner-stitch-dashboard) .topbar-actions {
  align-items: center;
  gap: 10px;
  justify-content: end;
  width: 100%;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell {
  flex: 0 1 360px;
  max-width: 360px;
  min-width: 260px;
  text-transform: none;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell > span {
  display: none;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell::before {
  color: #64748b;
  content: "";
  height: 17px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  z-index: 1;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell input {
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  box-shadow: none;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell input::placeholder {
  color: #94a3b8;
}

.app-shell:has(.owner-stitch-dashboard) .support-widget-root button,
.app-shell:has(.owner-stitch-dashboard) .topbar-actions .help-bot-button,
.app-shell:has(.owner-stitch-dashboard) [data-help-bot-toggle] {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 18px rgba(79, 70, 229, 0.22) !important;
  color: #ffffff !important;
  min-height: 38px !important;
}

.app-shell:has(.owner-stitch-dashboard) .top-icon-button,
.app-shell:has(.owner-stitch-dashboard) #notificationButton,
.app-shell:has(.owner-stitch-dashboard) #sessionBadge > * {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  min-height: 38px;
}

.app-shell:has(.owner-stitch-dashboard) #notificationButton {
  background: #f8fafc;
  color: #334155;
  font-size: 0;
  width: 38px;
}

.app-shell:has(.owner-stitch-dashboard) #notificationButton svg {
  height: 18px;
  width: 18px;
}

.app-shell:has(.owner-stitch-dashboard) .content-grid {
  gap: 18px;
  padding: 26px 28px 32px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-dashboard {
  gap: 20px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  color: #0f172a;
  min-height: 86px;
  padding: 18px 20px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero-copy span {
  color: #4f46e5;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero-copy h2 {
  color: #0f172a;
  font-size: 1.02rem;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero-copy p {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero .dashboard-date-trigger,
.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero .owner-dashboard-go {
  border-radius: 8px;
  min-height: 36px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero .owner-dashboard-date-control > span {
  color: #64748b;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero .owner-dashboard-go {
  background: #5b3ee5;
  color: #ffffff;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-kpi-grid {
  display: none;
}

.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition-box.owner-stitch-grid {
  gap: 18px 24px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-store-section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-grid {
  gap: 24px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-card {
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  min-height: 180px;
  padding: 26px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-card.sales {
  border-top: 4px solid #35c589;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-card.expenses {
  border-top: 4px solid #f43f5e;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-head {
  margin-bottom: 18px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-head strong {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-list {
  gap: 14px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-item,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card {
  border-radius: 12px;
  min-height: 86px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-item b,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card strong {
  background: transparent;
  min-height: auto;
  padding: 0;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-item strong,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card span {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-item.sales b,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.sales strong {
  color: #059669;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-equation-item.expenses b,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.expenses strong {
  color: #e11d48;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.sales,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.expenses {
  background: rgba(240, 253, 244, 0.75);
  border-color: #bbf7d0;
  box-shadow: none;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.expenses {
  background: rgba(255, 241, 242, 0.82);
  border-color: #fecdd3;
}

.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.sales span,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.sales strong,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.expenses span,
.app-shell:has(.owner-stitch-dashboard) .owner-store-total-card.expenses strong {
  color: inherit;
}

.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition,
.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition:nth-child(2n),
.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition:nth-child(n+3) {
  border-radius: 16px;
  padding: 26px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition-head {
  border-bottom: 0;
  padding-bottom: 16px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-dashboard-partition-head strong {
  font-size: 0.95rem;
}

@media (max-width: 1366px) {
  body.sidebar-overlay-mode .app-shell:has(.owner-stitch-dashboard) {
    grid-template-columns: 88px minmax(1040px, 1fr);
  }
}

@media (max-width: 900px) {
  .app-shell:has(.owner-stitch-dashboard) {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .app-shell:has(.owner-stitch-dashboard) .content-grid {
    padding: 18px;
  }
}

/* Global navigation refresh: match the modern Stitch menu across logged-in ERP pages. */
body:not(.logged-out):not(.pos-fullscreen-mode) {
  --brand: #5b3ee5;
  --brand-strong: #4338ca;
  --brand-tint: #eef2ff;
  --blue: #4f46e5;
  --blue-tint: #eef2ff;
  --page: #f4f7fb;
  --surface-soft: #f8fafc;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.sidebar-collapsed) .app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

body:not(.logged-out):not(.pos-fullscreen-mode),
body:not(.logged-out):not(.pos-fullscreen-mode) button,
body:not(.logged-out):not(.pos-fullscreen-mode) input,
body:not(.logged-out):not(.pos-fullscreen-mode) select,
body:not(.logged-out):not(.pos-fullscreen-mode) textarea {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar {
  gap: 20px;
  padding: 26px 18px 18px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand {
  gap: 12px;
  min-height: 46px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand-mark {
  background: linear-gradient(135deg, #7057f3 0%, #4f46e5 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.22);
  height: 44px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 44px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand-mark img {
  display: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand-mark::after {
  color: #ffffff;
  content: "SRK";
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .brand span {
  color: #4f46e5;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar-toggle {
  display: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list {
  gap: 7px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list > .nav-group > button,
body:not(.logged-out):not(.pos-fullscreen-mode) .nav-link-button {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 40px;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 820;
  padding: 0 12px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list > .nav-group > button svg,
body:not(.logged-out):not(.pos-fullscreen-mode) .nav-link-button svg {
  height: 18px;
  stroke-width: 1.95;
  width: 18px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list > .nav-group > button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list > .nav-group > button.active,
body:not(.logged-out):not(.pos-fullscreen-mode) .nav-link-button:hover {
  background: #5b3ee5;
  box-shadow: 0 10px 18px rgba(91, 62, 229, 0.22);
  color: #ffffff;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-submenu {
  border-left: 2px solid #e0e7ff;
  margin: 2px 0 8px 32px;
  padding-left: 10px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-submenu button {
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
  min-height: 28px;
  padding: 5px 9px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-submenu button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .nav-submenu button.active {
  background: #eef2ff;
  color: #4f46e5;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .workspace {
  background: #f4f7fb;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  margin: -24px -24px 18px;
  min-height: 58px;
  padding: 8px 24px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .eyebrow {
  color: #4f46e5;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell > span {
  display: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input {
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  box-shadow: none;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  height: 38px;
  min-height: 38px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input::placeholder {
  color: #94a3b8;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .support-widget-root button,
body:not(.logged-out):not(.pos-fullscreen-mode) [data-help-bot-toggle] {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 18px rgba(79, 70, 229, 0.22) !important;
  color: #ffffff !important;
  min-height: 38px !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationButton,
body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge > * {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  min-height: 38px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationButton {
  background: #f8fafc;
  color: #334155;
}

body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .brand-mark {
  height: 44px;
  width: 44px;
}

body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .sidebar {
  padding: 18px 12px;
}

body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .nav-list > .nav-group > button,
body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .nav-link-button {
  min-height: 48px;
}

.owner-stitch-hero-copy span {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-stitch-hero-copy span b {
  background: #eef2ff;
  border-radius: 6px;
  color: #4f46e5;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero.owner-stitch-hero-controls-only {
  grid-template-columns: 1fr;
  justify-items: end;
  min-height: 58px;
  padding: 12px 20px;
}

.app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero.owner-stitch-hero-controls-only .owner-stitch-hero-actions {
  justify-self: end;
}

@media (max-width: 900px) {
  .app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero.owner-stitch-hero-controls-only,
  .app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero.owner-stitch-hero-controls-only .owner-stitch-hero-actions,
  .app-shell:has(.owner-stitch-dashboard) .owner-stitch-hero.owner-stitch-hero-controls-only .owner-dashboard-filterbar {
    justify-items: stretch;
    width: 100%;
  }
}
/* Owner dashboard topbar search restoration */
.app-shell:has(.owner-stitch-dashboard) .topbar {
  grid-template-columns: minmax(260px, 1fr) minmax(520px, auto);
  gap: 18px;
}

.app-shell:has(.owner-stitch-dashboard) .topbar > div:first-child {
  display: block;
  min-width: 0;
}

.app-shell:has(.owner-stitch-dashboard) .topbar .eyebrow {
  color: #4f46e5;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.11em;
}

.app-shell:has(.owner-stitch-dashboard) .topbar h1 {
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}

.app-shell:has(.owner-stitch-dashboard) .topbar-actions {
  display: flex;
  min-width: 0;
  width: auto;
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell {
  display: grid !important;
  flex: 0 1 430px;
  max-width: 430px;
  min-width: 300px;
  width: min(430px, 32vw);
}

.app-shell:has(.owner-stitch-dashboard) .global-search-shell input {
  display: block;
  width: 100%;
}

@media (max-width: 1100px) {
  .app-shell:has(.owner-stitch-dashboard) .topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .app-shell:has(.owner-stitch-dashboard) .topbar-actions {
    justify-content: stretch;
    width: 100%;
  }

  .app-shell:has(.owner-stitch-dashboard) .global-search-shell {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
}
/* Sidebar menu typography: Tailwind font-sans text-xs font-semibold */
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu button,
.app-shell:has(.owner-stitch-dashboard) .sidebar .nav-list > .nav-group > button,
.app-shell:has(.owner-stitch-dashboard) .sidebar .nav-link-button,
.app-shell:has(.owner-stitch-dashboard) .sidebar .nav-submenu button {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
}
/* Tailwind-inspired menu, submenu and table column refresh */
body:not(.logged-out):not(.pos-fullscreen-mode) {
  --tw-sidebar-bg: #ffffff;
  --tw-sidebar-border: #e2e8f0;
  --tw-nav-text: #475569;
  --tw-nav-muted: #64748b;
  --tw-nav-hover: #f8fafc;
  --tw-nav-active-bg: #eef2ff;
  --tw-nav-active: #4f46e5;
  --tw-nav-ring: rgba(79, 70, 229, 0.18);
  --tw-table-head: #f8fafc;
  --tw-table-border: #e2e8f0;
  --tw-table-text: #334155;
  --tw-table-muted: #64748b;
  --tw-table-zebra: #fbfdff;
  --tw-table-hover: #eff6ff;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar {
  background: var(--tw-sidebar-bg);
  border-right: 1px solid var(--tw-sidebar-border);
  box-shadow: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .nav-list {
  gap: 4px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button {
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  background: transparent;
  color: var(--tw-nav-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button svg,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button svg {
  width: 17px;
  height: 17px;
  color: var(--tw-nav-muted);
  stroke-width: 1.9;
  transition: color 0.14s ease;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button:hover {
  background: var(--tw-nav-hover);
  border-color: var(--tw-sidebar-border);
  box-shadow: none;
  color: #0f172a;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button:hover svg,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button:hover svg {
  color: #334155;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button.active,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button.active {
  background: var(--tw-nav-active-bg);
  border-color: #c7d2fe;
  box-shadow: inset 3px 0 0 var(--tw-nav-active), 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #3730a3;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button.active svg,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button.active svg {
  color: var(--tw-nav-active);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-list > .nav-group > button:focus-visible,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-link-button:focus-visible,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu button:focus-visible {
  outline: 2px solid var(--tw-nav-ring);
  outline-offset: 2px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu {
  gap: 3px;
  margin: 3px 0 8px 28px;
  border-left: 1px solid #dbe3ef;
  padding: 3px 0 3px 10px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--tw-nav-muted);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu button:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .nav-submenu button.active {
  background: var(--tw-nav-active-bg);
  border-color: #c7d2fe;
  color: #3730a3;
}

body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .sidebar .nav-list > .nav-group > button,
body:not(.logged-out):not(.pos-fullscreen-mode).sidebar-collapsed .sidebar .nav-link-button {
  justify-items: center;
  grid-template-columns: 1fr;
  min-height: 44px;
  padding: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap {
  border: 1px solid var(--tw-table-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--tw-table-text);
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  border-top: 0;
  border-bottom: 1px solid var(--tw-table-border);
  background: var(--tw-table-head);
  color: var(--tw-table-muted);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1rem;
  padding: 10px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap thead th:not(:last-child),
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody td:not(:last-child) {
  border-right: 1px solid #f1f5f9;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody td {
  border-top: 1px solid var(--tw-table-border);
  background: #ffffff;
  color: var(--tw-table-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25rem;
  padding: 10px 12px;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody tr:nth-child(even):not(.attention-row):not(.selected-row) td {
  background: var(--tw-table-zebra);
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap tbody tr:not(.attention-row):not(.selected-row):hover td {
  background: var(--tw-table-hover);
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td strong,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-wrap td b {
  color: #0f172a;
  font-weight: 700;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-header-content {
  gap: 6px;
  padding-right: 14px;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-sort-button {
  gap: 6px;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-sort-button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-sort-button.active {
  color: var(--tw-nav-active);
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-sort-icon {
  color: #94a3b8;
  opacity: 0.9;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) th.col-numeric,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) td.col-numeric {
  font-variant-numeric: tabular-nums;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-column-resizer::after {
  background: #cbd5e1;
}

body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-column-resizer:hover::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-column-resizer:focus-visible::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode) .table-column-resizing-shell .table-column-resizer::after {
  background: var(--tw-nav-active);
}
/* Tailwind-inspired POS Billing refresh */
.pos-cashier-board.pos-fast-board {
  --pos-tw-bg: #f8fafc;
  --pos-tw-surface: #ffffff;
  --pos-tw-soft: #f1f5f9;
  --pos-tw-line: #dbe3ef;
  --pos-tw-line-strong: #cbd5e1;
  --pos-tw-ink: #0f172a;
  --pos-tw-text: #334155;
  --pos-tw-muted: #64748b;
  --pos-tw-indigo: #4f46e5;
  --pos-tw-indigo-dark: #3730a3;
  --pos-tw-green: #059669;
  --pos-tw-amber: #d97706;
  --pos-tw-rose: #e11d48;
  --pos-tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.06);
  background: var(--pos-tw-bg);
  color: var(--pos-tw-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  gap: 8px;
}

body.pos-fullscreen-mode .workspace,
body.pos-fullscreen-mode .content-grid {
  background: #f8fafc;
}

.pos-cashier-board.pos-fast-board .pos-fast-topbar {
  min-height: 64px;
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--pos-tw-surface) !important;
  box-shadow: var(--pos-tw-shadow);
}

.pos-cashier-board.pos-fast-board .pos-counter-meta strong {
  color: var(--pos-tw-ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
}

.pos-cashier-board.pos-fast-board .pos-counter-meta span {
  color: var(--pos-tw-muted);
  font-size: 12px;
  font-weight: 650;
}

.pos-cashier-board.pos-fast-board .pos-fast-topbar .pos-counter-brand {
  display: inline-flex !important;
  min-width: 260px !important;
  max-width: min(38vw, 420px) !important;
  min-height: 36px !important;
  gap: 8px !important;
  padding: 0 12px !important;
  color: var(--pos-tw-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
  transform: none !important;
}

.pos-cashier-board.pos-fast-board .pos-counter-brand-text {
  transform: none !important;
}

.pos-cashier-board.pos-fast-board .pos-counter-brand img {
  width: 32px !important;
  height: 28px !important;
  filter: none !important;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar {
  gap: 8px;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action:hover,
.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action:focus-visible {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  color: var(--pos-tw-indigo) !important;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action.active,
.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action.billing-mode.active {
  border-color: var(--pos-tw-indigo) !important;
  background: var(--pos-tw-indigo) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.2) !important;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-iconbar .pos-icon-action.labelled {
  min-width: 116px;
  padding-inline: 12px;
}

.pos-cashier-board.pos-fast-board .pos-fast-shell.pos-kiosk-shell,
body.pos-fullscreen-mode .pos-cashier-board.pos-fast-board .pos-fast-shell.pos-kiosk-shell {
  gap: 8px;
}

.pos-cashier-board.pos-fast-board .pos-panel-resizer {
  min-width: 8px;
}

.pos-cashier-board.pos-fast-board .pos-panel-resizer::before {
  inset: 10px 3px;
  background: #cbd5e1;
}

.pos-cashier-board.pos-fast-board .pos-panel-resizer:hover::before,
body.pos-resizing .pos-cashier-board.pos-fast-board .pos-panel-resizer::before {
  background: var(--pos-tw-indigo);
}

.pos-cashier-board.pos-fast-board .panel.pos-fast-counter,
.pos-cashier-board.pos-fast-board .pos-kiosk-products,
.pos-cashier-board.pos-fast-board .pos-bill-dock,
.pos-cashier-board.pos-fast-board .pos-category-rail {
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 14px;
  background: var(--pos-tw-surface) !important;
  box-shadow: var(--pos-tw-shadow) !important;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-products,
.pos-cashier-board.pos-fast-board .pos-bill-dock {
  padding: 8px;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-input-row,
.pos-cashier-board.pos-fast-board.bill-focus-mode .pos-kiosk-input-row {
  align-items: end;
  gap: 8px;
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.pos-cashier-board.pos-fast-board .pos-search-entry {
  min-height: 42px;
  border: 1px solid var(--pos-tw-line-strong) !important;
  border-radius: 12px;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.pos-cashier-board.pos-fast-board .pos-search-entry:focus-within {
  border-color: var(--pos-tw-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16) !important;
}

.pos-cashier-board.pos-fast-board .pos-search-entry > svg {
  color: var(--pos-tw-indigo);
}

.pos-cashier-board.pos-fast-board .pos-main-search #posItemSearch,
.pos-cashier-board.pos-fast-board .pos-kiosk-input-row input,
.pos-cashier-board.pos-fast-board .pos-kiosk-input-row select {
  color: var(--pos-tw-ink);
  font-size: 13px;
  font-weight: 650;
}

.pos-cashier-board.pos-fast-board .pos-kiosk-input-row input,
.pos-cashier-board.pos-fast-board .pos-kiosk-input-row select {
  min-height: 40px;
  border: 1px solid var(--pos-tw-line-strong) !important;
  border-radius: 10px;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.pos-cashier-board.pos-fast-board .pos-add-search {
  min-height: 40px;
  border: 1px solid var(--pos-tw-indigo) !important;
  border-radius: 10px;
  background: var(--pos-tw-indigo) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.2) !important;
  font-size: 12px;
  font-weight: 750;
}

.pos-cashier-board.pos-fast-board .pos-billing-focus-head {
  min-height: 44px;
  border: 1px solid var(--pos-tw-line) !important;
  border-left: 4px solid var(--pos-tw-indigo) !important;
  border-radius: 12px;
  background: #ffffff !important;
  color: var(--pos-tw-ink) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.pos-cashier-board.pos-fast-board .pos-billing-focus-head strong,
.pos-cashier-board.pos-fast-board .pos-billing-focus-head span {
  color: inherit !important;
}

.pos-cashier-board.pos-fast-board .pos-billing-focus-head strong {
  font-size: 14px;
  font-weight: 750;
}

.pos-cashier-board.pos-fast-board .pos-billing-focus-head span {
  color: var(--pos-tw-muted) !important;
  font-size: 12px;
  font-weight: 650;
}

.pos-cashier-board.pos-fast-board .pos-billing-focus-head .mini-action {
  border-color: var(--pos-tw-line) !important;
  background: #f8fafc !important;
  color: var(--pos-tw-indigo) !important;
  border-radius: 8px;
}

.pos-cashier-board.pos-fast-board .pos-bill-lines,
.pos-cashier-board.pos-fast-board .pos-billing-focus-items .pos-bill-lines,
.pos-cashier-board.pos-fast-board .pos-focus-cart-table {
  border: 1px solid var(--pos-tw-line-strong) !important;
  border-radius: 12px;
  background: #ffffff !important;
  box-shadow: none !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-lines-head,
.pos-cashier-board.pos-fast-board .pos-focus-cart-head {
  min-height: 36px;
  border: 0 !important;
  border-radius: 10px 10px 0 0;
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pos-cashier-board.pos-fast-board .pos-bill-lines-head span,
.pos-cashier-board.pos-fast-board .pos-focus-cart-head span {
  color: #ffffff !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-line,
.pos-cashier-board.pos-fast-board .pos-focus-cart-row {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-line:nth-child(even),
.pos-cashier-board.pos-fast-board .pos-focus-cart-row:nth-child(even) {
  background: #fbfdff !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-line[data-select-cart-product]:hover,
.pos-cashier-board.pos-fast-board .pos-bill-line[data-select-cart-product]:focus-visible,
.pos-cashier-board.pos-fast-board .pos-focus-cart-row:hover,
.pos-cashier-board.pos-fast-board .pos-focus-cart-row:focus-within {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  box-shadow: inset 4px 0 0 var(--pos-tw-indigo) !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-line.active {
  border-left: 4px solid var(--pos-tw-green) !important;
  background: #ecfdf5 !important;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.12) !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-item-name strong,
.pos-cashier-board.pos-fast-board .pos-bill-line > b {
  color: var(--pos-tw-ink);
  font-weight: 700;
}

.pos-cashier-board.pos-fast-board .pos-bill-empty,
.pos-cashier-board.pos-fast-board .empty-text {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--pos-tw-muted);
  font-size: 13px;
  font-weight: 500;
}

.pos-cashier-board.pos-fast-board .pos-bill-dock .pos-payment-strip {
  gap: 8px;
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 14px;
  padding: 8px;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.pos-cashier-board.pos-fast-board .pos-checkout-summary,
.pos-cashier-board.pos-fast-board .pos-checkout-summary.has-roundoff {
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff !important;
}

.pos-cashier-board.pos-fast-board .pos-checkout-summary > div,
.pos-cashier-board.pos-fast-board .pos-cash-tender-metrics > div,
.pos-cashier-board.pos-fast-board .pos-split-row {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.pos-cashier-board.pos-fast-board .pos-checkout-summary span,
.pos-cashier-board.pos-fast-board .pos-cash-tender-metrics span {
  color: var(--pos-tw-muted);
  font-size: 11px;
  font-weight: 750;
}

.pos-cashier-board.pos-fast-board .pos-checkout-summary strong,
.pos-cashier-board.pos-fast-board .pos-cash-tender-metrics strong,
.pos-cashier-board.pos-fast-board .pos-grand-total strong {
  color: var(--pos-tw-ink);
  font-weight: 800;
}

.pos-cashier-board.pos-fast-board .pos-grand-total {
  background: #f5f3ff !important;
}

.pos-cashier-board.pos-fast-board .pos-grand-total strong,
.pos-cashier-board.pos-fast-board .pos-fast-bill-head b {
  color: #9f1239 !important;
  font-weight: 900;
}

.pos-cashier-board.pos-fast-board .pos-payment-mode-group {
  border: 1px solid #111827 !important;
  border-radius: 12px;
  padding: 4px;
  background: #111827 !important;
}

.pos-cashier-board.pos-fast-board .pos-bill-dock .pos-pay-action {
  min-height: 40px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: none !important;
}

.pos-cashier-board.pos-fast-board .pos-payment-mode-group .pos-pay-action.mode:not(.active) {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.pos-cashier-board.pos-fast-board .pos-payment-mode-group .pos-pay-action.mode.active {
  border-color: var(--pos-tw-green) !important;
  background: var(--pos-tw-green) !important;
  color: #ffffff !important;
}

.pos-cashier-board.pos-fast-board .pos-cash-tender-panel,
.pos-cashier-board.pos-fast-board .pos-split-payment-panel {
  border: 1px solid var(--pos-tw-line) !important;
  border-radius: 12px;
  background: #ffffff !important;
  box-shadow: none !important;
}

.pos-cashier-board.pos-fast-board .pos-cash-tender-entry input,
.pos-cashier-board.pos-fast-board .pos-cash-tender-entry button,
.pos-cashier-board.pos-fast-board .pos-split-grid input,
.pos-cashier-board.pos-fast-board .pos-split-grid button,
.pos-cashier-board.pos-fast-board .pos-split-summary button {
  border-radius: 9px;
  border-color: #dbe3ef !important;
  background: #ffffff !important;
}

.pos-cashier-board.pos-fast-board .pos-pay-action.return {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  box-shadow: none !important;
}

.pos-cashier-board.pos-fast-board .pos-pay-action.discount {
  border-color: #fde68a !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

.pos-cashier-board.pos-fast-board .pos-pay-action.clear {
  border-color: #fecdd3 !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

.pos-cashier-board.pos-fast-board .pos-pay-action.print,
.pos-cashier-board.pos-fast-board .pos-pay-action.hold {
  border-color: var(--pos-tw-line) !important;
  background: #ffffff !important;
  color: var(--pos-tw-text) !important;
}

.pos-cashier-board.pos-fast-board .pos-pay-action.whatsapp-bill:not(:disabled) {
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

@media (max-width: 1180px) {
  .pos-cashier-board.pos-fast-board .pos-fast-topbar .pos-counter-brand {
    min-width: 220px !important;
    max-width: calc(100vw - 120px) !important;
    font-size: 13px !important;
  }
}

@media (max-width: 900px) {
  .pos-cashier-board.pos-fast-board .pos-fast-topbar,
  .pos-cashier-board.pos-fast-board .panel.pos-fast-counter,
  .pos-cashier-board.pos-fast-board .pos-bill-dock {
    border-radius: 12px;
  }

  .pos-cashier-board.pos-fast-board .pos-kiosk-input-row,
  .pos-cashier-board.pos-fast-board.bill-focus-mode .pos-kiosk-input-row {
    grid-template-columns: 1fr;
  }
}
/* Global Tailwind typography baseline */
.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.text-xs {
  font-size: 12px;
  line-height: 1rem;
}

.font-semibold {
  font-weight: 600;
}

body:not(.logged-out),
body:not(.logged-out) button,
body:not(.logged-out) input,
body:not(.logged-out) select,
body:not(.logged-out) textarea,
body:not(.logged-out) table,
body:not(.logged-out) .panel,
body:not(.logged-out) .card,
body:not(.logged-out) .module-toolbar,
body:not(.logged-out) .nav-list,
body:not(.logged-out) .nav-submenu,
body:not(.logged-out) .topbar,
body:not(.logged-out) .content-grid,
body:not(.logged-out) .dialog,
body:not(.logged-out) .modal,
body:not(.logged-out) .toast,
body:not(.logged-out) .pill,
body:not(.logged-out) .mini-action,
body:not(.logged-out) .primary-button,
body:not(.logged-out) .ghost-button,
body:not(.logged-out) .danger-button {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0;
}

body:not(.logged-out) input,
body:not(.logged-out) select,
body:not(.logged-out) textarea {
  font-weight: 600;
}
/* Home dashboard global search restore */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
  grid-template-columns: minmax(220px, 1fr) minmax(520px, auto);
  gap: 18px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  width: auto;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #supportWidgetRoot {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
  display: grid !important;
  flex: 0 1 420px;
  order: 2;
  max-width: 420px;
  min-width: 280px;
  width: min(420px, 32vw);
  opacity: 1;
  visibility: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input,
body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearch {
  display: block !important;
  width: 100%;
  min-width: 0;
  opacity: 1;
  visibility: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearchPanel {
  order: 3;
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
    grid-template-columns: 1fr;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
    flex-wrap: wrap;
    justify-content: stretch;
    width: 100%;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
}
/* Topbar action order: search first, profile right */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
  grid-template-columns: minmax(180px, 1fr) minmax(720px, auto);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
  order: 1;
  flex: 1 1 420px;
  max-width: 520px;
  min-width: 320px;
  width: clamp(320px, 34vw, 520px);
}

body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearchPanel {
  order: 1;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #supportWidgetRoot {
  order: 2;
  flex: 0 0 auto;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationButton {
  order: 3;
  flex: 0 0 auto;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationPanel {
  order: 4;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge {
  order: 5;
  flex: 0 0 auto;
  margin-left: 0;
  justify-content: flex-end;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge .session-badge {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

@media (max-width: 1280px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
    grid-template-columns: minmax(160px, 1fr) minmax(620px, auto);
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    max-width: 420px;
    min-width: 260px;
    width: clamp(260px, 30vw, 420px);
  }
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
    grid-template-columns: 1fr;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge {
    margin-left: auto;
  }
}
/* Tailwind curated 7-theme collection: color, font, POS skin and strong columns. */
body[data-ui-theme^="tw-"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme^="tw-"] {
  --surface-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  --surface-soft: #f8fafc;
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06);
  --ui-heading-weight: 760;
  --ui-control-weight: 720;
  --ui-strong-weight: 760;
  --ui-label-weight: 720;
  --tw-table-head: var(--tw-theme-table-head, #f8fafc);
  --tw-table-line: var(--tw-theme-table-border, #cbd5e1);
}

body[data-ui-theme="tw-indigo"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-indigo"] {
  --brand: #4f46e5;
  --brand-strong: #3730a3;
  --brand-tint: #eef2ff;
  --accent: #0f766e;
  --blue: #4f46e5;
  --blue-tint: #eef2ff;
  --mint: #059669;
  --mint-tint: #ecfdf5;
  --line: #c7d2fe;
  --page: #f8fafc;
  --surface-soft: #f8fafc;
  --ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tw-nav-active: #4f46e5;
  --tw-nav-active-bg: #eef2ff;
  --tw-nav-ring: rgba(79, 70, 229, 0.18);
  --tw-theme-head: #4338ca;
  --tw-theme-head-2: #312e81;
  --tw-theme-row-odd: rgba(79, 70, 229, 0.055);
  --tw-theme-row-even: rgba(15, 118, 110, 0.035);
  --tw-theme-hover: #fef3c7;
  --tw-theme-table-border: #c7d2fe;
  --tw-theme-table-highlight: #fde68a;
}

body[data-ui-theme="tw-emerald"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-emerald"] {
  --brand: #059669;
  --brand-strong: #047857;
  --brand-tint: #ecfdf5;
  --accent: #0f766e;
  --blue: #0284c7;
  --blue-tint: #e0f2fe;
  --mint: #059669;
  --mint-tint: #d1fae5;
  --line: #a7f3d0;
  --page: #f7fdf9;
  --surface-soft: #f0fdf4;
  --ui-font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --tw-nav-active: #059669;
  --tw-nav-active-bg: #ecfdf5;
  --tw-nav-ring: rgba(5, 150, 105, 0.18);
  --tw-theme-head: #047857;
  --tw-theme-head-2: #064e3b;
  --tw-theme-row-odd: rgba(5, 150, 105, 0.055);
  --tw-theme-row-even: rgba(2, 132, 199, 0.035);
  --tw-theme-hover: #ecfeff;
  --tw-theme-table-border: #a7f3d0;
  --tw-theme-table-highlight: #67e8f9;
}

body[data-ui-theme="tw-sky"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-sky"] {
  --brand: #0284c7;
  --brand-strong: #0369a1;
  --brand-tint: #e0f2fe;
  --accent: #2563eb;
  --blue: #0284c7;
  --blue-tint: #e0f2fe;
  --mint: #10b981;
  --mint-tint: #ecfdf5;
  --line: #bae6fd;
  --page: #f5fbff;
  --surface-soft: #f0f9ff;
  --ui-font-family: Arial, "Helvetica Neue", Inter, ui-sans-serif, system-ui, sans-serif;
  --tw-nav-active: #0284c7;
  --tw-nav-active-bg: #e0f2fe;
  --tw-nav-ring: rgba(2, 132, 199, 0.18);
  --tw-theme-head: #0369a1;
  --tw-theme-head-2: #075985;
  --tw-theme-row-odd: rgba(2, 132, 199, 0.055);
  --tw-theme-row-even: rgba(37, 99, 235, 0.035);
  --tw-theme-hover: #f0f9ff;
  --tw-theme-table-border: #bae6fd;
  --tw-theme-table-highlight: #7dd3fc;
}

body[data-ui-theme="tw-rose"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-rose"] {
  --brand: #e11d48;
  --brand-strong: #be123c;
  --brand-tint: #fff1f2;
  --accent: #7c3aed;
  --blue: #4f46e5;
  --blue-tint: #eef2ff;
  --mint: #059669;
  --mint-tint: #ecfdf5;
  --line: #fecdd3;
  --page: #fff8fa;
  --surface-soft: #fff1f2;
  --ui-font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --tw-nav-active: #e11d48;
  --tw-nav-active-bg: #fff1f2;
  --tw-nav-ring: rgba(225, 29, 72, 0.18);
  --tw-theme-head: #be123c;
  --tw-theme-head-2: #881337;
  --tw-theme-row-odd: rgba(225, 29, 72, 0.052);
  --tw-theme-row-even: rgba(124, 58, 237, 0.03);
  --tw-theme-hover: #fdf2f8;
  --tw-theme-table-border: #fecdd3;
  --tw-theme-table-highlight: #f9a8d4;
}

body[data-ui-theme="tw-amber"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-amber"] {
  --brand: #d97706;
  --brand-strong: #b45309;
  --brand-tint: #fffbeb;
  --accent: #2563eb;
  --blue: #2563eb;
  --blue-tint: #eff6ff;
  --mint: #059669;
  --mint-tint: #ecfdf5;
  --gold: #d97706;
  --gold-tint: #fffbeb;
  --line: #fde68a;
  --page: #fffdf6;
  --surface-soft: #fffbeb;
  --ui-font-family: "Trebuchet MS", Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --tw-nav-active: #d97706;
  --tw-nav-active-bg: #fffbeb;
  --tw-nav-ring: rgba(217, 119, 6, 0.2);
  --tw-theme-head: #b45309;
  --tw-theme-head-2: #78350f;
  --tw-theme-row-odd: rgba(217, 119, 6, 0.055);
  --tw-theme-row-even: rgba(37, 99, 235, 0.03);
  --tw-theme-hover: #eff6ff;
  --tw-theme-table-border: #fde68a;
  --tw-theme-table-highlight: #93c5fd;
}

body[data-ui-theme="tw-violet"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-violet"] {
  --brand: #7c3aed;
  --brand-strong: #6d28d9;
  --brand-tint: #f5f3ff;
  --accent: #c026d3;
  --blue: #4f46e5;
  --blue-tint: #eef2ff;
  --mint: #059669;
  --mint-tint: #ecfdf5;
  --line: #ddd6fe;
  --page: #faf9ff;
  --surface-soft: #f5f3ff;
  --ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tw-nav-active: #7c3aed;
  --tw-nav-active-bg: #f5f3ff;
  --tw-nav-ring: rgba(124, 58, 237, 0.18);
  --tw-theme-head: #6d28d9;
  --tw-theme-head-2: #4c1d95;
  --tw-theme-row-odd: rgba(124, 58, 237, 0.055);
  --tw-theme-row-even: rgba(192, 38, 211, 0.032);
  --tw-theme-hover: #fdf4ff;
  --tw-theme-table-border: #ddd6fe;
  --tw-theme-table-highlight: #f0abfc;
}

body[data-ui-theme="tw-slate"],
body:not(.logged-out):not(.pos-fullscreen-mode)[data-ui-theme="tw-slate"] {
  --brand: #334155;
  --brand-strong: #0f172a;
  --brand-tint: #f1f5f9;
  --accent: #0f766e;
  --blue: #475569;
  --blue-tint: #f1f5f9;
  --mint: #0f766e;
  --mint-tint: #ccfbf1;
  --line: #cbd5e1;
  --page: #f8fafc;
  --surface-soft: #f1f5f9;
  --ui-font-family: Tahoma, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --tw-nav-active: #334155;
  --tw-nav-active-bg: #f1f5f9;
  --tw-nav-ring: rgba(51, 65, 85, 0.18);
  --tw-theme-head: #334155;
  --tw-theme-head-2: #0f172a;
  --tw-theme-row-odd: rgba(51, 65, 85, 0.05);
  --tw-theme-row-even: rgba(15, 118, 110, 0.028);
  --tw-theme-hover: #ecfeff;
  --tw-theme-table-border: #cbd5e1;
  --tw-theme-table-highlight: #5eead4;
}

body[data-ui-theme^="tw-"] .table-wrap,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap {
  border-color: var(--tw-theme-table-border);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 10%, transparent);
}

body[data-ui-theme^="tw-"] .table-wrap thead th,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap thead th {
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, var(--tw-theme-head), var(--tw-theme-head-2));
  color: #ffffff;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-ui-theme^="tw-"] .table-sort-button,
body[data-ui-theme^="tw-"] .table-sort-button:hover,
body[data-ui-theme^="tw-"] .table-sort-button.active,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-sort-button,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-sort-button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-sort-button.active {
  color: inherit;
}

body[data-ui-theme^="tw-"] .table-sort-button:hover .table-sort-label,
body[data-ui-theme^="tw-"] .table-sort-button.active .table-sort-label,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-sort-button:hover .table-sort-label,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-sort-button.active .table-sort-label {
  color: var(--tw-theme-table-highlight);
}

body[data-ui-theme^="tw-"] .table-column-resizer::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-column-resizer::after {
  background: rgba(255, 255, 255, 0.34);
}

body[data-ui-theme^="tw-"] .table-column-resizer:hover::after,
body[data-ui-theme^="tw-"] .table-column-resizer:focus-visible::after,
body[data-ui-theme^="tw-"] .table-column-resizing-shell .table-column-resizer::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-column-resizer:hover::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-column-resizer:focus-visible::after,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-column-resizing-shell .table-column-resizer::after {
  background: var(--tw-theme-table-highlight);
}

body[data-ui-theme^="tw-"] .table-wrap tbody td,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap tbody td {
  border-color: color-mix(in srgb, var(--tw-theme-table-border) 80%, #ffffff);
}

body[data-ui-theme^="tw-"] .table-wrap tbody td:nth-child(odd),
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap tbody td:nth-child(odd) {
  background: var(--tw-theme-row-odd);
}

body[data-ui-theme^="tw-"] .table-wrap tbody td:nth-child(even),
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap tbody td:nth-child(even) {
  background: var(--tw-theme-row-even);
}

body[data-ui-theme^="tw-"] .table-wrap tbody tr:hover td,
body:not(.logged-out):not(.pos-fullscreen-mode):not(.kds-display-mode):not(.log-fullscreen-mode)[data-ui-theme^="tw-"] .table-wrap tbody tr:hover td {
  background: var(--tw-theme-hover);
}

body[data-ui-theme^="tw-"] .table-wrap td strong,
body[data-ui-theme^="tw-"] .settings-card strong,
body[data-ui-theme^="tw-"] .metric strong,
body[data-ui-theme^="tw-"] .dashboard-tile strong,
body[data-ui-theme^="tw-"] .module-toolbar strong {
  color: var(--tw-theme-head-2);
  font-weight: 850;
}

body[data-ui-theme="tw-indigo"] .pos-cashier-board { --pos-counter-dark: #312e81; --pos-counter-dark-soft: #4338ca; --pos-counter-line: #a5b4fc; --pos-counter-blue: #4f46e5; --pos-counter-green: #0f766e; --pos-skin-page: #eef2ff; --pos-skin-soft: #e0e7ff; --pos-skin-head: #312e81; --pos-skin-head-2: #4338ca; --pos-skin-line: #a5b4fc; --pos-skin-accent: #4f46e5; --pos-skin-action: #0f766e; --pos-skin-total: #e0e7ff; --pos-skin-hover: #eef2ff; }
body[data-ui-theme="tw-emerald"] .pos-cashier-board { --pos-counter-dark: #064e3b; --pos-counter-dark-soft: #047857; --pos-counter-line: #86efac; --pos-counter-blue: #0f766e; --pos-counter-green: #059669; --pos-skin-page: #ecfdf5; --pos-skin-soft: #d1fae5; --pos-skin-head: #064e3b; --pos-skin-head-2: #047857; --pos-skin-line: #86efac; --pos-skin-accent: #059669; --pos-skin-action: #0f766e; --pos-skin-total: #d1fae5; --pos-skin-hover: #f0fdfa; }
body[data-ui-theme="tw-sky"] .pos-cashier-board { --pos-counter-dark: #075985; --pos-counter-dark-soft: #0369a1; --pos-counter-line: #7dd3fc; --pos-counter-blue: #0284c7; --pos-counter-green: #10b981; --pos-skin-page: #e0f2fe; --pos-skin-soft: #f0f9ff; --pos-skin-head: #075985; --pos-skin-head-2: #0369a1; --pos-skin-line: #7dd3fc; --pos-skin-accent: #0284c7; --pos-skin-action: #10b981; --pos-skin-total: #bae6fd; --pos-skin-hover: #f0f9ff; }
body[data-ui-theme="tw-rose"] .pos-cashier-board { --pos-counter-dark: #881337; --pos-counter-dark-soft: #be123c; --pos-counter-line: #fda4af; --pos-counter-blue: #7c3aed; --pos-counter-green: #059669; --pos-skin-page: #fff1f2; --pos-skin-soft: #ffe4e6; --pos-skin-head: #881337; --pos-skin-head-2: #be123c; --pos-skin-line: #fda4af; --pos-skin-accent: #e11d48; --pos-skin-action: #7c3aed; --pos-skin-total: #ffe4e6; --pos-skin-hover: #fff1f2; }
body[data-ui-theme="tw-amber"] .pos-cashier-board { --pos-counter-dark: #78350f; --pos-counter-dark-soft: #b45309; --pos-counter-line: #fcd34d; --pos-counter-blue: #2563eb; --pos-counter-green: #059669; --pos-skin-page: #fffbeb; --pos-skin-soft: #fef3c7; --pos-skin-head: #78350f; --pos-skin-head-2: #b45309; --pos-skin-line: #fcd34d; --pos-skin-accent: #d97706; --pos-skin-action: #2563eb; --pos-skin-total: #fef3c7; --pos-skin-hover: #eff6ff; }
body[data-ui-theme="tw-violet"] .pos-cashier-board { --pos-counter-dark: #4c1d95; --pos-counter-dark-soft: #6d28d9; --pos-counter-line: #c4b5fd; --pos-counter-blue: #7c3aed; --pos-counter-green: #059669; --pos-skin-page: #f5f3ff; --pos-skin-soft: #ede9fe; --pos-skin-head: #4c1d95; --pos-skin-head-2: #6d28d9; --pos-skin-line: #c4b5fd; --pos-skin-accent: #7c3aed; --pos-skin-action: #c026d3; --pos-skin-total: #ede9fe; --pos-skin-hover: #fdf4ff; }
body[data-ui-theme="tw-slate"] .pos-cashier-board { --pos-counter-dark: #0f172a; --pos-counter-dark-soft: #334155; --pos-counter-line: #94a3b8; --pos-counter-blue: #475569; --pos-counter-green: #0f766e; --pos-skin-page: #f1f5f9; --pos-skin-soft: #e2e8f0; --pos-skin-head: #0f172a; --pos-skin-head-2: #334155; --pos-skin-line: #94a3b8; --pos-skin-accent: #334155; --pos-skin-action: #0f766e; --pos-skin-total: #e2e8f0; --pos-skin-hover: #ecfeff; }

.theme-preview-card[data-preview-theme="tw-indigo"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-indigo"]::before { background: #4f46e5; }
.theme-preview-card[data-preview-theme="tw-indigo"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-indigo"]::after { background: #eef2ff; }
.theme-preview-card[data-preview-theme="tw-indigo"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-indigo"] { background: #0f766e; }
.theme-preview-card[data-preview-theme="tw-emerald"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-emerald"]::before { background: #059669; }
.theme-preview-card[data-preview-theme="tw-emerald"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-emerald"]::after { background: #ecfdf5; }
.theme-preview-card[data-preview-theme="tw-emerald"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-emerald"] { background: #0284c7; }
.theme-preview-card[data-preview-theme="tw-sky"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-sky"]::before { background: #0284c7; }
.theme-preview-card[data-preview-theme="tw-sky"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-sky"]::after { background: #e0f2fe; }
.theme-preview-card[data-preview-theme="tw-sky"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-sky"] { background: #2563eb; }
.theme-preview-card[data-preview-theme="tw-rose"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-rose"]::before { background: #e11d48; }
.theme-preview-card[data-preview-theme="tw-rose"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-rose"]::after { background: #fff1f2; }
.theme-preview-card[data-preview-theme="tw-rose"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-rose"] { background: #7c3aed; }
.theme-preview-card[data-preview-theme="tw-amber"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-amber"]::before { background: #d97706; }
.theme-preview-card[data-preview-theme="tw-amber"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-amber"]::after { background: #fffbeb; }
.theme-preview-card[data-preview-theme="tw-amber"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-amber"] { background: #2563eb; }
.theme-preview-card[data-preview-theme="tw-violet"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-violet"]::before { background: #7c3aed; }
.theme-preview-card[data-preview-theme="tw-violet"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-violet"]::after { background: #f5f3ff; }
.theme-preview-card[data-preview-theme="tw-violet"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-violet"] { background: #c026d3; }
.theme-preview-card[data-preview-theme="tw-slate"] i:nth-child(1), .pos-theme-choice-grid i[data-theme-swatch="tw-slate"]::before { background: #334155; }
.theme-preview-card[data-preview-theme="tw-slate"] i:nth-child(2), .pos-theme-choice-grid i[data-theme-swatch="tw-slate"]::after { background: #f1f5f9; }
.theme-preview-card[data-preview-theme="tw-slate"] i:nth-child(3), .pos-theme-choice-grid i[data-theme-swatch="tw-slate"] { background: #0f766e; }
/* Reference-style topbar search and profile */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
  grid-template-columns: minmax(210px, 1fr) minmax(760px, auto);
  min-height: 58px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  gap: 12px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
  position: relative;
  max-width: 460px;
  min-width: 320px;
  width: clamp(320px, 31vw, 460px);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: #64748b;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell:focus-within::before {
  background-color: #4f46e5;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input,
body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearch {
  height: 38px;
  min-height: 38px;
  border: 1px solid #a5b4fc;
  border-radius: 9px;
  padding: 0 14px 0 40px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input:focus,
body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearch:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  outline: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell input::placeholder,
body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearch::placeholder {
  color: #64748b;
  opacity: 1;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #supportWidgetRoot [data-support-toggle],
body:not(.logged-out):not(.pos-fullscreen-mode) #supportWidgetRoot button {
  min-height: 38px !important;
  border-radius: 9px !important;
  padding-inline: 14px !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationButton {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 9px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge {
  position: relative;
  gap: 10px;
  min-width: 180px;
  padding-left: 14px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: #cbd5e1;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge .session-badge {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5 0%, #059669 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .session-profile-copy {
  display: grid;
  gap: 2px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #0f172a;
  text-align: left;
  min-width: 110px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .session-profile-copy strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1rem;
  white-space: nowrap;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .session-profile-copy span {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  line-height: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
    grid-template-columns: minmax(180px, 1fr) minmax(660px, auto);
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    max-width: 360px;
    min-width: 260px;
    width: clamp(260px, 26vw, 360px);
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge {
    min-width: 146px;
  }
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar {
    grid-template-columns: 1fr;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) #sessionBadge {
    min-width: auto;
  }
}
/* Restore menu hide control and keep search options anchored under the search box. */
body:not(.logged-out):not(.pos-fullscreen-mode) .brand,
.app-shell:has(.owner-stitch-dashboard) .brand {
  position: relative;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .sidebar-toggle,
.app-shell:has(.owner-stitch-dashboard) .sidebar .sidebar-toggle {
  display: grid !important;
  position: absolute;
  top: calc(100% + 8px);
  right: -14px;
  z-index: 60;
  width: 32px;
  min-width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #ffffff;
  color: #4f46e5;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.16);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .sidebar-toggle:hover,
.app-shell:has(.owner-stitch-dashboard) .sidebar .sidebar-toggle:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .sidebar-toggle:focus-visible,
.app-shell:has(.owner-stitch-dashboard) .sidebar .sidebar-toggle:focus-visible {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
  outline: none;
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.24);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .sidebar .sidebar-toggle svg,
.app-shell:has(.owner-stitch-dashboard) .sidebar .sidebar-toggle svg {
  width: 17px;
  height: 17px;
}

body.logged-out .sidebar .sidebar-toggle {
  display: none !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar,
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  overflow: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  position: relative;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearchPanel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 400;
  width: clamp(320px, 34vw, 520px);
  max-width: min(520px, calc(100vw - 32px));
  pointer-events: auto;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel {
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-head span {
  max-width: 220px;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  background: #ffffff;
  padding: 11px 14px;
  text-align: left;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel button:last-child {
  border-bottom: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel button:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel button:focus-visible {
  background: #eef2ff;
  outline: none;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-panel .empty-text {
  margin: 0;
  padding: 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) #globalSearchPanel {
    width: 100%;
    max-width: 100%;
  }
}

/* Global search submit button */
body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-submit {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 78px;
  height: 38px;
  min-height: 38px;
  border: 1px solid #4f46e5;
  border-radius: 9px;
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
  cursor: pointer;
  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-submit:hover,
body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-submit:focus-visible {
  border-color: #4338ca;
  background: #4338ca;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 0 10px 22px rgba(79, 70, 229, 0.22);
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-shell {
    flex: 1 1 calc(100% - 94px);
    max-width: none;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-submit {
    flex: 0 0 82px;
  }
}

/* Stable visible header search group */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions {
  align-items: center;
  gap: 10px;
  overflow: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group,
.app-shell:has(.owner-stitch-dashboard) .global-search-group {
  order: 1;
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 1 560px;
  width: min(560px, 42vw);
  min-width: 430px;
  max-width: 560px;
  overflow: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group .global-search-shell,
.app-shell:has(.owner-stitch-dashboard) .global-search-group .global-search-shell {
  order: 0 !important;
  position: relative;
  display: grid !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: none !important;
  margin: 0;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group .global-search-shell input,
.app-shell:has(.owner-stitch-dashboard) .global-search-group .global-search-shell input,
body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group #globalSearch,
.app-shell:has(.owner-stitch-dashboard) .global-search-group #globalSearch {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group .global-search-submit,
.app-shell:has(.owner-stitch-dashboard) .global-search-group .global-search-submit {
  order: 0 !important;
  flex: 0 0 78px;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group #globalSearchPanel,
.app-shell:has(.owner-stitch-dashboard) .global-search-group #globalSearchPanel {
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  width: min(520px, 100%);
  max-width: 100%;
}

@media (max-width: 1280px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group,
  .app-shell:has(.owner-stitch-dashboard) .global-search-group {
    flex-basis: 460px;
    width: min(460px, 40vw);
    min-width: 360px;
  }
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group,
  .app-shell:has(.owner-stitch-dashboard) .global-search-group {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .global-search-group .global-search-shell,
  .app-shell:has(.owner-stitch-dashboard) .global-search-group .global-search-shell {
    min-width: 0 !important;
  }
}

/* Settings log toolbar polish */
body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-shell {
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-toolbar {
  display: grid !important;
  grid-template-columns: minmax(170px, 230px) minmax(260px, 520px) auto;
  align-items: end;
  justify-content: start;
  gap: 12px;
  width: 100%;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-select,
body:not(.logged-out):not(.pos-fullscreen-mode) .log-search-field {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-select select,
body:not(.logged-out):not(.pos-fullscreen-mode) .log-search-field input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-search-field {
  width: min(520px, 100%);
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-fullscreen-toggle {
  justify-self: end;
  align-self: end;
  min-height: 38px;
  white-space: nowrap;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 2px;
}

@media (max-width: 1100px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-toolbar {
    grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto;
  }
}

@media (max-width: 760px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .log-view-toolbar {
    grid-template-columns: 1fr;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .log-fullscreen-toggle {
    justify-self: stretch;
  }
}

/* Keep the notification dropdown out of the header icon row. */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar-actions,
.app-shell:has(.owner-stitch-dashboard) .topbar-actions {
  position: relative;
  overflow: visible;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationButton,
.app-shell:has(.owner-stitch-dashboard) #notificationButton {
  position: relative;
  z-index: 2;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationPanel,
.app-shell:has(.owner-stitch-dashboard) #notificationPanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  flex: none;
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: 0;
}

body:not(.logged-out):not(.pos-fullscreen-mode) #notificationPanel .notification-popover,
.app-shell:has(.owner-stitch-dashboard) #notificationPanel .notification-popover {
  position: static;
  width: 100%;
}

@media (max-width: 560px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) #notificationPanel,
  .app-shell:has(.owner-stitch-dashboard) #notificationPanel {
    width: min(520px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }
}
/* High-visibility header search box override */
body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group {
  order: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 560px !important;
  width: 560px !important;
  min-width: 560px !important;
  max-width: 560px !important;
  overflow: visible !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 0 0 42px !important;
  border: 2px solid #6366f1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell::before,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  z-index: 2 !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;
  background-color: #4f46e5 !important;
  pointer-events: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell input#globalSearch,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell input#globalSearch {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 260px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 14px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  text-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  transform: none !important;
  outline: none !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell input#globalSearch::placeholder,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell input#globalSearch::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell:focus-within,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell:focus-within {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22), 0 14px 28px rgba(15, 23, 42, 0.12) !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-submit,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group #globalSearchPanel,
.app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group #globalSearchPanel {
  left: 0 !important;
  top: calc(100% + 10px) !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1380px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group,
  .app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group {
    flex-basis: 480px !important;
    width: 480px !important;
    min-width: 480px !important;
    max-width: 480px !important;
  }
}

@media (max-width: 1180px) {
  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group,
  .app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body:not(.logged-out):not(.pos-fullscreen-mode) .topbar .global-search-group .global-search-shell input#globalSearch,
  .app-shell:has(.owner-stitch-dashboard) .topbar .global-search-group .global-search-shell input#globalSearch {
    min-width: 0 !important;
  }
}

/* Role dashboard attachment port: badges and compact role spacing. */
.role-dashboard-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.role-dashboard-hero .role-dashboard-badge {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  color: #17345a;
}

.role-dashboard-hero .role-dashboard-badge b,
.role-dashboard-hero .role-dashboard-badge em {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.role-dashboard-hero .role-dashboard-badge b {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

.role-dashboard-hero .role-dashboard-badge em {
  color: #475569;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.role-dashboard-hero .role-dashboard-badge.mint {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.role-dashboard-hero .role-dashboard-badge.mint b {
  color: #047857;
}

.role-dashboard-hero .role-dashboard-badge.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.role-dashboard-hero .role-dashboard-badge.blue b {
  color: #1d4ed8;
}

.role-dashboard-hero .role-dashboard-badge.gold {
  background: #fffbeb;
  border-color: #fde68a;
}

.role-dashboard-hero .role-dashboard-badge.gold b {
  color: #b45309;
}

.role-dashboard-hero .role-dashboard-badge.rose {
  background: #fff1f2;
  border-color: #fecdd3;
}

.role-dashboard-hero .role-dashboard-badge.rose b {
  color: #be123c;
}

.role-supervisor-columns .supervisor-delivery-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 3px;
}

body[data-ui-mode="night"] .role-dashboard-hero .role-dashboard-badge {
  background: #172235;
  border-color: #475569;
  box-shadow: none;
}

body[data-ui-mode="night"] .role-dashboard-hero .role-dashboard-badge b {
  color: #e7edf6;
}

body[data-ui-mode="night"] .role-dashboard-hero .role-dashboard-badge em {
  color: #a8b5c7;
}

@media (max-width: 760px) {
  .role-dashboard-badges {
    width: 100%;
  }

  .role-dashboard-hero .role-dashboard-badge {
    grid-template-columns: 1fr;
    flex: 1 1 130px;
    gap: 3px;
  }
}
/* First-login password setup verified state */
.password-setup-note.verified {
  border-color: #86efac;
  background: #ecfdf5;
  color: #065f46;
}

.password-setup-note.verified strong {
  color: #047857;
}

.password-setup-note.verified span {
  color: #065f46;
}